react-native-gesture-responder

react-native-gesture-responder

A more convenient and powerful gesture responder than the official PanResponder.

Using this library, gestures are easy to detect:

• scroll distance
• pinch distance
• single tap
• double tab
• single tap confirmed (not followed by a double tap)

Install

npm install --save react-native-gesture-responder@latest

Documentation

import {createResponder} from 'react-native-gesture-responder';
...
componentWillMount() {
  this.gestureResponder = createResponder({
    onStartShouldSetResponder: (evt, gestureState) => true,
    onStartShouldSetResponderCapture: (evt, gestureState) => true,
    onMoveShouldSetResponder: (evt, gestureState) => true,
    onMoveShouldSetResponderCapture: (evt, gestureState) => true,
    onResponderGrant: (evt, gestureState) => {},
    onResponderMove: (evt, gestureState) => {},
    onResponderTerminationRequest: (evt, gestureState) => true,
    onResponderRelease: (evt, gestureState) => {},
    onResponderTerminate: (evt, gestureState) => {},
    
    onResponderSingleTapConfirmed: (evt, gestureState) => {}
    
    moveThreshold: 2
    debug: false
  });
}

render() {
  
  return (
    <View
      {...this.gestureResponder}>
		...
    </View>
  );
}

The API is quite same with the official gesture responder system. Differences are:

1. Every lifecycle callback is called with an additional argument gestureState, like the PanResponder.

2. onResponderSingleTapConfirmed: called after a single tap (not a double tap).

3. moveThreshold: default is 2. Use this to avoid too sensitive move events when simply tap the screen(mainly on Android).

4. debug: a boolean value. If true, lifecycle logs will be printed.

   ​

The gestureState object has the following(a super set of PanResponder):

• stateId
• moveX and moveY
• x0 and y0
• dx and dy: accumulated distance of the gesture since the touch started(confusing names)
• vx and vy: per millisec(PanResponder is inconsistant with different react-native version, as this issue mentioned)
• numberActiveTouches
• previousMoveX and previousMoveY: you can use moveX - previousMoveX to calculate latest move distance
• pinch and previousPinch: useful number values when implementing zoom feature. Will be undefined if no pinch occured
• singleTapUp: a bool value indicating if a single tap up occured
• doubleTapUp: a bool value indicating if a double tap up occured

Refer to Demo folder for a simple demonstration, as below shows: