React Native Image Resizemode works properly in two conditions –

Condition 1: ResizeMode as Style property

When image source is remote –

image: {
     aspectRatio: 1, 
     flex: 1, 
     maxWidth: 300, 
     resizeMode: 'contain',
}
image: {
     width: '100%', 
     height: 300, 
     resizeMode: 'contain'
}

Condition 2: ResizeMode as component props

When image source is local

<Image
     resizeMode={'contain'}
     style={{flex: 1, height: undefined, width: undefined}}
     source={require('/path/to/local/image')}
 />

React Native Image Resizemode is pretty confusing in react native official documents, especially in case of remote images. But, if you take care of few concepts, react native turns out to be very handy and easy to use.

Always remember, in react native, there is no way to work with remote images without providing height, width values. You need to know these values. There is also a way by which you can work with only one value of either width or height. In that case you will need the value of aspect ratio.

For example,

Suppose size of your image is – 800 x 300 px

So, aspect ratio of image will be (width/height) – 800/300 = 8/3 = 2.67

Now, if you want to display the image of width 400 then you can use the code –

image: {
     aspectRatio: 2.67, 
     flex: 1, 
     width: 400, 
     resizeMode: 'contain',
}

You can also use maxWidth if you want the image to be responsive and within the maximum bounds.

You can read more about resizeMode in the react native documentation. Images are bulky and needs optimization so always look out these optimization techniques. Thank you and see you in the next article.

About the Author

akamit

I am Akash Mittal, an overall computer scientist. If you want to guest post, need help in your projects, want to advertise, Feel free to contact me at [email protected]

View All Articles