A simple, configurable 4-directional swipe recognizer using the react-native gesture responder system
Add the dependency
- with yarn:
yarn add react-native-swipe-recognizer
- with npm:
npm install --save react-native-swipe-recognizer
-
Create an instance of
SwipeRecognizer
incomponentWillMount
(to pass in options see custom options example) -
Create a panResponder with the following two functions (see simple example):
-
onMoveShouldSetPanResponder
: this functions returnstrue
for all cases in which a panResponder should be set (e.g. all, horizontal, vertical) -
onPanResponderRelease
: this function recognizes the actual swipe on release depending on the gesture state (e.g. right, left or up swipe)Within those functions pass the gestureState to the used swipeRecognizer functions, for example:
swipeRecognizer.isRightSwipe(gestureState);
- Within the render function pass the panHandlers to the View:
<View { ...this._panResponder.panHandlers }>
This example sets the panResponder for horizontal swipes and does console.logs
on right and left swipes:
import React from 'react';
import { View, Text, PanResponder } from 'react-native';
import SwipeRecognizer from 'react-native-swipe-recognizer';
class App extends React.Component {
componentWillMount() {
const swipeRecognizer = new SwipeRecognizer();
this._panResponder = PanResponder.create({
onMoveShouldSetPanResponder: (e, gestureState) => {
return swipeRecognizer.isHorizontalSwipe(gestureState);
},
onPanResponderRelease: (e, gestureState) => {
if (swipeRecognizer.isRightSwipe(gestureState)) console.log('right swipe recognized!');
if (swipeRecognizer.isLeftSwipe(gestureState)) console.log('left swipe recognized!');
},
});
}
render() {
return (
<View style={styles.container} { ...this._panResponder.panHandlers }>
<Text>This view recognizes left and right swipes</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
alignItems: 'center',
justifyContent: 'center',
},
});
To pass in custom minimum distance and speed for swipes simply define an options object with two properties:
- minimumSwipeDistance (the default value is 30)
- minimumSwipeSpeed (the default value is 0.1)
const options = {
minimumSwipeDistance: 100,
minimumSwipeSpeed: 0.01,
};
And pass it as the argument to the SwipeRecognizer constructor in componentWillMount
:
const swipe = new SwipeRecognizer(options);
Full example with custom options:
import React from 'react';
import { View, Text, PanResponder } from 'react-native';
import SwipeRecognizer from 'react-native-swipe-recognizer';
class App extends React.Component {
componentWillMount() {
const options = {
minimumSwipeDistance: 100,
minimumSwipeSpeed: 0.01,
};
const swipeRecognizer = new SwipeRecognizer(options);
this._panResponder = PanResponder.create({
onMoveShouldSetPanResponder: (e, gestureState) => {
return swipeRecognizer.isHorizontalSwipe(gestureState);
},
onPanResponderRelease: (e, gestureState) => {
if (swipeRecognizer.isRightSwipe(gestureState)) console.log('right swipe recognized!');
if (swipeRecognizer.isLeftSwipe(gestureState)) console.log('left swipe recognized!');
},
});
}
render() {
return (
<View style={styles.container} { ...this._panResponder.panHandlers }>
<Text>This view recognizes left and right swipes</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
alignItems: 'center',
justifyContent: 'center',
},
});