CODEWITHSUNDEEP
react-native
Molly Harper
Molly Harper

Reputation: 2453

React Native local image loads a second after content

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.

Upvotes: 2

Views: 2096

Answers (1)

challenger
challenger

Reputation: 2214

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>
        ....
    )
  }
}

Upvotes: 1

Related Questions