Animated.timing

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.

Exercise Add a timing animation

Use Animated.timing to take fade to 1 over 1000 ms. Use useNativeDriver: true and call .start().

Show example 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 }} />;
}

Test yourself

Match the timing concepts

timing

Timed animation
duration

Milliseconds
toValue

Target number
start

Begins it
What does Animated.timing do?
- Removes the component
- Changes the value instantly
- Creates a new value
- Takes the value to the target over time
Show answer

Takes the value to the target over time — timing takes the value to the target over time.

Write the timing call

Animated.timing(fade, { toValue: 1, duration: 1000, ____: true }).start();

Show answer

Animated.timing(fade, { toValue: 1, duration: 1000, useNativeDriver: true }).start();

Next lesson: Animated.spring

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies