Animating React Native Expo

This walks you through building performant animations in React Native Expo apps using Reanimated v4 and Gesture Handler's hook API. It gives you a three-tier mental model: CSS transitions for simple state changes, layout animations for mount/unmount, and shared values plus worklets for gesture-driven interactions. The defaults are opinionated (which is good), the code samples are copy-pasteable, and it includes a troubleshooting checklist for the usual worklet footguns. What I like is the emphasis on keeping work on the UI thread and not updating React state every frame. The bundled references cover threading, gesture composition, and scroll-linked recipes without dumping everything upfront.

skills.sh installs: 421
GitHub stars: 4
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add tristanmanchester/agent-skills --skill animating-react-native-expo --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

SKILL.md on GitHub