Performance issue - Loading Too Much Time MapView and High resolution image - React Native

Question

Performance issue :

Without the image and mapView, push one view to another. it's working fine and very fast. but I will added high resolution image and MapView in the render() function. it's take time to load.

Please what is best solution to load both image and Mapview in render() method. Currently i will load image and mapView in Render() function.

Render function code :

     render(){
       const { navigate } = this.props.navigation;
        return (
          <View style = {styles.container}>

   **HIGH RESOLUTION IMAGE.**

                <Image style = {styles.imageSty}
                  source={require('./Images/background.png')}
                />
   **MAP VIEW**

            <MapView style = {{marginLeft: 40, marginRight: 40, width : Dimensions.get('window').width - 80, marginTop : 10 , height : 100, justifyContent: 'center' ,alignItems: 'center'}}
                  region={this.state.region}
                  onRegionChange={this.onRegionChange}
                />    
          </View>
       )
}

Answer 1

You can fetch the image and till its fetched you can show a placeholder image or a loading indicator. After the image fetched successfully you can change the source of the image and show the image from the cache.