How to Rotate an Image in React Native

Last Updated on December 10, 2020.

You have an image in your react native app and you want to rotate the image to some degrees using code, then you are at the right destination. This blog post teaches you how to tilt or rotate an image in react native.

If you are looking for how to rotate an image with animation, then I have already written about it here. I have an image- the fish given below, I will tilt the image to 90 degrees using StyleSheet in react native.

What a cute fish it is! I took this image from Pixabay. You can use transform property to rotate this image. If you want to rotate 45 an image to degrees then you have to use transform as –transform: [{ rotate: ’40deg’ }]

The following react native example has the above image which is rotated to 90 degrees.

Class based component


import React, { Component } from 'react';
import { View, Image, StyleSheet } from 'react-native';


class Home extends Component {

    constructor(props){
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <Image style={styles.image} 
                source={{uri: 'https://cdn.pixabay.com/photo/2018/05/21/12/49/clipart-3418189_960_720.png'}}/>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    image: {
        height: 180,
        width: 200,
        transform: [{ rotate: '90deg' }]
    }
});


export default Home;

Function based component

import React from 'react';
import {StyleSheet, Image, View} from 'react-native';

const Home = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source={{
          uri:
            'https://cdn.pixabay.com/photo/2018/05/21/12/49/clipart-3418189_960_720.png',
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  image: {
    height: 180,
    width: 200,
    transform: [{rotate: '90deg'}],
  },
});

export default Home;

I hope this blog post helped you. Have any doubts? let me know through the comment section.

Leave a Reply

%d bloggers like this: