Web Designing World | Logo

Rotate Image View Using Animation

Hello Guyz! How are you? Hope you are doing well! so here i am gonna show you how you make a React Native Rotate Image View Using anim

This is an example of React Native Rotate Image View Using Animation. We are using the property of Animated Component from react-native.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command-line utility. Open the terminal and go to the workspace and run.

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the –version argument:

react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

Open App.js in any code editor and replace the code with the following code.


/*This is an Example of React Native Rotate Image View Using Animation*/
import React from 'react';
//import react in our project
import { StyleSheet, View, Animated, Image, Easing } from 'react-native';
//import all the components we needed
export default class App extends React.Component {
  constructor() {
    this.RotateValueHolder = new Animated.Value(0);
  componentDidMount() {
  StartImageRotateFunction() {
    Animated.timing(this.RotateValueHolder, {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear,
    }).start(() => this.StartImageRotateFunction());
  render() {
    const RotateData = this.RotateValueHolder.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg'],
    return (
      <View style={styles.container}>
            width: 200,
            height: 200,
            transform: [{ rotate: RotateData }],

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#C2C2C2',

Tags :

Website Designing Company in Delhi || Magento Development Company

React Native Navigation React Native Navigation Drawer React Native Bottom Navigation Build a News Mobile App with Ionic 5 & React

website designing company in rohini

Leave a Reply

Your email address will not be published. Required fields are marked *