Draggable Text Editor For React Native

A draggable and resizable text editor for React Native.

Install & Import:

# NPM
$ npm i react-native-drag-text-editor --save

import React, { Component } from "react";
import {Dimensions} from "react-native";
import DragTextEditor from 'react-native-drag-text-editor';

Basic Usage:

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")}
        /> 
  }
 )
}

Default component props and event handlers:

x: 0,
y: 0,
w: 200,
h: 200,
minWidth: 200,
minHeight: 200,
windowBorder: {
  x: 0,
  y: 0,
  w: Dimensions.get('window').width,
  h: Dimensions.get('window').height,
},
centerPress:null,
TopLeftAction:null,
TopRightAction:null,
TopLeftIcon:null,
TopRightIcon:null,
FontFamily:null,
LetterSpacing:0,
FontColor:"black",
FontSize:15,
BackgroundColor:"transparent",
TextAlign:"center",
LineHeight:18,
isDraggable: true,
isResizable: true,
onDragStart: null,
onDrag: null,
onDragEnd: null,
onResizeStart: null,
onResize: null,
onResizeEnd: null,

Preview:

Download Details:

Author: eneskarpuz

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/eneskarpuz/react-native-drag-text-editor

License: MIT