React Native Image Cache and Progressive Loading

React Native image cache and progressive loading for iOS and Android. Based on Expo Kit.

This is a component used in the React Native Elements and the React Native Fiber starter kits.

Checkout this medium story about react-native-expo-image-cache.

Installation

This package has a peer dependency with React, React Native, and Expo.

yarn add react-native-expo-image-cache

Usage

Props

Props	Default	Options
tint	dark	light, dark, default
transitionDuration	300	custom in ms

import {Image} from "react-native-expo-image-cache";

// preview can be a local image or a data uri
const preview = { uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" };
const uri = "https://firebasestorage.googleapis.com/v0/b/react-native-e.appspot.com/o/b47b03a1e22e3f1fd884b5252de1e64a06a14126.png?alt=media&token=d636c423-3d94-440f-90c1-57c4de921641";
<Image style={{ height: 100, width: 100 }} {...{preview, uri}} />

CacheManager

Get the local image from a remote URI

import {CacheManager} from "react-native-expo-image-cache";

const {uri} = this.props;
const path = await CacheManager.get(uri).getPath();
// if path is undefined, the image download has failed 

You can also clear the local cache:

import {CacheManager} from "react-native-expo-image-cache";

await CacheManager.clearCache();

Set the cache directory

If you want to work in another cache directory, you can setup the cache directory.

import * as FileSystem from 'expo-file-system';
import {CacheManager, setBaseDir} from "react-native-expo-image-cache";
const uri = "https://www.google.com/favicon.ico"
setBaseDir(`${FileSystem.cacheDirectory}custom-cache-directoy`);
await CacheManager.get(uri).getPath(); // Cache the image.

Remove an entry from the cache

You can remove a file from cache with it's url like this :

import {CacheManager, removeCacheEntry} from "react-native-expo-image-cache";
const uri = "https://www.google.com/favicon.ico"
// Cache the image & get the images.
const localUri = await CacheManager.get(uri).getPath();
// Destroy the cached image
await removeCacheEntry(uri);