Understanding “resizeMode” in React Native

Basic Concepts

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

reiszeMode Options

  • 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
  • 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
resizeMode cover
  • 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
  • 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.
resizeMode Contain
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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store