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.