Animated.Value
- React Native course
- Intermediate
- Lesson 70/116
- 5 min
Learn animation values with Animated.Value.
Animated.Value
Animated.Value holds a number that changes during an animation. It is not updated with setState like ordinary state; instead it is updated through the Animated API. This lets the value update locally instead of re-rendering every frame.
To create a value: new Animated.Value(0). It is usually created once with useRef so it is not recreated on every render. The value is the building block of animations.
Value in a useRef
We create an Animated.Value inside a useRef: const fade = useRef(new Animated.Value(0)).current. We reach the value with .current; this value stays the same across renders.
It is not called again on every update like state; the animation stays smooth. To change the value we use methods like Animated.timing; we never assign it directly.
Practice Create an Animated.Value and log it
Create an Animated.Value: const fade = useRef(new Animated.Value(0)).current. Then add console.log(fade).
Starter code
import React from 'react';
import { Animated, View } from 'react-native';
export default function Fade() {
// Create an Animated.Value and log it
return <View />;
}Sample solution
import React, { useRef } from 'react';
import { Animated, View } from 'react-native';
export default function Fade() {
const fade = useRef(new Animated.Value(0)).current;
console.log(fade);
return <View />;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Why is Animated.Value kept in a useRef?
- So it resets on every render
- So it is not recreated on every render Correct answer
- It is required for styling
- FlatList requires it
Explanation: useRef prevents the value from being recreated on every render.
2 Create an Animated.Value
const fade = useRef(new ____(0)).current;const fade = useRef(new Animated.Value(0)).current;Explanation: new Animated.Value(0) creates a value starting at zero.
3 Animated.Value concepts
| Term | Meaning |
|---|---|
Animated.Value |
Animation number |
useRef |
Keeps the value |
new |
Creates the value |
.current |
Reaches the value |