Sometimes, we want to fit an Image to the full width of the screen and maintain aspect ratio with React Native.

In this article, we’ll look at how to fit an Image to the full width of the screen and maintain aspect ratio with React Native.

How to fit an Image to the full width of the screen and maintain aspect ratio with React Native?

To fit an Image to the full width of the screen and maintain aspect ratio with React Native, we can set the width to null and the height to the height we want.

For instance, we write:

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

export default function App() {
  return (
    <View>
      <Image
        style={{
          height: 300,
          flex: 1,
          width: null,
        }}
        source={{ uri: 'https://picsum.photos/200/100' }}
      />
    </View>
  );
}

to set the height of the Image to 300 and the width to null to fit the Image to make the width flexible and maintain aspect ratio.

We set flex to 1 to make stretch the Image to the width of the screen.

Conclusion

To fit an Image to the full width of the screen and maintain aspect ratio with React Native, we can set the width to null and the height to the height we want.