npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-img-cache

v1.6.0

Published

CachedImage component for React native

Downloads

436

Readme

React Native Image Cache

CircleCI npm version

CachedImage component and Cache image manager for React Native.

Deprecated

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

Why do I need this?

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.

Installation

rn-fetch-blob

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 --save

Usage

CachedImage

The 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:

  • source doesn't accept an array of image URIs like Image does. Please file an issue if that's something you would like to see supported.
  • The uri property in source is mandatory.
  • The body property in source is 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 />

Custom Image Component

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, 
  }}/>

ImageCache

clear()

Remove cache entries and all physical files.

ImageCache.get().clear();

bust(uri)

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

cancel(uri)

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

on(uri, observer, immutable)

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.

dispose(uri, observer)

Observers can be deregistered using dispose:

ImageCache.get().dispose(uri, observer);

Testing with jest

Mocking CachedImage

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'),
  }
})