O'Reilly logo

React Native - Building Mobile Apps with JavaScript by Vladimir Novick

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Extrapolation

Sometimes, you will see that interpolation is not working as expected. This can happen because when interpolating values, they can extend beyond the input range. When setting interpolation, by default, it will extrapolate the curve beyond the given range, but you can also clamp the output value by setting the extrapolate option.

So, now, probably you are asking yourself what does that mean.

Consider this code:

const slideAnim = this.state.animatedValue.interpolate({ inputRange: [0, .5], outputRange: [0, 50]})

Note that my inputRange is 0 to 0.5, whereas animatedValue goes from 0 to 1. Sometimes, I want to interpolate only parts of inputRange. When rendering the component later on, I will do the following:

style={[styles.item, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required