react-native-expo-image-cache
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.0 • Public • Published

    React Native Image Cache and Progressive Loading

    CircleCI npm version

    React Native image cache and progressive loading for iOS and Android. Based on Expo Kit.

    This is a component used in the React Native Elements and the React Native Fiber starter kits.

    Checkout this medium story about react-native-expo-image-cache.

    Installation

    This package has a peer dependency with React, React Native, and Expo.

    yarn add react-native-expo-image-cache
    

    Usage

    Props

    Props Default Options
    tint dark light, dark, default
    transitionDuration 300 custom in ms

    import {Image} from "react-native-expo-image-cache";
     
    // preview can be a local image or a data uri
    const preview = { uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" };
    const uri = "https://firebasestorage.googleapis.com/v0/b/react-native-e.appspot.com/o/b47b03a1e22e3f1fd884b5252de1e64a06a14126.png?alt=media&token=d636c423-3d94-440f-90c1-57c4de921641";
    <Image style={{ height: 100, width: 100 }} {...{preview, uri}} />

    CacheManager

    Get the local image from a remote URI

    import {CacheManager} from "react-native-expo-image-cache";
     
    const {uri} = this.props;
    const path = await CacheManager.get(uri).getPath();
    // if path is undefined, the image download has failed 

    You can also clear the local cache:

     
    import {CacheManager} from "react-native-expo-image-cache";
     
    await CacheManager.clearCache();

    Install

    npm i react-native-expo-image-cache

    DownloadsWeekly Downloads

    2,129

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    35.3 kB

    Total Files

    20

    Last publish

    Collaborators

    • wcandillon