React Native Image Cache and Progressive Loading based on Expo

Usage no npm install needed!

<script type="module">
  import reactNativeExpoImageCache from '';


React Native Image Cache and Progressive Loading

CircleCI npm version

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.


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

yarn add react-native-expo-image-cache



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 = "";
<Image style={{ height: 100, width: 100 }} {...{preview, uri}} />


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