Setting <Image /> source with string concatenation fails ('Requiring unknown module...')

I’ve seen this mentioned before: https://github.com/facebook/react-native/issues/282#issuecomment-96908438

I’m trying to include an image from within the project, the name of which is dependant on variables.

var imageName = `image!${var1}_of_${var2}`
contents = (
  <Image source={require(imageName)} style={styles.card} onPress={this._onPress} />
)

The above fails with the usual:

Requiring unknown module “image!somwething_for_somethingelse”. If you are sure the module is there, try restarting the packager.

These also fail in the same manner:

<Image source={require(image!${var1}of${var2})}> <Image source={require('image!' + {var1} + '_of_' + {var2})} >

This works, no problem:

<Image source={require('image!somwething_for_somethingelse')}>

I’ve also tried

• Stop and re-build Xcode project
• Restarting the packager

[matejkramny]

this ‘feature’ is retarded and is annoying. Would very much be interested how i can bypass this stupid check

WHILE i agree that it is a good idea to stop developers from including images which consist of concatenated strings, it is the developer’s responsibility to code in such way that won’t cause him trouble in the future. A much better solution for react-native would be to print a notice to the console alerting them of what they just done.

[sahrens]

We intentionally don’t support dynamically generated image names because it makes it very hard to manage assets over time, just like how you wouldn’t want to do

var MyComponent = require(‘./’ + libName + typeOfComponent);

or something like that. Dynamic image name generation like this also won’t work with the new dynamic asset managing system we’re rolling out which let’s you add and update assets on the fly with just cmd+R (no more need to add to Xcode and recompile).