GithubHelp home page GithubHelp logo

paper-ice-coffee / react-native-cached-image Goto Github PK

View Code? Open in Web Editor NEW

This project forked from kfiroo/react-native-cached-image

0.0 2.0 0.0 3.72 MB

CachedImage component for react-native

License: MIT License

JavaScript 70.44% Python 6.47% Java 5.78% Objective-C 17.31%

react-native-cached-image's Introduction

react-native-cached-image

CachedImage component for react-native

This package is greatly inspired by jayesbe's amazing react-native-cacheable-image but adds some functionality that we were missing when trying to handle caching images in our react-native app.

Installation

npm install react-native-cached-image --save

or

yarn add react-native-cached-image

react-native-fs

We use react-native-fs to handle file system access in this package and it requires an extra step during the installation.
You should only have to do this once.

react-native link react-native-fs

Network Status - Android only

Add the following line to your android/app/src/AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

API

This package exposes 2 modules:

  1. CachedImage - default react-native component that is a drop-in replacement for your react-native Image components
  2. ImageCacheProvider - the cache API that you can use if you need to interact with the cache outside the scope of the component, for prefetching images for example.

CachedImage

CachedImage is just like the native Image component, you can provide it with defaultSource, style, etc.
When providing source={require('/path/to/local/image')} or source={{uri: '/path/to/local/image'}} to it the image will be loaded from local source and will not be cached.
When providing source={{uri: 'https://example.com/path/to/remote/image.jpg'}} the image will be downloaded and cached on the device to subsequent requests to the same url will always result in an instant load from the local image.

<CachedImage
    source={{
        uri: 'https://example.com/path/to/your/image.jpg'
    }}
    style={styles.image}
/>
Props
  • activityIndicatorProps - props for the ActivityIndicator that is shown while the image is downloaded.
  • useQueryParamsInCacheKey - array|bool an array of keys to use from the source.uri query string or a bool value stating whether to use the entire query string or not. (default: false)
  • defaultSource - prop to display a background image while the source image is downloaded. This will work even in android, but will not display background image if there you set borderRadius on this component style prop

ImageCacheProvider

ImageCacheProvider exposes interaction with the cache layer that is used by CachedImage so you can use it to prefetch some urls in the background while you app is starting, or remove some outdated images from the cache to free some space up if needed.

const CachedImage = require('react-native-cached-image');

// CachedImage exposes ImageCacheProvider
const ImageCacheProvider = CachedImage.ImageCacheProvider;

// will add the urls to the cache so when CachedImage will try to load them
// the result will be and instant load from cache
ImageCacheProvider.cacheMultipleImages([
    'https://example.com/path/to/remote/image.jpg',
    'https://example.com/path/to/remote/other-image.png'    
]);

// clear old urls from the cache, useful when updating your app version and
// old version of the images are no longer relevant, for example
ImageCacheProvider.deleteMultipleCachedImages([
    'https://example.com/path/to/remote/image.jpg',
    'https://example.com/path/to/remote/other-image.png'
]);

type: CacheOptions

type ReadDirItem = {
  useQueryParamsInCacheKey: string[]|bool; // same as the CachedImage props
  cacheGroup: string; // the directory to save cached images in, defaults to the url hostname
};

ImageCacheProvider.isCacheable(url: string): bool

Returns a true if the url is cacheable, false if it isn't. Currently check if it is a remote url.

ImageCacheProvider.getCachedImagePath(url: string, options: CacheOptions): Promise<imagePath: string>

Returns a Promise that is resolved with the path to the underlying cached image file path if it exists.
Promise is rejected if the file doesn't exist.

ImageCacheProvider.cacheImage(url: string, options: CacheOptions): Promise<imagePath: string>

Will download the file from the given url and save it to the device.
Returns a Promise that is resolved with the path to the underlying cached image file path if download was successful.
Promise is rejected if the download or file write failed.

ImageCacheProvider.deleteCachedImage(url: string, options: CacheOptions): Promise

Deletes the underlying cached image for a given url.

ImageCacheProvider.cacheMultipleImages(urls: string[], options: CacheOptions): Promise

Cache a list of urls, if any of the urls is already cached will not try to download again.

ImageCacheProvider.deleteMultipleCachedImages(urls: string[], options: CacheOptions): Promise

Deletes all images from cache that were cached using the given urls, if file doesn't exist do nothing

Dependencies

react-native-cached-image's People

Contributors

kfiroo avatar pcmogollon avatar dstik avatar mpatric avatar christiantucker avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.