React Native Drag Text Editor

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

:star: 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 @toryshadow/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