Folder location for dynamic local images

Expo SDK
1

I have a few dozen images (whose paths I’m pulling from a JSON file) and want to display them dynamically. I’m aware that you can’t use “require(imageVar)” for the image source because “require” requires a static path. In other React Native forums, like the one below (I’m basically trying to do the exact same thing as this stackoverflow post), they recommend using a uri and placing images in the “android/…/res/drawable” folder:

As Expo doesn’t have android/ios folder structures, where would be the place to put these images such that I could use uri to dynamically generate a local, relative path for the appropriate image? (I’ve tried to recreate the android file structure, but it doesn’t seem to work.)

Thanks!

2

You’ll have to require the assets statically unfortunately. The React Native packager scans your code statically to determine what assets to bundle with your app. If you have the JSON file locally can you just hardcode the requires instead?

1 Like
3

Thanks @jesse I appreciate the info. I basically started to do that, although I had a helper method in a JS file because I didn’t think the packager would bundle up resources from require() tags in a JSON file (I’ll give that a try when I have a few minutes later on):

export const getImage = (sodaId) => {
    switch (objectId) {
        case 0:
            return require('../../assets/images/img_12.png');
        case 1:
            return require('../../assets/images/img_42.png');
        case 2:
            return require('../../assets/img_52.png');
        default:
            return require('../../assets/images/default.png');
    }
};

Seems to work fine, but will be a little nicer if I can get by with just including the require tags in the JSON file.

1 Like
4

Agree, this is definitely something we want to make better.

5

Hey there,:slight_smile: if there’s anyone who still has this issue, you can do this:
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;
  1. Then import the data in our component and loop through the list using a FlatList:
import Profiles from './ProfilesDB.js';

<FlatList	
 data={Profiles}
 keyExtractor={(item, index) => item.id}
 renderItem={({item}) => <View>
                            <Image source={item.src} />
                            <Text>{item.name}</Text>
                         </View>
   }
/>

Good luck!

1 Like