creating-reanimated-animations

React Native Reanimated Animations Skill

Agent Skills–compliant skill for React Native Reanimated. Expert guidance for animations: transitions, gestures, scroll-linked effects, layout animations, CSS animations (v4), shared element transitions, worklets, and real-world component patterns.

What is this?

This skill provides comprehensive guidance for creating performant animations in React Native using Reanimated, including:

• ✅ SKILL.md – Core patterns, animation selection, quick snippets, version detection (v3/v4)
• ✅ 8 reference docs – API reference, gesture patterns, layout animations, CSS animations, shared element transitions, component patterns, worklets & advanced APIs, testing & properties
• ✅ Version support – Both Reanimated v3 (Legacy + New Architecture) and v4 (New Architecture only)
• ✅ Real-world patterns – Accordion, bottom sheet, flip card, parallax, FAB, collapsing header

Installation

Using npx skills

# Install from GitHub
npx skills add estevg/skills --skill creating-reanimated-animations

# Or with full URL
npx skills add https://github.com/estevg/skills --skill creating-reanimated-animations

The skill directory is creating-reanimated-animations (Agent Skills spec: name matches folder).

Using Claude Code Plugin

# Add the marketplace
/plugin marketplace add estevg/skills

# Install the plugin
/plugin install creating-reanimated-animations@esteban-skills

Manual Installation (Cursor)

1. Clone or download this repository
2. Copy the creating-reanimated-animations folder to one of these locations:
   • ~/.cursor/skills/creating-reanimated-animations/ (global)
   • .cursor/skills/creating-reanimated-animations/ (project-specific)

Usage

Once installed, the skill automatically activates when you:

• Ask about React Native animations
• Mention "reanimated", "animations", or "gestures"
• Request help with transitions, spring animations, or layout effects
• Need to implement scroll-linked animations or shared element transitions

Example Queries

Creating Animations:

"Create a fade in animation with spring effect"
"Implement a parallax scroll header"
"Build a swipeable card with gesture handler"

Layout Animations:

"Add entering/exiting animations to a list"
"Create a layout transition for reordering items"
"Implement a keyframe animation for a loading indicator"

Advanced Patterns:

"Build an accordion component with smooth animations"
"Create a bottom sheet with gesture controls"
"Implement shared element transitions between screens"

What's Included

Skill Structure

creating-reanimated-animations/
├── SKILL.md                          # Main skill with core patterns
└── references/
    ├── api-reference.md              # Full hook signatures, v3↔v4 differences
    ├── gesture-patterns.md           # Drag, pinch, fling integrations
    ├── layout-animations.md          # Entering/exiting, layout transitions
    ├── css-animations-detailed.md    # CSS animations (v4 only)
    ├── shared-element-transitions.md # Screen-to-screen animations
    ├── component-patterns.md         # Accordion, bottom sheet, flip card, FAB
    ├── worklets-advanced.md          # Worklets, runOnJS/runOnUI
    └── testing-and-properties.md     # Jest testing, animatable properties

Core Pattern

Every animation follows three steps:

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from "react-native-reanimated";

function Component() {
  // 1. Create shared value (lives on UI thread)
  const offset = useSharedValue(0);

  // 2. Bind to style
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  // 3. Trigger animation
  const handlePress = () => {
    offset.value = withTiming(200, { duration: 500 });
  };

  return <Animated.View style={[styles.box, animatedStyle]} />;
}

Animation Selection