React Native Animation Tutorial Series (Part 7): React Native Interpolation Example

Last Updated on December 15, 2020.

React Native animation tutorials cannot be completed without learning interpolation. Interpolation helps you to create good animations by mapping input ranges to output ranges. It gives you a fine control on what output should be attained when a specific input value is fed.

For example, this is how you use the interpolate method.

value.interpolate({
  inputRange: [0, 50, 100],
  outputRange: [0, 0.75, 1],
});

What this means is when the input value is 0, then the output is also 0. But when the input reaches value 50, the output value becomes 0.75. And when the input value is 100 and the output reaches 1.

For more understanding, let’s take a react native animation example where a square view moves across the y-axis and the opacity of the square also changes. What we do is the values of opacity are mapped to the values of the movement of the square using interpolate.

First, we declare values of the opacity using state.

 this.state = {
      startValue: new Animated.Value(0),
      endValue: 1,
      duration: 5000,
    };

We use Animated.timing() method to initiate the Animation.

 Animated.timing(this.state.startValue, {
      toValue: this.state.endValue,
      duration: this.state.duration,
      useNativeDriver: true,
    }).start();

Next is to interpolate values so that the input range of the opacity is mapped to the input range of the transform.

<Animated.View
          style={[
            styles.square,
            {
              opacity: this.state.startValue,
              transform: [
                {
                  translateY: this.state.startValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [150, 0],
                    extrapolate: 'clamp',
                  }),
                },
              ],
            },
          ]}
        />

When the opacity is 0, the Y coordinate value will be 150. When the opacity becomes 1, the Y coordinate would become 0.

Following is the full animation example of react native interpolation.

Class Component

import React, {Component} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

export default class FadeIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startValue: new Animated.Value(0),
      endValue: 1,
      duration: 5000,
    };
  }

  componentDidMount() {
    Animated.timing(this.state.startValue, {
      toValue: this.state.endValue,
      duration: this.state.duration,
      useNativeDriver: true,
    }).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.View
          style={[
            styles.square,
            {
              opacity: this.state.startValue,
              transform: [
                {
                  translateY: this.state.startValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [150, 0], // 0 : 150, 0.5 : 75, 1 : 0
                    extrapolate: 'clamp',
                  }),
                },
              ],
            },
          ]}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  square: {
    height: 50,
    width: 50,
    backgroundColor: 'green',
  },
});

Function Component

import React, {useEffect} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

const FadeIn = () => {
  const startValue = new Animated.Value(0);
  const endValue = 1;
  const duration = 5000;

  useEffect(() => {
    Animated.timing(startValue, {
      toValue: endValue,
      duration: duration,
      useNativeDriver: true,
    }).start();
  }, [startValue, endValue, duration]);

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.square,
          {
            opacity: startValue,
            transform: [
              {
                translateY: startValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [150, 0], // 0 : 150, 0.5 : 75, 1 : 0
                  extrapolate: 'clamp',
                }),
              },
            ],
          },
        ]}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  square: {
    height: 50,
    width: 50,
    backgroundColor: 'green',
  },
});

export default FadeIn;

And here’s the output:

react native interpolation animation example

The interpolate method can also be used in rotating animations.

You can get the source code of all my animation examples given in this tutorial series from this Github repository.

Buy Me A Coffee

Leave a Reply

%d bloggers like this: