Images are not showing from state in react native

Question

i have saved images names in state but when i try to show them its giving the error 'Invalid call require('./assets/'+this.state.img1)' ( but when i put the image name directly in source its start working. Like : i have also alert the state its having the same image name.

  render() {
  return (
  <TouchableOpacity onPress={this.onItemPressed} style={styles.container}>

       <Image
        style={styles.stretch}
        source={require('./assets/'+this.state.img1)}
      />
       <Image
        style={styles.stretch}
        source={require('./assets/'+this.state.img2)}
      />
    </TouchableOpacity>
  )
}

try to use string template: `require(\`./assets/${this.state.img1}\`)`. Let me know if its work or not.. — Darryl RN, Jan 28 '20 at 17:18
Does this answer your question? [React Native - Image Require Module using Dynamic Names](https://stackoverflow.com/questions/30854232/react-native-image-require-module-using-dynamic-names) — smashed-potatoes, Jan 28 '20 at 17:23

score 2 · Answer 1 · answered Jan 28 '20 at 17:22

According to the documentation : In order for this to work, the image name in require has to be known statically.

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

What you can do is building a mapping/object :

const myImages = {
  img1: require('/path/to/img1'),
  img2: require('/path/to/img2'),
};

render() {
  return (
  <TouchableOpacity onPress={this.onItemPressed} style={styles.container}>

       <Image
        style={styles.stretch}
        source={myImages[this.state.img1]}
      />
       <Image
        style={styles.stretch}
        source={myImages[this.state.img2]}
      />
    </TouchableOpacity>
  )
}

For this to work, this.state.img1 and this.state.img2 must be a key in the object myImages.

Images are not showing from state in react native

1 Answers1