Memory spike with 100+ huge images.

[bglgwyng]

I made a reproducer here, just by increasing the image sizes.
https://github.com/bglgwyng/faster-image/tree/reproduce-memory-spike

I considered this library an alternative expo-image as it also has the memory spike problem. See expo/expo#26781.

I tried both expo-image and faster-image in a gallery view that renders 100+ images with a size of 1920x1080, 1MB each.
I don't consider it a too pathological case as many gallery-like views would do the same, but both libraries crashed the app with a memory spike.

I wonder why the memory spike is so high. It reaches 2GB for 100 images, which is 20MB per image.
I understand the image is decompressed and stored in memory, but 20MB for a 1MB image seems too much.
Image in react-native loads images slower, but it uses much less memory and works fine with 100+ images. How is it possible? Which difference in the implementation causes this?

Also, I have a question if just throttling the image loading helps in this case.
Throttling the image loading seems trivial, so I suspect that it can affect the user experience as it slows down the image loading, and that's the reason why expo-image and faster-image don't do it.

In my case which renders 100+ images but in a smaller size as thumbnails, so caching the resized images would be helpful.
It doesn't seem that expo-image and faster-image do so.

[gtokman]

Interesting... thanks for the reproducible project. Will take a look today / tomorrow!

[gtokman]

Could be related: kean/Nuke#776

[gtokman]

@bglgwyng having trouble reproducing this, seems to be working fine for me.

[bglgwyng]

@gtokman Could you set grayscale: 1? I found that the memory spike is not observed when grayscale option is not set.

But one thing weird is that I don't use grayscale option in my production app but the memory spike occurs.

[gtokman]

@bglgwyng I haven't tried it with the grayscale, can check this tomorrow. Out of curiosity if you load 100+ images of that size into a local xcasset directory and show them in a SwiftUI list, do you see the same memory spike? Or they have an AsyncImage component to test the remote case.

[koenzi132]

Any progress? (btw, thanks for making this library :))
I also use a lot of images in my App.
When I use react-native-fast-image, memory usage is under 1GB, but using this library, memory usage is growing up more and more. Now I'm seeing over 9GB on XCode Debugger...

react-native-fast-image is too slow on android, so I really want to use this. I hope there's any solution for this..

[gtokman]

@koenzi132 would love to see a small example or branch if you modify the ./example proj with a public image API.

[Anas-7]

Can confirm that there is a memory spike. We use this library currently and experience spikes reaching ~2GB in Android. Even though dev consumed more RAM than release build this issue is occurring even in the release build currently live. I have asked on Stack Overflow here: https://stackoverflow.com/questions/78946191/massive-memory-spikes-in-react-native-when-images-are-rendered-in-a-list