feat: project init

README.md

@@ -1,31 +1,117 @@
-# rn-text-touch-highlight
+# React Native Text Highlighter
 
-rn-text-touch-highlight  is a versatile and performant package for highlighting text in React Native
+React Native Text Highlighter is a versatile and user-friendly component that allows you to implement text highlighting and selection functionality in your React Native applications. This package simplifies the integration of text selection and annotation features, making it an ideal solution for mobile apps that require text manipulation or document annotation.
+
+<p align="center">
+  <img src="src/assets/example.gif" alt="example" height="300" width="380"/>
+</p>
 
 ## Installation
 
-```sh
+To install this package, use npm or yarn:
+
+```bash
+npm install react-native-reanimated
+npm install react-native-gesture-handler
 npm install rn-text-touch-highlight
 ```
 
+or
+
+```bash
+yarn add react-native-reanimated
+yarn add react-native-gesture-handler
+yarn add rn-text-touch-highlight
+```
+
+## Documentation
+
+The docs can be found here: [https://docs.benjamineruvieru.com/rn-text-touch-highlight](https://docs.benjamineruvieru.com/rn-text-touch-highlight)
+
 ## Usage
 
-```js
-import { multiply } from 'rn-text-touch-highlight';
+Import the `HighlightText` component in your application and include it in your JSX:
+
+```javascript
+import { HighlightText } from 'rn-text-touch-highlight';
+
+export default function App() {
+  const highlightRef: any = React.useRef();
 
-// ...
+  const getHighlightData = () => {
+    const data = highlightRef.current?.getHighlightedData();
+    console.log(data);
+  };
+  const deleteFun = (id) => {
+    highlightRef.current?.deleteHighlight(id);
+  };
 
-const result = await multiply(3, 7);
+  return (
+        <HighlightText
+          ref={highlightRef}
+          clearHighlightOnTap={true}
+          highlightInitialDelay={500}
+          initialHighlightData={[
+            { end: 44, start: 20 },
+            { end: 95, start: 70 },
+          ]}
+          lineSpace={5}
+          lineBreakHeight={5}
+          textColor={'black'}
+          highlightedTextColor={'white'}
+          highlightColor={'blue'}
+          onHighlightStart={() => {
+            console.log('hightStart');
+          }}
+          onHighlightEnd={(id) => {
+            console.log('hightEnd', id);
+          }}
+          onHighlightTapped={(id, event) => {
+            console.log('tapped', id, event);
+          }}
+          textStyle={{ fontSize: 15 }}
+          backgroundColor="yellow"
+          text={'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'}
+        />
+      </View>
+  );
+}
 ```
 
+### Props
+
+- `text` (string, required): The text content to display and enable highlighting.
+- `textColor` (string): The color of the regular text.
+- `highlightedTextColor` (string): The color of the highlighted text.
+- `highlightColor` (string): The background color of the highlighted text.
+- `lineBreakHeight` (number): The height of line breaks.
+- `lineSpace` (number): The space between lines.
+- `highlightInitialDelay` (number): Finger press initial delay before highlighting the text. Default is 150 (in milliseconds).
+- `onHighlightStart` (function): Callback function when highlighting starts.
+- `onHighlightEnd` (function): Callback function when highlighting ends.
+- `initialHighlightData` (array of objects): An array specifying the initial highlight data, this is used to render text highlight initially
+- `textStyle` (object): Custom styles for the text.
+- `marginBottom` (number): Bottom margin for the text container.
+- `margin` (number): The margin of the HighlightText component.
+- `marginTop` (number): Top margin for the text container.
+- `marginLeft` (number): Left margin for the text container.
+- `marginRight` (number): Right margin for the text container.
+- `onHighlightTapped` (function): Callback function when a highlighted section is tapped.
+- `clearHighlightOnTap` (boolean): Clear highlighted sections on tap.
+
+### Ref Functions
+
+- `getHighlightData`: A ref function to retrieve the current highlighting data.
+- `deleteHighlight`: A ref function to programmatically delete a highlighted area by its id.
+
+## Example
+
+For a complete example of how to use this package, please refer to the included example app.
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
 
 ## License
 
-MIT
-
----
-
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+This package is open-source and available under the MIT License.

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
 };

example/babel.config.js

@@ -17,6 +17,7 @@ module.exports = function (api) {
           },
         },
       ],
+      'react-native-reanimated/plugin',
     ],
   };
 };

example/package.json

@@ -12,15 +12,17 @@
     "expo": "~49.0.15",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
-    "react-native": "0.72.6",
     "react-dom": "18.2.0",
+    "react-native": "0.72.6",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-reanimated": "~3.3.0",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "babel-plugin-module-resolver": "^5.0.0",
     "@expo/webpack-config": "^18.0.1",
-    "babel-loader": "^8.1.0"
+    "babel-loader": "^8.1.0",
+    "babel-plugin-module-resolver": "^5.0.0"
   },
   "private": true
 }

example/src/App.tsx

@@ -1,19 +1,51 @@
 import * as React from 'react';
 
-import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from 'rn-text-touch-highlight';
+import { StyleSheet, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { HighlightText } from 'rn-text-touch-highlight';
 
 export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
+  const highlightRef: any = React.useRef();
 
-  React.useEffect(() => {
-    multiply(3, 7).then(setResult);
-  }, []);
+  const getHighlightData = () => {
+    const data = highlightRef.current?.getHighlightedData();
+    console.log(data);
+  };
+  const deleteFun = (id) => {
+    highlightRef.current?.deleteHighlight(id);
+  };
 
   return (
-    <View style={styles.container}>
-      <Text>Result: {result}</Text>
-    </View>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <View style={styles.container}>
+        <HighlightText
+          ref={highlightRef}
+          clearHighlightOnTap={true}
+          highlightInitialDelay={500}
+          // initialHighlightData={[
+          //   { end: 24, start: 10 },
+          //   { end: 40, start: 30 },
+          // ]}
+          lineSpace={5}
+          lineBreakHeight={5}
+          textColor={'black'}
+          highlightedTextColor={'white'}
+          highlightColor={'blue'}
+          onHighlightStart={() => {
+            console.log('hightStart');
+          }}
+          onHighlightEnd={(id) => {
+            console.log('hightEnd', id);
+          }}
+          onHighlightTapped={(id, event) => {
+            console.log('tapped', id, event);
+          }}
+          textStyle={{ fontSize: 15 }}
+          backgroundColor="yellow"
+          text={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.`}
+        />
+      </View>
+    </GestureHandlerRootView>
   );
 }
 
@@ -22,6 +54,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    padding: 30,
   },
   box: {
     width: 60,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-text-touch-highlight",
   "version": "0.1.0",
-  "description": "rn-text-touch-highlight  is a versatile and performant package for highlighting text in React Native",
+  "description": "React Native Text Highlighter is a versatile and user-friendly component that allows you to implement text highlighting and selection functionality in your React Native applications",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/src/index.d.ts",
@@ -37,15 +37,31 @@
   "keywords": [
     "react-native",
     "ios",
-    "android"
+    "android",
+    "react",
+    "highlight",
+    "text",
+    "gesture",
+    "selection",
+    "interactive",
+    "reanimated",
+    "highlighting",
+    "text-highlighting",
+    "text-selection",
+    "text-marker",
+    "highlighting-library",
+    "text-highlight",
+    "UI-component",
+    "text-manipulation",
+    "touch-interaction"
   ],
   "repository": "https://github.com/benjamineruvieru/rn-text-touch-highlight",
   "author": "Benjamin <[email protected]> (https://www.benjamineruvieru.com)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/benjamineruvieru/rn-text-touch-highlight/issues"
   },
-  "homepage": "https://github.com/benjamineruvieru/rn-text-touch-highlight#readme",
+  "homepage": "https://docs.benjamineruvieru.com/rn-text-touch-highlight",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -74,8 +90,10 @@
     "@types/react": "17.0.21"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-gesture-handler": ">=2.10.0",
+    "react-native-reanimated": ">=2.12.0"
   },
   "workspaces": [
     "example"