react-native-async-cache v0.1.0

react-native-async-cache

Getting started

$ npm install react-native-async-cache --save

Mostly automatic installation

$ react-native link react-native-async-cache

API

Promise select(options)

The only method need to know, return a promise resolves an object containing url. If the file downloaded, resolve the url as local path, otherwise resolve the request given.

• Request Options

• Result

• Usage example

import React from "react";
import RNAsyncCache from 'react-native-async-cache';

export default class extends React.Component
{
    componentDidMount(){
        RNAsyncCache.select({
            url: "https://static.zerochan.net/Kouyafu.full.2927619.jpg"
        }).then((res) => {
            const {url, statusCode, message} = res;
            this.setState(
                {img: url, statusCode, message}
            );
        });
    }

    // Component initial state

    state = {
        img:"",
        statusCode: 0,
        message:""
    };


    // Component render

    render()
    {
        const {img, statusCode, message} = this.state;

        if(statusCode || message){
            // request failed
            return <Text>{statusCode} {message}</Text>;
        }

    	return img ? <Text>Loading...</Text>: <Image source={{uri: img}}/>;
    }
}

Promise trash(options)

Empty the cache directory.

• Request Options

Promise accessible(options)

Try to check http status code of the url is 200 OK.

• Request Options

• Result

import React from "react";
import RNAsyncCache from 'react-native-async-cache';
import {Image, Text} from "react-native";

export default class extends React.Component {
    state = {
        error:""
    };

    render(){
        const {error} = this.state;
        const img = "https://i.pximg.net/img-master/img/2020/04/04/00/10/00/80545109_p0_master1200.jpg";

        return error ? (<Text>{error}</Text>) : <Image source={{uri:img}} onError={()=>{
            RNAsyncCache.accessible({
                url:img
            }).then(({statusCode, message})=>{
                this.setState({
                    error: statusCode + "\n" + message
                });
            });
        }} />
    }
}

Promise check(options)

Confirm whether the cache file exists.

• Request Options

• Result

Promise remove(options)

Delete the cache file specified.

• Request Options

• Result

Promise download(options, onProgress)

Cache a file manually.

• Request Options

• onProgress Callback

• Result

void post(options)

delegate a background download task or create a cache with url and exists data.

• Request Options

Cache Component

Usage

import {CacheComponent} from 'react-native-async-cache';
import {Image,View} from 'react-native';

const CacheImage =  CacheComponent(
    {
        Component: Image,
        PendingComponent: Image,
        invokeOnComponentErrorProperty: 'onError',
        invokeOnComponentLoadProperty: 'onLoad',
        mapToRequestOptions: () => {
            return {
                subDir: 'images'
            };
        },
        mapToComponentProperties: (props) => {
            return {
                source: typeof props.source === 'number' ? props.source : {uri: props.source},
                errorMessage: (props.statusCode || props.message) ? props.statusCode + ' ' + (props.message || '') : null
            };
        }
    }
);

// render component

export default class extends React.Component
{
    render(){
        return (
            <View style={{flex: 1, alignItems: "center"}}>
                <CacheImage source={"https://static.zerochan.net/Kouyafu.full.2792022.jpg"} 				
					style={{
                        width : Dimensions.get("window").width - 30,
                        height : Dimensions.get("window").height
                    }}
                />
            </View>
        );
    }
}

CacheStoreComponent

create a CacheComponent with a memory store to reduce select() calls.

import {CacheStoreComponent} from 'react-native-async-cache';
import {Text,View,Image} from "react-native";

const CacheStoreImage =  CacheStoreComponent(
    {
        Component: Image,
        PendingComponent: ()=>{
            return <View><Text>Loading...</Text></View>;
        },
        invokeOnComponentErrorProperty: 'onError',
        invokeOnComponentLoadProperty: 'onLoad',
        mapToRequestOptions: () => {
            return {
                subDir: 'images'
            };
        },
        mapToComponentProperties: (props) => {
            return {
                source: typeof props.source === 'number' ? props.source : {uri: props.source},
                errorMessage: (props.statusCode || props.message) ? props.statusCode + ' ' + (props.message || '') : null
            };
        }
    }
);

// render component

export default ()=>{
    return (
        <View style={{flex: 1, alignItems: "center"}}>
           <CacheStoreImage source={"https://static.zerochan.net/Fuji.Choko.full.2920380.jpg"} style={{
               width : Dimensions.get("window").width - 30,
               height : Dimensions.get("window").height
           }}/>
       </View>
    );
}

• Custom StoreProvider Example

import {CacheStoreComponent, StoreProvider} from 'react-native-async-cache';
import AsyncStorage from 'react-native-async-storage';

// extend default StoreProvider

class PersistenceStoreProvider extends StoreProvider {
    access_time = 0;

    constructor(props) {
        super(props);
        AsyncStorage.getItem('caches').then(str=>{
            this.caches=JSON.parse(str);
        });
    }
    
    get(url){
        ++this.access_time;
        if(this.access_time > 100){
            this.access_time = 0;
            this.serialize();
        }
        return super.get(url);
    } 

    
    serialize(){
        // call it at the right time
        AsyncStorage.setItem('caches',JSON.stringify(caches));
    }
    
    clear(){
        // optional, call it when local file not found
        this.caches = [];
        AsyncStorage.setItem('caches',JSON.stringify([]));
    }
}

// create CacheStoreComponent

export default CacheStoreComponent({ 
    store: new PersistenceStoreProvider(),
    // ...
});

• Optional cache validator

// improt fs from "react-native-fs";

// config
const config = {
    store: new PersistenceStoreProvider(),
    // ...
    cacheValidator:(cache,callback)=>{
        if(cache && !cache.local){
            callback(cache);
        }
        else {
            fs.exists(cache).then(exists=>{
               callback(exists ? cache : null);
               if(!exists)
               {
                    config.store.clear();
               }
            });    
        }       
    }
}

export default CacheStoreComponent(config);

• Advanced usage, StoreProvider interface

interface StoreProvider {
    get(url: string): string;

    set(url: string, local: string): void;

    error(url: string, code: number, message: string): void
}