bug issue

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  extends: ['@react-native-community', 'prettier'],
+  rules: {
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+    'prettier/prettier': 'error',
+  },
+  parserOptions: {
+    requireConfigFile: false,
+  },
+};

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,57 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: Bug
+labels: bug, enhancement
+assignees: eneskarpuz
+
+---
+
+# Bug
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+## Device info
+ - Device: [e.g. iPhone6]
+ - Version [e.g. 22]
+
+## Environment info
+
+<!--
+  Please provide the version of the libraries below.
+-->
+
+| Library                         | Version |
+| ------------------------------- | ------- |
+| react-native-drag-text-editor   | x.x.x   |
+| react-native                    | x.x.x   |
+
+
+## Steps To Reproduce
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+Describe what you expected to happen:
+
+1. I would expect  '...'
+
+## Reproducible sample code
+
+<!--
+ Please add minimal runnable repro as explained above so that the bug can be tested in isolation.
+-->
+
+## Additional context 
+Add any other context about the problem here.
+
+<!--
+  Please provide a clear and concise description of what the bug is.
+  Include screenshots or gifs if needed.
+  Please test using the latest release of the library, as maybe your bug has been already fixed.
+  If the library has multiple install methods, describe installation method (e.g., pod, not pod, with jetifier etc).
+
+  **Please note that issues that do not follow the template may be closed.**
+-->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.gitignore

@@ -6,6 +6,7 @@ npm-debug.log
 tmp
 build
 dist
+.DS_Store
 
 # Dependency directory
 node_modules

.npmignore

@@ -4,6 +4,7 @@ npm-debug.log
 
 # Dependency directory
 node_modules
+.DS_Store
 
 # Runtime data
 tmp

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+    "printWidth": 80,
+    "arrowParens": "avoid",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+}

LICENSE

@@ -19,3 +19,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+

README.md

@@ -1,61 +1,27 @@
 # React Native Drag Text Editor
 
-React Native Drag Text Editor is kind a Text Editor for both IOS and Android, still in development for photo editing / manipulation cases.
-
-  - Drag and Drop Text
-  - Resize Text
-  - Edit & Type 
-
-### Installation
-
-```sh
-$ npm install react-native-drag-text-editor
-```
-
-### Usage
-
-```javascript  
-import React, { Component } from "react";
-import DragTextEditor from 'react-native-drag-text-editor'
-
-export default class App extends Component {
-  constructor(props) {
-    super(props);
-  };
-
-  render() {
-    return (  
- <DragTextEditor/> 
-  }
- )
-}
-
-```
-
-### Properties
-|    Prop    |   Default     |  Type     |  Description  |
-| :--------------: |:------------------:| :----------------:|:------------------------|
-| TopLeftIcon| ` <SimpleLineIcons name={"compass"}/>`|Component| Clickable Top Left Icon Component |
- | TopRightIcon | `<SimpleLineIcons name={"close"}/>`| Component| Clickable Top Right Icon Component |   
- |text               | `Lorem Ipsum...`          |    String      | Value of text |
- |fontFamily        | `Roboto`  | String|Font Family|
- |color     | `#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 |
-  |minW   | `200`  | Number| Minimum Width |
-  |minH   | `200`  | Number| Minimum Height |
-### Todos
-  - [ ]  Add Rotation/Rotate Icon
-  - [ ]  Add Center-Snap
-
-License
-----
-This project is licenced under the [MIT License](https://opensource.org/licenses/mit-license.html).
+[![reanimated](https://img.shields.io/github/package-json/dependency-version/eneskarpuz/react-native-drag-text-editor/dev/react-native-reanimated?label=Reanimated%20v2&style=flat-square)](https://www.npmjs.com/package/react-native-drag-text-editor) [![npm](https://img.shields.io/npm/l/react-native-drag-text-editor?style=flat-square)](https://www.npmjs.com/package/react-native-drag-text-editor) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/react-native-drag-text-editor) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/)
 
+
+
+📝 60FPS Draggable, Rotatable, Resizeable Text Input Component written in Typescript and Reanimated 2   
+
+![React Native Drag Text Editor](./demo.gif)
+
+## Features
+
+- Powered with Reanimated v2.
+- Compatible with Expo.
+- Written in TypeScript.
+
+## Getting Started
+
+Check out [the documentation website](https://eneskarpuz.github.io/react-native-drag-text-editor/).
+
+## License
+
+[MIT](./LICENSE)
+
+## Support
+
+You can drop a star if this project helped you out. 💫

example/App.tsx

@@ -0,0 +1,177 @@
+import React, {useCallback, useMemo, useRef, useState} from 'react';
+import {View, StyleSheet} from 'react-native';
+import {useAnimatedStyle, useSharedValue} from 'react-native-reanimated';
+import {DragTextEditor, DragTextRef} from 'react-native-drag-text-editor';
+import {ExampleContextProvider} from './context/ExampleContextProvider';
+import {Editor, IconButton} from './components';
+import {defaultTextConfig, ICONS} from './constants';
+import {DragTextArrayProps} from './types.d';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
+
+const App = () => {
+  const [texts, addText] = useState<DragTextArrayProps[]>([
+    {key: 0, ...defaultTextConfig},
+  ]);
+  const DragTextEditorRef = useRef<DragTextRef | any>([]);
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+  const [textValue, onChangeText] = useState(texts[activeIndex].text);
+  const sharedSliderValue = useSharedValue<number>(texts[activeIndex].fontSize);
+
+  const DefaultTextConfig = {key: texts.length, ...defaultTextConfig};
+
+  const editTextsArray = useCallback(
+    (prop: string, value: number | boolean | string) => {
+      const tmpTextsArray = [...texts];
+      tmpTextsArray[activeIndex][prop] = value;
+      addText(tmpTextsArray);
+    },
+    [texts, activeIndex],
+  );
+
+  const editFontSize = useCallback(
+    (value: number) => {
+      texts[activeIndex].fontSize = value;
+    },
+    [texts],
+  );
+
+  const addNewText = () => {
+    DragTextEditorRef.current[activeIndex]?.setBorderStatus(false);
+    addText(texts => [...texts, DefaultTextConfig]);
+  };
+
+  const manageActiveStatus = (_index: number) => {
+    texts[activeIndex].fontSize = sharedSliderValue.value;
+    texts[activeIndex].text = textValue;
+    onChangeText(texts[_index].text);
+    setActiveIndex(_index);
+    sharedSliderValue.value = texts[_index].fontSize;
+    texts
+      .filter(el => el.key !== _index)
+      .map((el, i) => DragTextEditorRef.current[el.key].setBorderStatus(false));
+  };
+
+  const exampleContextValues = useMemo(
+    () => ({
+      sharedSliderValue,
+    }),
+    [sharedSliderValue],
+  );
+
+  const animatedTextStyle = useAnimatedStyle(
+    () => ({
+      fontSize: sharedSliderValue.value,
+    }),
+    [sharedSliderValue],
+  );
+
+  const activeStyleHandler = useCallback(
+    (index: number) => {
+      if (index == activeIndex) {
+        return animatedTextStyle;
+      } else {
+        return {fontSize: texts[index].fontSize};
+      }
+    },
+    [texts, animatedTextStyle, activeIndex],
+  );
+
+  const _cornerComponents = [
+    {
+      side: 'TR',
+      customCornerComponent: () => (
+        <IconButton
+          onPress={() => editTextsArray('visible', false)}
+          iconName={ICONS.CLOSE_ICON}
+        />
+      ),
+    },
+    {
+      side: 'TL',
+      customCornerComponent: () => (
+        <IconButton onPress={() => addNewText()} iconName={ICONS.TAB_ICON} />
+      ),
+    },
+  ];
+
+  const _rotateComponent = {
+    side: 'bottom',
+    customRotationComponent: () => <IconButton iconName={ICONS.ROTATE_ICON} />,
+  };
+  const _resizerSnapPoints = ['right', 'left'];
+
+  return (
+    <GestureHandlerRootView style={_exampleStyles.gestureRootStyles}>
+      <ExampleContextProvider value={exampleContextValues}>
+        <View style={_exampleStyles.container}>
+          {texts.map((item, index) => (
+            <DragTextEditor
+              key={index}
+              onChangeText={onChangeText}
+              value={activeIndex === index ? textValue : item.text}
+              visible={item.visible}
+              ref={ref => (DragTextEditorRef.current[index] = ref)}
+              onItemActive={() => manageActiveStatus(index)}
+              externalBorderStyles={_exampleStyles.externalBorder}
+              placeholder={'Placeholder'}
+              cornerComponents={_cornerComponents}
+              resizerSnapPoints={_resizerSnapPoints}
+              rotationComponent={_rotateComponent}
+              externalTextStyles={[
+                {color: item.color},
+                activeStyleHandler(index),
+              ]}></DragTextEditor>
+          ))}
+        </View>
+        <Editor
+          editTextsArray={(prop, value) => editTextsArray(prop, value)}
+          editFontSize={value => editFontSize(value)}
+          addNewText={() => addNewText()}
+        />
+      </ExampleContextProvider>
+    </GestureHandlerRootView>
+  );
+};
+
+const _exampleStyles = StyleSheet.create({
+  gestureRootStyles: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  container: {
+    backgroundColor: '#fff',
+    flex: 3,
+  },
+  externalBorder: {
+    borderStyle: 'dashed',
+    borderColor: 'gray',
+  },
+  editorContainer: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: 'white',
+    padding: 20,
+  },
+  addTextButton: {
+    backgroundColor: '#ddd',
+    padding: 10,
+    borderRadius: 10,
+    width: '50%',
+    alignSelf: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  fontOptions: {
+    margin: 2,
+    flex: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 6,
+    borderRadius: 10,
+  },
+  colorOptions: {
+    margin: 4,
+    flex: 1,
+    padding: 20,
+    borderRadius: 10,
+  },
+});
+export default App;