National Poo Museum

    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.

    Install

    npm i react-native-rn-cacheimage

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    17.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • quenice