Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native Image resizeMode vs resizeMethod

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

like image 516
Austin Cline Avatar asked Jun 02 '17 19:06

Austin Cline


1 Answers

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.

like image 97
Karthik Suthan Avatar answered Oct 24 '22 14:10

Karthik Suthan