React-native failed propType in Image component

Question

I am just starting out with React-native and am very good at React for building web applications ... I ran into a confusing issue here that never occurred when dealing with Internet reaction.

Basically, I represent a component whose image is dynamically generated by matching 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 the device simulator, I get the following error:

"Warning: Failed propType: Invalid prop parameter 'source' specified in 'Image', checks the rendering method of 'BasicComponent'

Does anyone know what could be happening here?

Answer 1

You must either require local assets or use an object with the 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}} /> );