React-native failed propType on Image component
56,508
Solution 1
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}}
/>
);
Solution 2
you should be use uri for set source image
return (
<Image
source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png'}}
/>
);
Author by
Maxwelll
Updated on July 09, 2022Comments
-
Maxwelll almost 2 years
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 about 8 yearsRequiring the local assets was the way to go thank you for your help @zvona
-
hanorine almost 7 yearsuri property in source props work for me. require method did not. Any idea as to why?
-
Harry Theo almost 5 yearsCheers! thank you! By the way, shouldn’t that be in the documentation? If you see the documentation now you would have to guess that if you didn’t find this answer…
-
ValRob over 4 yearsThanks @zvona, but how can you know if the props is an image object or a string?
-
Wasi Sadman over 4 yearsbut 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' }, ]