React Native Image Cache with Progressive Loading


A React Native component that caches remote images in the file system with progressive loading for iOS and Android.

Basic usage:

1. Install and import the component.

$ npm i @georstat/react-native-image-cache
import { CachedImage } from '@georstat/react-native-image-cache';

2. Cache a remote image.

  style={{ height: 450, width: 350 }}

3. Clear the cache.

import { CacheManager } from '@georstat/react-native-image-cache';
await CacheManager.clearCache();

4. Get the image file zie.

await CacheManager.getCacheSize();

5. Available component props.

cacheKey?: string;
sourceAnimationDuration?: number;
loadingImageComponent?: React.ReactNode;
loadingImageStyle?: StyleProp<ImageStyle>;
loadingSource?: ImageSourcePropType;
onError: (error: { nativeEvent: { error: Error } }) => void;
options?: DownloadOptions;
resizeMode?: ImageResizeMode;
source: string;
style?: StyleProp<ImageStyle>;
thumbnailAnimationDuration?: number;
thumbnailSource: string;


React Native Image Cache with Progressive Loading

Add Comment