Image Resizing to Fit on Screen in React Native

In React Native, we have some methods to resize the image to fit entirely on the screen.
The tag, by default, uses the resize mode to be “cover”.

If we want to achieve the image to fit on the screen without any area being cropped, then we can use the resize mode “contain”.

Here is how you can do this:

Instead of giving some random value for the height and width, You can use the “Dimensions” method from React Native, which gives you access to the height and width of the device.

import {Dimensions, Image} from 'react-native';

Now inside your component

const dimensions = Dimensions.get('window');   
const imageWidth = dimensions.width;
const imageHeight = dimensions.height;


return (
   <Image
     style={{height: imageHeight, width: imageWidth}}
     resizeMode="contain"
     source={{
       uri: 'https://asia.olympus-imaging.com/content/000107506.jpg',
     }}
   />
 );

if you want to set the image to take the whole screen area, you can use the

resizeMode="cover"

or you can remove the resizeMode tag as by default the image takes the resizeMode to be cover.

For More Information: Image in React Native