React Native library for iOS and Android offline image storage. This library provides most of the capabilities for an application to display pre-loaded images when offline. (This library has a dependency on rn-fetch-blob. Refer here for more details about the library.)
- Define your own offline storage name!
- Pre load the images
- Automatically remove expired images from offline storage.
- Supports a fallback source static image that will be shown if a source object has a 'uri' but is unable to download the image or is unable to find it in the offline storage.
- Use custom Image components.
- You can always re-fetch the image by specifying
reloadImage={true}irrespective of the image already being stored offline, this way you can refresh/load the most recently updated images. - Option to clear offline storage
This library has a dependency on rn-fetch-blob, please refer to their installation instructions
Using yarn
$ yarn add react-native-image-offline
Note: Do not forget to run react-native link after adding rn-fetch-blob dependency.
Using npm
$ npm install react-native-image-offline --save
First and foremeost, to use this library it is important to call the restore function so that you can get the completion status back. See the basic example usage.
OfflineImageStore.restore({}, () => {})
First argument is configuration object, example
{
name: 'My_Image_gallery',
imageRemoveTimeout: 120, // expire image after 120 seconds, default is 3 days if you don't provide this property.
debugMode: true,
}
Second argument is the callback function
const restoreCompletion = () => { // Callback function
console.log('Restore completed !');
// Restore completed!!
this.setState({ reStoreCompleted: true });
}
name configuration property used to define the application offline store directory name
imageRemoveTimeout is to provide image expiry time in seconds
debugMode set to true to view the debug logs
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
reStoreCompleted: false,
};
}
componentWillMount() {
OfflineImageStore.restore({
name: 'My_Image_gallery',
imageRemoveTimeout: 120, // expire image after 120 seconds, default is 3 days if you don't provide this property.
debugMode: true,
}, () => { // Callback function
console.log('Restore completed and callback called !');
// Restore completed!!
this.setState({ reStoreCompleted: true });
// Preload images
// Note: We recommend call this method on `restore` completion!
OfflineImageStore.preLoad([
'https://wallpaperbrowse.com/media/images/mobileswall-047.jpg',
'https://wallpaperbrowse.com/media/images/wallpaper-for-mobile-13.jpg',
'https://wallpaperbrowse.com/media/images/tvrcnkbcgeirbxcmsbfz.jpg',
'https://wallpaperbrowse.com/media/images/hd-wallpapers-1080p-for-mobile-2015.jpg',
'https://wallpaperbrowse.com/media/images/mobileswall-043.jpg',
'https://wallpaperbrowse.com/media/images/hd-wallpapers-for-mobile-2015.png',
'https://wallpaperbrowse.com/media/images/download_ZNNDLIt.jpg'
]);
});
}
render() {
if (!this.state.reStoreCompleted) {
return (
<ActivityIndicator
animating={ true }
style={ [{
alignItems: 'center',
justifyContent: 'center',
padding: 8,
}, { height: 80 }] }
size='large'
color={ '#A7A7A7' }
/>
);
}
return (
<View style={styles.container}>
<Text>React native offline image</Text>
<OfflineImage
key={'https://wrong-url/noImageExist.jpg'}
resizeMode={'center'}
style={ { width: '99%', height: 110, margin: 5 } }
fallbackSource={ Images.fallbackSource }
source={ { uri: 'https://wrong-url/noImageExist.jpg' } }/>
<OfflineImage
key={'https://wallpaperbrowse.com/media/images/wallpaper-for-mobile-13.jpg'}
onLoadEnd={(sourceUri) => {
console.log('Loading finished for image with path: ', sourceUri)
}}
reloadImage = { true }
resizeMode={'cover'}
fallbackSource={ Images.fallbackSource }
style={ { width: '99%', height: 110, margin: 5 } }
source={ { uri: 'https://wallpaperbrowse.com/media/images/wallpaper-for-mobile-13.jpg' } }/>
<OfflineImage
key={'https://wallpaperbrowse.com/media/images/tvrcnkbcgeirbxcmsbfz.jpg'}
onLoadEnd={(sourceUri) => {
console.log('Loading finished for image with path: ', sourceUri)
}}
resizeMode={'cover'}
style={ { width: '99%', height: 110, margin: 5 } }
source={ { uri: 'https://wallpaperbrowse.com/media/images/tvrcnkbcgeirbxcmsbfz.jpg' } }/>
<OfflineImage
key={'https://wallpaperbrowse.com/media/images/mobileswall-043.jpg'}
onLoadEnd={(sourceUri) => {
console.log('Loading finished for image with path: ', sourceUri)
}}
resizeMode={'cover'}
style={ { width: '99%', height: 110, margin: 5 } }
source={ { uri: 'https://wallpaperbrowse.com/media/images/mobileswall-043.jpg' } }/>
<OfflineImage
key={'https://wallpaperbrowse.com/media/images/butterfly-wallpaper_SzlKJB8.jpeg'}
onLoadEnd={(sourceUri) => {
console.log('Loading finished for image with path: ', sourceUri)
}}
resizeMode={'cover'}
fallbackSource={ Images.fallbackSource }
style={ { width: '99%', height: 110, margin: 5 } }
source={ { uri: 'https://wallpaperbrowse.com/media/images/butterfly-wallpaper_SzlKJB8.jpeg' } }/>
</View>
);
}
}
The recommended approach to preload images is to call after restore. You could call this method anywhere from the code. For instance, this library can be used with redux-observable, here is the code snippet!
const loadShoppingCartEpic = (action$, store, { getJSON }) =>
action$.ofType(LOAD_SHOPPING_CART)
.flatMap(action => {
return getJSON(`${API_BASE_URL}/api/cart`)
.map(res => {
if (res.metadata.code === 200) {
// Preload image after successful response
// These images download and persist offline.
OfflineImageStore.preLoad([
'res.content.image1.link',
'res.content.image2.link',
]);
return loadShoppingCartSuccess(res.content);
} else {
return loadShoppingCartFailure();
}
})
._catch(error => Observable.of(loadShoppingCartFailure));
})
<OfflineImage component={ ImageBackground }
style={ [styles.swiperBackgroundImg, { width: this.props.width }] }
resizeMode="cover"
source={ require('../../../assets/images/placeholder/placeholder.png') }>
<View>...</View>
</OfflineImage>
You can use a fallback image as a default image to show when unable to download the image or if the image not available in the offline storage.
<OfflineImage component={ ImageBackground }
style={ [styles.swiperBackgroundImg, { width: this.props.width }] }
resizeMode="cover"
fallbackSource={ require('../../../assets/images/placeholder/placeholder.png') }
source={ { uri: this.props.shoppingCartItem.image.link } }>
<View>...</View>
</OfflineImage>
You can clear complete offline store at any point of time using
// Clean all the images
OfflineImageStore.clearStore((err) => {
if (!err) {
console.log('Hurray!! clearStore completed callback called');
}
});
Thanks to https://wallpaperbrowse.com/. These image uris are only used in a sample example application.