React Native Drag Text Editor

React Native Drag Text Editor is kind a Text Editor still in development for photo editing / manipulation cases.

wIOS

wpAndro

  • Drag and Drop Text
  • Resize Text
  • Edit & Type

Installation

$ npm install react-native-drag-text-editor --save

IOS

  • Don't forget Pods.
$ pod install

Usage

import React, { Component } from "react";
import {Dimensions} from "react-native";
import DragTextEditor from 'react-native-drag-text-editor';
const WINDOW = Dimensions.get('window');

export default class App extends Component {
  constructor(props) {
    super(props);
  };

  render() {
    return (  
        <DragTextEditor
          minWidth={100}
          minHeight={100}
          w={200}
          h={200}
          x={WINDOW.width/4}
          y={WINDOW.height/3}
          FontColor={"#000000"}
          LineHeight={15}
          TextAlign={"left"}
          LetterSpacing={0}
          FontSize={15}
          isDraggable={true}
          isResizable={true}
          TopRightAction={()=>console.log("-Top Right Pressed")}
          centerPress={()=>console.log("-Center Pressed")} 
          onDragStart={()=>console.log("-Drag Started")}
          onDragEnd={()=>console.log("- Drag ended")}
          onDrag={()=>console.log("- Dragging...")}
          onResizeStart={()=>console.log("- Resize Started")}
          onResize={()=>console.log("- Resizing...")}
          onResizeEnd={()=>console.log("- Resize Ended")}
        /> 
  }
 )
}

Properties

Prop Default Type Description
centerPress - function Center Pressed handler
TopRightAction - function Top Right Press handler
TopLeftAction - function Top Right Press handler
isDraggable true boolean Draggable condition
isResizable true boolean Resizable condition
onDragStart - function Drag Start event handler
onDrag - function Drag handler
onDragEnd - function Drag End event handler
onResizeStart - function Resize Start event handler
onResize - function Resize event handler
onResizeEnd - function Resize End event handler
TopLeftIcon ./icons/compassed.png function Clickable Top Left Icon Function Component
TopRightIcon ./icons/closed.png function Clickable Top Right Icon Function Component
text Lorem Ipsum... String Value of text
FontFamily Roboto String Font Family
FontColor #000 String Text Color
FontSize 15 String Font Size
LetterSpacing 0 String Letter Spacing
BackgroundColor transparent String Background Color
TextAlign Roboto String Text Align
LineHeight 18 String Line Height
x 80 String X location of Components
y 150 String Y location of Components
w 200 Number First Width
h 200 Number First Height
minWidth 200 Number Minimum Width
minHeight 200 Number Minimum Height

Features

Performs(Visible) in Black and White backgrounds

borderinfo

Logs

draginfo

To Do

  • [ ] Performance Optimization (Code Duplicates etc.)
  • [ ] textID and textInAction Bug (Type Error)
  • [ ] Dynamic Border Management
  • [ ] Add Rotation/Rotate Icon
  • [ ] Add Center-Snap

GitHub