react-native-smart-image-cache

react-native-smart-image-cache

A caching system for the react-native image component. Allows the manual refreshing of an image as well as setting a timeout for the cache to redownload images after a certain period of time.

Installation

This package depends on having react-native-fetch-blob installed into your project. Follow the instructions for installation at react-native-fetch-blob. At the very least, run yarn add react-native-fetch-blob, then react-native link and add

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

to your android/app/src/main/AndroidManifest.xml file. Then install the react-native-smart-image-cache package.

yarn add react-native-smart-image-cache

Usage

To use the included SmartImage component, use the import statement to load the module.

import { SmartImage } from 'react-native-smart-image-cache'

Pass in style props as usual. To load an image, pass the url prop to the component. The image will be downloaded and saved to the device. You can use the fallbackURI property to set a local uri the component can fall back to if the download fails. You can also pass httpHeaders for use in the image download with the httpHeaders property. When the component is reloaded, it will check the cache for the image. If the image exists and is younger than the cache timeout (1/2 hour) the image is redownloaded and saved to the device. To force an image refresh, set the reload prop to "force". This will force the component to download the image. Here is a simple example of forcing an image to redownload.

export default class App extends Component {
  constructor() {
    super(); 
    this.state = {
      url: "https://picsum.photos/200/200/?random",
      reload: "",
    }
  }
  
  ForceImageDownload() {
    this.setState({ reload: "force" },function() { //Updates props on the SmartImage, triggering the image download if "reload" is force
      this.setState({reload: ""}) //Set reload to nothing after to make sure any other property changes don't trigger a reload
    });
  }
  
  render() {
    <View>
      <Button title="Force Image Download" onPress={() => { this.ForceImageDownload() }} />
      <SmartImage style={{height:200, width: 200}} url={this.state.url} reload={this.state.reload} />
    </View>
  }
}

The cache can also be used by itself, the currently implemented methods are: GetCache(timeout), Subscribe(url, callback, httpHeaders = {}), Unsubscribe(url, callback), GetURIFromURL(url, httpHeaders={}) and DownloadImage(url, httpHeaders = {}). Always get the cache reference from the Promise returned by GetCache. You can set the timeout of the cache by passing in a value the FIRST time you call this function. The cache is a static object so it will be initilized with this value. Next, you can subscribe a component to listen whenever a specified url in the cache updates by calling Subscribe. Pass in the url you want to listen to and the function that should be run when the uri for the url updates. The callback needs to be in the form of function(uri) to work properly. Unsubscribe removes the specified function from receiving notifications of url->uri updates. GetURIFromURL will return the uri for the specified url. If the url doesn't yet have a cache entry, it's downloaded. Subscribers who subscribed via the Subscribe function will be notified when the download is complete. (There is currently a bug in the SmartImageCache component that triggers the notification with a uri set to "". I can't figure out why it does this, but if you just ignore the "" passed in, everything else seems to work okay.) If the cache entry is invalid due to age, the image is redownloaded and subscribers are notified. To force an image download, call DownloadImage with the url of the image to cache. Subscribers will be notified when the download completes. To use the cache by itself, just include it:

import { SmartImageCache } from 'react-native-smart-image-cache'

You can also delete the cache by calling DeleteCache() on the cache object. This can be useful for clobbering cached profile pictures on logout for example.