How to Make an Image Rotate with Animation in React Native

In this React Native tutorial, I show you how to rotate an image continuously in React Native. For Animation, we have to use the Animated library from React Native.

In useEffect hook, Animated.loop is used to continue the animation as a loop. We also set Animated.Value as 0 in the state.

Animated.timing is used to animate a value over time using easing functions. The duration of animation and easing type are given here. Setting useNativeDriver to be true makes your animation smooth on the Android platforms as well as the iOS platform.

I have also used interpolate function to map the input range to different output ranges. Animated.Image makes a football spinning indefinitely in the code given below.

import React, {useState, useEffect} from 'react';
import {View, Animated, Easing} from 'react-native';

const App = () => {
  const [spinAnim, setSpinAnim] = useState(new Animated.Value(0));
  const spin = spinAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  useEffect(() => {
    Animated.loop(
      Animated.timing(spinAnim, {
        toValue: 1,
        duration: 3000,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
    ).start();
  });

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Animated.Image
        style={{height: 100, width: 100, transform: [{rotate: spin}]}}
        source={{
          uri: 'https://cdn.pixabay.com/photo/2013/07/13/10/51/football-157930_960_720.png',
        }}
      />
    </View>
  );
};

export default App;

The output is shown below:

For more information on animation in react native go here.