Swipe Detection

2019-05-23

let's see how to use react-native-swipe-gestures to detect user swipe event on RN(React Native) project

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.

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

Buy me a coffeeBuy me a coffee
Posts