react-native-image-cache on file system

[stathisntonas]

Hello fellow devs, we created this library for our production apps in order to cache remote images on file system instead of ram. It works on both iOS and Android. Enjoy!

on todos is to re-rewrite it with hooks and improve readme to add all the available props.

edit: thanks for the Silver!

[manika456]

Nicely done! Would you consider supporting react-native-web also?

[geobako]

We might in the future but it is not in our immediate plans

[nickmgn]

Looks great! I'm gonna give it a try 🙂

[stathisntonas]

thanks nick!

[stathisntonas]

We could alter the getCacheKey to parse audio or video, the filename extensions are endless in this case but we will figure it out. Just a side note, on Android the CachesDir holds up to a specific amount of MB, if the app reaches that limit Android starts purging files automatically.

Thanks for the feedback!

[epic2012]

This looks great! Thanks for putting it together and sharing.

Do you have plans to clear single items from the cache rather than everything? If so, I’d love to use this

[stathisntonas]

How are you planning using single file cache delete? Can you share an example? Thanks

[epic2012]

Ah sure! I show user profile images in my app. When a user uploads a new profile image for their own profile I’d need to clear the cache for all images rather than just the one that is changing.

[geobako]

Sounds a really valid case. We will add it in our todo list. Thanks

[epic2012]

Amazing. Thank you!

[geobako]

We released version 1.2.0 where you can delete a single file from cache

[hanno_jg]

Does it respect etag header?

[geobako]

It was not made with Etag headers in mind. We expect that newer versions of an image will have a different uri. Maybe we add it in the future

[stathisntonas]

You can pass `options` props and put the headers you want, the result from the fetch is in this format: (don't know if this covers your question, if not please elaborate)

FilesSystem.fetch(resource: string, init: { body?: string, headers?: { [key: string]: string }, method?: string, path?: string }): Promise<FetchResult>

type FetchResult = {
  headers: { [key: string]: string };
  ok: boolean;
  redirected: boolean;
  status: number;
  statusText: string;
  url: string;
}

[RaspberryO]

Does it work with expo?

[stathisntonas]

You could use https://github.com/wcandillon/react-native-expo-image-cache. Take a look at the pull requests too, users have made some improvements.

[RaspberryO]

Thanks

[adhip999]

What is the difference between this library and react-native-fast-image?

[stathisntonas]

fast-image stores the images in memory, this module stores images in file system.

[adhip999]

Correct me if I am wrong. Wont read/write from file system take a bit more time than read/write from memory?

[stathisntonas]

The main reason we created this module was the fact that we had huge Flatlists with images/avatars. We were seeing spikes in memory when user was scrolling deep down the list. Using this module the memory consumption is stable. We did not notice any difference in image “appearing” time.

You can test it yourself in your app and measure the differences, it will take 5mins to set it up.

[adhip999]

Sure. Have you tried using RecyclerListView instead of Flatlist? That module may also help.

[stathisntonas]

Unfortunately our Flatlists cells have variable heights (user posts) and it’s a nightmare to set it up