mobile-animation-gesture-handler

Installation
SKILL.md

React Native Gesture Handler Patterns

Quick Guide: Use Gesture Handler's v2 builder API (Gesture.Pan(), Gesture.Tap(), etc.) with GestureDetector for all touch interactions. Wrap your app root in GestureHandlerRootView. Compose gestures with Gesture.Simultaneous(), Gesture.Race(), and Gesture.Exclusive(). Use onChange (not onUpdate) when working with animation shared values -- onChange provides deltas (changeX), onUpdate provides cumulative values (translationX). Gesture callbacks are automatically workletized when your animation library is installed.


<critical_requirements>

CRITICAL: Before Using This Skill

(You MUST wrap the app root in GestureHandlerRootView -- gestures will silently fail without it)

(You MUST use GestureDetector with the builder API (Gesture.Pan(), etc.) -- NOT the legacy PanGestureHandler components)

(You MUST use onChange for incremental shared value updates and onUpdate for cumulative values -- mixing them causes drift)

(You MUST use Gesture.Simultaneous() for multi-touch interactions (pinch + pan) -- without it, only one gesture activates)

(You MUST NOT nest GestureDetector components using different API styles (hooks vs builder) under the same root -- this causes undefined behavior)

Installs
23
GitHub Stars
26
First Seen
Jul 25, 2026