Trouble solving 'source.uri should not be an empty string' in React Native

Question

I'm having trouble solving

source.uri should not be an empty string

in React Native.

I don't understand where this error comes from. I have 3 Flatlist in my component that renders children components with props from the parent as the URI and none of these is empty.

This is the uri part:

<Image style={styles.imageStyle} source={{uri: this.props.url }} />

Answer 1

Here is another solution:

<Image style={styles.imageStyle} source={this.props.url ? {uri: this.props.url } : null} />

Answer 2

It is likely an empty string is passed to the uri. If you set the uri as an empty string intentionally like myself to not to display any image for this data, use undefined instead or use it like so:

<Image style={styles.imageStyle} source={{uri: this.props.url !=="" ? this.props.url : undefined }} />

Answer 3

Ok so I managed to fix the issue by adding to the default INITIAL_STATE variable that sets the state of my app and the default value before the actions are executed.

So adding the url below was the fix! But could be any url other than a null value.

profile: { user: { phone: '', email: '', first_name: '', last_name: '', photo: 'http://www.tiptoncommunications.com/components/com_easyblog/themes/wireframe/images/placeholder-image.png', description: '' }, membership: { active: false } }

Answer 4

Other way, can be implemented:

render() {
     const {imageURL} = this.state;
     <Image source={{uri:imageURL ? imageURL : null}} style={styles.tinyLogo}/>
}