Registry / storage / react-native-image-cache-wrapper

react-native-image-cache-wrapper

library1.0.7jsnpmunverified

A drop-in replacement for React Native's <Image> and <ImageBackground> components that automatically caches remote images to local storage with configurable expiration (default 1 week). Version 1.0.7 is the latest stable release. It uses rn-fetch-blob for file system access and supports prefetching, cache deletion, and cache directory customization. Unlike other caching solutions, it mimics the exact Image/ImageBackground API and supports base64 data caching. Requires React Native project and rn-fetch-blob peer dependency.

storage

npm install react-native-image-cache-wrapper

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-IMAGE

react-native-image-cache-wrapper

storagejavascriptv1.0.7

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

CachedImage

✓ import CachedImage from 'react-native-image-cache-wrapper'

✗ import { CachedImage } from 'react-native-image-cache-wrapper'

Default export, not named export.

CachedImage.getSize

✓ CachedImage.getSize(url, success, fail)

✗ CachedImage.getSize(url).then(...)

Uses callbacks, not promises.

CachedImage.prefetch

✓ CachedImage.prefetch(url, expiration, success, fail)

✗ CachedImage.prefetch(url, success, fail)

Second argument is expiration in seconds (0 for no expiration).

Basic usage of CachedImage with a remote image source and 1-hour cache expiration.

import CachedImage from 'react-native-image-cache-wrapper'; import { View } from 'react-native'; export default function App() { return ( <View> <CachedImage source={{ uri: 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png' }} expiration={3600} /> </View> ); }

Debug

Known issues

breakingRequires rn-fetch-blob as peer dependency - must be installed separately.

fix

Run 'npm install rn-fetch-blob --save' and link (for RN < 0.60).

affects: >=0

deprecatedUse of react-native-fetch-blob (deprecated) instead of rn-fetch-blob. v1.0.2 migrated from react-native-fetch-blob to rn-fetch-blob.

fix

Upgrade to v1.0.2 or later and replace react-native-fetch-blob with rn-fetch-blob.

affects: <1.0.2

gotchaFor RN 0.60+, you must use rn-fetch-blob v0.10.16.

fix

Install 'rn-fetch-blob@0.10.16' if using RN 0.60+.

affects: >=1.0.0

gotchaCachedImage is default export, not named export. Common mistake: import { CachedImage } leads to undefined.

fix

Use 'import CachedImage from ...' (no curly braces).

affects: >=0

gotchaStatic methods use callbacks, not promises. Attempting .then() will fail.

fix

Pass success and fail callbacks as arguments.

affects: >=0

Errors

Common errors & fixes

Cannot find module 'rn-fetch-blob'

rn-fetch-blob peer dependency not installed.

fix

Run npm install rn-fetch-blob --save

TypeError: undefined is not an object (evaluating 'CachedImage.getSize')

Named import used instead of default import.

fix

Change to import CachedImage from 'react-native-image-cache-wrapper'

image not loaded / cache not working on Android

Missing or improper linking of rn-fetch-blob.

fix

Ensure rn-fetch-blob is properly linked: react-native link rn-fetch-blob (or autolink on RN 0.60+)

Strange error (unspecified) in v1.0.7

Bug fix release v1.0.7 addresses a strange error; upgrade from earlier versions.

fix

Update to v1.0.7: npm install react-native-image-cache-wrapper@1.0.7

Upgrade

Version history

1.0.7latest on npm

Audit

Dependencies

rn-fetch-blobrequiredHandles file system access for caching images locally

Agent activity

16 hits · last 30 days

node

Resources

githubhttps://github.com/wonday/react-native-image-cache-wrapper ↗

packagereact-native-image-cache-wrapper ↗

homepagehttps://github.com/wonday/react-native-image-cache-wrapper#readme ↗