Require Image dynamically in React Native

Question

The documentation of React native (0.21) states, that it is only possible, to load pictures statically, i.e. if the file name is somehow known in advance:

Note that in order for this to work, the image name in require has to be known statically.

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

An example is given:

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

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

Unfortunately, in my case, I do not know the file names of the pictures in advance, as they are configured in a JSON file.

Is there a way to use local image files within react native? I could load them via the file:// protocol, if I knew the location of the files? Is there a constant or variable for he location of the app within the iOS file system?

The docs do mention that source={{uri:'local path of the file'}}. I don't think it follows the file:/// Uri scheme. Try passing in the absolute path of the file — agenthunt
– agenthunt, Commented Mar 9, 2016 at 2:57

nmh · Accepted Answer · 2016-03-09 09:43:54Z

2

Yes, you can use images dynamically. They're treated, however, as network images. What this means is that the packager didn't attach any image metadata (width, height).

If you've a few images, simply leverage the packager.

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

The other option is to save metadata (width, height) in your JSON. You'll need to specify at least the height for network images (or dynamic images). Given the metadata(width, height) and screen dimensions using (React.Dimensions), it's trivial to select appropriate height. Use react-native-orientation if your app needs to work in portrait and landscape mode.

answered Mar 9, 2016 at 9:43

nmh

1076 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rias Over a year ago

Thanks for your answer. Do you have a hint on how to use them as "network images" what is the correct path to the images? How are they then packed into the application?

Collectives™ on Stack Overflow

Require Image dynamically in React Native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related