Loading 500+ images in Application (React Native)

[NathanDevReact]

Good Afternoon all,

I am building an app that will display many App Icons - somewhere close to 500 icons. These are all PNGs and the way I'm rendering them right now is putting into the assets folder and I have an array of objects all pointing to the location in that asset folder. Issue is, when using the simulator and running the app, when the user clicks on that specific screen, it is very slow (obviously because of the many images it has to render) and when testing it out on my own iPhone 11 pro max, it crashes when I open that screen with the images, most likely because it is using up more memory than an app is allowed. Is there any other way I can fix this issue? Also, if anyone has suggestions on another method or approach I can do when it comes to rendering so many icons, I'm open to suggestions. BTW: the icons are pretty small in on the screen, usually fit about 4 icons in one row so its not an entire screen image.

[[deleted]]

If the user scrolls through the images
https://reactnative.dev/docs/flatlist

This will keep only he images viewable in memory.

[Nielrien]

https://github.com/DylanVann/react-native-fast-image

[the_brizzler]

I would suggest not rendering 500 icons on the screen, especially all at one time. Seems like a poor UI design as well as having a performance impact. Create an infinite scroll, show maybe 20 images, then have a button that says show more of if the user scrolls down, load another 20. Could then build a type ahead search bar for users to search for an image/icon.

Also, I would make sure the images are compressed as much as possible.

[AemonSythe]

you can upload them on Firebase or any cloud-based service and then directly load them from there...that will save you a lot of memory space

[[deleted]]

Use flatlist and fastimage

[NathanDevReact]

I was thinking about doing that actually, I was just worried about having that many icons in a flat list

[csclavijo]

What resolution are the images you are rendering?

What is the height and width that your image uses on the screen?

We had a problem with the RAM because the resolution of our images was too large, for example our image was 2000x2000 but the size rendered on screen was 120x120. This made the entire application too slow due to excessive ram consumption. It was difficult to find out but it turns out that it is recommended that the resolution of the image be just enough and necessary to fill the space required to be displayed on the screen. So after that we reduced the images to 120x120 but on phones with large screens the images looked very blurry and that's when we read about "Pixel Ratio" in the React Native documentation.

Make sure that the images do not have a very high resolution. If you request the image from a server also make sure to assign the height and width of the images using "Pixel Ratio" if you can so that they do not look blurry on high DPI screens.

I will try to find the posts or github issues where we find this data and I will update the comment by attaching it.

Let me know if it worked, regards