React Native Image Resizemode – The right way to do

React Native Image Resizemode

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

     style={{flex: 1, height: undefined, width: undefined}}

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.

Scroll right if demo is not visible

You may also like –

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.

Sign Up for Our Newsletters

Get only the best articles delivered to your mail

You May Also Like