How to Make an Image Rotate with Animation in React Native

Last Updated on December 13, 2020.

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

In the componentDidMount lifecycle 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 in Android platform as well as iOS platform.

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

Class based component

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

export default class webviewWithLoading extends Component {
  constructor(props) {
    super(props);
    this.state = { spinAnim: new Animated.Value(0) }
  }

 componentDidMount(){
 Animated.loop(Animated.timing(
    this.state.spinAnim,
  {
    toValue: 1,
    duration: 3000,
    easing: Easing.linear,
    useNativeDriver: true
  }
)).start();
 }

  render() {
    const spin = this.state.spinAnim.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg']
    });
    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>
    );
  }
}

Function based component

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 ouput is shown below:

For more information on animation in react native go here.