How to check the current cache size and delete them

[gameboyVito]

How to set the cache size? Tons of images will be cached in the local storage, methods to check the current cache size and delete all cached files, or a prop to set the limit of cache size would be very helpful.

[kfiroo]

@gameboyVito Hey
Currently, if you know the urls of the cached images you can use ImageCacheProvider.deleteMultipleCachedImages, otherwise I will provide a ImageCacheProvider.clearCache method in the next release.

Regarding getting the cache size, this turned out to be harder then I first thought. I was hoping that using RNFetchBlob.fs.stat on the root cache dir would be enough, but it doesn't work recursively.

I'm working on a solution that will traverse the cache files and accumulate the size, however it doesn't feel right doing all this work over the RN bridge.
Suggestions are welcome.

Limiting the cache size is a nice concept but I'm afraid implementing it might be a bit of an overhead, for instance, how would handle the case where the cache is "full" and the user tries to cache another image? we would also need to know the cache size at all times, and the sizes of images before we download them. probably manage an LRU or other cache clearing mechanism.

Again, suggestions are welcome :)

[gameboyVito]

Yeah, ImageCacheProvider.clearAllCache() would be nice~ Maybe you can reference on this repo, it implements the LRU algorithm to clear the cache.

[kfiroo]

@gameboyVito I would prefer to keep this component simple for now, and avoid dealing with managing the cache size.
I'm working on a getCacheSize method that users can use to manage the cache themselves, and maybe implement cache management in the future.

Thanks for the reference! It would be helpful when we would decide to add cache management.

[gameboyVito]

@kfiroo Hi, I found this repo has implemented something like lifecycle for cached images. That means when you quit your app and reopen it, all cached images will be deleted when you pass a prop called mutable. Just like what I asked today, if my user profile photo is changed in the website but the server always return the same url, there is no way to know whether to update the cached image when i am using your component. Though you provides a ImageCacheProvider to clear the specified image, this is still not enough to detect the difference between two images. If this comparison is too hard to implement, maybe just provide a prop to set the cached images just live in the runtime.

[kfiroo]

@gameboyVito Oh! I see what you're saying.
This is actually not possible to achieve with the current implementation :(

I was under the impression that react-native has an internal cache system for fetching urls, which means that within a single app session the urls would not get downloaded again (kinda like the browser has it) so I'm not sure the mutable cache system is required.

Maybe for your profile picture you can simply use an Image component and the image would be downloaded only once.

[gameboyVito]

Thanks for your patient answer ^_^

[kfiroo]

@gameboyVito Hey, master has a version with a working getCacheInfo that returns the following format

{
  files: [], // an array of all files in the cache represented by their `fs.stat()` result
  size: 0    // size of cache in bytes (see example)
}

Hope that helps

[gameboyVito]

genius! thx~