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.

You can try to implement this solution medium.com/one-more-thing-studio/… — Jeremie
– Jeremie, Commented Dec 15, 2017 at 14:47
You cannot rely on prefetch in most cases. I wrote a medium story on that topic at medium.com/@wcandillon/… — wcandillon
– wcandillon, Commented Jan 29, 2018 at 10:12

Lance · Accepted Answer · 2017-10-09 08:41:35Z

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.

answered Oct 9, 2017 at 8:41

Lance

7618 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related