This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Animate Rotation with React Native Interpolate

1:52 React lesson by

By using the interpolate function, the Animated.View can be rotated using both degrees and radians.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

By using the interpolate function, the Animated.View can be rotated using both degrees and radians.

We'll start by importing Animated from React Native. Next, we'll create a componentWillMount life cycle method, then type this.animatedValue = new Animated.Value, and we'll give it a default value of 0. Next, we'll setup a variable called interpolateRotation, and we'll assign it this.animatedValue.interpolate which is a function that takes a configuration object.

It takes an input range, and we'll say it's from zero and ends at one, and an output range, we'll say it goes from 0 degrees to 360 degrees, for a full rotation. We'll look at another variable, which will be our animatedStyle, we'll assign it an object, we'll give it a property of transform, which is an array, which will take multiple transforms, but we'll use rotate, and we'll pass in our interpolateRotation.

Now, we'll change our box view from a regular view to an animated.View, and we'll give it our new style. Now, we'll create a componentDidMount life cycle method, we'll call it animated.timing, which is a function that takes an animated value, and a configuration object, we'll animate to 1 over the course of 1500 milliseconds.

We'll call start on our animation, and now when we refresh our emulator, we can see that it took 1500 milliseconds to do a complete rotation. The output range can be anything. If we change this from 360 to 720, and refreshed our emulator, we can see that it did two complete spins. We can animate more than just degrees. We can also animate radians. We'll change our start from 0 radians to 10 radians, with each radian is about 57 degrees, so it will animate to 570 degrees. We'll refresh and see that it's spun to 570 degrees.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?