How to Show Image Aspect Ratio 2/3 in React Native?

Jan 03, 2023 . Admin

In this react native example, I will show you images in a 2/3 aspect ratio. The 2/3 aspect ratio is generally used to display images in portrait size.

We must define the height and width while using the Image component. The trick is to define the height as undefined. Then provide your preferred aspect ratio to the style prop aspectRatio. See the code snippet given below.

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={{
          uri: 'https://cdn.pixabay.com/photo/2022/03/20/15/40/nature-7081138_1280.jpg',
        }}
        />
      </View>
    );
}

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

Step 3: Run Project

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