Inspired by:

• wcandillon/react-native-expo-image-cache (William Candillon)
• WrathChaos/react-native-progressive-fast-image (FreakyCoder)

• Cache remote images in file system with progressive loading
• Can be used with local images
• Uses react-native-file-access for file system access
• Written in Typescript
• Uses react-native-reanimated for animations
• Retry on network failure
• Supports new Architecture, both react-native-file-access and react-native-reanimated are Fabric ready.

yarn add @georstat/react-native-image-cache react-native-file-access react-native-reanimated

npm i @georstat/react-native-image-cache react-native-file-access react-native-reanimated

 cd ios
 pod install

For react native >= 0.65 use react-native-file-access >= 2.0.0

Note: retryDelay and maxRetries are optional, they default to 0 which means retry logic is disabled

import { CacheManager } from '@georstat/react-native-image-cache';
import { Dirs } from 'react-native-file-access';

CacheManager.config = {
  baseDir: `${Dirs.CacheDir}/images_cache/`,
  blurRadius: 15,
  cacheLimit: 0,
  maxRetries: 3 /* optional, if not provided defaults to 0 */,
  retryDelay: 3000 /* in milliseconds, optional, if not provided defaults to 0 */,
  sourceAnimationDuration: 1000,
  thumbnailAnimationDuration: 1000,
};

CacheManager.config = {
  // ...
  getCustomCacheKey: (source: string) => {
    // Remove params from the URL for caching images (useful for caching images from Amazons S3 bucket and etc)
    let newCacheKey = source;
    if (source.includes('?')) {
      newCacheKey = source.substring(0, source.lastIndexOf('?'));
    }
    return newCacheKey;
  },
};

If cacheLimit is set to 0 (default value) then the cache will never be auto pruned. This setting accepts a number of Bytes eg. 1024 * 1024 * 256(~256MB) and requires react-native-file-access >= 2.4.0, if you're using < 2.4.0 then leave the default value 0 (disabled).

Cache pruning flow:

1. Get all files from baseDir.
2. Sort them by lastModified, oldest first.
3. Get total size in Bytes by using reduce array method.
4. Check total size from step 3 and subtract cacheLimit value.
5. Run a while loop and keep deleting files so long as the current cache size (step 4) is larger than the size required to trigger cache pruning (cacheLimit value).
6. All steps above will run only if the image is not already cached, it runs after downloading a new image into the cache.

Pruning has been benchmarked on iOS simulator with a 5.7MB image and ~5.000 copies of it on cache without any issues. Please note that the pruning speed/performance might differ among devices. Use cacheLimit wisely and do not set a big value.

If you want to run your own tests on simulator then the cached images are stored in this location on a Mac: /Users/<your_name>/Library/Developer/CoreSimulator/Devices/<simulator_device_id>/ data/Containers/Data/Application/<application_id>/Library/Caches/images_cache, just copy and paste multiple images in there, there's no need to download them via the app.

• Dirs.CacheDir
• Dirs.DatabaseDir (Android only)
• Dirs.DocumentDir
• Dirs.LibraryDir (iOS only)
• Dirs.MainBundleDir
• Dirs.SDCardDir (Android only)
  • Prefer FileSystem.cpExternal() when possible.

import { CachedImage } from '@georstat/react-native-image-cache';

<CachedImage
  source="https://via.placeholder.com/3500x3500"
  style={{ height: 350, width: 150 }}
  thumbnailSource="https://via.placeholder.com/350x150"
/>;

Accepts 2 parameters:

import { CacheManager } from '@georstat/react-native-image-cache';

const url = 'https://..../image.jpg';

const urls = [
  'https://..../image.jpg',
  'https://..../image2.jpg',
  'https://..../image3.jpg',
];

CacheManager.prefetch(url); // prefetch single image

CacheManager.prefetch(urls); // prefetch mutliple images

Accepts 2 parameters:

import { CacheManager } from '@georstat/react-native-image-cache';

const url = 'https://..../image.jpg';

CacheManager.prefetchBlob(url).then(response => console.log(response)); // response is the base64 string

import { CacheManager } from '@georstat/react-native-image-cache';

await CacheManager.clearCache();

const uri = 'https://.../example.jpg';

await CacheManager.removeCacheEntry(uri);

await CacheManager.getCacheSize();

await CacheManager.isImageCached(uri);

• Convert library to React Hooks
• Make baseDir configurable
• Delete single cache entry

This library is developed for free.

Buy us a coffee using this link:

• Efstathios Ntonas
• George Bakogiannis
• George Kallinikos