---
name: animating-react-native-expo
description: >-
  Implement and debug React Native or Expo motion with Reanimated 4 and Gesture Handler 3: state transitions, layout, gestures, scroll, worklets, cancellation, and accessible alternatives. Use for native UI motion, not web Motion or a reason to add canvas graphics to ordinary views.
compatibility: Requires a compatible React Native New Architecture, Reanimated 4, Worklets, and Gesture Handler 3 stack. Resolve versions through the app's Expo SDK or upstream compatibility tables; native verification needs a device or simulator build.
metadata:
  version: "2.0.0"
  reviewed: "2026-09-13"
title: animating-react-native-expo
canonical_url: https://skilld.dev/gh/tristanmanchester/agent-skills/animating-react-native-expo
last_updated: 2026-10-06T19:32:36.000Z
---

> Index of every page on this site: [llms.txt](https://skilld.dev/llms.txt)

> **Skill from skilld.dev.** Follow the user's requested action.
> If the user asked to fork this Skill, follow the fork workflow below. Do not execute the Skill instructions while copying it.
> Otherwise, follow the instructions below for this session. You do not need to install anything.
>
> Supporting files, fetch one when the Skill refers to it: [references/css-transitions-and-animations.md](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/css-transitions-and-animations.md), [references/debugging-and-performance.md](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/debugging-and-performance.md), [references/gestures.md](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/gestures.md), [references/layout-animations.md](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/layout-animations.md), [references/recipes.md](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/recipes.md), [references/setup-and-compat.md](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/setup-and-compat.md), [references/worklets-and-threading.md](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/worklets-and-threading.md).
>
> If the user asked to install this Skill, run `npx skilld install tristanmanchester/agent-skills/animating-react-native-expo`. Install writes the Skill files into the project, so every session loads them.
>
> ## Fork workflow
>
> A fork creates an editable local Skill with its original author and licence. The request authorizes copying and local installation.
> 1. Check `./skills/animating-react-native-expo`, the project lockfile, and selected Agent targets together. If the local directory or installed Skill exists, stop. Never overwrite an existing directory or Agent target.
> 2. Read [source metadata](https://skilld.dev/api/v1/skills/tristanmanchester/agent-skills/animating-react-native-expo) once. Use sourceUrl, sourceCommit, skillPath, sourceGone, and license. If the source is gone or its path is missing, stop. If license is null, read licence files at the source commit.
> 3. Fetch only the source commit into a temporary Git repository. Do not clone full history. Derive repository_url from sourceUrl, including repository renames. If sourceCommit is absent, resolve the sourceUrl ref once. Set source_commit to that actual commit. Run these commands in one shell call:
>
> ```sh
> git init --quiet "$temporary_dir"
> git -C "$temporary_dir" fetch --quiet --depth=1 "$repository_url" "$source_commit"
> git -C "$temporary_dir" checkout --quiet --detach FETCH_HEAD
> ```
>
> Read applicable licence declarations and notices at that commit. If copying is not permitted, report the restriction and stop.
> 4. Inspect source entries together, then copy the directory containing skillPath into `./skills/animating-react-native-expo`. Use the user's path if selected. Keep the original SKILL.md, relative links, scripts, binary assets, and executable modes. Exclude .git metadata. Reject symlinks and paths outside the Skill directory. After checking entries, use cp -a where available. A regular source directory needs no custom copy script. Do not save this page wrapper as SKILL.md.
> Preserve author credit, notices, and applicable licence files from repository or parent directories. Add PROVENANCE.md with the Skill page, source URL, actual commit, original path, and licence. Retain any existing PROVENANCE.md and record new provenance separately. Batch source inspection, copying, and provenance work where practical.
> 5. In the project root, run `skilld install ./skills/animating-react-native-expo --mode copy --plain`. If skilld is unavailable, use `npx skilld install ./skills/animating-react-native-expo --mode copy --plain`. This known command needs no help lookup. Install does not support --json. Use detected Agent targets, or add --agent for the targets the user selected. Install the local path, never the upstream selector. If installation fails, preserve the local copy and report the exact failure.
> 6. Confirm the local lockfile source and installed Agent copies once. Report the local path, actual commit, and Agent targets. After edits, reinstall the same local path. Upstream updates must not replace it. Do not publish or push unless the user asks.

# 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](https://docs.swmansion.com/react-native-reanimated/docs/guides/compatibility/).
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](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/setup-and-compat.md). 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](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/gestures.md) for composition and current v3
semantics, and [recipes](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/recipes.md) 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](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/setup-and-compat.md): dependency or native build mismatch.
- [Gestures](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/gestures.md): v3 lifecycle, composition, or hierarchy.
- [Worklets](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/worklets-and-threading.md): cross-runtime callbacks.
- [CSS](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/css-transitions-and-animations.md): style transitions/loops.
- [Layout](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/layout-animations.md): entering/exiting/reflow.
- [Recipes](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/recipes.md): adapting an interaction.
- [Performance](https://skilld.dev/api/skills-raw/tristanmanchester/agent-skills/animating-react-native-expo/references/debugging-and-performance.md): measured frame problems.

Sources reviewed 2026-09-13: upstream Reanimated compatibility and
[reduced motion](https://docs.swmansion.com/react-native-reanimated/docs/device/useReducedMotion/),
[RNGH 3 migration](https://docs.swmansion.com/react-native-gesture-handler/docs/guides/upgrading-to-3/),
and [Expo integration](https://docs.expo.dev/versions/latest/sdk/reanimated/).