{"id":4366,"url":"https://github.com/mxmzb/react-native-gesture-detector","last_synced_at":"2025-10-07T15:50:28.947Z","repository":{"id":35094530,"uuid":"205669312","full_name":"mxmzb/react-native-gesture-detector","owner":"mxmzb","description":"Create and detect custom, complex gestures in React Native. 🍭","archived":false,"fork":false,"pushed_at":"2023-01-06T02:07:05.000Z","size":7238,"stargazers_count":81,"open_issues_count":35,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-29T17:59:24.859Z","etag":null,"topics":["custom-gestures","detection","gesture","react-native","react-native-component"],"latest_commit_sha":null,"homepage":"https://maximzubarev.com/project/react-native-gesture-detector","language":"JavaScript","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/mxmzb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-01T11:51:43.000Z","updated_at":"2023-08-04T17:28:19.000Z","dependencies_parsed_at":"2023-01-15T13:45:24.384Z","dependency_job_id":null,"html_url":"https://github.com/mxmzb/react-native-gesture-detector","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/mxmzb/react-native-gesture-detector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mxmzb%2Freact-native-gesture-detector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mxmzb%2Freact-native-gesture-detector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mxmzb%2Freact-native-gesture-detector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mxmzb%2Freact-native-gesture-detector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mxmzb","download_url":"https://codeload.github.com/mxmzb/react-native-gesture-detector/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mxmzb%2Freact-native-gesture-detector/sbom","scorecard":{"id":670248,"data":{"date":"2025-08-11","repo":{"name":"github.com/mxmzb/react-native-gesture-detector","commit":"5ce19dd60b62f20eba2800646a2e1d33d30e71a0"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/28 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"103 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx","Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv","Warn: Project is vulnerable to: GHSA-2j79-8pqc-r7x6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv","Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q","Warn: Project is vulnerable to: GHSA-crh6-fp67-6883","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-f5x2-xv93-4p23","Warn: Project is vulnerable to: GHSA-gmpm-xp43-f7g6","Warn: Project is vulnerable to: GHSA-pf27-929j-9pmm","Warn: Project is vulnerable to: GHSA-327c-qx3v-h673","Warn: Project is vulnerable to: GHSA-x4cf-6jr3-3qvp","Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw","Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-px4h-xg32-q955","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4","Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653","Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj","Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67","Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w","Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2","Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-21T19:44:27.632Z","repository_id":35094530,"created_at":"2025-08-21T19:44:27.633Z","updated_at":"2025-08-21T19:44:27.633Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277632351,"owners_count":25850733,"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","status":"online","status_checked_at":"2025-09-30T02:00:09.208Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["custom-gestures","detection","gesture","react-native","react-native-component"],"created_at":"2024-01-05T20:17:09.658Z","updated_at":"2025-10-07T15:50:28.925Z","avatar_url":"https://github.com/mxmzb.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cbr /\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mxmzb/react-native-gesture-detector/master/img/logo-emoji.png\" height=\"150\" /\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003eReact Native Gesture Detector\u003c/h2\u003e\n\u003ch3 align=\"center\"\u003eCreate and detect custom gestures on React Native.\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.org/package/react-native-gesture-detector\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-native-gesture-detector?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/mxmzb/react-native-gesture-detector/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/react-native-gesture-detector?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/react-native-gesture-detector\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/min/react-native-gesture-detector?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://circleci.com/gh/mxmzb/react-native-gesture-detector/\"\u003e\n    \u003cimg src=\"https://img.shields.io/circleci/build/github/mxmzb/react-native-gesture-detector?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge\u0026logo=github\" /\u003e\n\u003c/p\u003e\n\n## Demos\n\n\u003cp\u003e\n  \u003cimg width=\"217\" src=\"https://raw.githubusercontent.com/mxmzb/react-native-gesture-detector/master/example/assets/demo-coil.gif\"\u003e\n  \u003cimg width=\"217\" src=\"https://raw.githubusercontent.com/mxmzb/react-native-gesture-detector/master/example/assets/demo-multiple-gestures.gif\"\u003e\n  \u003cimg width=\"217\" src=\"https://raw.githubusercontent.com/mxmzb/react-native-gesture-detector/master/example/assets/demo-triangle.gif\"\u003e\n  \u003cimg width=\"217\" src=\"https://raw.githubusercontent.com/mxmzb/react-native-gesture-detector/master/example/assets/demo-gesture-recorder.gif\"\u003e\n\u003cp\u003e\n\n### Example app and usage\n\nFeel free to test [Snack Expo demo](https://snack.expo.io/@mxmzb/react-native-gesture-detector) or run the included demo app locally:\n\n```sh\n$ git clone https://github.com/mxmzb/react-native-gesture-detector.git\n$ cd react-native-gesture-detector/example\n$ yarn\n$ yarn start\n```\n\nCheck [the code for the screens](https://github.com/mxmzb/react-native-gesture-detector/tree/master/example/src/Screen) to see how they are done!\n\n## Intro\n\nThis package originated from a real life **need to detect custom gestures**. The idea for implementation originated from this [stellar answer](https://stackoverflow.com/questions/20821358/gesture-detection-algorithm-based-on-discrete-points) on StackOverflow. The result is not 100% foolproof, but rock solid, performant and extremely simple to use.\n\nThe package comes with another, insanely cool component `GestureRecorder`, which allows you to create gestures **on the fly**. Yep, just plug it in, paint the gesture and you will receive the coordinate data for your supercomplex, custom gesture. You can use it to just **use the data points as a predefined gesture** in your app, or **you can even let your app users create their own custom gestures**, if that fits your game plan!\n\nBecause the library significantly uses React hooks, you must use at least `react@16.8.0`.\n\n## Installation\n\n```sh\n$ yarn add react-native-gesture-detector\n$ yarn add react-native-gesture-handler lodash # install peer dependencies\n```\n\n## Quickstart\n\n```jsx\nimport GestureDetector, {\n  GestureRecorder,\n  GesturePath,\n  Cursor,\n} from \"react-native-gesture-detector\";\n\nconst gestures = {\n  // this will result in the gesture shown in the first demo give above\n  Coil: [\n    { x: 10, y: -30 }, // This is a coordinate object\n    { x: 25, y: -15 },\n    { x: 40, y: -10 },\n    { x: 55, y: -15 },\n    { x: 70, y: -30 },\n    { x: 85, y: -45 },\n    { x: 90, y: -65 },\n    { x: 85, y: -85 },\n    { x: 70, y: -100 },\n    { x: 55, y: -115 },\n    { x: 40, y: -130 },\n    { x: 20, y: -130 },\n    { x: 0, y: -130 },\n    { x: -20, y: -130 },\n    { x: -35, y: -115 },\n    { x: -50, y: -100 },\n    { x: -65, y: -85 },\n    { x: -80, y: -70 },\n    { x: -80, y: -55 },\n    { x: -80, y: -30 },\n    { x: -80, y: -15 },\n    { x: -80, y: 0 },\n    { x: -65, y: 15 },\n    { x: -50, y: 30 },\n    { x: -35, y: 45 },\n    { x: -20, y: 60 },\n    { x: 0, y: 65 },\n    { x: 20, y: 70 },\n    { x: 40, y: 70 },\n  ],\n};\n\nconst CoilExample = () =\u003e (\n  \u003cGestureDetector\n    onGestureFinish={(gesture) =\u003e console.log(`Gesture \"${gesture}\" finished!`)}\n    onProgress={({ gesture, progress }) =\u003e {\n      console.log(`Gesture: ${gesture}, progress: ${progress}`);\n    }}\n    onPanRelease={() =\u003e {\n      console.log(\"User released finger!\");\n    }}\n    gestures={gestures}\n    slopRadius={35}\n  \u003e\n    {({ coordinate }) =\u003e (\n      \u003cView style={{ position: \"relative\", width: \"100%\", height: \"100%\" }}\u003e\n        \u003cGesturePath path={gestures[\"Coil\"]} color=\"green\" slopRadius={35} /\u003e\n        {coordinate \u0026\u0026 \u003cCursor {...coordinate} /\u003e}\n      \u003c/View\u003e\n    )}\n  \u003c/GestureDetector\u003e\n);\n\nconst RecordGestureExample = () =\u003e {\n  // finishedGesture will look like gestures[\"Coil\"] from the top\n  const [finishedGesture, setFinishedGesture] = useState([]);\n\n  return (\n    \u003cGestureRecorder onPanRelease={(gesture) =\u003e setFinishedGesture(gesture)}\u003e\n      {({ gesture }) =\u003e (\n        \u003cView style={{ position: \"relative\", width: \"100%\", height: \"100%\" }}\u003e\n          \u003cGesturePath path={gesture} color=\"green\" slopRadius={35} /\u003e\n        \u003c/View\u003e\n      )}\n    \u003c/GestureRecorder\u003e\n  );\n};\n```\n\n## Documentation and API\n\n### `GestureDetector`\n\n`GestureDetector` is a render props component. The child function has the form `children({ coordinate: { x: number, y: number } })`\n\n| Prop              |             Default             |                      Type                       | Description                                                                                                                                       |\n| :---------------- | :-----------------------------: | :---------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `slopRadius`      |               50                |                    `number`                     | The radius in px from a coordinate. The resulting circle is the area in which the user can move the finger                                        |\n| `gestures`        |              `{}`               | `{ [key: string]: [{ x: number, y: number }] }` | An object with one or more gestures. A gesture is an array of `{ x, y }` objects, which symbolize the exact coordinates you want the user to pass |\n| `onProgress`      | `({ progress, gesture }) =\u003e {}` |                   `function`                    | A callback, which is called on each predefined gesture coordinate passed by the user.                                                             |\n| `onGestureFinish` |        `(gesture) =\u003e {}`        |                   `function`                    | A callback, which is called when the user finishes a gesture. Receives the gesture key of the finished gesture.                                   |\n| `onPanRelease`    |           `() =\u003e {}`            |                   `function`                    | Callback, when the user releases the finger. Receives no arguments.                                                                               |\n\n### `GestureRecorder`\n\n`GestureRecorder` is a render props component. The child function has the form `children({ gesture: [{ x: string, y: string }, { x: string, y: string }, ...], gestureDirectionHistory: [{ x: string, y: string }, { x: string, y: string }, ...], offset: { x: number, y: number } })`.\n\n`gesture` is an array of coordinates. They are generated based on the `pointDistance` prop of the component.\n\n`gestureDirectionHistory` will tell you accordingly to `gesture` which direction the gesture is moving there. This might give somewhat unreliable data currently. A direction object looks like `{ x: \"left\", y: \"up\" }`.\n\n`offset` will artificially add an horizontal and vertical offset to the coordinates. This does not change the detection of the defined gesture at all. It's just a helper to use with the `GesturePath` component to paint the path where you actually draw. Check the [`GestureRecorder` example screen](https://github.com/mxmzb/react-native-gesture-detector/blob/master/example/src/Screen/CreateGesture.js) for more details on this.\n\n| Prop            |      Default      |    Type    | Description                                                                                                                                                                                                                                                      |\n| :-------------- | :---------------: | :--------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `pointDistance` |        20         |  `number`  | The minimum distance between points that you want to be recorded. So default wise, every 20px (or more, usually depending on the phone hardware and the speed of the finger moving over the display) the component will add another point to the `gesture` array |\n| `onCapture`     |    `() =\u003e {}`     | `function` | A callback, which is called every time the component is adding a coordinate to the `gesture` array                                                                                                                                                               |\n| `onPanRelease`  | `(gesture) =\u003e {}` | `function` | Callback, when the user releases the finger. Receives the fully drawn gesture in form of a coordinate array.                                                                                                                                                     |\n\n### `GesturePath`\n\n`GesturePath` is a helper component, which paints a gesture visually in a container. The container should have `position: absolute;` set in its style property. `{ x, y }` is a coordinate object. An array of coordinate objects must be passed to paint the gesture on the screen. This component should be only used in development to define and refine gestures.\n\n| Prop         | Default |   Type   | Description                                                                                                                                                                                                                                           |\n| :----------- | :-----: | :------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `path`       |  `[]`   | `array`  | An array of coordinates to paint the gesture                                                                                                                                                                                                          |\n| `slopRadius` |  `50`   | `number` | The radius around each coordinate, in which the user touch event will be associated with the gesture (or rather the radius of the circle being painted for each coordinate, as this whole component has no functionality really and is purely visual) |\n| `color`      | `black` | `string` | A string of a valid CSS color property                                                                                                                                                                                                                |\n\n### `Cursor`\n\nPaints a black, round indicator at the passed coordinate. The only useful situation is in development and you probably will use it like this, where `coordinate` is passed from the [`GestureDetector`](#gesturedetector) render props function:\n\n`{coordinate \u0026\u0026 \u003cCursor {...coordinate} /\u003e}`\n\n| Prop         |                   Default                   |   Type   | Description                                                                                                                              |\n| :----------- | :-----------------------------------------: | :------: | :--------------------------------------------------------------------------------------------------------------------------------------- |\n| `x`          |                     `0`                     | `number` | The coordinate of the absolute center of the cursor relatively to the parent container.                                                  |\n| `y`          |                     `0`                     | `number` | The coordinate of the absolute center of the cursor relatively to the parent container.                                                  |\n| `throttleMs` | `50` in dev build, `25` in production build | `number` | A performance optimization. Sets the time delay between each rerender of the repositioned cursor. You probably don't want to touch this. |\n\n## License\n\n`react-native-gesture-detector` is licensed under the [MIT](https://github.com/mxmzb/react-native-gesture-detector/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmxmzb%2Freact-native-gesture-detector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmxmzb%2Freact-native-gesture-detector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmxmzb%2Freact-native-gesture-detector/lists"}