Load a set of images from a directory in React Native

Question

I have a group of images in a directory and I want to add the paths to an array in react native.

The image names are 1.png, 2.png, 3.png... 20.png

The following is the method I currently use

 const images = [require('../assets/1/1.png'),
                 require('../assets/1/2.png'),
                 require('../assets/1/3.png'),
                 ...
                 require('../assets/1/20.png'),];

This is possible when there is a limited number of images. In some cases I might have to add 300 images. So is there an easy way to do this?

I tried adding in a loop but it does not work.

    for (let i = 1; i < 300; i++) {
        images.push(require('../assets/1/'+i+'.png'))    
    }

EDIT : The following error occurs in the above approach,

error: bundling failed: Error: Components\IdleLoop.js:Invalid call at line 9: require('../assets/1/' + i + '.png')
    at F:\_work\sampleApp\node_modules\metro\src\JSTransformer\worker.js:317:19
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (F:\_work\sampleApp\node_modules\metro\src\JSTransformer\worker.js:75:24)
    at _next (F:\_work\sampleApp\node_modules\metro\src\JSTransformer\worker.js:95:9)

The question is why do you need to do so? anywhere you need to show the images just set the src to the needed path — Amir-Mousavi, Aug 12 '19 at 09:51
@KaushikRadadiya Yes there is an error. I will add it to the question. — Sanke, Aug 12 '19 at 09:53
Check this : https://dev.to/emilios1995/dynamic-imports-in-react-native-9k5 — Kabir, Aug 12 '19 at 09:55
@Amir-Mousavi I need it because I uses an `ImageSequence`. There I need set of images to animate. — Sanke, Aug 12 '19 at 09:57
Why are you using **require** there is no need just add file path as a string. — Kaushik Radadiya, Aug 12 '19 at 09:58

score 1 · Accepted Answer · answered Aug 12 '19 at 09:52

As far as I know because React Native applications are statically bundled on build time, required assets are linked in advanced therefore there isn't a way to load them dynamically on runtime. I've ran into the same problem and gave up on that and ended up linking everything manually/statically.

For more information you might want to check out React Native - Image Require Module using Dynamic Names, which concludes the same.

Load a set of images from a directory in React Native

1 Answers1