This article will provide example of how to maintain aspect ratio of image with full width in react native. if you want to see example of maintain aspect ratio of image with full width in react native then you are a right place. if you want to see example of how to get aspect ratio of image react native code example then you are a right place. you will learn react native image aspect ratio example.

In this example,We will set full image to mobile screen auto in react native.we set the height to undefined to keep the aspect ratio and set the aspectRatio property to set the aspect ratio of the image.The complete example below shows you how to do that.

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

expo init ExampleApp

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

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

export default function App() {
    const win = Dimensions.get('window');
    const ratio = win.width / 200;
    return (
      <View style={styles.container}>
        <Image
        style={styles.img}
        source={require('./assets/tree.jpg')}
        />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  
  img: {
    width: '100%',
    height: undefined,
    aspectRatio: 135 / 76,
  }
});

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

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you...