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.