Summary - Animated
- React Native course
- Intermediate
- Lesson 75/116
- 5 min
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.
Practice 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.
Starter code
import React from 'react';
import { Animated } from 'react-native';
export default function FadeIn() {
// Create an Animated.Value, take it to 1 with timing, return an Animated.View
return null;
}Sample 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 }} />;
}Practice Derive top with interpolate
Derive top from fade (inputRange: [0, 1], outputRange: [0, 100]) and return <Animated.View style={{ top }} />.
Starter code
import React from 'react';
import { Animated } from 'react-native';
export default function Move() {
const fade = useRef(new Animated.Value(0)).current;
// Derive top from fade and return an Animated.View
return null;
}Sample 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 }} />;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is useNativeDriver for?
- Stops the animation
- Creates a new value
- Moves the animation to the native side Correct answer
- Changes color
Explanation: useNativeDriver moves the animation to the native side.
2 Animated summary
| Term | Meaning |
|---|---|
Animated.Value |
Animation number |
Animated.View |
Animated component |
timing |
Timed animation |
interpolate |
Maps range |