55

I am just starting out with React-native and have a pretty decent grasp on React for creating web apps... I am running into a confusing issue here that never occured when working with react for the web.

Basically I am rendering a component whose image is being dynamically generated by mapping over an array of objects in its parent component.

export default class ImageComponent extends React.Component {
  render() {
    return (
        <Image source={this.props.source}/>
    );
  }
};

And its parent component:

export default class MainComponent extends React.Component {
  constructor(props) {
    super(props);
   this.state = {
      images:[
        { src: './src/images/1.png'},
        { src: '/src/images/2.png'},
        { src: './src/images/3.png'}
      ]
    }
   }

  render() {
    let images = this.state.images.map((image) => {
      return(<ImageComponent source={image.src}  />);
    })

    return (
      <View>
        {images}
      </View>
    );
  }
};

In device simulator I am getting the following error:

"Warning: Failed propType:Invalid prop 'source' supplied to 'Image' check the render method of 'BasicComponent'"

Does anyone know what could be going on here?

Maxwelll
  • 2,174
  • 1
  • 17
  • 22

2 Answers2

89

You should either require the local assets or use object with uri key.

So either in MainComponent:

this.state = {
  images:[
    require('./src/images/1.png'),
    require('./src/images/2.png'),
    require('./src/images/3.png')
  ]
}

or in BasicComponent:

return (
  <Image 
    source={{uri: this.props.source}}
  />
);
Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74
  • Requiring the local assets was the way to go thank you for your help @zvona – Maxwelll Apr 06 '16 at 19:51
  • 2
    uri property in source props work for me. require method did not. Any idea as to why? – hanorine Aug 04 '17 at 07:51
  • Cheers! thank you! By the way, shouldn’t that be in the documentation? If you see the [documentation](https://facebook.github.io/react-native/docs/image#source) now you would have to guess that if you didn’t find this answer… – Harry Theo Jul 04 '19 at 10:26
  • Thanks @zvona, but how can you know if the props is an image object or a string? – ValRob Sep 17 '19 at 15:53
  • but in my case i have some other data with the image... how am i gonna manage that? const DATA = [ { id: 1, url: require('../../assets/country/bangladesh_one.png'), value: 'bangladesh' }, { id: 2, url: require('../../assets/country/india.png'), value: 'india' }, { id: 3, url: require('../../assets/country/malaysia.png'), value: 'malaysia' }, { id: 4, url: require('../../assets/country/monaco.png'), value: 'monaco' }, ] – Wasi Sadman Sep 24 '19 at 09:53
12

you should be use uri for set source image 

return (
  <Image 
    source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png'}}
  />
);
Nguyễn Quang Tuấn
  • 883
  • 11
  • 6