react-native-swipe-recognizer

    0.2.0 • Public • Published

    npm version

    react-native-swipe-recognizer

    A simple, configurable 4-directional swipe recognizer using the react-native gesture responder system

    Getting started

    Add the dependency

    • with yarn: yarn add react-native-swipe-recognizer
    • with npm: npm install --save react-native-swipe-recognizer

    Usage

    1. Create an instance of SwipeRecognizer in componentWillMount (to pass in options see custom options example)

    2. Create a panResponder with the following two functions (see simple example):

    • onMoveShouldSetPanResponder: this functions returns true 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);
    1. Within the render function pass the panHandlers to the View:
      <View { ...this._panResponder.panHandlers }>

    Simple Example

    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',
      },
    });

    Custom Options Example

    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',
      },
    });

    Install

    npm i react-native-swipe-recognizer

    DownloadsWeekly Downloads

    0

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    7.57 kB

    Total Files

    4

    Last publish

    Collaborators

    • cshg