@kosac-dev/react-native-image-cache-wrapper
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7-folk.3 • Public • Published

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

    npm

    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 rn-fetch-blob to handle file system access in this package, So you should install react-native-image-cache-wrapper and rn-fetch-blob both.

    npm install react-native-image-cache-wrapper --save
     
    npm install rn-fetch-blob --save
    react-native link rn-fetch-blob

    or use yarn

    yarn add react-native-image-cache-wrapper
    yarn add rn-fetch-blob
    

    Notice: if you use RN 0.60+, please use rn-fetch-blob v0.10.16

    ChangeLog

    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 rn-fetch-blob instead of react-native-fetch-blob

    v1.0.0

    1. initial release

    [more]

    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 '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 '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 '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 '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 '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 '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 '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 'react-native-image-cache-wrapper';
    
    // check if a url is cached.
    CachedImage.cacheDir = RNFetchBlob.fs.dirs.CacheDir + "/CachedImage/";
    

    Install

    npm i @kosac-dev/react-native-image-cache-wrapper

    DownloadsWeekly Downloads

    6

    Version

    1.0.7-folk.3

    License

    MIT

    Unpacked Size

    18.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar