A free skill that teaches your coding agent how React Native animations are built, with the patterns behind the AnimateReactNative library. It works with Claude Code, Cursor, Codex and any other agent that reads skills.
npx skills add animate-react-native/skillThen ask in plain language: "make the cards scale while I scroll", "make it bouncy", "it's janky on Android".
- One shared value drives the animation. Every animated property is an interpolation of it.
- A gesture hands its velocity to the spring when the finger lifts.
- A list never re-renders while it scrolls.
- How to find the cause of dropped frames, and what to change for each cause.
| File | What it covers |
|---|---|
SKILL.md |
When to use the skill, the mental model, how a plain request maps to a pattern, the rules |
references/core-concepts.md |
One driver, springs, press feedback, stagger, layout animations, text |
references/gestures.md |
Follow and release, springs on release, commits, snap points, card decks, sensors |
references/scroll-and-lists.md |
Scroll-driven items, pinning, pagination, headers, sheets, marquees, feeds |
references/animation-math.md |
Interpolation, trigonometry and rotation, rings, endless motion, loops, noise |
references/performance.md |
The frame budget, an audit for dropped frames, wrong and right by cause |
It targets Reanimated version 4 on the New Architecture, and says where Reanimated version 3 differs. Gesture examples use the Gesture Handler version 2 API.
The snippets are the 10 to 20 lines that carry each technique, and each pattern links to the animation it comes from. The complete animations, with their source, are on animatereactnative.com. 13 of them are free.
The skill needs no account and no license.