React Native Image Cache on File System with Progressive Loading

Inspired by:

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

Features

• Cache remote images in file system with progressive loading
• Uses react-native-file-access for file system access
• Written in Typescript

Preview

iOS:

Android:

Installation

yarn:

yarn add @georstat/react-native-image-cache

npm:

npm i @georstat/react-native-image-cache

Usage

Put this Global config on your app entry eg. App.tsx or index.js (Required):

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

CacheManager.config = {
  baseDir: `${Dirs.CacheDir}/images_cache/`,
  blurRadius: 15,
  sourceAnimationDuration: 1000,
  thumbnailAnimationDuration: 1000,
};

Directory constants, choose wisely: (react-native-file-access docs)

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

Component:

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"
/>;

Clear local cache:

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

await CacheManager.clearCache();

Remove single cache entry:

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

await CacheManager.removeCacheEntry(uri);

Get local cache size:

await CacheManager.getCacheSize();

Props

CachedImage accepts the following props:

Properties	PropType	Description
source	String	(Required) Uri of remote image.
sourceAnimationDuration	Number	source image animation duration when loading, defaults to 1000ms (overrides config)
thumbnailSource	String	(Required) Uri of the thumbnail image
thumbnailAnimationDuration	Number	Animation duration for thumbnail, defaults to 1000ms (overrides config)
blurRadius	Number	Amount of blur to apply on thumbnailSource image , defaults to 15 (overrides config)
loadingImageComponent	React.Node	Defaults to an image with the loadingSource prop
loadingImageStyle	Object	Style for loading image component. Works if you don't provide a loadingImageComponent
loadingSource	object	Source for loading Image component. Works if you don't provide loadingImageComponent
onError	Func	Runs when there is an error loading the image from cache
resizeMode	String	React native Image component resizeMode defaults to contain
style	Object	source AND thumbnailSource image style
options	Object	custom options for the fetch image http request eg. {headers:{}, body:{}}

Todo:

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

Authors:

• Efstathios Ntonas
• George Bakogiannis
• George Kallinikos