# react-native-drag-text

> React Native Text Prototype for photo editing / manipulation cases.

Latest version **0.0.8** (published 2022-05-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-drag-text
pnpm add react-native-drag-text
yarn add react-native-drag-text
bun add react-native-drag-text
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2022-05-15 |
| First published | 2022-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 47 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Enes Karpuz |
| Maintainers | kingfang007 |
| Keywords | "react, native", "react, component", "text, editor", "text", "photo, editor", "image, editor", "image, manipulating", photo, manipulating" |

## Links

- npm: https://www.npmjs.com/package/react-native-drag-text
- Repository: https://github.com/toryshadow/react-native-drag-text-editor
- Homepage: https://github.com/toryshadow/react-native-drag-text-editor.git#readme
- Issues: https://github.com/toryshadow/react-native-drag-text-editor.git/issues
- npm.io page: https://npm.io/package/react-native-drag-text

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.0.8 (latest) — 2022-05-15

## README

# React Native Drag Text Editor

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

<p align="center">
  <a href="https://www.npmjs.com/package/react-native-drag-text-editor">
<img src="https://img.shields.io/badge/dynamic/json?color=success&label=npm&query=version&url=https%3A%2F%2Fraw.githubusercontent.com%2Feneskarpuz%2Freact-native-drag-text-editor%2Fmaster%2Fpackage.json&style=flat-square"/> 
  <img src="https://img.shields.io/npm/l/react-native-drag-text-editor?style=flat-square"/> 
  <img src="https://img.shields.io/badge/platform-%20IOS%20%7C%20Android%20-black?style=flat-square"/> 
  <img src="https://img.shields.io/github/languages/code-size/eneskarpuz/react-native-drag-text-editor?style=flat-square"/> 
</a>
</p>

##   :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.

<p align="center">
  <img src="https://github.com/eneskarpuz/TextEditorPlus/blob/master/gifs/wIOS.gif" alt="IOS13"/>
  <img src="https://github.com/eneskarpuz/TextEditorPlus/blob/master/gifs/wpAndro.gif" alt="AndroidAPI30"/>
</p> 

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

## Installation

```sh
$ npm install @toryshadow/react-native-drag-text-editor --save
```

## Usage

```javascript  
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

<p align="center">
<img src="https://github.com/eneskarpuz/TextEditorPlus/blob/master/gifs/borderinfo.gif"/>
</p>

#### - Logs  

<p align="center">
<img src="https://github.com/eneskarpuz/TextEditorPlus/blob/master/gifs/draginfo.gif"/>
</p>

## 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](https://opensource.org/licenses/mit-license.html).

### Attributions
---
Photo by <a href="https://unsplash.com/@bernardhermant?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Bernard Hermant</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
<div>Icons made by <a href="https://creativemarket.com/Becris" title="Becris">Becris</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
<div>Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>

---
_Source: https://npm.io/package/react-native-drag-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._