React Native images with dynamic names

Question

This works no problem:

<Image source={require('./images/ace.png')} />

But this:

var name = 'ace';

<Image source={require('./images/' + name + '.png')} />

I've tried all kinds of variations but it always returns the error:

Requiring unknown module "./images/ace.png". If you are sure the module is there, try restarting the packager.

Answer 1

As per react native docs,

// 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} />

How about pre-declaring what is required and use it conditionally?