# animating-react-native-expo

A skill that steers an AI agent through writing and debugging React Native and Expo animations on Reanimated 4 and Gesture Handler 3.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 413 installs · ★ 3
- Author: tristanmanchester
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/tristanmanchester/agent-skills/tree/HEAD/animating-react-native-expo/SKILL.md
- Updated: 2026-09-14
- HTML: https://affpapa.org/en/nevibecode/skills/animating-react-native-expo

## What it does

The skill gives the agent a working order for motion in native UI. The driver decides the tool: state changes go through CSS transitions, mount and reflow through layout animations, while gestures, scrolling and physics use shared values and worklets. Business state stays in React, and per-frame values stay out of renders.

Before installing anything, the agent reads package and lock files, the native architecture config and the components involved. The skill targets Reanimated 4 and RNGH 3. On an older stack you either plan a supported upgrade or stay inside the installed API; mixing API generations and adding compatibility wrappers is off the table. In Expo, versions resolve through the SDK rather than by bumping every native package on its own. Checking motion on real hardware means a device or simulator build, and the old string-matching setup checker is gone.

Accessibility gets its own section. The system reduced-motion policy is honoured in timing, springs, layout and CSS. `useReducedMotion()` reports the setting captured at startup and does not track later changes, so a live reaction needs the app's AccessibilityInfo subscription with the listener removed on cleanup. Drag and swipe interactions need a non-gesture alternative, and labels, focus and hit targets stay intact. Decorative loops and frame callbacks stop when the view unmounts, leaves the screen or the app goes to background.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill animating-react-native-expo -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/animating-react-native-expo/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/animating-react-native-expo/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill animating-react-native-expo -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/animating-react-native-expo/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill animating-react-native-expo -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/animating-react-native-expo/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install tristanmanchester/agent-skills animating-react-native-expo
```

2. **Manually: put the files in place**
- File: `.github/skills/animating-react-native-expo/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill animating-react-native-expo -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/tristanmanchester/agent-skills --path animating-react-native-expo
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/animating-react-native-expo/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill animating-react-native-expo -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/tristanmanchester/agent-skills/tree/HEAD/animating-react-native-expo/SKILL.md

## When to use it
- pick the right animation driver for one interaction
- untangle a Reanimated and Gesture Handler version mismatch
- cover gesture states: cancel, interrupt, repeat activation
- honour the system reduced-motion setting
- stop decorative loops when a screen goes away

## Example prompts
- Add a card entrance animation with Reanimated 4, keep the state in React
- Figure out why the swipe gesture stops firing after a cancellation
- Check that the animation respects reduced motion and does not block the UI thread

## Similar
- [vercel-react-native-skills](https://affpapa.org/en/nevibecode/skills/vercel-react-native-skills.md) — skill · 255200 installs
- [animate-expo](https://affpapa.org/en/nevibecode/skills/animate-expo.md) — skill · 137900 installs
- [mobile-native](https://affpapa.org/en/nevibecode/skills/mobile-native.md) — skill · 86600 installs
- [aso](https://affpapa.org/en/nevibecode/skills/aso.md) — skill · 75900 installs
- [swiftui-pro](https://affpapa.org/en/nevibecode/skills/swiftui-pro.md) — skill · 35200 installs
- [orca-emulator](https://affpapa.org/en/nevibecode/skills/orca-emulator.md) — skill · 5900 installs

From the same set: [tristanmanchester/agent-skills](https://affpapa.org/en/nevibecode/by/tristanmanchester/agent-skills.md) — 2 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md