Merge branch 'master' into master

Author: kfiroo

CachedImage.js

@@ -7,6 +7,7 @@ const flattenStyle = ReactNative.StyleSheet.flatten;
 const ImageCacheProvider = require('./ImageCacheProvider');
 
 const {
+    View,
     Image,
     ActivityIndicator,
     NetInfo,
@@ -33,7 +34,7 @@ const styles = StyleSheet.create({
 });
 
 function getImageProps(props) {
-    return _.omit(props, ['source', 'defaultSource', 'activityIndicatorProps', 'style', 'useQueryParamsInCacheKey', 'renderImage', 'resolveHeaders']);
+    return _.omit(props, ['source', 'defaultSource', 'fallbackSource', 'LoadingIndicator', 'activityIndicatorProps', 'style', 'useQueryParamsInCacheKey', 'renderImage', 'resolveHeaders']);
 }
 
 const CACHED_IMAGE_REF = 'cachedImage';
@@ -154,8 +155,17 @@ const CachedImage = React.createClass({
         const source = (this.state.isCacheable && this.state.cachedImagePath) ? {
                 uri: 'file://' + this.state.cachedImagePath
             } : this.props.source;
+        if (this.props.fallbackSource && !this.state.cachedImagePath) {
+          return this.props.renderImage({
+              ...props,
+              key: `${props.key || source.uri}error`,
+              style,
+              source: this.props.fallbackSource
+          });
+        }
         return this.props.renderImage({
             ...props,
+            key: props.key || source.uri,
             style,
             source
         });
@@ -168,11 +178,20 @@ const CachedImage = React.createClass({
         const activityIndicatorProps = _.omit(this.props.activityIndicatorProps, ['style']);
         const activityIndicatorStyle = this.props.activityIndicatorProps.style || styles.loader;
 
+        const LoadingIndicator = this.props.loadingIndicator;
+
         const source = this.props.defaultSource;
 
         // if the imageStyle has borderRadius it will break the loading image view on android
         // so we only show the ActivityIndicator
-        if (Platform.OS === 'android' && flattenStyle(imageStyle).borderRadius) {
+        if (!source || (Platform.OS === 'android' && flattenStyle(imageStyle).borderRadius)) {
+            if (LoadingIndicator) {
+              return (
+                <View style={[imageStyle, activityIndicatorStyle]}>
+                  <LoadingIndicator {...activityIndicatorProps} />
+                </View>
+              );
+            }
             return (
                 <ActivityIndicator
                     {...activityIndicatorProps}
@@ -183,11 +202,16 @@ const CachedImage = React.createClass({
         return this.props.renderImage({
             ...imageProps,
             style: imageStyle,
+            key: source.uri,
             source,
             children: (
-                <ActivityIndicator
-                    {...activityIndicatorProps}
-                    style={activityIndicatorStyle}/>
+                LoadingIndicator
+                  ? <View style={[imageStyle, activityIndicatorStyle]}>
+                      <LoadingIndicator {...activityIndicatorProps} />
+                    </View>
+                  : <ActivityIndicator
+                      {...activityIndicatorProps}
+                      style={activityIndicatorStyle}/>
             )
         });
     }

ImageCacheProvider.js

@@ -130,19 +130,23 @@ function ensurePath(dirPath) {
 function downloadImage(fromUrl, toFile, headers = {}) {
     // use toFile as the key as is was created using the cacheKey
     if (!_.has(activeDownloads, toFile)) {
+        //Using a temporary file, if the download is accidentally interrupted, it will not produce a disabled file
+        const tmpFile = toFile + '.tmp';
         // create an active download for this file
         activeDownloads[toFile] = new Promise((resolve, reject) => {
             RNFetchBlob
-                .config({path: toFile})
+                .config({path: tmpFile})
                 .fetch('GET', fromUrl, headers)
                 .then(res => {
                     if (Math.floor(res.respInfo.status / 100) !== 2) {
                         throw new Error('Failed to successfully download image');
                     }
-                    resolve(toFile);
+                    //The download is complete and rename the temporary file
+                    return fs.mv(tmpFile, toFile);
                 })
+                .then(() => resolve(toFile))
                 .catch(err => {
-                    return deleteFile(toFile)
+                    return deleteFile(tmpFile)
                         .then(() => reject(err));
                 })
                 .finally(() => {
@@ -346,6 +350,7 @@ function getCacheInfo(cacheLocation) {
 
 module.exports = {
     isCacheable,
+    getCachedImageFilePath,
     getCachedImagePath,
     cacheImage,
     deleteCachedImage,

README.md

@@ -17,7 +17,7 @@ We use [`react-native-fetch-blob`](https://github.com/wkh237/react-native-fetch-
 _You should only have to do this once._
 
     react-native link react-native-fetch-blob
-    
+
 Or, if you want to add Android permissions to AndroidManifest.xml automatically, use this one:
 
     RNFB_ANDROID_PERMISSIONS=true react-native link react-native-fetch-blob
@@ -51,6 +51,9 @@ When providing `source={{uri: 'https://example.com/path/to/remote/image.jpg'}}`
 * `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
 * `resolveHeaders` - _function_ when provided, the returned object will be used as the headers object when sending the request to download the image. **(default: () => Promise.resolve({}))**
 * `cacheLocation` - _string_ allows changing the root directory to use for caching. The default directory is sufficient for most use-cases. Images in this directory may be purged by Android automatically to free up space. Use `ImageCacheProvider.LOCATION.BUNDLE` if the cached images are critical (you will have to manage cleanup manually). **(default: ImageCacheProvider.LOCATION.CACHE)**
+* `loadingIndicator` - _component_ prop to set custom `ActivityIndicator`.
+* `fallbackSource` - prop to set placeholder image. when `source.uri` is null or cached failed, the `fallbackSource` will be display.
+
 
 ### 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,
@@ -109,7 +112,10 @@ Deletes the underlying cached image for a given url.
 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
+Deletes all images from cache that were cached using the given urls, if file doesn't exist do nothing.
+
+### `ImageCacheProvider.clearCache(): Promise`
+Deletes all cached images.
 
 #### Dependencies
 - [lodash](https://github.com/lodash/lodash) for props handling

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-cached-image",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "CachedImage component for react-native",
   "main": "index.js",
   "scripts": {