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
Gesture detectors
Gesture Detector
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.
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?
State manager
RNGH3 allows to manually control gestures lifecycle by using GestureStateManager.
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 in certain circumstances. You can hook into state transitions using specific gesture callbacks.