React native app loads url images slowly when opened the first time or when all data cleared

1.2k views Asked by At

I have a react native app where in the home page I need to fetch the settings and then set the image as banner as per the response of settings. Until the settings is fetched, I use local image to display as banner.

My problem here is that when I install the app for the first time, after the settings are fetched it takes quite some time (3-4 seconds for the image to load, images are of some 300 kbs, they're jepeg if it matters). I tried firing onLoadStart and onLoadEnd in the Image component and logging the statements. They have quite some time lag between them. It only occurs on the first time only/or when I clear all data from settings in memory. The next time I launch the app the image seems to have only some 10s miliseconds between the onLoadStart and onLoadEnd and images show up without any delay. SOme code snippets are:

                    <ImageBackground
                    defaultSource={require('../../assets/homebanner.jpg')}
                    onLoadStart={() => { console.log('loading started'); }}
                    onLoadEnd={() => { console.log('loaded'); this.setState({ bannerImageLoaded: true }) }}
                    source={this.state.settingsLoaded && this.state.bannerImageLoaded
                        ? { uri: this.state.settings.bannerImageUrl }
                        : require('../../assets/homebanner.jpg')}
                    style={{ height: width / 2.5, width: width }} />

Here I have used defaultSource hoping that it would load before the uri image is actually loaded but this doesnt seem to make any difference. I also tried, setting a state variable bannerImageLoaded as true at the onLoadEnd event and applied logic as seen in the code.

Still, it does not make any difference and there are a blank white boxes at the very first load of the app which makes it look bad. How can I manage this??

I have heard about react-native-fast-image but dont want to use it as once the app is installed, it doesnt show any trouble the second time.

Please guide me through this.

0

There are 0 answers