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.