rn-animations-gestureslisted

# rn-animations-gestures — guardrail for animations + gestures in RN/Expo > For the current Expo API and per-version details, verify against the Expo docs / MCP `mcp.expo.dev` / `expo/skills` (see rn-fundamentals → Source of truth). ## The 5 rules (non-negotiable) 1. **Reanimated 4 is the default**. Never the legacy `Animated` API from `react-native` for new code. Reanimated 4 also ships a web-style CSS Animations/Transitions API (`transition: {...}`, `animationName` keyframes) as a backward-compatible ADDITION to worklets — good for state-driven style changes, not a replacement for `useSharedValue`/`useAnimatedStyle` on gesture-driven motion (see `references/patterns.md`). 2. **Gestures via Gesture Handler 2**. Never `PanResponder`. Use `Gesture.Pan()`, `Gesture.Pinch()`, `Gesture.Tap()`, `Gesture.LongPress()` with `<GestureDetector>`. 3. **Worklets run on the UI thread** — they CANNOT access React state directly. To call back to JS use `runOnJS(fn)(args)`. Inside worklets, only shared values, locals, and `runOnUI/runOnJS` are safe. 4. **Layout animations for enter/exit/move**. Use `entering={FadeIn}`, `exiting={FadeOut}`, `layout={Layout.springify()}` from `react-native-reanimated` — they handle their own worklets correctly. 5. **`useDerivedValue` for computed shared values**. Never `useMemo` on a shared value — `useMemo` runs on JS thread. ## Quick decision tree - "What's the right tool — worklets or the CSS Animations/Transitions API?" → `references/decision-tree.md`