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 the Gesture Handler `Gesture` API**. Never `PanResponder`. Do not go looking for a major number: npm's `latest` is 3.x, and **Expo SDK 57 bundles `~2.32.0`** — `expo install` will not give you 3, and the `Gesture` API below is the same in both. Installing what npm says here is the exact mistake `rn-bootstrap/references/stack-defaults.md` documents. 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={LinearTransition.springify()}` from `r