React Native Drag Text Editor

React Native Draggable & Editable & Resizable Text Component,still in early development for photo editing / manipulation cases.

⭐ If this project has helped you out, please support with a star.

Showcase [ IOS13 / AndroidAPI30 ]

Check https://github.com/eneskarpuz/TextEditorPlus for full Example in Readme.

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

Installation

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

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")} 
          onTextChanged={(text)=>console.log("Text contents =", text)}
          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	console.log	function	Center Pressed handler
TopRightAction	console.log	function	Top Right Press handler
TopLeftAction	console.log	function	Top Left Press handler
isDraggable	true	boolean	Draggable condition
isResizable	true	boolean	Resizable condition
onTextChanged	console.log	function	Text changed callback
onDragStart	console.log	function	Drag Start event handler
onDrag	console.log	function	Drag handler
onDragEnd	console.log	function	Drag End event handler
onResizeStart	console.log	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

- Logs

To Do

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

License

This project is licensed under the MIT License.

Attributions

---

Photo by Bernard Hermant on Unsplash

Icons made by Becris from www.flaticon.com

Icons made by Smashicons from www.flaticon.com