Invariant Violation - Conditional rendering - reactjs

Question

This is driving me insane and I can't spot the issue. I'm trying to conditionally render an image component but it's throwing Invariant Violation: Text strings must be rendered within a <Text> component. Not even using a text string where the statement is.
render() {
return (
<View style={newsItemStyles.wrapper}>
{this.state.isLoading && (
<View style={loadingOverlayStyles.container}>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
)}
{this.props.item.uri && ( // this is there the error is thrown
<View>
<Image
style={{width: '100%', height: 250}}
source={{uri: this.props.item.uri}}
/>
</View>
)}
<TouchableHighlight
onPress={() =>
this.props.navigation.navigate('NewsSingle', {
item: this.props.item,
title: this.props.item.title,
favorite: this.props.favorite,
})
}>
<Text numberOfLines={2}>{this.props.item.title}</Text>
</TouchableHighlight>
{this.props.favorite ? (
<TouchableOpacity activeOpacity={0.5} onPress={this.unfavorite}>
<FontAwesome5 name="bookmark" size={18} solid />
</TouchableOpacity>
) : (
<TouchableOpacity activeOpacity={0.5} onPress={this.favorite}>
<FontAwesome5 name="bookmark" size={18} />
</TouchableOpacity>
)}
</View>
);
}

Answer 1

Error is simple. You have to be careful when rendering components like:
someCondition && <someComponent />
Because there are some values that JSX will render as a text. An example of this, 0, this is a falsy value that JSX won't render as a boolean.
To fix this you just have to use the double negation operator to get the appropriate boolean value just like:
{!!this.props.item.uri && ( // error won't throw
<View>
<Image
style={{width: '100%', height: 250}}
source={{uri: this.props.item.uri}}
/>
</View>
)}

Answer 2

Ill modularize the code and issue should be solved otherwise letme know:
returnImage = () => (<View>
<Image
style={{width: '100%', height: 250}}
source={{uri: this.props.item.uri}}
/>
</View>)
displayImage = () => {
let renderData = this.props.item.uri ? this.returnImage():null
}
render() {
return (
<View style={newsItemStyles.wrapper}>
{this.state.isLoading && (
<View style={loadingOverlayStyles.container}>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
)}
{}
<TouchableHighlight
onPress={() =>
this.props.navigation.navigate('NewsSingle', {
item: this.props.item,
title: this.props.item.title,
favorite: this.props.favorite,
})
}>
<Text numberOfLines={2}>{this.props.item.title}</Text>
</TouchableHighlight>
{this.props.favorite ? (
<TouchableOpacity activeOpacity={0.5} onPress={this.unfavorite}>
<FontAwesome5 name="bookmark" size={18} solid />
</TouchableOpacity>
) : (
<TouchableOpacity activeOpacity={0.5} onPress={this.favorite}>
<FontAwesome5 name="bookmark" size={18} />
</TouchableOpacity>
)}
</View>
);
}
hope it helps