react-native-motion-gestureslisted

<!-- last-verified: 2026-07 --> # React Native motion + gestures (Reanimated 4 + Gesture Handler 3) This is the RN analogue of the web motion suite: **worklets replace the compositor thread** as the thing that keeps animation smooth under a busy JS thread. `react-native-performance` (§2) already states the perf reason to go native-driven — this skill is the HOW: worklet mechanics, gesture composition, and the interop pitfalls that produce bugs which look like "it just doesn't update." ## 1. Worklets and shared values A **worklet** is a JS function that Reanimated can run on the **UI thread** instead of the JS thread — most Reanimated APIs (`useAnimatedStyle`, gesture callbacks, `withTiming`/`withSpring`) are auto-workletized; mark a function worklet explicitly with a `"worklet";` directive at its top when you pass a plain function somewhere Reanimated expects to run it on the UI thread. - **`useSharedValue`** creates a shared value — data that lives outside React's render cycle and is readable/writable from both threads via its `.value` property. Mutating `.value` does **not** trigger a React re-render; it drives native-thread animation directly. Never read/write `.value` during render — only inside worklets, effects, or event handlers. - **`useAnimatedStyle`** returns a style object recomputed on the UI thread whenever the shared values it reads change — this is the primary way a shared value becomes visible pixels. Only `transform` and `opacity` changes s