React Native Image Rotate Example

Aug 17, 2022 . Admin

Today, I will let you know example of react native image rotate 90. This article goes in detailed on react native image opacity example. This article will give you simple example of react native rotate background image. if you want to see example of How to rotate base 64 image then you are a right place.

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.

In this example,we will rotate image in react native.we will add to css 'transform: [{ rotate: '90deg' }]' to image rotate 90 degree you can display to mobile app.let's below example.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: App.js

In this step, You will open the App.js file and put the code.

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

export default function App() {

    return (
      <View style={styles.container}>
        <Image
        style={styles.img}
        source={require('./assets/images.jpeg')}
      	/>
      </View>
    );
}

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

Step 3: Run Project

In the last step run your project using the below command.