react-native-cache-imagewrap v1.0.1

react-native-cache-imagewrap

Cached Image component for react native

This packages uses 2 peer dependencies :

@react-native-async-storage/async-storage

and

react-native-blob-util

Versions

Currently it supports

react-native-blob-util version 0.17.0 and react native 0.65 and up.

Installation

npm install react-native-cache-imagewrap --save
- or -
yarn add react-native-cache-imagewrap

We use react-native-blob-util and @react-native-async-storage/async-storage to handle file system access in this package and it requires an extra step during the installation.

Peer dependency installation

yarn add react-native-blob-util @react-native-async-storage/async-storage

Usage

CachedImage

CachedImage is a component that fetches and caches images in AsyncStorage for efficient rendering. You can use it as follows:

import { CachedImage } from "react-native-cache-imagewrap";

const YourComponent = () => {
  const imageUri = "https://example.com/your-image.jpg";

  return (
    <CachedImage
      uri={imageUri}
      cache={true} // Enable caching (default is true)
      imgProps={{ style: { width: 200, height: 200 } }} // ImageProps for customization
      retryCount={3} // Number of automatic retry attempts (default is 1)
    />
  );
};

deleteCache

deleteCache is a function to delete a cached image from AsyncStorage. You can use it like this:

import { deleteCache } from "react-native-cache-image";

const imageUri = "https://example.com/your-image.jpg";

async function deleteCachedImage() {
  try {
    const result = await deleteCache(imageUri);
    console.log(result); // "cache deleted" if successful
  } catch (error) {
    console.error("Error deleting cache:", error);
  }
}

// Call the function to delete the cached image
deleteCachedImage();

prefetchImage

prefetchImage is a function for prefetching and caching images in AsyncStorage for later use. You can use it like this:

import { prefetchImage } from "react-native-cache-image";

const imageUri = "https://example.com/your-image.jpg";

async function prefetchAndCacheImage() {
  try {
    await prefetchImage({ uri: imageUri });
    console.log("Image prefetched and cached successfully");
  } catch (error) {
    console.error("Error prefetching image:", error);
  }
}

// Call the function to prefetch and cache the image
prefetchAndCacheImage();