react-native-cached

File cache (with strong accent on Image/Video components) for React Native with sequential download, fail prevention, priority based downloads.

Installation (iOS)

First you need to install react-native-fs:

yarn add react-native-fs

Add the RNFS pod to your list of application pods in your Podfile, using the path from the Podfile to the installed module:

pod 'RNFS', :path => '../node_modules/react-native-fs'

Install pods as usual:

pod install

Install React Native Cached

yarn add react-native-cached

Usage

import React from 'react'
import ReactNativeCached from 'react-native-cached'

const ImageTemplate = () => (
  <ReactNativeCached.Component
    uris={['https://example.com/cat-low-resolution-image.jpg', 'https://example.com/cat-high-resolution-image.jpg']}
    groupHash={'example.com:cat'}
    placeholderComponent={() => <View />}
    defaultComponent={({ path }) => <Image source={{ uri: path }} style={styles.image} />}
  />
)

API

uris

Array of single file group, files will be downloaded in sequential order

groupHash

Identifier of single file group, groupHash should be distinct per screen as it's used for progress observable under the hood.

navigation

React navigation reference, used for file download observable subscribe/unsubscribe events

placeholderComponent

React component that will be rendered while file source is not available

defaultCompoonent

React component that will be rendered once file is cached and source is available

Development

Sample React Native appliction integrated with React Native Cached library is located under integration folder.

npm run integration:watch //this will compile your changes inside src folder and apply to integration/node_modules/react-native-cached/dist live

Navigate to interation folder and execute npm run ios to run sample app in iOS simulator