Animating React Native Expo

React Native motion

Choose by the driver: state changes use CSS transitions, mount/reflow uses layout animations, and gestures/scroll/physics use shared values and worklets. Keep business state in React/application state and per-frame values out of React renders. Do not impose animation on an interaction that works better without it.

Inspect the actual stack

Read package and lockfiles, native architecture/configuration, and relevant components before installing anything. Use the package manager's dependency-tree command and the current compatibility guide. A declared package is not proof that its native binary or Babel plugin matches.

This skill targets Reanimated 4 and RNGH 3. If the app is not on that stack, choose a deliberate supported upgrade or stay within its installed API; do not mix API generations or add compatibility wrappers. For Expo, use its SDK-specific install resolution rather than independently upgrading every native package to latest. See setup. The old string-matching setup checker is removed; use actual dependency/build evidence instead of an 'OK' printout.

Implement one complete interaction

Define initial, active, completed, cancelled, interrupted, disabled, and reduced- motion states. Include layout bounds, orientation/size changes, multiple touches, and navigation/unmount. Choose a clear target state rather than toggling by whether an in-flight animation value happens to be nonzero.

Gesture Handler 3's onDeactivate receives an event with canceled, not the old second success argument. Perform committed actions only after a successful gesture, and handle cleanup even if activation never happened. A completed animation is not proof of a successful backend mutation. Prevent duplicate submissions while an action is pending and reflect actual failure/recovery in application state.

Keep worklet closures small. Use scheduleOnRN only for a function defined in the React Native runtime, such as navigation or an application callback. Do not pass a function created inside a worklet and assume it belongs to JS. A UI worklet still uses the UI thread: expensive computation can block rendering.

Use gesture contracts for composition and current v3 semantics, and recipes for deliberate starting patterns. Paths under scripts/references/assets belong to the installed skill directory, not the app's own similarly named directories.

Accessible motion and lifecycle

Respect the system reduced-motion policy in timing, spring, layout, and CSS paths. Reanimated's useReducedMotion() reports the startup setting; it is not a live subscription. Where changes must apply while running, use the app's reactive AccessibilityInfo subscription and remove the listener on cleanup. Provide a non-gesture action for drag/swipe operations and preserve labels, focus, disabled state, and hit targets. A visually translated view still needs correct interaction and accessibility geometry.

Stop decorative loops/frame callbacks when unmounted, off-screen, backgrounded, or reduced motion disables them. Reset to a meaningful static state. Do not make accessibility depend on a particular frame rate or the completion of an exit effect.

Verify

Type-check the actual component against the locked stack. Exercise success, cancellation, interruption, repeat activation, pending/error outcomes, reduced motion, screen-reader alternatives, and supported platforms. Profile a release- like build on representative hardware; UI-thread execution is not a 60/120 fps guarantee. Use Hermes-compatible debugging, not JSC Remote JS Debugging.

Report the patch, chosen driver/API, tests actually run, and remaining device checks. Do not use dependency strings or mocked animations as native-runtime proof.

Targeted references

• Setup: dependency or native build mismatch.
• Gestures: v3 lifecycle, composition, or hierarchy.
• Worklets: cross-runtime callbacks.
• CSS: style transitions/loops.
• Layout: entering/exiting/reflow.
• Recipes: adapting an interaction.
• Performance: measured frame problems.

Sources reviewed 2026-09-13: upstream Reanimated compatibility and reduced motion, RNGH 3 migration, and Expo integration.