{"id":19220064,"url":"https://github.com/nativescript-community/gesturehandler","last_synced_at":"2025-04-15T21:08:34.663Z","repository":{"id":56201956,"uuid":"191351152","full_name":"nativescript-community/gesturehandler","owner":"nativescript-community","description":"Declarative API exposing platform native touch and gesture system to NativeScript.","archived":false,"fork":false,"pushed_at":"2024-08-25T16:42:10.000Z","size":6569,"stargazers_count":12,"open_issues_count":2,"forks_count":3,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-11-07T07:06:27.970Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":["farfromrefug"]}},"created_at":"2019-06-11T10:44:50.000Z","updated_at":"2024-08-25T16:42:14.000Z","dependencies_parsed_at":"2022-08-15T14:31:51.648Z","dependency_job_id":"46e9bda3-3a1f-43b1-b0fd-cf0b1700037a","html_url":"https://github.com/nativescript-community/gesturehandler","commit_stats":{"total_commits":256,"total_committers":6,"mean_commits":"42.666666666666664","dds":0.19140625,"last_synced_commit":"a7577f01ed00a4bc1959449d76b63d02b48c0015"},"previous_names":["akylas/nativescript-gesturehandler"],"tags_count":99,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fgesturehandler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fgesturehandler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fgesturehandler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fgesturehandler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/gesturehandler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223840111,"owners_count":17212060,"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":[],"created_at":"2024-11-09T14:33:51.984Z","updated_at":"2024-11-09T14:33:52.605Z","avatar_url":"https://github.com/nativescript-community.png","language":"Java","funding_links":["https://github.com/sponsors/farfromrefug"],"categories":["Plugins"],"sub_categories":["Utility Plugins"],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/gesturehandler\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/gesturehandler?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/gesturehandler.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/gesturehandler\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/gesturehandler.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eDeclarative API exposing platform native touch and gesture system to NativeScript.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n\n[](#table-of-contents)\n\n\n[](#table-of-contents)\n\n## Table of Contents\n\n* [Installation](#installation)\n* [API](#api)\n\t\t\t* [TypeScript](#typescript)\n* [GestureRootView](#gesturerootview)\n* [Overriding Nativescript gestures](#overriding-nativescript-gestures)\n* [Credits](#credits)\n\t* [Examples:](#examples)\n* [Demos and Development](#demos-and-development)\n\t* [Repo Setup](#repo-setup)\n\t* [Build](#build)\n\t* [Demos](#demos)\n* [Contributing](#contributing)\n\t* [Update repo ](#update-repo-)\n\t* [Update readme ](#update-readme-)\n\t* [Update doc ](#update-doc-)\n\t* [Publish](#publish)\n\t* [modifying submodules](#modifying-submodules)\n* [Questions](#questions)\n\n\n[](#installation)\n\n\n[](#installation)\n\n## Installation\n\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/gesturehandler`\n\n\n[](#api)\n\n\n[](#api)\n\n## API\n\nWe need to do some wiring when your app starts, so open `app.ts` and add this before creating any View/App/Frame:\n\n##### TypeScript\n\n```ts\nimport { install } from '@nativescript-community/gesturehandler';\ninstall();\n```\n\nYou create a gesture handler using something like this:\n\n```typescript\nimport { GestureHandlerTouchEvent, GestureHandlerStateEvent, GestureStateEventData, GestureTouchEventData, HandlerType, Manager } from '@nativescript-community/gesturehandler';\n\nfunction onGestureTouch(args: GestureTouchEventData) {\n    const { state, extraData, view } = args.data;\n    view.translateX = extraData.translationX;\n    view.translateY = extraData.translationY;\n}\nfunction onGestureState(args: GestureStateEventData) {\n    const { state, prevState, extraData, view } = args.data;\n    console.log('onGestureState', state, prevState, view, extraData);\n}\nconst manager = Manager.getInstance();\nconst gestureHandler = manager.createGestureHandler(HandlerType.PAN, 10, {\n    shouldCancelWhenOutside: false\n});\ngestureHandler.on(GestureHandlerTouchEvent, onGestureTouch, this);\ngestureHandler.on(GestureHandlerStateEvent, onGestureState, this);\ngestureHandler.attachToView(view);\n```\n\nRight now you must not forget to store the `gestureHandler` somewhere or the gesture won't work on iOS (native object being released). This will be fixed in future versions.\n\nNow about the API. All the gestures for the react counterpart exist with the same options and the same event `extraData`.\n\n\n[](#gesturerootview)\n\n\n[](#gesturerootview)\n\n## GestureRootView\n\nFor the gestures to work correctly we need a `root` view which knows how to handle the gestures.\nIf using `Page` (thus `Frame`) you don't need to do anything.\nIn case you don't (drawer root view, modals, ...) then you can wrap your views in a `GestureRootView` which inherits `GridLayout`\n\n\n[](#overriding-nativescript-gestures)\n\n\n[](#overriding-nativescript-gestures)\n\n## Overriding Nativescript gestures\n\nThis plugin can also override N gestures completely. This would give much more control over gestures and especially would allow to correctly handle simultaneous gestures likes `tap` and `longpress`.\n\nTo do that \n\n\n[](#credits)\n\n\n[](#credits)\n\n## Credits\n\nThis is a port of [react-native-gesturehandler](https://kmagiera.github.io/react-native-gesture-handler/).\nThe source is based on the source code by [Krzysztof Magiera](https://github.com/kmagiera). Don't hesitate to go and thank him for his work!\n\n### Examples:\n\n- [Basic](demo-snippets/vue/Basic.vue)\n  - A basic example showing that overriding N gestures works, even in modals\n\n\n[](#demos-and-development)\n\n\n[](#demos-and-development)\n\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\n[](#contributing)\n\n\n[](#contributing)\n\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\n[](#questions)\n\n\n[](#questions)\n\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).\n\n\n[](#demos-and-development)\n\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\n[](#contributing)\n\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n[](#questions)\n\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fgesturehandler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fgesturehandler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fgesturehandler/lists"}