# 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.

Latest version **1.0.10** (published 2018-06-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-smart-image-cache
pnpm add react-native-smart-image-cache
yarn add react-native-smart-image-cache
bun add react-native-smart-image-cache
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2018-06-13 |
| First published | 2018-05-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 394.5 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | Opal Labs |
| Maintainers | opal-labs |
| Keywords | react-native, image, cache, refresh, download |

## Links

- npm: https://www.npmjs.com/package/react-native-smart-image-cache
- Repository: https://github.com/opal-labs/react-native-smart-image-cache
- Homepage: https://github.com/opal-labs/react-native-smart-image-cache#readme
- Issues: https://github.com/opal-labs/react-native-smart-image-cache/issues
- npm.io page: https://npm.io/package/react-native-smart-image-cache

## Dependencies (1)

- [crypto-js](https://npm.io/package/crypto-js.md) ^3.1.9-1

## Alternatives

- [memory-cache](https://npm.io/package/memory-cache.md) — 795.0K weekly downloads
- [@httptoolkit/proxy-agent](https://npm.io/package/@httptoolkit/proxy-agent.md) — 11.2K weekly downloads
- [express-cache-controller](https://npm.io/package/express-cache-controller.md) — 5.3K weekly downloads
- [http-cache-middleware](https://npm.io/package/http-cache-middleware.md) — 4.5K weekly downloads
- [cache2](https://npm.io/package/cache2.md) — 1.5K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2018-06-13
- 1.0.9 — 2018-06-01
- 1.0.8 — 2018-06-01
- 1.0.7 — 2018-06-01
- 1.0.6 — 2018-05-31
- 1.0.5 — 2018-05-30
- 1.0.4 — 2018-05-25
- 1.0.3 — 2018-05-24
- 1.0.2 — 2018-05-24
- 1.0.1 — 2018-05-23
- 1.0.0 — 2018-05-23

## README

# 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.

<br>

## Installation
This package depends on having react-native-fetch-blob installed into your project. Follow the instructions for installation at [react-native-fetch-blob](https://github.com/joltup/react-native-fetch-blob). At the very least, run `yarn add react-native-fetch-blob`, then `react-native link` and add
```xml
<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. 
```sh
yarn add react-native-smart-image-cache
```

## Usage
To use the included SmartImage component, use the import statement to load the module.
```js
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. 
```js
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:
```js
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.

---
_Source: https://npm.io/package/react-native-smart-image-cache · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._