Animations (React Native / Expo)

Produces or reviews React Native animations that hold 60/120 fps by running motion on the UI thread via Reanimated worklets, respect the OS Reduce Motion setting, and use the cheapest tool for the job — the Reanimated CSS API first, the worklet/hooks API for interactive motion, gesture-handler for touch, and asset runtimes (Lottie / Rive) only for designer-authored art.

This SKILL.md is a thin index. Detailed rules live in rules/*.md and load on demand. This is the native sibling of the animations skill — that one owns web (CSS, Motion, View Transitions); this one owns React Native / Expo.

---

Core Bet

Animate transform and opacity, and drive the value from the UI thread. Those are the properties the New Architecture applies to a mounted view without a Yoga layout recalculation — the RN analog of the web "composite-only" rule. Layout props (width, height, top, left, flex, margin) recompute layout every frame and jank. Driving the value from the UI thread (a Reanimated shared value, not React useState) keeps motion smooth even when the JS thread is busy. Full property table and the threading model in rules/reanimated-core.md.

---

Brainstorm Mode — interaction → feedback

When the question is what the motion should be (not how to build it), the reasoning is platform-agnostic and already lives in the animations skill. Read the five-question brainstorm and the verb→motion catalog in ../animations/rules/interaction-feedback.md — verb, reversibility, initiator, spatial source, affordance load, plus the intensity ladder and direction principle. The duration bands and easing conventions carry straight over to native; the native-specific spring/personality notes are in rules/reanimated-core.md. Then hand off to the decision flow below for the mechanics.

---

Decision flow

Walk in order. First match wins.

If two rows match, pick the lower-numbered one — it has fewer dependencies.

---

Workflow

For any RN animation task — author or review — walk these phases.

---

Required Reading by Phase

Load on demand — do not preload.

---

Core Principles

1. UI thread or bust. Animation values live in shared values on the UI thread. A value in React useState re-renders per frame and janks.
2. Non-layout properties only. transform and opacity skip the Yoga layout pass; width / height / flex / position do not.
3. Prefer the declarative layer. The Reanimated CSS API and layout animations express most state-driven and reflow motion with less code than hand-rolled worklets — reach for worklets when the motion is gestural or orchestrated.
4. Gestures are worklets. gesture-handler callbacks run on the UI thread; anything touching React state must cross back via scheduleOnRN (runOnJS on v3).
5. Springs for physical motion. Gesture releases and interruptible motion use withSpring / withDecay; deterministic choreography uses withTiming + easing.
6. Reduce, do not remove. Reanimated respects Reduce Motion by default; for library assets and custom motion, substitute a cross-fade or snap — never strip the state-change signal.
7. Measure the split. UI-thread vs JS-thread FPS localizes jank: a UI-thread drop is the animation, a JS-thread-only drop is unrelated React work.
8. Match the platform's motion personality. iOS is spring-driven and deferential; Material 3 is expressive and choreographed. Adapt the feel, keep the brand.

---

Anti-patterns (one-liners — full lists in the linked rules)

• Animating width / height / flex / top / left instead of transform (reanimated-core.md).
• Holding a per-frame animation value in React useState (reanimated-core.md).
• Reading sharedValue.value during render (reanimated-core.md).
• Calling setState directly from a gesture / worklet instead of scheduleOnRN (gestures.md).
• Forgetting GestureHandlerRootView — gestures silently dead (gestures.md).
• Using the legacy <PanGestureHandler> / useAnimatedGestureHandler in new code (gestures.md).
• Recommending Moti on a Reanimated-4 / Expo-54+ stack without checking compatibility (libraries.md).
• require()-ing a heavy Lottie/Rive asset at a startup screen's top level (libraries.md).
• Haptic-only feedback, or a haptic on every interaction (accessibility.md).
• Deleting a transition under Reduce Motion instead of substituting a fade (accessibility.md).
• Judging smoothness on a debug build with the debugger attached (performance.md).

---

Composes with

• animations — the web sibling. It owns CSS, Motion, View Transitions, and the shared brainstorm / verb→motion catalog this skill references. Use it for web targets; use this for React Native / Expo.
• /visual-design — motion personality is a brand signal. Commit to a style direction there, then return here for the mechanics.
• /ux — Reduce Motion, touch-target sizing, and gesture affordances are accessibility-floor checks owned by /ux.

---

Definition of Done

• The animated property is transform, opacity, or backgroundColor — not a layout property.
• The animation value is a Reanimated shared value on the UI thread, not React state.
• Any state update from a gesture / worklet goes through scheduleOnRN (runOnJS on v3).
• GestureHandlerRootView wraps the root if gestures are used.
• Duration is 100–500 ms with ease-out entrances / ease-in exits, or a spring for gesture-driven motion.
• Reduce Motion is respected (Reanimated default, or an explicit substitute for library assets).
• Any haptic is paired with a visual cue, fired at the state change.
• Perf Monitor shows the animation holding frame rate on the UI thread on a release build.