React native Image prefetch

Question

I am having difficulties to understand Image prefetch. In the doc\'s there is not much explanation about it:

\"Prefetches a remote image for

Answer 1

It was indeed a question that I was dealing with for a while, and I learned a few things about Image.prefetch:

In the current React-Native version (0.48), this method is still in progress. To be more precise:

• the ios implementation is still incomplete.
• There is no complete guide on it.
• There is no way to clear cache (you can check if the url is cached, however as far as I know you cannot clear it now).

As a result, I don't suggest you use it. Regardless, if you want to know how the API works, it is how:

Purpose

The purpose is quite obvious I think, this API:

Prefetches a remote image for later use by downloading it to the disk cache

It means that you can use Image.prefetch(url) in your constructor or componentWillMount. It tries to fetch image asynchronically, then, render your page with some kind of an ActivityIndicator, Finally, when the image is successfully fetched you can re-render your component.

Image.prefetch(url) actually saves the image to disk (not memory), as a result, whenever or wherever you try to use

At firsts it checks the list of caches urls, if you have prefetched that url before (and it is located on the disk), it won't bother to re-fetch (unless you run function `Image.prefetch(url)' again (I am not sure if it works properly).

The implications of this issue are so complicated. It means that if you prefetch an image inside one component (for example ), when you try to show this specific image in another component (for example ), It won't fetch the image and just uses the disk cache.

Therefore, either don't use this Image.prefetch at all (until there is a complete API, with cache control) or use it at your own risk.

• on Android

On Android, you have 3 APIs for prefetch, and only one of them is presented in the documentation:

1. prefetch:

   var response = Image.prefetch(imageUrl,callbackFunction)
   

Image.prefetch can have an optional second argument callbackFunction, which a function that runs Before fetching image. It can be written in the following format:

    var response = Image.prefetch(imageUrl,()=>console.log('Image is being fetched'))

It might be worthy to note that, callbackFunction can have an argument called requestId, (indicating the number of prefetch among all other prefetches) which can be then used to abort the fetch.

    var response = Image.prefetch(imageUrl,(id)=>console.log(id))

Moreover, response is a promise, you can use .then to do more after the image is pre-fetched.

2. abortPrefetch

    Image.abortPrefetch(requestId) ;
   

used to abort the pending prefetch. requestId used as argument is the same as the one seen in prefetch.

3. queryCache

     Image.queryCache([url1,url2, ...])
       .then((data)=>console.log(data));
   

Used to check if a certain url is already cached, and if so where is it cached (disk or memory)

• on IOS

I think that only Image.prefetch(url) is currently available on IOS, and there is no callback function to be called as the second argument.