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)
    />
  );
};

| Prop Name | Type | Default Value | Description | | ----------- | ------------------------- | ------------- | --------------------------------------------------- | | uri | string | N/A | The URI of the image to be displayed. | | cache | boolean | true | Enable or disable image caching. | | headers | { [key: string]: string } | {} | HTTP headers for fetching the image. | | requestType | "GET" | "POST" | "GET" | HTTP request type for fetching the image. | | imgProps | ImageProps | {} | ImageProps for customization (e.g., width, height). | | retryCount | number | 1 | Number of automatic retry attempts. |

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();