8

I'm currently using RN 41.2 and I have questions about resizing images from a url. The url files can get quite large, usually around 2000x2000 and I want to display them way smaller probably around 25x25.

Is there an equivalent iOS Image prop for the 'android only' resizeMethod?

When resizeMethod='resize' it changes the size of the large encoded image before it is decoded and so the images display almost immediately in the smaller size and it's great.

But for iOS I'm using resizeMode (contain, cover, etc) and it displays the image correctly but it always takes a bit of time for the images to actually appear, which is totally understandable it's just annoying.

Am I missing something here? It seems like resizeMode should do the same thing the resizeMethod does but it clearly does not

Austin Cline
  • 81
  • 1
  • 4

2 Answers2

1

resize mode property decides how the RAW image should be fit inside its frame (cover, contain, stretch, center, repeat) refer https://reactnative.dev/docs/image#resizemode

In addition for android we can choose the mechanism that should be used to resize image that is to scale , resize or auto using resizeMethod prop. refer https://reactnative.dev/docs/image#resizemethod-android

basically resizeMode instructs how to resize the image and resizemethod defines what mechanism to use for resizing

This is provided as there exists some issues in android when the frame size and RAW image size varies significantly (too large image: too small frame or too small image and too large frame) and there can be significant delays or design breaks while rendering as auto selection of resize mechanism isnt optimal. You can escape without setting resizeMethod manually (defaults to auto) most times but it causes issues in before mentioned scenarios.

Karthik Suthan
  • 98
  • 1
  • 12
-2

resizeMode and resizeMethod are 2 properties that the Image component has in RN. resizeMode: Determines how to resize the image when the frame doesn't match the raw image dimensions. It can take cover, contain, stretch as values.

resizeMethod: It can be used to resize the image when the image's dimensions differ from the image view's dimensions. It can take auto, resize, scale as values.

For more you can refer https://facebook.github.io/react-native/docs/image.html

Thanmai C
  • 741
  • 1
  • 7
  • 10
  • 2
    This doesn't seem to add any more clarity to the answer. "how to resize the image when the frame doesn't match the raw image dimensions" and "used to resize the image when the image's dimensions differ from the image view's dimensions" seem identical. – Erik Uggeldahl Aug 20 '18 at 22:17