rnr

react-native-rn-cacheimage

npm i react-native-rn-cacheimage

Readme

Getting started

rn-fecth-blob

rn-fetch-blob is a dependency for this package that you'll need to add to your project. To install, run the following commands:

$ npm install rn-fetch-blob --save
$ react-native link rn-fetch-blob

And I recommend you install rn-fetch-blob base on official guide

installation

$ npm install react-native-rn-cacheimage --save

Usage

Register and unregister

  • Before mount the <CacheImage/> or <AnimatedCacheImage/> component, should initialize and config some base params. Recommend initialize in the componentDidMount() inside of the top react componet in your App.
  • When all components of your App will been unmounted, you should unregister this package. Recommend do this in the componentWillMount() inside of the top react componet in your App.
import React from 'react'
import {AppRegistry} from 'react-native'
import {Provider} from 'react-redux'
import ReduxStore from './src/configuration/reduxStore'
import App from './src/App'
import {CacheHelper} from "react-native-rn-cacheimage";

const store = ReduxStore

class MyApp extends React.Component {
    componentDidMount() {
        CacheHelper.register({overwrite:false}).catch(e => console.log(e))
    }

    componentWillUnmount() {
        CacheHelper.unregister().catch(e=>console.log(e))
    }

    render() {
        return (
            <Provider store={store}>
                <App/>
            </Provider>
        )
    }
}

AppRegistry.registerComponent("YourAppName", () => MyApp);

Replace <Image/> with <CacheImage/>

We can use <CacheImage/> just like <Image/> component, and everything is all the same besides this

import {CacheImage} from 'react-native-rn-cacheimage'
export default class Example extends React.Component {
...
    render() {

        return
        (
        ...
        <CacheImage
            source={{uri:'https://xxx.xxx'}}
            defaultSource={placeholder._800x400}
            style={styles.image}
        />
        ...
        )

    }
...
}

Replace <ImageBackground/> with <CacheImage/>

We can use <ImageBackground/> just like <CacheImage/> component, and everything is all the same besides this

import {CacheImage} from 'react-native-rn-cacheimage'

export default class Example extends React.Component {
...
    render() {

        return
        (
        ...
        <CacheImage
            source={{uri:'https://xxx.xxx'}}
            defaultSource={placeholder._800x400}
            style={styles.image}
        >
            <Text>Hello World!</Text>
        </CacheImage>
        ...
        )

    }
...
}

Replace <Animated.Image/> component with <AnimatedCacheImage/>

We can use <AnimatedCacheImage/> just like <Animated.Image/> component, and everything is all the same besides this

import {AnimatedCacheImage} from 'react-native-rn-cacheimage'

export default class Example extends React.Component {
...
    render() {

        return
        (
        ...
        <AnimatedCacheImage
            source={{uri:'https://xxx.xxx'}}
            defaultSource={placeholder._800x400}
            style={styles.image}
        />
        ...
        )

    }
...
}

API

Components

About below two components, can see the detail in Usage

  • CacheImage
  • AnimatedCacheImage

CacheHelper

register(config:Object):Promise\<Void>

Init necessary things of current package(react-native-rn-cacheimage). Should call this method before mount <CacheImage/> or <AnimatedCacheImage/>. Recommend call this method in the TOP component of your App.

namedescdefaultValue
config.overwriteOverwirte or not when the pre-cached(be downloaded just now) file has exists in the local path.false
config.dirsQuantityQuantity of all dirs where cached file be saved in. Recommend set a prime number17

getImagePath(uri:String):Promise\<ImagePath:Object>

Get the image cached local path.

namedescdefaultValue
uriImage uri. example: https://xxx.xxx/xxx.jpg
ImagePath.uriImage cached local path.
ImagePath.taskIt's the task that fetch the remote image, and you can call task.cancel() to cancel the fetch task manually

getCacheSize():Promise\<Number>

Get the size of used space of all cached images. The unit of result number is Byte

getCacheSizeFormat():Promise\<String>

Similarity to getCacheSize(), and difference is that the result is been formatted.

The format rule is as below:

  • 0KB <= result < 1024KB, format to KB, eg: 134KB
  • result >= 1024KB, format to MB, eg: 109.3MB

clearCache():Promise\<Void>

Clear all cached images.

unregister():Promise\<Void>

Un-register current package, cancel all uncompleted tasks which fetch image.

Jump To