Outline
when I was developing RN(React Native) project, I needed to detect user swipe direction to do different actions in the app. so I searched and found react-native-swipe-gestures. in this blog, we’ll see how to install and use react-native-swipe-gestures.
- react-native-swipe-gestures official site: https://github.com/glepur/react-native-swipe-gestures
Installation
execute below command to install react-native-gestures library.
npm install --save react-native-swipe-gestures
How To Use
add below soure where you want to detect user swipe events.
...
import GestureRecognizer from 'react-native-swipe-gestures';
...
render() {
<GestureRecognizer
onSwipeLeft={this._onSwipeLeft}
onSwipeRight={this._onSwipeRight}
config={{
velocityThreshold: 0.3,
directionalOffsetThreshold: 80,
}}
style={{
flex: 1,
}}>
...
</GestureRecognizer>
}
...
private _onSwipeLeft = gestureState => {
...
this.setState({
...
});
};
private _onSwipeRight = gestureState => {
...
this.setState({
...
});
...
};
Completed
we saw how to install and use react-native-swipe-gestures to detect user swipe events on RN(React Native). I’ve found myself doing copy-paste not to make simple code…react-native-swipe-gestures source code is not long, so I think to make it yourself is also funny.
Reference
- react-native-swipe-gestures official site: https://github.com/glepur/react-native-swipe-gestures
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
You can use the applications that are created by this blog writer
If you have interested, please try to download them for free.
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
