1

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.

Kush
  • 644
  • 1
  • 12
  • 30
  • are you doing something during component mount because of that it render slow and you think image loading slow. local images load faster – user8119020 Sep 06 '20 at 07:54
  • I have only made 2 api calls and created an event listener. Yes local images load fast.I'm talking about remote images. – Kush Sep 06 '20 at 12:03
  • Ohh, in example it was local, anyway, ya it's slower based on quality and size of images, you can opt for fast image loader using glide or fresco Facebook for loading images – user8119020 Sep 07 '20 at 06:46

0 Answers0