Swipe Detection

2020-12-16 hit count image

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

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 Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.

Posts