react-native-gesture-responder

react-native-gesture-responder

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

Install

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

Documentation

Have a glance of how to use it:

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) => {},
    //moveThreshold: 5
  });
}

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

The API is quite same of the official one. Differences are:

1. Every lifecycle callback is called with an additional argument gestureState, which is also quite same as the PanResponder but contains more info.
2. The config object can provide another value named moveThreshold (defaults to 2 if not provided), which is used to avoid too sensitive move events when simply tap the screen(mainly on Android).

The gesture 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