Description:
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:
