{"id":25120156,"url":"https://github.com/benjamineruvieru/rn-text-touch-highlight","last_synced_at":"2025-04-22T20:29:58.128Z","repository":{"id":205971825,"uuid":"715509489","full_name":"benjamineruvieru/rn-text-touch-highlight","owner":"benjamineruvieru","description":"React Native Text Touch Highlighter is a user friendly component library that enables users to effortlessly tap and drag to highlight text in React Native applications.","archived":false,"fork":false,"pushed_at":"2025-02-04T19:20:54.000Z","size":1669,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-20T08:41:58.921Z","etag":null,"topics":["react-native","text-highlighter","text-marker"],"latest_commit_sha":null,"homepage":"https://docs.benjamineruvieru.com/docs/rn-text-touch-highlight","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benjamineruvieru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-07T09:38:28.000Z","updated_at":"2025-03-31T04:30:01.000Z","dependencies_parsed_at":"2025-03-08T07:02:56.330Z","dependency_job_id":"cf457a04-0d0d-49fa-bf37-3c8fda125ed9","html_url":"https://github.com/benjamineruvieru/rn-text-touch-highlight","commit_stats":{"total_commits":7,"total_committers":1,"mean_commits":7.0,"dds":0.0,"last_synced_commit":"6b682785535e92bb0ca1179bf27384867161feba"},"previous_names":["benjamineruvieru/rn-text-touch-highlight"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamineruvieru%2Frn-text-touch-highlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamineruvieru%2Frn-text-touch-highlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamineruvieru%2Frn-text-touch-highlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamineruvieru%2Frn-text-touch-highlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benjamineruvieru","download_url":"https://codeload.github.com/benjamineruvieru/rn-text-touch-highlight/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250318435,"owners_count":21410936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","text-highlighter","text-marker"],"created_at":"2025-02-08T05:19:46.126Z","updated_at":"2025-04-22T20:29:58.094Z","avatar_url":"https://github.com/benjamineruvieru.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Text Touch Highlighter\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/rn-text-touch-highlight\"\u003e\n    \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/rn-text-touch-highlight.svg\"/\u003e\n  \u003c/a\u003e\n  \u003ca title='License' href=\"https://github.com/benjamineruvieru/rn-text-touch-highlight/blob/master/LICENSE\" height=\"18\"\u003e\n    \u003cimg src='https://img.shields.io/badge/license-MIT-blue.svg' /\u003e\n  \u003c/a\u003e\n  \u003ca title='Tweet' href=\"https://twitter.com/intent/tweet?text=Check%20out%20this%20awesome%20React%20Native%20PDF%20from%20Image%20Library\u0026url=https://github.com/benjamineruvieru/rn-text-touch-highlight\u0026via=benjamin_eru\u0026hashtags=react,reactnative,opensource,github,ux\" height=\"18\"\u003e\n    \u003cimg src='https://img.shields.io/twitter/url/http/shields.io.svg?style=social' /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nReact Native Text Touch Highlighter is a user friendly component library that enables users to effortlessly tap and drag to highlight text in 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 highlighting or document annotation.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"src/assets/example.gif\" alt=\"example\" height=\"300\" width=\"380\"/\u003e\n\u003c/p\u003e\n\n## Installation\n\nTo install this package, use npm or yarn:\n\n```bash\nnpm install react-native-reanimated\nnpm install react-native-gesture-handler\nnpm install rn-text-touch-highlight\n```\n\nor\n\n```bash\nyarn add react-native-reanimated\nyarn add react-native-gesture-handler\nyarn add rn-text-touch-highlight\n```\n\n## Documentation\n\nThe docs can be found here: [https://docs.benjamineruvieru.com/rn-text-touch-highlight](https://docs.benjamineruvieru.com/rn-text-touch-highlight)\n\n## Usage\n\nImport the `HighlightText` component in your application and include it in your JSX:\n\n```javascript\nimport { HighlightText } from 'rn-text-touch-highlight';\n\nexport default function App() {\n  const highlightRef: any = React.useRef();\n\n  const getHighlightData = () =\u003e {\n    const data = highlightRef.current?.getHighlightedData();\n    console.log(data);\n  };\n  const deleteFun = (id) =\u003e {\n    highlightRef.current?.deleteHighlight(id);\n  };\n\n  return (\n        \u003cHighlightText\n          ref={highlightRef}\n          clearHighlightOnTap={true}\n          highlightInitialDelay={500}\n          initialHighlightData={[\n            { end: 44, start: 20 },\n            { end: 95, start: 70 },\n          ]}\n          lineSpace={5}\n          lineBreakHeight={5}\n          textColor={'black'}\n          highlightedTextColor={'white'}\n          highlightColor={'blue'}\n          onHighlightStart={() =\u003e {\n            console.log('hightStart');\n          }}\n          onHighlightEnd={(id) =\u003e {\n            console.log('hightEnd', id);\n          }}\n          onHighlightTapped={(id, event) =\u003e {\n            console.log('tapped', id, event);\n          }}\n          textStyle={{ fontSize: 15 }}\n          backgroundColor=\"yellow\"\n          text={'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'}\n        /\u003e\n      \u003c/View\u003e\n  );\n}\n```\n\n### Props\n\n- `text` (string, required): The text content to display and enable highlighting.\n- `textColor` (string): The color of the regular text.\n- `highlightedTextColor` (string): The color of the highlighted text.\n- `highlightColor` (string): The background color of the highlighted text.\n- `lineBreakHeight` (number): The height of line breaks.\n- `lineSpace` (number): The space between lines.\n- `highlightInitialDelay` (number): Finger press initial delay before highlighting the text. Default is 150 (in milliseconds).\n- `onHighlightStart` (function): Callback function when highlighting starts.\n- `onHighlightEnd` (function): Callback function when highlighting ends.\n- `initialHighlightData` (array of objects): An array specifying the initial highlight data, this is used to render text highlight initially\n- `textStyle` (object): Custom styles for the text.\n- `marginBottom` (number): Bottom margin for the text container.\n- `margin` (number): The margin of the HighlightText component.\n- `marginTop` (number): Top margin for the text container.\n- `marginLeft` (number): Left margin for the text container.\n- `marginRight` (number): Right margin for the text container.\n- `onHighlightTapped` (function): Callback function when a highlighted section is tapped.\n- `clearHighlightOnTap` (boolean): Clear highlighted sections on tap.\n\n### Ref Functions\n\n- `getHighlightData`: A ref function to retrieve the current highlighting data.\n- `deleteHighlight`: A ref function to programmatically delete a highlighted area by its id.\n\n## Example\n\nFor a complete example of how to use this package, please refer to the included example app.\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nThis package is open-source and available under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamineruvieru%2Frn-text-touch-highlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjamineruvieru%2Frn-text-touch-highlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamineruvieru%2Frn-text-touch-highlight/lists"}