interpolate

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.

Exercise 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 }} />.

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

interpolate call

const top = fade.interpolate({ inputRange: [0, 1], ____: [0, 100] });

Show answer

const top = fade.interpolate({ inputRange: [0, 1], outputRange: [0, 100] });

Match the interpolate concepts

interpolate

Maps range
inputRange

Input range
outputRange

Output range
fade

Animated value
What is interpolate for?
- Creates a new value
- Maps a value to another range
- Stops the animation
- Removes the component
Show answer

Maps a value to another range — interpolate maps a value to another range.

Next lesson: Summary - Animated

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies