1

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>
       )
}
Kirit Modi
  • 23,155
  • 15
  • 89
  • 112

1 Answers1

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.

bennygenel
  • 23,896
  • 6
  • 65
  • 78
  • Nop. Its Static background image. So why Call web services and fetch. also there are MapView – Kirit Modi Aug 30 '17 at 10:05
  • What are you using for navigation component? – bennygenel Aug 30 '17 at 10:07
  • can you give a little snippet of your code please? Maybe it will help to find if it is related to how component renders. – bennygenel Aug 30 '17 at 10:11
  • Its not a pretty solution but you can try adding the image and the mapview after the componentDidMount. setting a state variable on componentDidMount and checking it before rendering MapView and Image. This way scene would push quickly and then you can show the required components. – bennygenel Aug 30 '17 at 10:23
  • I found out that you can lazy load components. [Here](https://reactnavigation.org/docs/routers/stack#RouteConfig). `// This can be handy to lazily require a screen: getScreen: () => require('Settings').default,` – bennygenel Aug 30 '17 at 10:24
  • okey. according the comment, I Will do the load component after rendering. but its not good way. I put timer in componentDidMount. after load the mapView. But its not good way may be. – Kirit Modi Aug 30 '17 at 10:30
  • Hi github.com/hartws1/IRLScanner This demo want to use in my React Native project ? Any one can help me – Kirit Modi Mar 29 '18 at 10:22