Skip to content

Latest commit

 

History

History
144 lines (118 loc) · 5.91 KB

README.md

File metadata and controls

144 lines (118 loc) · 5.91 KB
Raw

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.

IOS13 AndroidAPI30

  • 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