react-native-drag-text v0.0.8

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

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