As of React Native ~.40 an updated version of the Yoga layout engine was added. This allowed for % based layout values to be used. These will only work for width/height but will not work for things like borderRadius, etc.

Thanks to interpolate being smart enough to detect a generic number + character format it can handle interpolating percentages out of the box.

This is great for things like progress bars or when you need to interpolate a 0-1 value to 0%-100% and do not necessarily want, or can't measure the size of the layout to animate a width/height point values.

An example interpolate would be

this.state.animation.interpolate({
  inputRange: [0, 1],
  outputRange: ["0%", "100%"],
});

We can interpolate on our 0=>1 and map it to the range of 0% to 100%.

Live Demo