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:

Animating image to rotate in react native

For more information on animation in react native go here.

2 thoughts on “How to Make an Image Rotate with Animation in React Native”

  1. Pingback: How to Rotate an Image in React Native - REACT NATIVE FOR YOU

  2. Pingback: React Native Animation Tutorial Series (Part 7): React Native Interpolation Example - REACT NATIVE FOR YOU

Leave a Reply

%d bloggers like this: