React Native Image Cache and Progressive Loading based on Expo
React Native Image Cache and Progressive Loading based on Expo
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 = "https://firebasestorage.googleapis.com/v0/b/react-native-e.appspot.com/o/b47b03a1e22e3f1fd884b5252de1e64a06a14126.png?alt=media&token=d636c423-3d94-440f-90c1-57c4de921641";
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();No open issues yet, or sync has not completed.