File cache (with strong accent on Image/Video components) for React Native with sequential download, fail prevention, priority based downloads.
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
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} />}
/>
)
Array of single file group, files will be downloaded in sequential order
Identifier of single file group, groupHash
should be distinct per screen as it's used for progress observable under the hood.
React navigation reference, used for file download observable subscribe/unsubscribe events
React component that will be rendered while file source is not available
React component that will be rendered once file is cached and source is available
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