Creating Reanimated Animations

React Native Reanimated Code Generator

Generate performant animation code using React Native Reanimated. Supports both v3 and v4.

Version Detection

Check the project's package.json to determine the version:

• v4 (New Architecture only): requires react-native-worklets as separate dependency
• v3 (supports Legacy and New Architecture): single package install

Setup

Reanimated v4 (latest)

npm install react-native-reanimated react-native-worklets

Babel plugin: 'react-native-worklets/plugin' (must be last in plugins list). For Expo: no Babel config needed. Run npx expo prebuild after install.

Reanimated v3

npm install react-native-reanimated

Babel plugin: 'react-native-reanimated/plugin' (must be last in plugins list).

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]}>      <Pressable onPress={handlePress}><Text>Move</Text></Pressable>    </Animated.View>  );}

Animation Selection

Spring tuning: lower damping (5–8) = more bounce, higher stiffness (150–200) = snappier, higher mass (2–3) = heavier.

Quick Patterns

Fade

const opacity = useSharedValue(0);const style = useAnimatedStyle(() => ({ opacity: opacity.value }));// Show: opacity.value = withTiming(1);// Hide: opacity.value = withTiming(0);

Slide from side

const translateX = useSharedValue(-SCREEN_WIDTH);const style = useAnimatedStyle(() => ({  transform: [{ translateX: translateX.value }],}));// Enter: translateX.value = withSpring(0);

Scale on press

const scale = useSharedValue(1);const style = useAnimatedStyle(() => ({  transform: [{ scale: scale.value }],}));// In:  scale.value = withSpring(0.95);// Out: scale.value = withSpring(1);

Interpolation

import { interpolate, Extrapolation } from 'react-native-reanimated';
const style = useAnimatedStyle(() => ({  opacity: interpolate(scrollY.value, [0, 100], [1, 0], Extrapolation.CLAMP),  transform: [{    scale: interpolate(scrollY.value, [0, 100], [1, 0.8], Extrapolation.CLAMP),  }],}));

Scroll-linked animation

const scrollY = useSharedValue(0);const scrollHandler = useAnimatedScrollHandler({  onScroll: (event) => { scrollY.value = event.contentOffset.y; },});<Animated.ScrollView onScroll={scrollHandler}>{children}</Animated.ScrollView>

Or simpler with useScrollOffset (v4) / useScrollViewOffset (v3):

const ref = useAnimatedRef<Animated.ScrollView>();const scrollOffset = useScrollOffset(ref); // auto-tracks scroll position<Animated.ScrollView ref={ref}>{children}</Animated.ScrollView>

Layout Animations (Mount/Unmount)

Built-in presets — no shared values needed:

import Animated, { FadeIn, SlideInRight, SlideOutLeft } from 'react-native-reanimated';
<Animated.View entering={FadeIn.duration(400).delay(100)} exiting={SlideOutLeft.duration(300)}>  {content}</Animated.View>

Presets: FadeIn/Out, SlideIn/OutLeft/Right/Up/Down, ZoomIn/Out, BounceIn/Out, FlipInEasyX/Y, LightSpeedIn/Out, PinwheelIn/Out, RollIn/Out, RotateIn/Out, StretchIn/Out.

Modifiers: .duration(ms), .delay(ms), .springify(), .damping(n), .stiffness(n), .randomDelay(), .reduceMotion(), .withCallback().

Layout Transitions (position/size changes)

Animate when component position or size changes:

import { LinearTransition, SequencedTransition } from 'react-native-reanimated';
<Animated.View layout={LinearTransition.springify().damping(15)} />

Transitions: LinearTransition, SequencedTransition, FadingTransition, JumpingTransition, CurvedTransition, EntryExitTransition.

Keyframe Animations (complex entering/exiting)

import { Keyframe } from 'react-native-reanimated';
const enteringAnimation = new Keyframe({  0: { opacity: 0, transform: [{ translateY: -50 }] },  50: { opacity: 0.5, transform: [{ translateY: -25 }], easing: Easing.out(Easing.quad) },  100: { opacity: 1, transform: [{ translateY: 0 }] },}).duration(500);
<Animated.View entering={enteringAnimation}>{content}</Animated.View>

For custom animations, layout transitions, and list animations, read references/layout-animations.md.

CSS Animations (v4 only)

Declarative CSS-like animations using style props directly:

<Animated.View style={{  animationName: {    from: { opacity: 0, transform: [{ translateY: -20 }] },    to: { opacity: 1, transform: [{ translateY: 0 }] },  },  animationDuration: '500ms',  animationTimingFunction: 'ease-out',}} />

Supported props: animationName, animationDuration, animationDelay, animationIterationCount, animationDirection, animationFillMode, animationPlayState, animationTimingFunction.

CSS Transitions (v4 only)

Automatic transitions when style values change:

<Animated.View style={{  width: isExpanded ? 200 : 100,  transitionProperty: 'width',  transitionDuration: '300ms',  transitionTimingFunction: 'ease-in-out',}} />

Multiple properties: transitionProperty: ['width', 'opacity', 'transform'] with matching transitionDuration: ['300ms', '200ms', '500ms'].

For detailed CSS animations/transitions reference (keyframes, timing functions, examples), read references/css-animations-detailed.md.

Shared Element Transitions (Experimental)

Animate components between screens during navigation:

// Screen A<Animated.Image sharedTransitionTag={`photo-${id}`} source={...} />
// Screen B (same tag)<Animated.Image sharedTransitionTag={`photo-${id}`} source={...} />

Requires @react-navigation/native-stack and feature flag. For setup and customization, read references/shared-element-transitions.md.

Gesture Integration

For drag, pinch, fling, and other gesture-driven animations, read references/gesture-patterns.md.

Requires: react-native-gesture-handler + <GestureHandlerRootView> at app root.

Full API Reference

For complete hook signatures, animation parameters, v3↔v4 differences, and advanced APIs, read references/api-reference.md.

Worklets & Advanced APIs

For understanding worklets, 'worklet' directive, runOnJS/runOnUI, useAnimatedReaction, useFrameCallback, measure, dispatchCommand, and performance tips, read references/worklets-advanced.md.

Real-World Component Patterns

For full implementations of accordion, bottom sheet, flip card, and FAB, read references/component-patterns.md.

Testing, Colors & Supported Properties

For testing animations with Jest, animating colors with interpolateColor, and the full list of animatable properties by platform, read references/testing-and-properties.md.

Rules

• Always use Animated.View/Text/Image/ScrollView/FlatList — never animate plain RN components
• v4: use runOnJS/runOnUI (re-exported), or import scheduleOnRN/scheduleOnUI from react-native-worklets
• v3: use runOnJS(fn)() for heavy JS-thread logic
• Always use Extrapolation.CLAMP with interpolate unless you explicitly want extrapolation
• Combine: withSequence(withTiming(1.2, {duration: 100}), withSpring(1))
• Use useReducedMotion() to respect accessibility settings
• Test on real devices — simulator performance differs significantly
• v4: useAnimatedKeyboard is deprecated → use react-native-keyboard-controller

Based on react-native-reanimated by Software Mansion (MIT License)