Skip to main content
The Animated library provides a comprehensive set of APIs for creating fluid, high-performance animations. It can animate various values over time using different easing functions and supports running animations on the native thread for optimal performance.

​
Import

import { Animated } from 'react-native';

​
Core Concepts

​
Animated Values

Animated values are special objects that drive animations:
  • Animated.Value: Animates a single number
  • Animated.ValueXY: Animates a vector with x and y coordinates
  • Animated.Color: Animates color values

​
Animated Components

Use animated versions of components to apply animations:
  • Animated.View
  • Animated.Text
  • Animated.Image
  • Animated.ScrollView
  • Animated.FlatList
  • Animated.SectionList

​
Animation Types

​
timing()

Animates a value over time using an easing curve. 
Animated.timing(animatedValue, config).start();
​
animatedValue
Animated.Value
required
The animated value to animate.
​
config
TimingAnimationConfig
required
Configuration object:
  • toValue (number | Animated.Value): Target value
  • duration (number): Animation duration in milliseconds (default: 500)
  • easing (function): Easing function (default: Easing.inOut(Easing.ease))
  • delay (number): Delay before starting animation in milliseconds
  • useNativeDriver (boolean): Use native animation driver for better performance
Returns: CompositeAnimation with start(), stop(), and reset() methods.

​
spring()

Creates a spring-based animation using physical spring model. 
Animated.spring(animatedValue, config).start();
​
animatedValue
Animated.Value
required
The animated value to animate.
​
config
SpringAnimationConfig
required
Configuration object:
  • toValue (number | Animated.Value): Target value
  • friction (number): Spring friction (default: 7)
  • tension (number): Spring tension (default: 40)
  • speed (number): Animation speed
  • bounciness (number): Bounciness of the spring
  • delay (number): Delay before starting
  • useNativeDriver (boolean): Use native driver

​
decay()

Starts an animation with an initial velocity that gradually slows down. 
Animated.decay(animatedValue, config).start();
​
animatedValue
Animated.Value
required
The animated value to animate.
​
config
DecayAnimationConfig
required
Configuration object:
  • velocity (number): Initial velocity
  • deceleration (number): Rate of decay (default: 0.997)
  • useNativeDriver (boolean): Use native driver

​
Composition Methods

​
parallel()

Runs multiple animations at the same time. 
Animated.parallel([animation1, animation2]).start();
​
animations
CompositeAnimation[]
required
Array of animations to run in parallel.
​
config
object
  • stopTogether (boolean): If true, all animations stop when one stops (default: true)

​
sequence()

Runs animations in order, waiting for each to complete before starting the next. 
Animated.sequence([animation1, animation2]).start();

​
delay()

Creates a delay before starting the next animation. 
Animated.delay(milliseconds);

​
stagger()

Starts animations in sequence with specified delay between each. 
Animated.stagger(delay, [animation1, animation2]).start();
​
delay
number
required
Delay in milliseconds between starting each animation.

​
loop()

Repeats an animation indefinitely or a specified number of times. 
Animated.loop(animation, { iterations: 3 }).start();
​
animation
CompositeAnimation
required
The animation to loop.
​
config
object
  • iterations (number): Number of times to loop (-1 for infinite, default: -1)
  • resetBeforeIteration (boolean): Reset animation before each iteration (default: true)

​
Interpolation

Map input ranges to output ranges for complex animations. 
const opacity = animatedValue.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 1],
});
​
config
object
required
  • inputRange (number[]): Input value range
  • outputRange (number[] | string[]): Output value range
  • extrapolate (string): How to handle values outside range (‘extend’ | ‘clamp’ | ‘identity’)
  • extrapolateLeft (string): Extrapolation for left side
  • extrapolateRight (string): Extrapolation for right side

​
Math Operations

Combine animated values with math operations:
  • Animated.add(a, b)
  • Animated.subtract(a, b)
  • Animated.multiply(a, b)
  • Animated.divide(a, b)
  • Animated.modulo(a, modulus)
  • Animated.diffClamp(a, min, max)

​
Examples

​
Simple Fade In

import React, { useRef, useEffect } from 'react';
import { Animated, View } from 'react-native';

const FadeInView = ({ children }) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  }, [fadeAnim]);

  return (
    <Animated.View style={{ opacity: fadeAnim }}>
      {children}
    </Animated.View>
  );
};

​
Spring Animation

const scaleValue = useRef(new Animated.Value(1)).current;

const onPress = () => {
  Animated.spring(scaleValue, {
    toValue: 1.5,
    friction: 3,
    tension: 40,
    useNativeDriver: true,
  }).start();
};

<Animated.View style={{ transform: [{ scale: scaleValue }] }}>
  <TouchableOpacity onPress={onPress}>
    <Text>Press Me</Text>
  </TouchableOpacity>
</Animated.View>

​
Parallel Animations

const fadeAnim = useRef(new Animated.Value(0)).current;
const slideAnim = useRef(new Animated.Value(-100)).current;

useEffect(() => {
  Animated.parallel([
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true,
    }),
    Animated.timing(slideAnim, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true,
    }),
  ]).start();
}, []);

<Animated.View
  style={{
    opacity: fadeAnim,
    transform: [{ translateY: slideAnim }],
  }}
>
  <Text>Animated Content</Text>
</Animated.View>

​
Sequence Animation

const position = useRef(new Animated.Value(0)).current;

const startAnimation = () => {
  Animated.sequence([
    Animated.timing(position, {
      toValue: 100,
      duration: 500,
      useNativeDriver: true,
    }),
    Animated.delay(500),
    Animated.timing(position, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true,
    }),
  ]).start();
};

​
Interpolation Example

const scrollY = useRef(new Animated.Value(0)).current;

const headerOpacity = scrollY.interpolate({
  inputRange: [0, 100],
  outputRange: [1, 0],
  extrapolate: 'clamp',
});

const headerHeight = scrollY.interpolate({
  inputRange: [0, 100],
  outputRange: [80, 50],
  extrapolate: 'clamp',
});

<Animated.View
  style={{
    height: headerHeight,
    opacity: headerOpacity,
  }}
>
  <Text>Animated Header</Text>
</Animated.View>

​
Loop Animation

const rotateValue = useRef(new Animated.Value(0)).current;

useEffect(() => {
  Animated.loop(
    Animated.timing(rotateValue, {
      toValue: 1,
      duration: 2000,
      useNativeDriver: true,
    }),
  ).start();
}, []);

const rotate = rotateValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

<Animated.View style={{ transform: [{ rotate }] }}>
  <Text>🔄</Text>
</Animated.View>

​
Creating Custom Animated Components

import { Animated } from 'react-native';
import MyCustomComponent from './MyCustomComponent';

const AnimatedCustomComponent = Animated.createAnimatedComponent(MyCustomComponent);

<AnimatedCustomComponent style={{ opacity: fadeAnim }} />

​
Easing Functions

Use the Easing module for animation curves: 
import { Easing } from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.bezier(0.42, 0, 0.58, 1),
  useNativeDriver: true,
}).start();
Common easing functions:
  • Easing.linear
  • Easing.ease
  • Easing.quad
  • Easing.cubic
  • Easing.bezier(x1, y1, x2, y2)
  • Easing.in(easing)
  • Easing.out(easing)
  • Easing.inOut(easing)

​
Performance Tips

Always use useNativeDriver: true when animating transform and opacity for significantly better performance.
useNativeDriver cannot be used for animating layout properties like width, height, margin, or padding.
Avoid creating new Animated.Value instances on every render. Use useRef to persist values across renders.

Build docs developers (and LLMs) love

Get started for freeTalk to us