React Native Reanimated — Best Practices & 60fps Guide

Reanimated 4.x / Worklets 0.7.x / React Native 0.80+ (New Architecture required)

Critical Rules

1. Babel plugin must be LAST in babel.config.js plugins array.
2. Never use React state (useState) for values that drive animations. Use useSharedValue.
3. Never call withTiming/withSpring inside gesture .onUpdate callbacks. Assign the event value directly for smooth tracking; use spring/timing only in .onEnd.
4. Always cancel animations before starting new ones when gestures begin: cancelAnimation(sv).
5. Always pass velocity from gesture events into withSpring for natural feel.
6. Always wrap the app in <GestureHandlerRootView style={{ flex: 1 }}>. Gestures won't work without it.
7. Always cancel animations on unmount via useEffect cleanup.
8. Respect reduced motion — use ReduceMotion.System or useReducedMotion().

Code Review & Upgrade Action

When the user asks to review, check, audit, or upgrade their Reanimated code, follow this procedure: