support for resizeMethod

[mrafei]

Hi,

I have a list of rather large images, and I want smooth scroll behavior. If I use react native's Image with resizeMethod set to resize, I get a performance boost over FastImage but I lose the caching and loading optimizations of FastImage. Is there a reason why FastImage doesn't support resizeMethod prop?

thanks.

[sesam]

@mrafei are you loading big images, but showing them in a smaller size in your scrollable component? Could you load the smaller images first, and only load the big image when needed (like maybe after someone presses/clicks the small image)

[n1ru4l]

@mrafei Have you checked the https://github.com/DylanVann/react-native-fast-image#resizemode-enum property?

[muhammadsr]

@mrafei resizeMode is different than resizeMethod. Check out https://facebook.github.io/react-native/docs/image#props

[muhammadsr]

Any updates for supporting resizeMethod?

[adammcarth]

Yeah we're having major issues with scrolling performance on Android without the Android-specific resizeMethod property being set to "resize".

[adammcarth]

Alright, for anyone else having this issue - I'd suggest making sure you're running at least version 5.1.0. We were running version 4.0.14, and the upgrade alone seemed to dramatically improve performance from unusable to acceptable. This is (I suspect) largely due to the upgraded major version of Glide.

For those still experiencing problems on Android with large down-sized images, I've created a fork of the latest version which introduces a new prop to manually downsize images before they're loaded into the RAM. The only caveat is that you must know the exact resolution that you want to downsize to.

Usage Example:

<View style={{ width: 450, height: 275 }}>
  <FastImage
    source={{ uri: 'http://example.com/huge-image-3600x2200.png' }}
    resizeMode="contain"
    resizeImageAndroid={{ width: 450, height: 275 }} // <-------
  />
</View>

I'll submit this as a PR too, no guarantees if it'll be accepted though.

[mralj]

I haven't tried forked version, but I have applied "dirty fix" in FastImageViewManager.java Just for test I have changed this line .apply(FastImageViewConverter.getOptions(source)) to .apply(FastImageViewConverter.getOptions(source).override(600, 400) )

And on performance was night and day. I was testing feed feature with a lot of images, and it was crashing on the first "page" on Galaxy S6 edge. After changing single line as described above, not only that it wasn't crashing anymore, but I could scroll like crazy and everything was working 👌

So I really think @adammcarth's PR should get merged. 🤞

In the mean time, switching from FastImage to regular Image also fixed issue (but performance wise solution described above was better). My image component looks like this now:

 <Image
            style={style.media}
            source={{ uri: backgroundImage }}
            source={{ uri: backgroundImage, cache: "force-cache" }}
            resizeMode={"cover"}
            resizeMethod={"resize"} // <-------  this helped a lot as OP said
            progressiveRenderingEnabled={true} <---- as well as this 
          />

[andru1989]

@mralj your solution work for me, thanks, But could you please tell me why did you define source twice ?

[allthetime]

@andru1989 that is a mistake and the second declaration will overwrite the first.

[mralj]

@andru1989 that is a mistake and the second declaration will overwrite the first.

@andru1989 @allthetime Is correct, I have mistakenly left the line source{{uri:backgroundImage }}

In the meantime, we have forked FastImage ourselves and applied changes @adammcarth proposed (link).

We have Feed feature with pictures, which on older Androids used to crash, and resizeImageAndroid solutions is only thing that helped.

P.S. Please accept my apologies for not replying, I have completely missed the notification :/

[pierroo]

years later, still no luck with this resizeMethod? @mralj @adammcarth you guys feel like patching once again? I'm afraid those old branches might be outdated :(

[mralj]

Sorry I'm not developing RN actively anymore :/