creating-reanimated-animations

name	creating-reanimated-animations
description	Generate React Native Reanimated animation code for React Native apps. Use when user asks to create, implement, or add animations in React Native — including transitions, gestures, scroll-linked effects, layout animations, layout transitions, entering/exiting animations, CSS animations, CSS transitions, shared element transitions, color animations, parallax, fade, slide, scale, spring, timing, decay, keyframes, worklets, accordion, bottom sheet, flip card, collapsing header, or any motion effect using react-native-reanimated. Also use for integrating react-native-gesture-handler with Reanimated, understanding worklets, animating between screens, testing animations with Jest, or checking which properties are animatable. Use when this capability is needed.
metadata	{"author":"estevg"}

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

User wants	Function	Key params
Smooth fixed-duration transition	withTiming(to, {duration, easing})	Default: 300ms, Easing.inOut(Easing.quad)
Natural bouncy feel	withSpring(to, {mass, damping, stiffness})	Default: mass=1, damping=10, stiffness=100
Momentum after fling	withDecay({velocity, clamp})	Needs initial velocity from gesture
Clamp spring range	withClamp({min, max}, withSpring(to))	v4: limits spring overshoot
Loop/pulse/shake	withRepeat(anim, reps, reverse)	reps=0 for infinite (v4), reps=-1 (v3)
Multi-step choreography	withSequence(anim1, anim2, ...)	Runs in order
Delayed start	withDelay(ms, anim)	Delays any animation

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)

---

Converted and distributed by TomeVault — claim your Tome and manage your conversions.