How to make image width 100 percent and vertical top with React Native?

Sometimes, we want to make image width 100 percent and vertical top with React Native.

In this article, we’ll look at how to make image width 100 percent and vertical top with React Native.

How to make image width 100 percent and vertical top with React Native?

To make image width 100 percent and vertical top with React Native, we can calculate the width and height of the image.

For instance, we write:

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

export default function App() {
  const dimensions = Dimensions.get('window');
  const imageHeight = Math.round((dimensions.width * 9) / 16);
  const imageWidth = dimensions.width;

  return (
    <View>
      <Image
        style={{ height: imageHeight, width: imageWidth }}
        source={{ uri: 'https://picsum.photos/200/300' }}
      />
    </View>
  );
}

to call Dimensions.get with 'window' to get the screen dimensions.

Then we set the imageHeight and imageWidth according to the screen dimensions.

We scale the imageHeight to keep the 16:9 aspect ratio for the image.

Conclusion

To make image width 100 percent and vertical top with React Native, we can calculate the width and height of the image.