CODEWITHSUNDEEP
javascriptreactjsreact-native
Nakib
Nakib

Reputation: 4713

Trouble requiring too many images in React Native

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

Upvotes: 6

Views: 2009

Answers (1)

damusnet
damusnet

Reputation: 4398

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.

Upvotes: 2

Related Questions