Trouble requiring too many images in React Native

Question

I have javascript file that looks like below. It has lots of object (1000+). As we cannot use dynamic name for images in react-native this is my work around.

"grinning": {
        "image": require('./images/1f600.png'),
        "shortname": ":grinning:",
    }

I am requiring this file in some other react native function and looping to display all the images. But getting internal error on requiring too many images in javascript file.

{"type":"InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for details"}

In terminal it says

fs operation timeout

This works if i remove few entries from the file.

Any suggestion or better approach

Answer 1

There are known issues with the Fresco library in charge of handling images, and memory limits:

Memory issues with PNG images

React Native Android depends on Fresco for loading and displaying images. Currently we have disabled downsampling because it is experimental, so you may run into memory issues when loading large PNG images.

So maybe try compressing your images if you can, and only require them when they have to be rendered.

You should also check the bug tracker. Here is a comparable issue and its fix:

@phones24 wrote:

I optimized my app so it's not cached too many images. I also added some more JPEG compression and scale the images down a bit. I also wrote a path that adds error information to the event.