Semi-new to React Native and i'm having an issue...

I'm trying to require local images based on a variable (an ID stored in a JSON file), I can achieve this if I stored the images online somewhere and used the prop: source:{uri: ''+this.props.model.id'.png'} for example, but obviously require needs just a single string so I can't pass it a variable?

I would just use a lengthy for each/if statement but there will be 100+ options for the image name. Which is another reason i'd rather have the images stored locally.

I've been trying a bunch of different ways but haven't found anything, is there any way around this?

Semi-new to React Native and i'm having an issue...

I'm trying to require local images based on a variable (an ID stored in a JSON file), I can achieve this if I stored the images online somewhere and used the prop: source:{uri: 'https://www.domian.com'+this.props.model.id'.png'} for example, but obviously require needs just a single string so I can't pass it a variable?

I would just use a lengthy for each/if statement but there will be 100+ options for the image name. Which is another reason i'd rather have the images stored locally.

I've been trying a bunch of different ways but haven't found anything, is there any way around this?

• javascript
• react-native

3 Answers 3

The following works for me:

// our data
// we need to require all images, 
// so that React Native knows about them statically
const items = [
    {
        id: '001',
        image: require('../images/001.jpeg'),
    },
    {
        id: '002',
        image: require('../images/002.jpeg'),
    },
];

// render
items.map( (item) => 
    <Image key={item.id} source={item.image} />
)

NB: This is based on @soutot's updated answer, but simplified. I don't think there is any need for a boolean.

AS per your comment and example you mentioned it is like : imageId is JSON and your passing it using props. Is your baseurl same ? then you can achive single string like :

source:{uri: `https://www.domian.com/${this.props.model.id}.png`}

I hope this will work for you : here is example in which I receive part of url to images from different resources, similar to yours:

https://github.com/patilrevansidh/movidb/blob/master/src/modules/movie/detail/screen.js

According to the official docs, the recommendation is using conditional rendering to create the Image require which contains the correct URI path:

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

https://facebook.github.io/react-native/docs/images.html

More about conditional rendering: https://reactjs.org/docs/conditional-rendering.html

Example using array (just example, may have typos):

const imgs = [
  {
   id: '001',
   require: require('../images/001.jpeg'),
  },
  {
   id: '002',
   require: require('../images/002.jpeg'),
  },
];

imgs.map((item, i) => 
item.id === '001' &&
<Image
  key={i}
  source={item.require}
/>)

Hope it helps