React-native-fast-image: Curious your thoughts on memory usage vs RN's <Image />

[JAStanton]

Hey so my app loads a lot of images remotely, and allows users to take photos and upload them. I see a fair number of memory related issues in my app as a result. Particularly my API doesn't thumbnail any images so remote images load in as large images and from what I can tell from RN's <Image /> is that it's not giving me a ton of support in downsampling. Thus lots of crashes.

I'm curious your evaluation on what RN's <Image /> is doing on iOS and Android to help with local and remote image in regards to memory / disk consumption. And how this differs from react-native-fast-image (and the underlying Glide / SDWebImage)

Any insight would be very helpful, thank you!

[pavanmehta91]

I'm also having multiple (100+) images to load and show and I've not downsized them yet. I tried FastImage component and my app crashed. Maybe it was due to memory, it was trying to cache 100+ images at one go. While using Component my app rarely crashes but images load each time the user opens the app again.

[yomybaby]

Me too. Many FastImage on Flatlist are crashes on iPhone 5. (iPhone SE work properly)
After changing to Image, iPhone 5 works properly too.
I love aggressive cashing but I can't use this because crashing. 😢

[kevinresol]

I can confirm the memory issue. I have a FlatList with FastImage, at any time there will be 9 - 12 images visible (a 3 column by 3 row layout). The memory usage (as seen in xcode) shoots up to 600MB and the app crashes. This happens when I scroll the list down to around the 100th image.

As a reference, when using standard RN Image, the memory usage is ~90MB max even scrolling pass the 100th image.

[bitshadow]

My memory profiler shows that react-native-fast-image uses 383.83 MB for loading only (12 images worth 200KB each).

[pavanmehta91]

@bitshadow which app is that you're using for profiling?

[bitshadow]

@pavanmehta91 I have just written https://medium.com/@bitshadow/finding-memory-leaks-react-native-app-ios-46e6eeb50c8c . Hope this is helpful.

[jslok]

Thanks for writing that article @bitshadow. Did you do any testing on android or is it not an issue on there?

I'm seeing the same issue and crashes on my app for ios. This seems to be fixed by setting _shouldCacheImagesInMemory = NO in \node_modulesreact-native-fast-image\ios\VendorSDWebImageSDWebImage so the app will release the memory when the component is unmounted. Even so, it looks like fast-image still uses 1.5-2x more memory than rn Image component in my case.

[jacksontbryan]

I am seeing memory use shoot up leading to crashes while new images are loading (and being cached). If they are already cached everything loads fine.

This is in a Flatlist with about 40 fairly large images of ~1MB each.

[DylanVann]

It may just be that you need to figure out a way to thumbnail the images. If you want to show the images quickly there's no way to download only part of them so memory usage is necessarily going to spike.

We should be able to slow it down and prevent a crash though. I'm going to close this in favour of this issue: https://github.com/DylanVann/react-native-fast-image/issues/195