loading...
Cover image for πŸ–– UNFOLD App's Text Editor was the inspiration.

πŸ–– UNFOLD App's Text Editor was the inspiration.

eneskarpuz profile image Enes Karpuz ・3 min read

Alt Text

Hello! Today I'm announcing a RN package I can't find any example so I made by myself with poor react-native knowledge.
Please feel free to reply or feedback(star,follow,pr)because its very hard to being new on Github.

                      πŸŽ‰ HAPPY WORK πŸŽ‰

React Native Drag Text Editor

React-Native-Drag-Text-Editor is kind a Text Editor still in development for photo editing / manipulation cases.

Showcase [ IOS13 / AndroidAPI30 ]

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

Alt Text

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

Installation

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

IOS

  • Don't forget Pods.
$ pod install

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")} 
          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 - function Center Pressed handler
TopRightAction - function Top Right Press handler
TopLeftAction - function Top Right Press handler
isDraggable true boolean Draggable condition
isResizable true boolean Resizable condition
onDragStart - function Drag Start event handler
onDrag - function Drag handler
onDragEnd - function Drag End event handler
onResizeStart - 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
text Lorem Ipsum... String
FontFamily Roboto String
FontColor #000 String
FontSize 15 String
LetterSpacing 0 String
BackgroundColor transparent String
TextAlign Roboto String
LineHeight 18 String
x 80 String
y 150 String
w 200 Number
h 200 Number
minWidth 200 Number
minHeight 200 Number

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.

#javascript

<p>Once relegated to the browser as one of the 3 core technologies of the web, JavaScript can now be found almost anywhere you find code. </p><p>JavaScript developers move fast and push software development forward; they can be as opinionated as the frameworks they use, so let's keep it clean here and make it a place to learn from each other!</p>

#react

Official tag for Facebook's React JavaScript library for building user interfaces

#ios

This tag is for anything related to Apple's iOS devices, operating system, and development environment. Development, usage, apps, tips, requests for help: if it's related to iOS it's welcome here!

Posted on by:

eneskarpuz profile

Enes Karpuz

@eneskarpuz

a react-native developer.

Discussion

pic
Editor guide
 

Quite detailed article.