React Native - Dynamically load tons of small images

Question

I would like to load images dynamically from an images folder. Names in the folder like {company_name}.png. The names are stored in a json file along with other company data like name, type, etc.

e.g.: name: meta logo: "./images/meta.png"

Is there any way to dynamically load these images like require(changing variable based on the json logo string).

I found some solution online like: https://stackoverflow.com/a/52598171/7990652

But all the other things are build around the json structure to load all the other data. Is there any way to load everything from a folder one by one based on the provided logo link in the json?

I also tried to look around for a solution with babilon require all plugin, but I found nothing about that.

P.S. I know there are sevaral threads about this question, but in almost all the threads someone asking "what about if I want to load 100-1000 images?". That is the case with me too, I would like to load a lot of images, not just up to 10-20 which is complately okay with static .js require list.

Is there a reason you have to use require? Can't you use fetch , or a plain old img tag and dynamically set the src attribute? — Chris Camaratta
– Chris Camaratta, Commented Oct 23, 2022 at 22:32
In the end the below answers were true, but the final solution was for me a firebase db behind the application which stores all the necessary pictures (next to other data) so all the pictures can be shown even new data was added or not. — Patrik D.
– Patrik D., Commented Nov 14, 2022 at 8:12

Fiston Emmanuel · Accepted Answer · 2022-10-23 22:44:30Z

Dynamically loading local assets at run-time including images is not supported within React Native.

In order to use static assets (images, fonts, documents,...). All assets must be bundled at compile-time with your app.

Attempts to load assets dynamic at run-time without pre-bundled at compile time will cause the app to crash.

Bundle all images you need at compile-time then use image reference in memory at run-time.

const staticImages = { image_01: require("./path/to/image_01.png"), image_02: require("./path/to/image_02.png"), image_03: require("./path/to/image_03.png"), // ... more images };

Define this object containing images reference globally and make sure it is executed as early as possible when the app is initializing.

Later access any image reference as below:

 <Image source={staticImages[IMAGE_REFERENCE_NAME]} />

Abe · Accepted Answer · 2022-10-23 22:26:15Z

No, unfortunately your question is a duplicate of the others you have found, and it is not possible to use require dynamically, no matter how many times you want to do it.

If you can break up the images into multiple components, you can conditionally load those components. But require must be called with a fixed string.

Collectives™ on Stack Overflow

React Native - Dynamically load tons of small images

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related