react native image not loading with concatenated string

Question

I am using react native and I have tried two pieces of code, the first one does not work and the second one does. Can anyone explain why?

<Image source={require('../assets/'+'g'+'Light.png')} style={styles.greenLight}/>
<Image source={require('../assets/gLight.png')}

Not sure why, but I've had a similar issue. I solved it by passing a function that concatenates the string into the image source require statement. — Nader Dabit
– Nader Dabit, Commented Dec 2, 2015 at 22:51
This is so frustrating. If I understand correctly, passing an array with images names and concatenating them to the correct relative path is not possible? This is possible in almost any modern programming language (and old as far as I know). — DerpyNerd
– DerpyNerd, Commented May 6, 2017 at 12:25

Eyal Eizenberg · Accepted Answer · 2015-12-03 06:02:45Z

2

Using dynamic naming in React Native is not allowed. You should use a switch, if statement or a different function which will do this for you:

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

More information here: https://facebook.github.io/react-native/docs/images.html

answered Dec 3, 2015 at 6:02

Eyal Eizenberg

4,0333 gold badges21 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

react native image not loading with concatenated string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related