Summary - Animated

Combine Animated.Value, timing and interpolate to write a sliding card.

Summary - Animated

The building blocks of the Animated API are: Animated.Value for the animated number, Animated.View for the animated component, Animated.timing for timed animation, Animated.spring for physics animation and interpolate for range mapping.

Create the value once with useRef, bind it to an Animated.View style, and update it with timing or spring. useNativeDriver: true is required for smoothness. With interpolate a single value can drive several properties.

Exercise Fade-in with timing

Create an Animated.Value, use Animated.timing to take it to 1 over 1000 ms, and return <Animated.View style={{ opacity: fade }} />. Use useNativeDriver: true.

Show example solution

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

export default function FadeIn() {
  const fade = useRef(new Animated.Value(0)).current;
  Animated.timing(fade, {
    toValue: 1,
    duration: 1000,
    useNativeDriver: true,
  }).start();
  return <Animated.View style={{ opacity: fade }} />;
}

Exercise Derive top with interpolate

Derive top from fade (inputRange: [0, 1], outputRange: [0, 100]) and return <Animated.View style={{ top }} />.

Show example solution

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

export default function Move() {
  const fade = useRef(new Animated.Value(0)).current;
  const top = fade.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 100],
  });
  return <Animated.View style={{ top }} />;
}

Test yourself

What is useNativeDriver for?
- Stops the animation
- Creates a new value
- Moves the animation to the native side
- Changes color
Show answer

Moves the animation to the native side — useNativeDriver moves the animation to the native side.
Animated summary

Animated.Value

Animation number
Animated.View

Animated component
timing

Timed animation
interpolate

Maps range

Next lesson: PanResponder

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies