Reanimated Patterns Skill

This skill covers React Native Reanimated for performant animations.

When to Use

Use this skill when:

• Implementing smooth animations
• Gesture-based interactions
• Complex animation sequences
• Performance-critical animations

Core Principle

UI THREAD ANIMATIONS - Reanimated runs animations on the UI thread for 60fps.

Installation

npx expo install react-native-reanimated

Update babel.config.js:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

Basic Concepts

Shared Values

import { useSharedValue } from 'react-native-reanimated';

// Shared values are synchronized between JS and UI threads
const scale = useSharedValue(1);
const opacity = useSharedValue(0);
const translateX = useSharedValue(0);

// Update shared values
scale.value = 2;
opacity.value = 1;

Animated Styles

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

function AnimatedBox(): React.ReactElement {
  const scale = useSharedValue(1);

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

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

Animation Functions

withSpring

import { withSpring } from 'react-native-reanimated';

// Spring animation (natural bounce)
scale.value = withSpring(2, {
  damping: 10,
  stiffness: 100,
  mass: 1,
});

withTiming

import { withTiming, Easing } from 'react-native-reanimated';

// Timed animation
opacity.value = withTiming(1, {
  duration: 300,
  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
});

withDelay

import { withDelay, withSpring } from 'react-native-reanimated';

// Delayed animation
scale.value = withDelay(500, withSpring(2));

withSequence

import { withSequence, withTiming } from 'react-native-reanimated';

// Sequential animations
scale.value = withSequence(
  withTiming(1.2, { duration: 100 }),
  withTiming(0.9, { duration: 100 }),
  withTiming(1, { duration: 100 })
);

withRepeat

import { withRepeat, withTiming } from 'react-native-reanimated';

// Repeating animation
rotation.value = withRepeat(
  withTiming(360, { duration: 1000 }),
  -1,  // -1 for infinite
  false // reverse
);

Common Animations

Fade In/Out

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

function FadeView({ visible }: { visible: boolean }): React.ReactElement {
  const opacity = useSharedValue(0);

  useEffect(() => {
    opacity.value = withTiming(visible ? 1 : 0, { duration: 300 });
  }, [visible]);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }));

  return (
    <Animated.View style={animatedStyle}>
      {children}
    </Animated.View>
  );
}

Scale on Press

function ScaleButton({ onPress, children }: Props): React.ReactElement {
  const scale = useSharedValue(1);

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

  const handlePressIn = () => {
    scale.value = withSpring(0.95);
  };

  const handlePressOut = () => {
    scale.value = withSpring(1);
  };

  return (
    <TouchableOpacity
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      onPress={onPress}
      activeOpacity={1}
    >
      <Animated.View style={animatedStyle}>
        {children}
      </Animated.View>
    </TouchableOpacity>
  );
}

Slide In

import { Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

function SlideIn({ visible }: { visible: boolean }): React.ReactElement {
  const translateX = useSharedValue(width);

  useEffect(() => {
    translateX.value = withSpring(visible ? 0 : width);
  }, [visible]);

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

  return (
    <Animated.View style={[styles.panel, animatedStyle]}>
      {children}
    </Animated.View>
  );
}

Entering/Exiting Animations

import Animated, {
  FadeIn,
  FadeOut,
  SlideInRight,
  SlideOutLeft,
  ZoomIn,
  BounceIn,
} from 'react-native-reanimated';

// Fade
<Animated.View entering={FadeIn.duration(300)} exiting={FadeOut.duration(200)}>

// Slide
<Animated.View entering={SlideInRight} exiting={SlideOutLeft}>

// Zoom
<Animated.View entering={ZoomIn.springify()}>

// Bounce
<Animated.View entering={BounceIn.delay(200)}>

// Custom
<Animated.View
  entering={FadeIn.duration(500).delay(100).springify()}
  exiting={FadeOut.duration(300)}
>

Layout Animations

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

// Animate layout changes
<Animated.View layout={Layout.springify()}>
  {items.map((item) => (
    <Animated.View
      key={item.id}
      entering={FadeIn}
      exiting={FadeOut}
      layout={Layout}
    >
      <Text>{item.name}</Text>
    </Animated.View>
  ))}
</Animated.View>

Gesture Handler Integration

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

function DraggableBox(): React.ReactElement {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

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

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

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

Interpolation

import { interpolate, Extrapolation } from 'react-native-reanimated';

const animatedStyle = useAnimatedStyle(() => {
  const scale = interpolate(
    scrollY.value,
    [0, 100],
    [1, 0.5],
    Extrapolation.CLAMP
  );

  const opacity = interpolate(
    scrollY.value,
    [0, 50, 100],
    [1, 0.5, 0]
  );

  return {
    transform: [{ scale }],
    opacity,
  };
});

Worklets

import { runOnJS } from 'react-native-reanimated';

// Call JS function from worklet
const updateState = (value: number) => {
  setState(value);
};

const animatedStyle = useAnimatedStyle(() => {
  if (position.value > 100) {
    runOnJS(updateState)(position.value);
  }
  return { transform: [{ translateX: position.value }] };
});

Notes

• All animation logic runs on UI thread
• Use worklets ('worklet' directive) for custom functions
• Use runOnJS to call JS functions from worklets
• Test animations on real devices
• Reanimated is compatible with Expo