Dynamically load Images in React Native

Question

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?

Ben · Accepted Answer · 2018-10-01 20:08:12Z

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.

This is not working for me in IOS devices. Has anybody faced something like it?

Revansiddh · Accepted Answer · 2017-12-18 17:37:05Z

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

soutot · Accepted Answer · 2017-12-18 17:19:22Z

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

Ah this is the issue, it's not a case of a boolean dictating which image is required, it's a case of the ID in the JSON file will be a string such as 'badge-001' and the image that needs to be loaded will have a file name such as 'badge-001.png'. So I need to be able to do something similar to './images/'+this.props.model.id'+'.png'
As far as I know, the case you want to achieve is not possible, since react native needs to know the bundle previously. You can, however, have an array containing all possible images to render and use them conditionally
I added an example with the idea of using an array. Hope it helps

Collectives™ on Stack Overflow

Dynamically load Images in React Native

3 Answers 3

1 Comment

Comments

3 Comments

Linked

Hot Network Questions