CachedImage component and Cache image manager for React Native.
I am no longer maintaining this library but react-native-expo-image-cache which depends on ExpoKit.
Checkout 5 things to know about Images in React Native
Starting version 0.43, the React Native Image component has now a cache property: cache: force-cache (iOS only). This is a major improvement but only for iOS and at this time, I wasn't able to use it in a way that provides a user experience as smooth as this module.
This package has a dependency with rn-fetch-blob. If your project doesn't have a dependency with this package already, please refer to their installation instructions.
npm install react-native-img-cache --saveThe CachedImage component assumes that the image URI will never change. The image is stored and served from the application cache. This component accepts the same properties than Image except for a few difference:
sourcedoesn't accept an array of image URIs likeImagedoes. Please file an issue if that's something you would like to see supported.- The
uriproperty insourceis mandatory. - The
bodyproperty insourceis not supported. Please file an issue if that's something you would like to see supported.
import {CachedImage} from "react-native-img-cache";
<CachedImage source={{ uri: "https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg" }} />The mutable property implies assumes that the image URI can change over time. The lifetime of this cache is the one of the running application and it can be manually busted using ImageCache.
import {CachedImage} from "react-native-img-cache";
<CachedImage source={{ uri: "https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg" }} mutable />By default, the CachedImage component is using the standard RN Image component.
It is possible however to use a different component via CustomCachedImage. In the example below, we use the Image component from react-native-image-progress.
import {CustomCachedImage} from "react-native-img-cache";
import Image from 'react-native-image-progress';
import ProgressBar from 'react-native-progress/Bar';
<CustomCachedImage
component={Image}
source={{ uri: 'http://loremflickr.com/640/480/dog' }}
indicator={ProgressBar}
style={{
width: 320,
height: 240,
}}/>Remove cache entries and all physical files.
ImageCache.get().clear();ImageCache can be used to bust an image from the local cache.
This removes the cache entry but it does not remove any physical files.
ImageCache.get().bust("https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg");It can also be used to cancel the download of an image. This can be very useful when scrolling through images.
ImageCache.get().cancel("https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg");The ImageCache class can register observers to the cache.
const immutable = true;
const observer = (path: string) => {
console.log(`path of the image in the cache: ${path}`);
};
ImageCache.get().on(uri, observer, immutable);We use the observer pattern instead of a promise because a mutable image might have different version with different paths in the cache.
Observers can be deregistered using dispose:
ImageCache.get().dispose(uri, observer);With jest, testing a snapshot can generate errors. Jest doesn't know how to generate the component CachedImage. For fix this, you have to mock CachedImage with Image component.
jest.mock('react-native-img-cache', () => {
const mockComponent = require('react-native/jest/mockComponent')
return {
CustomCachedImage: mockComponent('Image'),
CachedImage: mockComponent('Image'),
}
})
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
