React Native, showing images dynamically

Question

I'm currently working on a page where I want to display all images in a folder. I tried the code below:

return (
 <View>
  {images.map(r => 
   <Image source={require('../assets/image/' +r+'.png')} />
  )}    
 </View>
);

Here is the result I am getting:

Error: pages/etc.js:Invalid call at line: require('../assets/image/' + r + '.png')

What should I do to fix this problem? Thanks.

Answer 1

require in this specific case in React Native does not work with dynamic routes (routes with variables). An image should be required with its pur string path. What you want could be done for example with something like this:

//.....
const images =[require('../assets/image/1.png'),require('../assets/image/2.png')]
//.....
return (
 <View>
  {images.map(i => 
   <Image source={{uri:i}} />
  )}    
 </View>
);