Load Dynamic Images - react-native

Question

I really do not have a ton of code for this so this might not be the perfect place to ask this.. but I need help trying to figure out some sort of a solution..
I have an array of URL's stored in the state.
<TouchableHighlight style={ styles.container } onPress={this.screenTap.bind(this)}>
<Image source={{uri: this.state.picCollection[this.state.counter].Picture }} style={styles.backgroundImage} >
<View style={ styles.loginForm }>
<Button onPress={this.screenTap.bind(this)} style={{ alignSelf: 'center', marginTop: 20, marginBottom: 20 }}>Create</Button>
<Text style={ styles.text }>Some text</Text>
</View>
</Image>
</TouchableHighlight>
This screenTap function that is the onPress just incriments, changing which url we are loading from this.state.picCollection
How this code above works is everytime its pressed it is intended to switch the image show. However, when I do that instead of seamlessly transitioning it shows this white screen before loading.
I am guessing this is because everytime I do this I am reloading the state. However I am not really sure how I would approach something like this.
Any advice would be amazing!

Answer 1

When you change one of the props or state variables in React, the affected components re-render. From the browser's point of view, one image disappears and another one appears in it's place.
What this means for you is that each time you change the URL, an image that wasn't there before now is, and it needs to be loaded anew. I'm very certain that's what the white flash is - the browser loading the new image.
Fortunately, you can load images without showing them. This page offers some good techniques, but the most basic is to just have N image tags with each of the images you want to load. Create a CSS class that consists of display: none and apply it to those images. Ta-da! The images are loaded and cached, but the uses doesn't see any of it.
Then, when your Image component changes its src tag to one of the Images you prepared earlier, the browser already has the image in memory, so it should load immediately. (Just make sure that it is exactly the same URL!)