Merge pull request #53 from Priccc/master

Add custom activityIndicator and placeholder image

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';
@@ -151,6 +152,14 @@ 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,
@@ -166,11 +175,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 (!source || (Platform.OS === 'android' && flattenStyle(imageStyle).borderRadius)) {
+            if (LoadingIndicator) {
+              return (
+                <View style={[imageStyle, activityIndicatorStyle]}>
+                  <LoadingIndicator {...activityIndicatorProps} />
+                </View>
+              );
+            }
             return (
                 <ActivityIndicator
                     {...activityIndicatorProps}
@@ -184,9 +202,13 @@ const CachedImage = React.createClass({
             key: source.uri,
             source,
             children: (
-                <ActivityIndicator
-                    {...activityIndicatorProps}
-                    style={activityIndicatorStyle}/>
+                LoadingIndicator
+                  ? <View style={[imageStyle, activityIndicatorStyle]}>
+                      <LoadingIndicator {...activityIndicatorProps} />
+                    </View>
+                  : <ActivityIndicator
+                      {...activityIndicatorProps}
+                      style={activityIndicatorStyle}/>
             )
         });
     }

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
@@ -50,6 +50,8 @@ When providing `source={{uri: 'https://example.com/path/to/remote/image.jpg'}}`
 * `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
 * `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({}))**
+* `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,