React Native Gesture Handler: Native-Driven Touch

WHY IT EXISTS: React Native's original gesture system relies on the JavaScript thread to process every touch event. When the JS thread is busy rendering a list, fetching data, or executing heavy logic, gesture callbacks stall and animations drop frames. React Native Gesture Handler was created to move the entire gesture recognition pipeline into native code so that touch state machines run independently of JavaScript execution.

THE MENTAL MODEL: Think of it as swapping out a remote control for a hardwired switch. In the standard system, your finger sends a signal across the JS bridge, waits for JavaScript to decide what the gesture means, then waits again for a command to animate. Gesture Handler keeps the decision-making on the native side, so the UI responds to your finger directly without round-trips through JavaScript.

HOW IT WORKS: The library provides declarative handler components such as PanGestureHandler, TapGestureHandler, and PinchGestureHandler. Each handler attaches a native gesture recognizer to a view. As touch data arrives, the native state machine tracks states like BEGAN, ACTIVE, END, and CANCELLED. When paired with Reanimated, these state changes and gesture values are consumed directly by worklets running on the UI thread. This means the translation, scale, or rotation following your finger can update at 60 or 120 frames per second without the JS bridge handling any frames during the gesture.

WHEN TO USE IT: Reach for Gesture Handler when you build gesture-driven experiences that must feel physically glued to the user's finger. Common examples include bottom sheets that drag with momentum, swipeable email rows with snap thresholds, maps with pinch-to-zoom, and carousel decks driven by flick velocity. If the interaction requires continuous animation that tracks a finger in real time, this library is the right tool.

WHEN NOT TO USE IT: Do not add it for simple taps inside buttons or basic vertical scrolling where built-in ScrollView and TouchableOpacity already suffice. It introduces extra dependencies, boilerplate, and a steeper learning curve. Also avoid using it in isolation without Reanimated or a similar native animation driver, because you would still force gesture data across the bridge on every frame and lose the primary performance advantage.

ONE CANONICAL EXAMPLE: Consider a swipeable inbox row that reveals a delete button underneath. A PanGestureHandler wraps the row content and tracks horizontal drag on the native thread. A Reanimated worklet reads the translationX value and interpolates it to two outputs: the foreground row slides left, and a red background layer fades in proportionally. When the user releases past a threshold, a decay animation snaps the row open or closed. At no point during the drag does the JavaScript thread need to process frames, so the interaction stays smooth even if the app is simultaneously reconciling a large list update.