react-native-rn-cacheimage

1.0.1 • Public • Published

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.

name desc defaultValue
config.overwrite Overwirte or not when the pre-cached(be downloaded just now) file has exists in the local path. false
config.dirsQuantity Quantity of all dirs where cached file be saved in. Recommend set a prime number 17

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

Get the image cached local path.

name desc defaultValue
uri Image uri. example: https://xxx.xxx/xxx.jpg
ImagePath.uri Image cached local path.
ImagePath.task It'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.

Dependents (0)

Package Sidebar

Install

npm i react-native-rn-cacheimage

Weekly Downloads

3

Version

1.0.1

License

MIT

Unpacked Size

17.8 kB

Total Files

7

Last publish

Collaborators

  • quenice