interpolate
- React Native course
- Intermediate
- Lesson 74/116
- 5 min
Learn value ranges with interpolate.
interpolate
interpolate maps an Animated.Value to another range. For example it can map a 0-1 value to a 0-100 position, or a 0-1 opacity to a reversed 1-0 opacity.
Usage: fade.interpolate({ inputRange: [0, 1], outputRange: [0, 100] }). inputRange is the input range of the value, outputRange is the output range. A single value can then drive several properties.
inputRange and outputRange
inputRange is an array of increasing numbers: [0, 1]. outputRange is an array of the same length: [0, 100]. When the value is 0 the output is 0; when the value is 1 the output is 100.
You can also reverse the ranges: inputRange: [0, 1], outputRange: [1, 0] makes the output decrease as the value grows. This suits effects like fading out as you scroll.
Practice Derive a top value with interpolate
Derive top from fade: const top = fade.interpolate({ inputRange: [0, 1], outputRange: [0, 100] }). Then return <Animated.View style={{ top }} />.
Starter code
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Move() {
const fade = useRef(new Animated.Value(0)).current;
// Derive a top value 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 interpolate call
const top = fade.interpolate({ inputRange: [0, 1], ____: [0, 100] });const top = fade.interpolate({ inputRange: [0, 1], outputRange: [0, 100] });Explanation: outputRange sets the output range.
2 Match the interpolate concepts
| Term | Meaning |
|---|---|
interpolate |
Maps range |
inputRange |
Input range |
outputRange |
Output range |
fade |
Animated value |
3 What is interpolate for?
- Creates a new value
- Maps a value to another range Correct answer
- Stops the animation
- Removes the component
Explanation: interpolate maps a value to another range.