{"id":4043,"url":"https://github.com/johanneslumpe/react-native-gesture-recognizers","last_synced_at":"2025-04-05T18:06:17.872Z","repository":{"id":57337208,"uuid":"37823814","full_name":"johanneslumpe/react-native-gesture-recognizers","owner":"johanneslumpe","description":"Gesture recognizer decorators for react-native","archived":false,"fork":false,"pushed_at":"2020-05-04T18:00:14.000Z","size":45,"stargazers_count":365,"open_issues_count":7,"forks_count":56,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-04-25T00:51:11.476Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/johanneslumpe.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":"2015-06-21T20:01:28.000Z","updated_at":"2024-04-02T17:40:42.000Z","dependencies_parsed_at":"2022-09-10T03:53:18.379Z","dependency_job_id":null,"html_url":"https://github.com/johanneslumpe/react-native-gesture-recognizers","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johanneslumpe%2Freact-native-gesture-recognizers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johanneslumpe%2Freact-native-gesture-recognizers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johanneslumpe%2Freact-native-gesture-recognizers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johanneslumpe%2Freact-native-gesture-recognizers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johanneslumpe","download_url":"https://codeload.github.com/johanneslumpe/react-native-gesture-recognizers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378140,"owners_count":20929296,"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:16:59.362Z","updated_at":"2025-04-05T18:06:17.853Z","avatar_url":"https://github.com/johanneslumpe.png","language":"JavaScript","funding_links":[],"categories":["Components","Index","Others"],"sub_categories":["UI","Gestures"],"readme":"# react-native-gesture-recognizers\n\nReact Native gesture recognizer decorators. Just decorate your component and easily respond to pans and swipes!\n\nPlease report any issues you find!\n\n## Usage\n\nDo an `npm i react-native-gesture-recognizers` and then try out one of the examples below!\n\n## Basic panning example\n```javascript\nimport React, { Component, Text, View, Animated } from 'react-native';\nimport { pannable } from 'react-native-gesture-recognizers';\n\n@pannable({\n  setGestureState: false\n})\nclass PanMe {\n\n  render() {\n    return (\n      \u003cView style={{width:100, height: 100, backgroundColor: 'red'}}\u003e\n        \u003cText\u003ePan me!\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nclass TransformOnPan extends Component {\n\n  constructor(props, context) {\n    super(props, context);\n    this.state = {\n      transform: new Animated.ValueXY(),\n    }\n  }\n\n  onPan = ({ absoluteChangeX, absoluteChangeY }) =\u003e {\n    this.state.transform.setValue({\n      x: absoluteChangeX,\n      y: absoluteChangeY,\n    });\n  }\n\n  render() {\n    const { transform } = this.state;\n\n    return (\n      // we transform the decorator instead of the decorated view,\n      // so there won't be any issues with ghost panning,\n      // due to the wrapping view staying in place and receiving touches\n      \u003cPanMe\n        onPan={this.onPan}\n        panDecoratorStyle={{transform: transform.getTranslateTransform()}} /\u003e\n    );\n  }\n}\n```\n![pan example](http://lum.pe/react-native-gesture-recognizers-panning.gif)\n\n## Basic swipe example\n```javascript\nimport React, { Component, Text, View, LayoutAnimation } from 'react-native';\nimport { swipeable } from 'react-native-gesture-recognizers';\nconst { directions: { SWIPE_UP, SWIPE_LEFT, SWIPE_DOWN, SWIPE_RIGHT } } = swipeable;\n\n@swipeable({\n  horizontal:true,\n  vertical: true,\n  continuous: false,\n  initialVelocityThreshold: 0.7\n})\nclass SwipeMe {\n\n  render() {\n    const { swipe: { direction } } = this.props;\n    return (\n      \u003cView style={{\n        width:250,\n        height:250,\n        alignItems: 'center',\n        justifyContent: 'center'}}\u003e\n        {!direction ? \u003cText\u003eSwipe me!\u003c/Text\u003e : \u003cText style={{fontWeight:'700'}}\u003e{direction}!\u003c/Text\u003e}\n      \u003c/View\u003e\n    );\n  }\n\n}\n\nclass TransformOnSwipe extends Component {\n\n  constructor(props, context) {\n    super(props, context);\n    this.state = {\n      color: 'yellow',\n      x: 0,\n      y: 0,\n    }\n  }\n\n  onSwipeBegin = ({ direction, distance, velocity }) =\u003e {\n    let { x, y, color } = this.state;\n    // x and y values are hardcoded for an iphone6 screen\n    switch (direction) {\n      case SWIPE_LEFT:\n        x = 0;\n        color = 'yellow';\n        break;\n      case SWIPE_RIGHT:\n        x = 125;\n        color = 'blue';\n        break;\n      case SWIPE_UP:\n        y = 0;\n        color = 'green';\n        break;\n      case SWIPE_DOWN:\n        y = 417;\n        color = 'purple';\n        break;\n    }\n    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);\n\n    this.setState({\n      x, y, color\n    });\n  }\n\n  render() {\n    const { transform, reset, color, x ,y } = this.state;\n\n    return (\n      \u003cSwipeMe\n        onSwipeBegin={this.onSwipeBegin}\n        swipeDecoratorStyle={{\n          backgroundColor: color,\n          left: x,\n          top: y,\n          position:'absolute',\n        }} /\u003e\n    );\n  }\n\n}\n```\n![swipe example](http://lum.pe/react-native-gesture-recognizers-swiping.gif)\n\n## Available decorators\n\n### pannable\n\n#### Configuration\n`setGestureState` `Boolean`  \nWhether the decorator should pass the current pan state to the decorated child. If you only use the callbacks to react to panning, then you can set this to `false`.  \nDefault: `true`\n#### Props\n`onPanBegin({ originX, originY })` `Function`  \nGets called once at the begin of the gesture.\n\n`onPan({ absoluteChangeX, absoluteChangeY, changeX, changeY })` `Function`  \nGets called whenever the touch moves.\n\n`onPanEnd()` `Function`  \nGets called when the gesture is released or terminated. (The user ended the touch or it was forcefully interrupted)\n\n`panDecoratorStyle` `Object`  \nA custom style object, which will be applied to the wrapper view.  \n\n`resetPan` `Boolean`  \nWhen `true` is passed, it will reset the state of the panning decorator. This can be useful if you want to reset the absolute change values, since these stay stored until you reset them.\n\n### swipeable\n\n#### Configuration\n`setGestureState` `Boolean`  \nWhether the decorator should pass the current pan state to the decorated child. If you only use the callbacks to react to panning, then you can set this to `false`.\n\n`horizontal` `Boolean`  \nWhether horizontal swipes should be detected.  \nDefault: `false`\n\n`vertical` `Boolean`  \nWhether vertical swipes should be detected.  \nDefault: `false`\n\n`left` `Boolean`  \nWhether left swipes should be detected.  \nDefault: `false`\n\n`right` `Boolean`  \nWhether right swipes should be detected.  \nDefault: `false`\n\n`up` `Boolean`  \nWhether upward swipes should be detected.  \nDefault: `false`\n\n`up` `Boolean`  \nWhether downward swipes should be detected.  \nDefault: `false`\n\n`continuous` `Boolean`  \nIf `true`, then you will receive an update each time the touch moves. If `false` you will only receive a single notification about the touch.  \nDefault: `true`\n\n`initialVelocityThreshold` `Number`  \nDefines the initial velocity necessary for the swipe to be registered.  \nDefault: `0.7`\n\n`verticalThreshold` `Number`  \nDefines how far the touch can stray from the x-axis in y-direction when detecting horizontal touches.  \nDefault: `10`  \n\n`horizontalThreshold` `Number`  \nDefines how far the touch can stray from the y-axis in x-direction when detecting vertical touches.  \nDefault: `10`  \n\n#### Props\n`onSwipeBegin({ direction, distance, velocity })` `Function`\nGets called once at the begin of the gesture.\n\n`onSwipe({ direction, distance, velocity })` `Function`  \nGets called whenever the touch moves, if `continuous` is `true`.\n\n`onSwipeEnd({ direction })` `Function`  \nGets called when the gesture is released or terminated. (The user ended the touch or it was forcefully interrupted)\n\n`swipeDecoratorStyle` `Object`  \nA custom style object, which will be applied to the wrapper view.  \n\n\n## Planned improvements\n* Allow combination of arbitrary gestures into a single decorator, in order to require less wrapping and being able to use gestures, which would interfere with each when claiming the responder status, side-by-side.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohanneslumpe%2Freact-native-gesture-recognizers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohanneslumpe%2Freact-native-gesture-recognizers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohanneslumpe%2Freact-native-gesture-recognizers/lists"}