{"id":15673446,"url":"https://github.com/jwebcoder/react-native-swipe-container","last_synced_at":"2025-05-12T19:26:37.461Z","repository":{"id":26604455,"uuid":"109389198","full_name":"JWebCoder/react-native-swipe-container","owner":"JWebCoder","description":"swipe gestures for react-native","archived":false,"fork":false,"pushed_at":"2022-12-06T23:52:27.000Z","size":1041,"stargazers_count":5,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T10:16:52.170Z","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/JWebCoder.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":"2017-11-03T11:43:11.000Z","updated_at":"2021-05-17T21:27:37.000Z","dependencies_parsed_at":"2023-01-14T05:01:13.139Z","dependency_job_id":null,"html_url":"https://github.com/JWebCoder/react-native-swipe-container","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/JWebCoder%2Freact-native-swipe-container","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JWebCoder%2Freact-native-swipe-container/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JWebCoder%2Freact-native-swipe-container/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JWebCoder%2Freact-native-swipe-container/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JWebCoder","download_url":"https://codeload.github.com/JWebCoder/react-native-swipe-container/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253807283,"owners_count":21967334,"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-10-03T15:40:37.199Z","updated_at":"2025-05-12T19:26:37.442Z","avatar_url":"https://github.com/JWebCoder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-swipe-container\n\nReact Native component for handling swipe gestures in all directions.\n\nThis is based on the great work from [glepur is react-native-swipe-gestures](https://github.com/glepur/react-native-swipe-gestures)\n\n## Installation\n\n`npm i -S react-native-swipe-container`\n\n## Usage\n\n```javascript\n// @flow\n\nimport * as React from 'react'\nimport { Text, StyleSheet } from 'react-native'\n\n// react-native-swipe-container\nimport GestureRecognizer, { swipeDirections } from 'react-native-swipe-container'\nimport type { GestureState } from 'react-native-swipe-container'\n\ntype Props = {}\n\ntype State = {\n  gestureName: string,\n  backgroundColor: string\n}\n\nconst styles = StyleSheet.create({\n  swiper: {\n    flex: 1\n  }\n})\n\nclass SomeComponent extends React.Component\u003cProps, State\u003e {\n  state = {\n    gestureName: 'none',\n    backgroundColor: '#fff'\n  }\n\n  onSwipe (gestureName: string, gestureState: GestureState) {\n    const {\n      SWIPE_UP,\n      SWIPE_DOWN,\n      SWIPE_LEFT,\n      SWIPE_RIGHT,\n      SWIPE_UP_LEFT,\n      SWIPE_UP_RIGHT,\n      SWIPE_DOWN_LEFT,\n      SWIPE_DOWN_RIGHT\n    } = swipeDirections\n\n    this.setState({gestureName: gestureName})\n\n    switch (gestureName) {\n      case SWIPE_UP:\n        this.setState({backgroundColor: 'red'})\n        break\n      case SWIPE_DOWN:\n        this.setState({backgroundColor: 'green'})\n        break\n      case SWIPE_LEFT:\n        this.setState({backgroundColor: 'blue'})\n        break\n      case SWIPE_RIGHT:\n        this.setState({backgroundColor: 'yellow'})\n        break\n      case SWIPE_UP_LEFT:\n        this.setState({backgroundColor: 'mistyrose'})\n        break\n      case SWIPE_UP_RIGHT:\n        this.setState({backgroundColor: 'aquamarine'})\n        break\n      case SWIPE_DOWN_LEFT:\n        this.setState({backgroundColor: 'pink'})\n        break\n      case SWIPE_DOWN_RIGHT:\n        this.setState({backgroundColor: 'burlywood'})\n        break\n    }\n  }\n\n  render () {\n    return (\n      \u003cGestureRecognizer\n        onSwipe={(direction, state) =\u003e this.onSwipe(direction, state)}\n        velocityThreshold={0.3}\n        distanceThreshold={40}\n        angleThreshold={15}\n        style={[styles.swiper, {backgroundColor: this.state.backgroundColor}]}\n      \u003e\n        \u003cText\u003eI am ready to get swiped!\u003c/Text\u003e\n        \u003cText\u003eonSwipe callback received gesture: {this.state.gestureName}\u003c/Text\u003e\n      \u003c/GestureRecognizer\u003e\n    )\n  }\n}\n\nexport default SomeComponent\n```\n\n## Config\n\nCan be passed within optional `config` property.\n\n| Params                     | Type          | Default | Description  |\n| -------------------------- |:-------------:| ------- | ------------ |\n| velocityThreshold          | Number        | 0.3     | Velocity that has to be breached in order for swipe to be triggered |\n| distanceThreshold          | Number        | 40      | Minimum swipe distance for the swipe to be triggered |\n| angleThreshold             | Number        | 15      | Angle range to match non diagonal swipes (15 -\u003e from -15deg to 15deg is considered horizontal) |\n| diagonalSwipe              | Boolean       | True    | Enables diagonal swipes |\n\n## Methods\n\n#### onSwipe(gestureName, gestureState)\n\n| Params        | Type          | Description  |\n| ------------- |:-------------:| ------------ |\n| gestureName   | String        | Name of the gesture (look example above) |\n| gestureState  | Object        | gestureState received from PanResponder  |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwebcoder%2Freact-native-swipe-container","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjwebcoder%2Freact-native-swipe-container","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwebcoder%2Freact-native-swipe-container/lists"}