React Native local image loads a second after content - react-native

Question

I have a local image that I am using as a background image. It loads around a second after the rest of the content.
<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}>
imageContainer: {
flex: 1,
width: null,
height: null,
}
Is there a way to load the content after the image is loaded? I tried using the onLoad and onLoadEnd props, but they were fired prior to the image loading.

Answer 1

Yes there is.. it's not that simple actually, you will need to use Image prefetch.. check this link : React Image prefetch
Or actually you can try this:
<Image
onLoadEnd={()=>this.setState({loadEnd:true})}
source={require('./assets/climbing_mountain.jpeg')}
style={styles.imageContainer}>
and in the render method you can do something like which I don't really recommend:
render(){
if(!this.state.loadEnd) {
return(
<Image
key='image_key'
onLoadEnd={()=>this.setState({loadEnd:true})}
source={require('./assets/climbing_mountain.jpeg')}
style={styles.imageContainer}>
)
}else {
return (
<View>
....
<Image
key='image_key'
onLoadEnd={()=>this.setState({loadEnd:true})}
source={require('./assets/climbing_mountain.jpeg')}
style={styles.imageContainer}>
</view>
....
)
}
}