How to Rotate an Image in React Native

If you have an image in your react native app and you want to rotate the image to some degree 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 the transform style 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.

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.