{"id":4103,"url":"https://github.com/kiddkai/react-native-gestures","last_synced_at":"2025-08-04T00:31:34.649Z","repository":{"id":57337198,"uuid":"44961969","full_name":"kiddkai/react-native-gestures","owner":"kiddkai","description":"Composable React Native Gestures","archived":true,"fork":false,"pushed_at":"2017-09-15T09:41:36.000Z","size":197,"stargazers_count":176,"open_issues_count":11,"forks_count":40,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-06T19:18:26.298Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kiddkai.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-26T10:39:47.000Z","updated_at":"2024-05-11T05:27:01.000Z","dependencies_parsed_at":"2022-09-10T02:53:10.178Z","dependency_job_id":null,"html_url":"https://github.com/kiddkai/react-native-gestures","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiddkai%2Freact-native-gestures","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiddkai%2Freact-native-gestures/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiddkai%2Freact-native-gestures/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiddkai%2Freact-native-gestures/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kiddkai","download_url":"https://codeload.github.com/kiddkai/react-native-gestures/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228521127,"owners_count":17932675,"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-01-05T20:17:01.132Z","updated_at":"2024-12-07T07:31:08.246Z","avatar_url":"https://github.com/kiddkai.png","language":"JavaScript","readme":"React Native Gestures\n=====================\n\n:warning: This package is still in early stage, it will have a heaps of API changes before it move to 1.0 :warning:\n\n\u003e React Native Composable Gesture Library\n\n[![Build Status](https://travis-ci.org/kiddkai/react-native-gestures.svg)](https://travis-ci.org/kiddkai/react-native-gestures)\n[![npm version](http://img.shields.io/npm/v/react-native-gestures.svg?style=flat-square)](https://npmjs.org/package/react-native-gestures \"View this project on npm\")\n[![npm version](http://img.shields.io/npm/dm/react-native-gestures.svg?style=flat-square)](https://npmjs.org/package/react-native-gestures \"View this project on npm\")\n[![Issue Stats](http://issuestats.com/github/kiddkai/react-native-gestures/badge/pr?style=flat-square)](https://github.com/kiddkai/react-native-gestures/pulls?q=is%3Apr+is%3Aclosed)\n[![Issue Stats](http://issuestats.com/github/kiddkai/react-native-gestures/badge/issue?style=flat-square)](https://github.com/kiddkai/react-native-gestures/issues?q=is%3Aissue+is%3Aclosed)\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](http://standardjs.com/)\n\n\nShowcase\n--------\n\n![](http://imgur.com/6dCrcfL.gif)\n\nGetting Start\n--------------\n\nAssuming you are using `react-native`, because I don't know how it will work\nin other libraries...\n\n* Install via npm\n\n```bash\nnpm i -S react-native-gestures\n```\n\nThen write some js like the simple code samples as a React component\nand render it in your `react-native` app.\n\n```js\nimport React, {\n  View,\n  Text\n} from 'react-native';\n\nimport {\n  drag,\n  pinch,\n  GestureView\n} from 'react-native-gestures';\n\nexport default React.createClass({\n  render() {\n    onGestureError(err) {\n      console.error(err);\n    },\n    return (\n      \u003cView\u003e\n        \u003cGestureView\n          style={movable}\n          gestures={[drag, pinch]}\n          toStyle={(layout) =\u003e {\n            return {\n              top: layout.y,\n              left: layout.x,\n              width: layout.width,\n              height: layout.height,\n              transform: [{rotate: `${layout.rotate}deg`}]\n            }\n          }}\n          onError={console.error.bind(console)}\u003e\n          \u003cText\u003eHEHE\u003c/Text\u003e\n          \u003cText\u003eHEHE\u003c/Text\u003e\n        \u003c/GestureView\u003e\n      \u003c/View\u003e\n    );\n  }\n});\n```\n\nAPIs\n----------\n\n### \u003cGestureView\u003e\n\nAs you can see, it's just a very simple React component you can use in this package, maybe\nit will have more components in the future, or not.\n\nThere are few properties it accpets:\n\n* gestures - a `Array` of [gesture](#gestures)s \n* onError  - a `Function` will be called when anything bad happens\n* style    - a `style` same as `\u003cView\u003e`'s `style` property\n* toStyle  - a mapping function that allow you to pick the changes you want to css style\n* children - ... you know, just React children, nothing special\n\nExample:\n\n```js\nlet style = { position: 'absolute', backgroundColor: '#F00' };\n\n\u003cGestureView\n  style={style}\n  onError={console.error.bind(console)}\n  gestures={[...]}\u003e\n  \u003cText\u003eThis is the children I say\u003c/Text\u003e\n\u003c/GestureView\u003e\n```\n\n### Gestures\n\nEvery gesture in this module is just a simple combination of two things:\n\n1. A `transducer` called `calculate`(please suggest me a better name)\n\n   This is the actual function that calculates the new positions of the view\n   when the move gesture event comes in.\n\n2. A `number` called `GESTURE_NUMBER`\n  \n   This define that the gesture will start calculate when the gesture number\n   matches this number.\n\n   You can set any number you want if your touch screen supports it :p\n\n\n#### drag\n\nIt's just a simple transducer takes one finger input with the move of the\nfinger and generates new layout of the component.\n\n#### pinch\n\nIt's a pinch gesture, also a zoom gesture. It takes two fingers gestures and\ngenerates new layout of the component.\n\nContribute\n----------\n\nUsing \n\n[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)\n\n","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiddkai%2Freact-native-gestures","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkiddkai%2Freact-native-gestures","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiddkai%2Freact-native-gestures/lists"}