@fidme/react-native-image-cache-wrapper/README.md

The best react native image cache wrapper.

# react-native-image-cache-wrapper - Strange error fixed version - Алдаа зассан хувилбар

[![npm](https://img.shields.io/npm/v/react-native-image-cache-wrapper.svg?style=flat-square)](https://www.npmjs.com/package/react-native-image-cache-wrapper)

The best react native image cache wrapper.

### Feature

- the same usage with `<Image/>` and `<ImageBackground/>`
- can set activity indicator
- cache images with expiration
- clear one cache or all cache files
- support getSize() and prefetch()
- support cache base64 data to local

### Installation

We use [`react-native-blob-util`](https://github.com/FidMe/react-native-image-cache-wrapper) to handle file system access in this package,
So you should install react-native-image-cache-wrapper and react-native-blob-util both.

```bash
npm install @fidme/react-native-image-cache-wrapper --save

npm install react-native-blob-util --save
react-native link react-native-blob-util
```

or use yarn

```
yarn add @fidme/react-native-image-cache-wrapper
yarn add react-native-blob-util
```

_Notice: if you use RN 0.60+, please use react-native-blob-util v0.10.16_

### ChangeLog

v1.1.1

1. Remove warning by renaming `componentWillReceiveProps` to `UNSAFE_componentWillReceiveProps`

v1.1.0

### BREAKING CHANGES:

1. Remove `rn-fetch-blob` for `react-native-blob-util` because of [this issue](https://github.com/RonRadtke/react-native-blob-util/issues/86).

v1.0.7

1. fix Strange error

v1.0.6

1. add static method `CachedImage.isUrlCached(url,success=(cachFile)=>void,fail=(error)=>void))`
2. add static method `CachedImage.getCacheFilename(url)`
3. add static property `CachedImage.cacheDir`, user can use to set customized cacheDir

v1.0.5

1. fix for RN 0.59

v1.0.4

1. fix Content-Length check

v1.0.3

1. fix file successfully download check

v1.0.2

1. use react-native-blob-util instead of rn-fetch-blob

v1.0.0

1. initial release

[[more]](https://github.com/wonday/react-native-image-cache-wrapper/releases)

### Configuration

| Property                                     |   Type    | Default | Description                                                      | FirstRelease |
| -------------------------------------------- | :-------: | :-----: | ---------------------------------------------------------------- | ------------ |
| `<Image/>` or `<ImageBackground>` properties |           |         | same with `<Image/>` and `<ImageBackground/>`                    | 1.0          |
| expiration                                   |  number   | 604800  | expiration seconds (0:no expiration, default cache a week)       | 1.0          |
| activityIndicator                            | Component |  null   | when loading show it as an indicator, you can use your component | 1.0          |

### Usage

```
import CachedImage from '@fidme/react-native-image-cache-wrapper';

render()
{
    return (

            <View>
                <CachedImage source={{uri:"https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"}}/>
                <CachedImage source={{uri:"https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"}}/>
                    <Text>This is example with image background.</Text>
                </CachedImage>
            </View>
        );
}
```

### Static Function

**CachedImage.getSize(url, success=(width,height)=>void,fail=(error)=>void)**

Get the image size, if no cache, will cache it.

Example:

```
import CachedImage from '@fidme/react-native-image-cache-wrapper';

CachedImage.getSize("https://assets-cdn.github.com/images/modules/logos_page/Octocat.png",
    (width,height)=>{
        console.log("width:"+width+" height:"+height);
    },(error)=>{
        console.log("error:"+error);
    });
```

**CachedImage.prefetch(url,expiration=0,success=(cachFile)=>void,fail=(error)=>void)**

prefetch an image and cache it.

Example:

```
import CachedImage from '@fidme/react-native-image-cache-wrapper';

// prefetch and cache image 3600 seconds
CachedImage.prefetch("https://assets-cdn.github.com/images/modules/logos_page/Octocat.png", 3600,
    (cacheFile)=>{
        console.log("cache filename:"+cacheFile);
    },(error)=>{
        console.log("error:"+error);
    });
```

**CachedImage.deleteCache(url)**

delete a cache file.

Example:

```
import CachedImage from '@fidme/react-native-image-cache-wrapper';

// prefetch and cache image 3600 seconds
CachedImage.deleteCache("https://assets-cdn.github.com/images/modules/logos_page/Octocat.png");
```

**CachedImage.clearCache()**

clear all cache.

Example:

```
import CachedImage from '@fidme/react-native-image-cache-wrapper';

// prefetch and cache image 3600 seconds
CachedImage.clearCache();
```

**CachedImage.isUrlCached(url,success=(cachFile)=>void,fail=(error)=>void))**

check if a url is cached.

Example:

```
import CachedImage from '@fidme/react-native-image-cache-wrapper';

// check if a url is cached.
CachedImage.isUrlCached(url,(exists)=>{
    alert(exists);
});
```

**CachedImage.getCacheFilename(url)**

make a cache filename.

Example:

```
import CachedImage from '@fidme/react-native-image-cache-wrapper';

// check if a url is cached.
let cachedFilename = CachedImage.getCacheFilename(url);
```

**CachedImage.cacheDir**

the property that can get/set cacheDir

Example:

```
import CachedImage from '@fidme/react-native-image-cache-wrapper';

// check if a url is cached.
CachedImage.cacheDir = RNFetchBlob.fs.dirs.CacheDir + "/CachedImage/";
```