'Error: Unknown named module', loading react-native image from a dynamic path

Question

When i use the Image component in React-native, it works fine when I declare my image's path/source as an inline string：

 <Image
    style={styles.img}
    source={require('mypic.png')}
 />

But when I define the path as a variable like this:

 var img = 'mypic.png';
 <Image
    style={styles.img}
    source={require(img)}
 />

...it doesn't work. The error msg is "Error: unknown named module 'mypic.png'"

I have many images, and I need to require them dynamically. There are too many to write manual import statements to require them one-by-one.

Even with a simple toggle like this one, it's far less efficient:

var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');

How do people usually solve for dynamic loading of variable images?

Patrick Klitzke · Accepted Answer · 2016-03-01 02:10:44Z

23

You cannot do dynamic static images, so you can either use uri or do static things like var test=require('image'). Have a look at this issue: https://github.com/facebook/react-native/issues/2481

answered Mar 1, 2016 at 2:10

Patrick Klitzke

1,5692 gold badges14 silver badges24 bronze badges

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

1 Answer 1