Add Option To Resize Images On Android

[adammcarth]

As discussed in issue #285, there are some cases where very large, down-sampled images can create performance issues on Android due to the entire image being loaded in the device's RAM.

There is an option in React Native's default <Image /> component which allows you to specify resizeMethod="resize". This uses Facebook's Fresco library to automatically downsample the image itself before being loaded into the devices memory, but since react-native-fast-image uses Glide - there appears to be nothing similar available.

The solution I came up with was to offer the ability to manually down sample the image size before it's loaded into the memory using a new prop called resizeImageAndroid. It uses Glide's .override() method to achieve this.

The only caveat is that you must know the exact image size, but it's nice to at least have this option if it's critical for the performance of large images on Android.

Example Usage:

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

[badeleux]

Wouldn't it be better to put imageResize into source, so we don't have to rerun Glide? It would be beneficial for iOS as well.

[madandrija]

Any way I can help with getting this PR merged in?

We are currently maintaining a fork with this solution implemented in the latest FastImage release and I'd prefer if I could just use the original and drop the fork 😁

[DylanVann]

I believe Glide does downsampling for us without any extra config.

Glide automatically limits the size of the image it holds in cache and memory to the ImageView dimensions.

From https://futurestud.io/tutorials/glide-image-resizing-scaling

[christopherklint97]

I am also doing as @madandrija states by maintaining a forked version with this pr implemented.

I am not a expert with Glide but I did notice a huge difference when I implemented this solution (pretty much night and day). Really think it would be helpful for other android users to have at their disposal.

[DylanVann]

You may be getting better performance because the quality of your rendered images is less if you are not accounting for DPI.

Assuming Glide's auto downsampling works that's the reason I would guess you're seeing better performance.

We could try to create a reproduction of this issue to check if that's the case, or if the auto sampling based on the view size is not working for some reason.

[madandrija]

I am also doing as @madandrija states by maintaining a forked version with this pr implemented.

I am not a expert with Glide but I did notice a huge difference when I implemented this solution (pretty much night and day). Really think it would be helpful for other android users to have at their disposal.

We've updated our fork to the latest version and still we need the fork in order to speed up image loading (e.g. when scrolling through a FlatList, w/o the fork there were sometimes "blanks" until images loaded, whereas with the fork, everything was running smoothly), and I have two examples of images used.

Regarding repro, still thinking about how to set up a minimal example, either on GitHub or in Snack.