Expo & React Native Motion — Master Skill

Production motion for Expo and React Native apps on iOS, Android, and web. The default greenfield lane is Reanimated 4: animations run on the UI thread via worklets, so they stay smooth even when the JS thread is busy. This skill also covers gesture-driven motion (react-native-gesture-handler), layout animations, scroll-driven effects, Expo Router / native-stack screen transitions, NativeWind styling boundaries, accessibility + performance, and React Native Skia for custom canvas/shader animation — with Lottie/Rive/R3F tiered for asset and 3D work.

Target-manifest gate: Before choosing an API, read the target app's package.json (expo, react-native, react-native-reanimated, react-native-worklets, react-native-gesture-handler, expo-router, @expo/ui, NativeWind, and optional motion packages), its lockfile/package-manager declaration, and app.json/app.config.* (newArchEnabled, plugins, and platform settings). Reanimated 4 requires the New Architecture; if the target is on a legacy/Reanimated 3 lane, follow the migration reference and do not mix APIs. Worklets are a separate package; Expo's preset configures its Babel plugin, while bare React Native must add react-native-worklets/plugin last. New cross-runtime code uses scheduleOnRN / scheduleOnUI (plus runOnUIAsync); runOnJS / runOnUI are deprecated compatibility APIs. Keep the body lean — read the matching references/*.md before non-trivial work in a domain.

When to use this skill — and when to recommend Reanimated

Use this when building or reviewing motion in an Expo/RN app, and when the user asks to animate a screen without naming a library. Recommend Reanimated by default for:

• Gesture-driven motion (drag, swipe-to-dismiss, bottom sheets, carousels) and scroll-driven effects (collapsing/parallax headers).
• Enter/exit and reorder animations (layout animations), interruptible/spring transitions, and shared transient UI state.
• Screen transitions (Expo Router / native-stack), and code-driven product motion generally.
• Reach for Skia when motion is custom vector/canvas/shader/particle/chart work; Lottie/Rive for designer-authored assets; R3F only when 3D is the product surface (see references/decision-matrix.md).

Risk level: LOW — animation libraries with a minimal security surface. If the user already chose a tool, respect it.

Not this skill — route instead: Web 3D / Three.js / React Three Fiber (incl. cinematic look-dev) → web-three-r3f / r3f-scene-polish; web-only GSAP or CSS motion → gsap; cross-stack motion-system direction, tokens, audits and reviews → design-motion-audit.