React Native Animations Skill Skill

React Native Animations Skill

Learn high-performance animations using Reanimated 3, Gesture Handler, and layout animations.

Prerequisites

React Native basics
Understanding of JavaScript closures
Familiarity with transforms and styles

Learning Objectives

After completing this skill, you will be able to:

[ ] Create smooth 60fps animations with Reanimated
[ ] Handle complex gestures with Gesture Handler
[ ] Implement layout entering/exiting animations
[ ] Optimize animations for performance
[ ] Combine gestures with animations

Topics Covered

1. Installation

npm install react-native-reanimated react-native-gesture-handler

# babel.config.js
module.exports = {
  plugins: ['react-native-reanimated/plugin'],
};

2. Reanimated Basics

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

function AnimatedBox() {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  const handlePress = () => {
    scale.value = withSpring(scale.value === 1 ? 1.5 : 1);
  };

  return (
    <Pressable onPress={handlePress}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </Pressable>
  );
}

3. Gesture Handler

import { Gesture, GestureDetector } from 'react-native-gesture-handler';

function DraggableBox() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const pan = Gesture.Pan()
    .onUpdate((e) => {
      translateX.value = e.translationX;
      translateY.value = e.translationY;
    })
    .onEnd(() => {
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
    });

  const style = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
    ],
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.box, style]} />
    </GestureDetector>
  );
}

4. Layout Animations

import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';

function AnimatedList({ items }) {
  return (
    <Animated.View layout={Layout.springify()}>
      {items.map((item) => (
        <Animated.View
          key={item.id}
          entering={FadeIn}
          exiting={FadeOut}
          layout={Layout.springify()}
        >
          <Text>{item.title}</Text>
        </Animated.View>
      ))}
    </Animated.View>
  );
}

5. Animation Timing

| Function | Use Case | |----------|----------| | withTiming | Linear, controlled duration | | withSpring | Natural, physics-based | | withDecay | Momentum-based (fling) | | withSequence | Multiple animations in order | | withRepeat | Looping animations |

Quick Start Example

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  interpolate,
} from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

function SwipeCard() {
  const translateX = useSharedValue(0);

  const gesture = Gesture.Pan()
    .onUpdate((e) => { translateX.value = e.translationX; })
    .onEnd(() => { translateX.value = withSpring(0); });

  const style = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { rotate: `${interpolate(translateX.value, [-200, 200], [-15, 15])}deg` },
    ],
  }));

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={[styles.card, style]} />
    </GestureDetector>
  );
}

Common Errors & Solutions

| Error | Cause | Solution | |-------|-------|----------| | "Attempted to call from worklet" | Missing runOnJS | Wrap with runOnJS() | | Animation not running | Missing 'worklet' | Add 'worklet' directive | | Gesture not working | Missing root view | Add GestureHandlerRootView |

Validation Checklist

[ ] Animations run at 60fps
[ ] Gestures respond smoothly
[ ] No frame drops on low-end devices
[ ] Layout animations don't cause jank

Usage

Skill("react-native-animations")

Bonded Agent: 05-react-native-animation

Agent Skills: React Native Animations Skill

Skill Files