Gesture Responder System
Last updated
Last updated
Gesture recognition on mobile devices is much more complicated than web. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.
from react-native-docs/gesture-responder-system.html
Image from: Learning React Native: Building Native Mobile Apps with JavaScript by Bonnie Eisenman
The gesture responder System allows views to negotiate responsibility for a touch event. A touch event has three phases: start, move and release. Let's break down its lifecycle.
A view can request to become the touch responder in the:
start phase by returning true from onStartShouldSetResponder
move phase by returning true from onMoveShouldSetResponder
Similar to the web, these negotiation functions are called in a bubbling pattern. Therefore, the deepest component will become the responder.
However, a parent can choose to override and claim responsibility. This is done by returning true from either onStartShouldSetResponderCapture or onMoveShouldSetResponderCapture.
If a view's request is granted or rejected onResponderGrant or onResponderReject is invoked appropriately.
Finally the view can then respond using one of the following handlers:
onResponderMove
onResponderRelease
onResponderTerminationRequest
onResponderTerminate
After a view has successfully claimed touch responder status, its relevant event handlers may be called.
