https://github.com/jwebcoder/react-native-swipe-container
swipe gestures for react-native
https://github.com/jwebcoder/react-native-swipe-container
Last synced: about 1 year ago
JSON representation
swipe gestures for react-native
- Host: GitHub
- URL: https://github.com/jwebcoder/react-native-swipe-container
- Owner: JWebCoder
- License: mit
- Created: 2017-11-03T11:43:11.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T23:52:27.000Z (over 3 years ago)
- Last Synced: 2025-04-13T10:16:52.170Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 1020 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-swipe-container
React Native component for handling swipe gestures in all directions.
This is based on the great work from [glepur is react-native-swipe-gestures](https://github.com/glepur/react-native-swipe-gestures)
## Installation
`npm i -S react-native-swipe-container`
## Usage
```javascript
// @flow
import * as React from 'react'
import { Text, StyleSheet } from 'react-native'
// react-native-swipe-container
import GestureRecognizer, { swipeDirections } from 'react-native-swipe-container'
import type { GestureState } from 'react-native-swipe-container'
type Props = {}
type State = {
gestureName: string,
backgroundColor: string
}
const styles = StyleSheet.create({
swiper: {
flex: 1
}
})
class SomeComponent extends React.Component {
state = {
gestureName: 'none',
backgroundColor: '#fff'
}
onSwipe (gestureName: string, gestureState: GestureState) {
const {
SWIPE_UP,
SWIPE_DOWN,
SWIPE_LEFT,
SWIPE_RIGHT,
SWIPE_UP_LEFT,
SWIPE_UP_RIGHT,
SWIPE_DOWN_LEFT,
SWIPE_DOWN_RIGHT
} = swipeDirections
this.setState({gestureName: gestureName})
switch (gestureName) {
case SWIPE_UP:
this.setState({backgroundColor: 'red'})
break
case SWIPE_DOWN:
this.setState({backgroundColor: 'green'})
break
case SWIPE_LEFT:
this.setState({backgroundColor: 'blue'})
break
case SWIPE_RIGHT:
this.setState({backgroundColor: 'yellow'})
break
case SWIPE_UP_LEFT:
this.setState({backgroundColor: 'mistyrose'})
break
case SWIPE_UP_RIGHT:
this.setState({backgroundColor: 'aquamarine'})
break
case SWIPE_DOWN_LEFT:
this.setState({backgroundColor: 'pink'})
break
case SWIPE_DOWN_RIGHT:
this.setState({backgroundColor: 'burlywood'})
break
}
}
render () {
return (
this.onSwipe(direction, state)}
velocityThreshold={0.3}
distanceThreshold={40}
angleThreshold={15}
style={[styles.swiper, {backgroundColor: this.state.backgroundColor}]}
>
I am ready to get swiped!
onSwipe callback received gesture: {this.state.gestureName}
)
}
}
export default SomeComponent
```
## Config
Can be passed within optional `config` property.
| Params | Type | Default | Description |
| -------------------------- |:-------------:| ------- | ------------ |
| velocityThreshold | Number | 0.3 | Velocity that has to be breached in order for swipe to be triggered |
| distanceThreshold | Number | 40 | Minimum swipe distance for the swipe to be triggered |
| angleThreshold | Number | 15 | Angle range to match non diagonal swipes (15 -> from -15deg to 15deg is considered horizontal) |
| diagonalSwipe | Boolean | True | Enables diagonal swipes |
## Methods
#### onSwipe(gestureName, gestureState)
| Params | Type | Description |
| ------------- |:-------------:| ------------ |
| gestureName | String | Name of the gesture (look example above) |
| gestureState | Object | gestureState received from PanResponder |