React Native. trying to load an image from url - image

Question

I've managed to load an image from the web into my app but have an issue...
I have some local data about food. each food item has a food title, and a url to a picture online.
This is the Image component that lives inside my foodComponent.
<Image style={styles.cardImg} source={{uri:image}} />
image is a string to a url that is passed as a prop to this foodComponent.
Again it works but my problem is that the image takes time to load.
How could I only render the foodItem component once it has received/loaded an image?
I know about promises but I don't see how I could use it in this scenario.
here is my entire foodItem component:
export default function FoodItemTouchable(props){
return(
<View style={styles.container}>
<View style={styles.card}>
<View style={styles.cardHeader}>
<Text style={styles.text}>{props.item.title}</Text>
</View>
<Break/>
<CardImage image={props.item.url}/>
</View>
</View>
)
}
function Break() {
return(
<View style={{alignItems:'center'}}>
<View style={styles.break}>
</View>
</View>
)
}
function CardImage({image}){
return(
<View style={{padding:10,width:'100%'}}>
<Image
style={styles.cardImg}
source={{uri:image}}
/>
</View>
)
}
CardImage is where the image gets rendered.
the rest of the Components render first but the CardImage is delayed because it's loading the image.
If I could somehow load the image into a variable in the main Component,
and then there do a check, is image===null ? return null
so that the component renders only when the image is ready.

Answer 1

Have you tried like this?
{
props.item.url
&&
<CardImage image={props.item.url}/>
}