0PricingLogin▼
React Native Academy · Lesson

Animated.Value and Animated.View

Create an Animated.Value, drive it with Animated.timing, and connect it to the style prop of an Animated.View to animate opacity on mount.

What Is the Animated API?

The Animated API is React Native's built-in library for creating smooth, performant animations. It works by tracking special animated values that can be driven by timing or physics engines and then connected to component style properties. Unlike CSS transitions on the web, React Native animations are expressed entirely in JavaScript but can be offloaded to native threads for performance.

The Animated API ships with every React Native installation — no extra packages needed. You import it directly from react-native.

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

Creating an Animated.Value

The core primitive is Animated.Value, which holds a numeric value that can change over time. You create one with new Animated.Value(initialValue) and store it in a ref so it persists across renders without triggering re-renders itself.

Using useRef is the recommended pattern because the animated value is mutable — you want the same object throughout the component's lifecycle. Initializing inside useState would create a new value on every render.

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

function MyComponent() {
  const opacity = useRef(new Animated.Value(0)).current;
  // opacity is an Animated.Value starting at 0
}

All lessons in this course

  1. Animated.Value and Animated.View
  2. Spring and Decay Animations
  3. Animating Multiple Properties in Parallel and Sequence
  4. useNativeDriver for 60fps Animations
← Back to React Native Academy