Animated.timing
- React Native course
- Intermediate
- Lesson 72/116
- 5 min
Learn timing animations with Animated.timing.
Animated.timing
Animated.timing takes an Animated.Value to a target value over a set time. duration is milliseconds, toValue is the target number. Then .start() is called to begin the animation.
Example: Animated.timing(fade, { toValue: 1, duration: 1000, useNativeDriver: true }).start(). useNativeDriver moves the animation to the native side, so it stays smooth. It supports only opacity and transform.
duration and useNativeDriver
duration is the animation time in milliseconds; a larger value means a slower animation, a smaller value a faster one. toValue is the final number the value reaches.
useNativeDriver: true moves the animation to the native side and keeps it smooth. But only native properties like opacity and transform are supported; values like backgroundColor are not.
Practice Add a timing animation
Use Animated.timing to take fade to 1 over 1000 ms. Use useNativeDriver: true and call .start().
Starter code
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Fade() {
const fade = useRef(new Animated.Value(0)).current;
// Take fade to 1 over 1000 ms
return <Animated.View style={{ opacity: fade }} />;
}Sample solution
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Fade() {
const fade = useRef(new Animated.Value(0)).current;
Animated.timing(fade, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start();
return <Animated.View style={{ opacity: fade }} />;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the timing concepts
| Term | Meaning |
|---|---|
timing |
Timed animation |
duration |
Milliseconds |
toValue |
Target number |
start |
Begins it |
2 What does Animated.timing do?
- Removes the component
- Changes the value instantly
- Creates a new value
- Takes the value to the target over time Correct answer
Explanation: timing takes the value to the target over time.
3 Write the timing call
Animated.timing(fade, { toValue: 1, duration: 1000, ____: true }).start();Animated.timing(fade, { toValue: 1, duration: 1000, useNativeDriver: true }).start();Explanation: true moves the animation to the native side.