Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Animate Rotation with React Native Interpolate

    react-nativeReact Native
    0.35 - 0.39

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



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    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 0Next, 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 0degrees 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 0radians 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.