How do you stop the image flicker when changing state to render different remote image uris?

Question

If I have a list of uris:

[
  https://example.com/pic1.jpg,
  https://example.com/pic2.jpg,
  https://example.com/pic3.jpg,
]

Change the state to switch from 0 to 1:

this.setState({ index: 1 })

And render that image:

<Image style={...} source={{ uri: images[this.state.index] }} />

When pic2.jpg shows up for the first time, it will have a very ugly flicker.

I have a scenario where I would expect a user to load the first image, then tap through to set the state to see the rest of the images. It would be nice to somehow preload the images, so they can display without a flicker.

There are libraries like https://github.com/DylanVann/react-native-fast-image which will work great AFTER the first load cause it will be cached, but I would like to preload the other uris while I am still on the first uri state.

Answer 1

Oh, it was staring me in the face. This happens to do exactly what I want:

https://github.com/DylanVann/react-native-fast-image#fastimagepreload-source--void