Understanding “resizeMode” in React Native

There are different options in Image “reiszeMode” (‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’). It can be tricky which one to use if you does not have understand it properly. Let Me Explain to you in detail by understanding the basics.

Basic Concepts

1 ) Aspect Ratio : The aspect ratio of an image describes the proportional relationship between its width and its height. Two numbers separated by a colon like 3:2 (width:height) . Square has 1:1 aspect ratio

Note : Thus, aspect ratio concerns the relationship of the width to the height, not an image’s actual size.

2 )Scale the image uniformly (maintain the image’s aspect ratio) : When you scale a image it is better to manage the aspect ratio otherwise the image will be stretched and it will look bad

Some Examples :

400*200

• On left side scale image size 400*400(1:1) and it maintain actual aspect ratio(1:1) and looks perfect
• on right scale image size is 400*200(2:1) and it does not maintain actual aspect ratio(1:1) and looks bad

3 ) Dimension of Image View In React Native : When you have to show image from server in react native you have to define the width and height of image . Both are called the dimension of image view

Now the dimension of image view will be 450*300

Now Back the to the topic “reiszeMode” after understanding the basics

reiszeMode Options

1 ) “cover” :

Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

After Scaling with aspect ratio this will happen

Scale Image Width ≥ Image View Dimension Width

Scale Image Height ≥ Image View Dimension Height

Let me explain you in simple words with an example :

Image size = “1200*1200” (aspect ratio 1:1) , Image View Dimension “300*200”, and resizeMode = “cover” , when the image is scaled this will happen

• Take Maximum value from Dimensions. It can be width or height . For “300*200” it will be “300” . [max value = 300(width) ]
• Width has been resized to 300 so height will also be resized to “300” because image has aspect ratio 1:1 and scaling is done by maintaining the aspect ratio

Result :

• Scale image size “300*300”
• Image View Dimension “300*200”
• As you can see in picture
• it is showing full width but height is cropped from center and not showing full height

Some More Examples :

resizeMode cover

Note : If you want to show full width and height, Scale Image aspect ratio must match image view dimension aspect ratio

Scale Image Size : 350*350 (1:1 ratio)

Image View Dimension : 350*350 (1:1 ratio)

Result : Showing full image

2 ) “contain” :

Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

After Scaling with aspect ratio this will happen

Scale Image Width ≤ Image View Dimension Width

Scale Image Height ≤ Image View Dimension Height

Let me explain you in simple words with an example :

Image size = “1200*1200” (aspect ratio 1:1) , Image View Dimension “300*200”, and resizeMode = “contain” , when the image is scaled this will happen

• Take Minimum value from Dimensions. It can be width or height . For “300*200” it will be “200” . [min value = 200(height) ]
• Height has been resized to 200 so width will also be resized to “200” because image has aspect ratio 1:1 and scaling is done by maintaining the aspect ratio

Result :

• Scale image size “200*200”
• Image View Dimension is “300*200”
• As you can see in picture
• it will show full height but will show empty space from left and right in width.

Some More Examples :

resizeMode Contain

3 ) “stretch” :

Scale width and height independently, This may change the aspect ratio of the src.

it will not maintain any aspect ratio . it will scale image to dimensions of image view without maintaining the aspect ratio.

After Scaling this will happen

Scale Image Width = Image View Dimension Width

Scale Image Height = Image View Dimension Height

resizeMode stretch

• Original Image : 1200*1200
• Image Dimension : 300*200
• Scale Image Size : 300*200
• Result : As it is square image and ratio should be 1:1 but it is 3:2 so image will be stretched
• It does not maintain the actual aspect ratio when scaling, it change the ratio from 1:1 to 3:2 due to image dimension and as result image is stretched
• You can see in picture image is stretched

4 ) “repeat” :

Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.

As the name suggest it will repeat the image in frame of view

Frame Size is 300*200 and image in repeating in that frame

5) “center” :

Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.

It will show the image in center of frame . if image size is larger than it will scale it down uniformly

Showing image in center of frame as you can in above picture

Thanks for reading my article . If you have enjoyed this article, feel free to hit that clap button 👏 to help others find it.