How to prefetch large batch of images? about react-native-cached-image

[sladkoff]

Also here's how I batched my image requests in case anyone needs this:

import {ImageCacheProvider} from 'react-native-cached-image';
import {Promise as Bluebird} from 'bluebird';

function downloadImages(imageUrls) { 
    var chunks = [];
    var chunkSize = 10;
    // split large array of image urls into chunks
    for (var i = 0, j = imageUrls.length; i < j; i += chunkSize) {
        chunks.push(imageUrls.slice(i, i + chunkSize));
     }

    // I used the Bluebird Promise library to wait for each batch of requests to finish before starting another
    return Bluebird.each(chunks, (chunk) => {
        return ImageCacheProvider.cacheMultipleImages(chunk);
    })
}

[kfiroo]

Hey @sladkoff
Currently we start a prefetch task for each url concurrently and let the underlying native code handle the workload, I think what's happening is that you are overloading it with requests and it runs out of memory.

You could implement you own ImageCacheProvider to handle this, or you could try calling cacheMultipleImages with smaller batches

[kfiroo]

Also, we are saving all images to RNFetchBlob.fs.dirs.CacheDir see docs
I'm not sure if this space is limited.

[sladkoff]

Hey @kfiroo
Thanks for the quick answer.
I'm now batching the requests and it works perfectly.

I read up on the Android cache dir.
It doesn't seem to have limited space but it's still not recommended to store critical data since it may be purged automatically when the device storage runs full.

You should always maintain the cache files yourself and stay within a reasonable limit of space consumed, such as 1MB. When the user uninstalls your application, these files are removed.

Do you think it would be possible to support different storage options in the core project in the future?
For example the component could have an optional prop which defaults to the cache dir. The ImageCacheProvider would also need a customizable option parameter.

I don't really want to maintain a copy of the project and think that the functionality has its uses...

In the meantime I'll try to implement this locally. If it works and you agree, I could open a PR.

What do you think?

[naytun]

Try this one!! It works with expo@v25 and I’m using it in my project.

https://hackernoon.com/smart-images-in-react-native-db0ef047dd8c