dacastro4/react-native-expo-image-cache

React Native Image Cache and Progressive Loading based on Expo

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);