React Native - Image Require Module using Dynamic Names

Question

I\'m currently building a test app using React Native. The Image module, thus far has been working fine.

For example, if I had an image named avatar, th

Answer 1

If you're looking for a way to create a list by looping through a JSON array of your images and descriptions for example, this will work for you.

1. Create a file (to hold our JSON database) e.g ProfilesDB.js:

const Profiles=[
	  {
	  "id" : "1",
	  "name" : "Peter Parker",
	  "src" : require('../images/user1.png'),
	  "age":"70",
	},
	{
	"id" : "2",
	"name" : "Barack Obama",
	"src" : require('../images/user2.png'),
	"age":"19",
	},
	{
	"id" : "3",
	"name" : "Hilary Clinton",
	"src" : require('../images/user3.png'),
	"age":"50",
	}
]
export default Profiles;

2. Then import the data in our component and loop through the list using a FlatList:

import Profiles from './ProfilesDB.js';

 item.id}
  renderItem={({item}) => (
    
      
      {item.name}
    
  )}
/>

Good luck!