How to maintain aspect ratio of image with full width in React Native?

Sometimes, we want to maintain aspect ratio of image with full width in React Native.

In this article, we’ll look at how to maintain aspect ratio of image with full width in React Native.

How to maintain aspect ratio of image with full width in React Native?

To maintain aspect ratio of image with full width in React Native, we can set the aspectRatio style property.

For instance, we write:

import * as React from 'react';
import { ScrollView, View, Image } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
import { Dimensions } from 'react-native';

export default function App() {
  const win = Dimensions.get('window');
  const ratio = win.width / 200;

  return (
    <View>
      <Image
        source="https://picsum.photos/200/300"
        style={{
          width: '100%',
          height: undefined,
          aspectRatio: 135 / 76,
        }}
      />
    </View>
  );
}

to add an Image with the width set to '100%'.

And we set the height to undefined to keep the aspect ratio and set the aspectRatio property to set the aspect ratio of the image.

Conclusion

To maintain aspect ratio of image with full width in React Native, we can set the aspectRatio style property.