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, ...

Get React Native - Building Mobile Apps with JavaScript now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.