React Native Image Cache and Progressive Loading

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.

React-Native-Image-Cache

Installation

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

yarn add react-native-expo-image-cache

Usage

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;
CacheManager.cache(uri, newURI => this.setState({ uri: newURI }));

You can also clear the local cache:


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

await CacheManager.clearCache();

Download Details:

Author: wcandillon

GitHub: https://github.com/wcandillon/react-native-expo-image-cache

#react-native #reactjs #programming