React Native - Prepare Images before rendering - image

Question

I have been struggling for the past couple of days figuring out a good approach to my problem. I need to display an < Image> component one at a time (Requirement, so ListView is not an option). This component has as source an uri that points to a firebase image. I am trying to prepare on componentWillMount an array that contains all the component Images that will be displayed such as:
let mediaArray = this.props.list.map(function(media){
return <Image style={styles.imageStyle} source={{uri: media}} />;
});
this.setState({list: mediaArray});
However, when I try to display a specific image on that array on the render function I still need to wait a couple of seconds to see the image.
render(){
{this.state.list[currentIndex]}
}
If it was previously prepared, why does it tries to obtain the image again? This suggest that React only looks for the source when is rendering only?
You can say that I am trying to create a "Feed" (Like instagram, facebook, etc), but is not conventional because I need to display one Image Component at a time.
I also tried looking into cache images, but that will not help me because in reality I will be trying to obtain hundreds of images.

Answer 1

you are on the money with the realization that React Native will not fetch the sources for your images until they are rendered. If you want to preload the images you will have to call prefetch on the image source. A simple example using your code would be to modifywhere you create mediaArray to look like this:
let mediaArray = this.props.list.map(function(media){
Image.prefetch(media); // that's it!
// you can now remove this following line and just construct a single image tag later.
return <Image style={styles.imageStyle} source={{uri: media}} />;
});
this.setState({list: mediaArray});
if you want to be a bit more clever you could prefetch only a few of the upcoming images each time currentIndex is updated. If you need more guidance please share more of this component's code.
Hope this helps!