Introduction
Gesture Handler provides a declarative API exposing the native platform's touch and gesture system to React Native. It's designed to be a replacement of React Native's built in touch system called Gesture Responder System. Using native touch handling allows to address the performance limitations of React Native's Gesture Responder System. It also provides more control over the platform's native components that can handle gestures on their own. If you want to learn more, we recommend this talk by Krzysztof Magiera in which he explains issues with the responder system.
Installation
Requirements
GestureHandlerRootView
GestureHandlerRootView is a key component that enables Gesture Handler to intercept touch events, allowing for the implementation of gestures in your app. It should wrap your app's main component, and any component that relies on Gesture Handler's gestures has to be a descendant of this view. For more detailed information, you can check out the under-the-hood section.
Gesture detectors
Gesture Detector
Gesture composition & interactions
RNGH3 simplifies gesture interaction through dedicated composition hooks and configuration properties. To choose the right approach, simply ask: Are all the gestures attached to the same component?
Gesture callbacks & events
At any given time, each handler instance has an assigned state that can change when new touch events occur or can be forced to change by the touch system under certain circumstances. You can hook into state transitions using specific gesture callbacks.
State manager
RNGH3 allows to manually control gestures lifecycle by using GestureStateManager.
Integration with Reanimated
GestureDetector will decide whether to use Reanimated to process provided gestures based on their configuration. If any of the callbacks is a worklet and Reanimated is not explicitly turned off, tools provided by the Reanimated will be utilized, bringing the ability to handle gestures synchronously on the main thread.
Integration with Animated
Using hook API allows for smooth integration with the Animated API by allowing for passing an Animated.event as the argument to the onUpdate callback. The event mapping of Animated.event depends on the useNativeDriver property.