Image.prefetch not automatically loading from cache [React-Native / Expo]

Question

I am trying to understand how to cache an Image url so that it does not need to be redownloaded. I have taken a look at: https://docs.expo.io/versions/v19.0.0/guides/preloading-and-caching-assets.html and have been using Image.prefetch like so:

const prefetchedImages = images.map(url => {
  console.log('url', url) //this is correctly logging the url
  return Image.prefetch(url)
});

Promise.all(prefetchedImages)
    .then(() => {
        this.setState({loaded:true})
})

This ultimately does set the state as true. I am then rendering my Images in a different component, but I make sure the component that is prefetching does not unmount. I load the url like so:

<Image source={{uri: myImageUrl}} style={{width:100, height:100}} />

When I load images into my grid view, only the local images appear right away, and the ones with URLs are white for a moment before rendering. When using cache:‘force-cache’ on iOS, the images are in fact loaded from cache and there is no lag. I thought I did not need to do that if I used prefetch.

Am I missing something here? I thought I can call my Image source as usual and the system will know how to grab the cached image for that url.

Answer 1

I do not think prefetch is quite as simple as just loading the image from cache just because it is in the cache, if that makes sense.

Check out this thread https://github.com/facebook/react-native/issues/2314 and this question React native Image prefetch.

If you want to save images and have them always available offline look at https://www.npmjs.com/package/react-native-preload-images.