Gestures

In React Native, gestures are created using the PanResponder API.

PanResponder

Most built-in React Native components (View, Text, etc) can become a responder and handle touch events. You'll need to create a set of panHandlers and pass them into your component as props. Call {'panResponder = PanResponder.create(panHandlers)'} with an object containing handlers to create a PanResponder. You can then access panResponder.panHandlers, which will be an enhanced version of the handlers object you passed in.

PanHandlers

You will likely want to handle onStartShouldSetPanResponder or onMoveShouldSetPanResponder to become a response and handle the gesture. Beyond that, you'll likely want to handle the Grant, Move, Release, and Terminate to update your UI in response to the gesture. Unless you have many complex gestures in your app, you generally won't need to include every handler to get a working gesture.

Here's the list of all handlers:

  • onMoveShouldSetPanResponder: (e, gestureState) => {...}
  • onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}
  • onStartShouldSetPanResponder: (e, gestureState) => {...}
  • onStartShouldSetPanResponderCapture: (e, gestureState) => {...}
  • onPanResponderReject: (e, gestureState) => {...}
  • onPanResponderGrant: (e, gestureState) => {...}
  • onPanResponderStart: (e, gestureState) => {...}
  • onPanResponderEnd: (e, gestureState) => {...}
  • onPanResponderRelease: (e, gestureState) => {...}
  • onPanResponderMove: (e, gestureState) => {...}
  • onPanResponderTerminate: (e, gestureState) => {...}
  • onPanResponderTerminationRequest: (e, gestureState) => {...}
  • onShouldBlockNativeResponder: (e, gestureState) => {...}

More details are available on each of these in the docs.

Example
Responder Control Flow

The following diagram illustrates how a component can acquire responder status.

Figure 4-3, Obtaining touch responder status, from Learning React Native, First Edition, p. 56
Gestures

In React Native, gestures are created using the PanResponder API.

PanResponder

Most built-in React Native components (View, Text, etc) can become a responder and handle touch events. You'll need to create a set of panHandlers and pass them into your component as props. Call {'panResponder = PanResponder.create(panHandlers)'} with an object containing handlers to create a PanResponder. You can then access panResponder.panHandlers, which will be an enhanced version of the handlers object you passed in.

PanHandlers

You will likely want to handle onStartShouldSetPanResponder or onMoveShouldSetPanResponder to become a response and handle the gesture. Beyond that, you'll likely want to handle the Grant, Move, Release, and Terminate to update your UI in response to the gesture. Unless you have many complex gestures in your app, you generally won't need to include every handler to get a working gesture.

Here's the list of all handlers:

  • onMoveShouldSetPanResponder: (e, gestureState) => {...}
  • onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}
  • onStartShouldSetPanResponder: (e, gestureState) => {...}
  • onStartShouldSetPanResponderCapture: (e, gestureState) => {...}
  • onPanResponderReject: (e, gestureState) => {...}
  • onPanResponderGrant: (e, gestureState) => {...}
  • onPanResponderStart: (e, gestureState) => {...}
  • onPanResponderEnd: (e, gestureState) => {...}
  • onPanResponderRelease: (e, gestureState) => {...}
  • onPanResponderMove: (e, gestureState) => {...}
  • onPanResponderTerminate: (e, gestureState) => {...}
  • onPanResponderTerminationRequest: (e, gestureState) => {...}
  • onShouldBlockNativeResponder: (e, gestureState) => {...}

More details are available on each of these in the docs.

Example
Responder Control Flow

The following diagram illustrates how a component can acquire responder status.

Figure 4-3, Obtaining touch responder status, from Learning React Native, First Edition, p. 56