Merge pull request #16 from IjzerenHein/feature-defaultsource

erezrokah · web-flow · commit b4f57125d3f5 · 2019-03-14T20:05:29.000+02:00
Feature: Support placeholder images (defaultSource prop)
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "javascript.preferences.quoteStyle": "single",
+  "editor.formatOnSave": false
+}
diff --git a/README.md b/README.md
@@ -75,6 +75,7 @@ export class MyFirebaseImageView extends Component<void, void, void> {
       <ImageView
         {...imageProps}
         path='firebase/storage/path'
+        defaultSource={require('./placeholder.png')} // optional, show placeholder until image is loaded
         timestamp={0} //optional, can be used to specify last modified time for same storage path
         resizeMode='cover' //'cover', 'contain', 'stretch'
       />
@@ -95,10 +96,13 @@ export class MyFirebasePhotoView extends Component<void, void, void> {
       <PhotoView
         {...imageProps}
         path='firebase/storage/path'
+        defaultSource={require('./placeholder.png')} // optional, show placeholder until image is loaded
         timestamp={0} //optional, can be used to specify last modified time for same storage path
         resizeMode='cover' //'cover', 'contain', 'stretch'
       />
     )
   }
 }
 ```
+
+> Note: On Android, the `defaultSource` prop is ignored on debug builds.
diff --git a/android/src/main/java/io/rumors/reactnativefirebaseui/storage/ExtendedImageView.java b/android/src/main/java/io/rumors/reactnativefirebaseui/storage/ExtendedImageView.java
@@ -5,10 +5,14 @@
 import java.util.HashMap;
 import java.util.ArrayList;
 
+import javax.annotation.Nullable;
+
 import android.widget.ImageView;
 import android.widget.ImageView.ScaleType;
+import android.graphics.drawable.Drawable;
 
 import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper;
 import com.firebase.ui.storage.images.FirebaseImageLoader;
 import com.google.firebase.storage.StorageReference;
 import com.google.firebase.storage.FirebaseStorage;
@@ -26,6 +30,7 @@
 
 public class ExtendedImageView extends ImageView {
   protected String mPath = null;
+  protected @Nullable Drawable mDefaultImageDrawable;
   protected Map<CornerType, Integer> mBorderRadii = new HashMap<CornerType, Integer>();
   protected ScaleType mScaleType;
   protected long mTimestamp = 0;
@@ -41,6 +46,10 @@ public void setPath(String path) {
     mPath = path;
   }
 
+  public void setDefaultSource(String name) {
+    mDefaultImageDrawable = ResourceDrawableIdHelper.getInstance().getResourceDrawable(getContext(), name);
+  }
+
   public void setTimestamp(long timestamp) {
     mTimestamp = timestamp;
   }
@@ -78,6 +87,7 @@ public void updateView() {
 
     GlideApp.with(mContext)
             .load(storageReference)
+            .placeholder(mDefaultImageDrawable)
             .apply(bitmapTransform(multi))
             //(String mimeType, long dateModified, int orientation)
             .signature(new MediaStoreSignature("", mTimestamp, 0))
diff --git a/android/src/main/java/io/rumors/reactnativefirebaseui/storage/ExtendedPhotoView.java b/android/src/main/java/io/rumors/reactnativefirebaseui/storage/ExtendedPhotoView.java
@@ -5,10 +5,14 @@
 import java.util.HashMap;
 import java.util.ArrayList;
 
+import javax.annotation.Nullable;
+
 import com.github.chrisbanes.photoview.PhotoView;
 import android.widget.ImageView.ScaleType;
+import android.graphics.drawable.Drawable;
 
 import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper;
 import com.firebase.ui.storage.images.FirebaseImageLoader;
 import com.google.firebase.storage.StorageReference;
 import com.google.firebase.storage.FirebaseStorage;
@@ -26,6 +30,7 @@
 
 public class ExtendedPhotoView extends PhotoView {
   protected String mPath = null;
+  protected @Nullable Drawable mDefaultImageDrawable;
   protected Map<CornerType, Integer> mBorderRadii = new HashMap<CornerType, Integer>();
   protected ScaleType mScaleType;
   protected long mTimestamp = 0;
@@ -41,6 +46,10 @@ public void setPath(String path) {
     mPath = path;
   }
 
+  public void setDefaultSource(String name) {
+    mDefaultImageDrawable = ResourceDrawableIdHelper.getInstance().getResourceDrawable(getContext(), name);
+  }
+
   public void setTimestamp(long timestamp) {
     mTimestamp = timestamp;
   }
@@ -77,6 +86,7 @@ public void updateView() {
 
     GlideApp.with(mContext)
             .load(storageReference)
+            .placeholder(mDefaultImageDrawable)
             .apply(bitmapTransform(multi))
             //(String mimeType, long dateModified, int orientation)
             .signature(new MediaStoreSignature("", mTimestamp, 0))
diff --git a/android/src/main/java/io/rumors/reactnativefirebaseui/storage/FirebaseImageViewManager.java b/android/src/main/java/io/rumors/reactnativefirebaseui/storage/FirebaseImageViewManager.java
@@ -32,6 +32,11 @@ public void setPath(ExtendedImageView imageView, @Nullable String path) {
     imageView.setPath(path);
   }
 
+  @ReactProp(name = "defaultSource")
+  public void setDefaultSource(ExtendedImageView imageView, @Nullable String source) {
+    imageView.setDefaultSource(source);
+  }
+
   @ReactProp(name = "timestamp")
   public void setTimestamp(ExtendedImageView imageView, @Nullable double timestamp) {
     imageView.setTimestamp((long)timestamp);
diff --git a/android/src/main/java/io/rumors/reactnativefirebaseui/storage/FirebasePhotoViewManager.java b/android/src/main/java/io/rumors/reactnativefirebaseui/storage/FirebasePhotoViewManager.java
@@ -33,6 +33,11 @@ public void setPath(ExtendedPhotoView imageView, @Nullable String path) {
     imageView.setPath(path);
   }
 
+  @ReactProp(name = "defaultSource")
+  public void setDefaultSource(ExtendedPhotoView imageView, @Nullable String source) {
+    imageView.setDefaultSource(source);
+  }
+
   @ReactProp(name = "timestamp")
   public void setTimestamp(ExtendedPhotoView imageView, @Nullable double timestamp) {
     imageView.setTimestamp((long)timestamp);
diff --git a/example/.editorconfig b/example/.editorconfig
@@ -8,3 +8,6 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[*.js]
+quote_type = single
diff --git a/example/App.js b/example/App.js
@@ -11,6 +11,7 @@ class MyFirebaseImageView extends Component {
       <ImageView
         {...imageProps}
         path='images/firebase_logo.png'
+        defaultSource={require('./assets/placeholder.png')}
         timestamp={1000} //optional, can be used to specify last modified time for same storage path
         resizeMode='cover' //'cover', 'contain', 'stretch'
       />
@@ -27,6 +28,7 @@ class MyFirebasePhotoView extends Component {
       <PhotoView
         {...imageProps}
         path='images/firebase_logo.png'
+        defaultSource={require('./assets/placeholder.png')}
         timestamp={1000} //optional, can be used to specify last modified time for same storage path
         resizeMode='cover' //'cover', 'contain', 'stretch'
       />
diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle
@@ -132,6 +132,7 @@ android {
     release {
       minifyEnabled enableProguardInReleaseBuilds
       proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+      signingConfig signingConfigs.debug
     }
     debug {
       minifyEnabled false
diff --git a/example/assets/placeholder.png b/example/assets/placeholder.png
diff --git a/example/ios/Podfile b/example/ios/Podfile
@@ -5,6 +5,14 @@ target 'ReactNativeFirebaseUIExample' do
   # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
   # use_frameworks!
 
+  # The following line hard selects GoogleUtilities 5.3.7
+  # This line should probably be removed in the future but
+  # fixes a linker problem on iOS, due to the fact that if
+  # we ommit this line, then 5.4.0 gets installed, which
+  # causes a link error.
+  pod 'GoogleUtilities', '~> 5.3.7'
+
+
   # Pods for ReactNativeFirebaseUIExample
 
   # Required by RNFirebase
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -136,6 +136,17 @@ PODS:
     - GoogleToolboxForMac/Defines (= 2.2.0)
   - "GoogleToolboxForMac/NSData+zlib (2.2.0)":
     - GoogleToolboxForMac/Defines (= 2.2.0)
+  - GoogleUtilities (5.3.7):
+    - GoogleUtilities/AppDelegateSwizzler (= 5.3.7)
+    - GoogleUtilities/Environment (= 5.3.7)
+    - GoogleUtilities/ISASwizzler (= 5.3.7)
+    - GoogleUtilities/Logger (= 5.3.7)
+    - GoogleUtilities/MethodSwizzler (= 5.3.7)
+    - GoogleUtilities/Network (= 5.3.7)
+    - "GoogleUtilities/NSData+zlib (= 5.3.7)"
+    - GoogleUtilities/Reachability (= 5.3.7)
+    - GoogleUtilities/SwizzlerTestHelpers (= 5.3.7)
+    - GoogleUtilities/UserDefaults (= 5.3.7)
   - GoogleUtilities/AppDelegateSwizzler (5.3.7):
     - GoogleUtilities/Environment
     - GoogleUtilities/Logger
@@ -153,6 +164,7 @@ PODS:
   - "GoogleUtilities/NSData+zlib (5.3.7)"
   - GoogleUtilities/Reachability (5.3.7):
     - GoogleUtilities/Logger
+  - GoogleUtilities/SwizzlerTestHelpers (5.3.7)
   - GoogleUtilities/UserDefaults (5.3.7):
     - GoogleUtilities/Logger
   - "gRPC-C++ (0.0.5)":
@@ -197,6 +209,7 @@ DEPENDENCIES:
   - Firebase/Performance (~> 5.15.0)
   - Firebase/RemoteConfig (~> 5.15.0)
   - Firebase/Storage (~> 5.15.0)
+  - GoogleUtilities (~> 5.3.7)
   - SDWebImage (~> 4.0)
 
 SPEC REPOS:
@@ -264,6 +277,6 @@ SPEC CHECKSUMS:
   Protobuf: 7a877b7f3e5964e3fce995e2eb323dbc6831bb5a
   SDWebImage: 3f3f0c02f09798048c47a5ed0a13f17b063572d8
 
-PODFILE CHECKSUM: 17807d9c8dcf86a5c6b96ea8dc9b411fefd9d084
+PODFILE CHECKSUM: e43db4b065586235b97d91c28d5883dc5621daed
 
 COCOAPODS: 1.6.1
diff --git a/example/package.json b/example/package.json
@@ -14,6 +14,7 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "apk": "cd android && ./gradlew assembleRelease",
+    "apk-install": "adb install -r android/app/build/outputs/apk/release/app-release.apk",
     "rename": "node ./bin/rename.js",
     "start": "react-native start",
     "test": "jest"
diff --git a/index.js b/index.js
@@ -1,22 +1 @@
-import PropTypes from 'prop-types'
-import { requireNativeComponent, Image, Platform } from 'react-native'
-
-var iface = {
-  name: 'FirebaseImage',
-  propTypes: {
-    ...Image.propTypes,
-    path: PropTypes.string,
-    timestamp: PropTypes.number,
-    resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']),
-  },
-}
-
-const ImageView = requireNativeComponent('RCTFirebaseImageView', iface)
-let PhotoView = null
-//PhotoView is supported only on android
-if (Platform.OS === 'android') {
-  PhotoView = requireNativeComponent('RCTFirebasePhotoView', iface)
-} else {
-  PhotoView = ImageView
-}
-module.exports = { ImageView, PhotoView }
+export * from './src/index';
diff --git a/ios/FirebaseUIImageView.h b/ios/FirebaseUIImageView.h
@@ -15,5 +15,6 @@
 @property (nonatomic, copy) NSString *path;
 @property (nonatomic, strong) NSNumber *timestamp;
 @property (nonatomic, assign) RCTResizeMode resizeMode;
+@property (nonatomic, strong) UIImage *defaultSource;
 
 @end
diff --git a/ios/FirebaseUIImageView.m b/ios/FirebaseUIImageView.m
@@ -19,22 +19,29 @@ @implementation FirebaseImageView
 - (void)setPath:(NSString *)path
 {
     _path = path;
+    
+    _needsReload = YES;
+}
 
+- (void)setDefaultSource:(UIImage *)defaultSource
+{
+    _defaultSource = defaultSource;
+    
     _needsReload = YES;
 }
 
 -(void)setTimestamp:(NSNumber*)timestamp
 {
     _timestamp = timestamp;
-
+    
     _needsReload = YES;
 }
 
 - (void)setResizeMode:(RCTResizeMode)resizeMode
 {
     if (_resizeMode != resizeMode) {
         _resizeMode = resizeMode;
-
+        
         if (_resizeMode == RCTResizeModeRepeat) {
             // Repeat resize mode is handled by the UIImage. Use scale to fill
             // so the repeated image fills the UIImageView.
@@ -59,10 +66,10 @@ -(void)reloadImage
     _needsReload = NO;
     // Reference to an image file in Firebase Storage
     FIRStorageReference *reference = [[FIRStorage storage] referenceWithPath:_path];
-
+    
     // Load the image using SDWebImage
     NSString* timestamp = [_timestamp stringValue];
-    [self sd_setImageWithStorageReference:reference customKey:timestamp];
+    [self sd_setImageWithStorageReference:reference placeholderImage:_defaultSource customKey:timestamp];
 }
 
 @end
diff --git a/ios/RCTFirebaseImageViewManager.m b/ios/RCTFirebaseImageViewManager.m
@@ -16,12 +16,12 @@ @implementation RCTFirebaseImageViewManager
 RCT_EXPORT_VIEW_PROPERTY(path, NSString)
 RCT_EXPORT_VIEW_PROPERTY(timestamp, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(resizeMode, RCTResizeMode)
-
+RCT_EXPORT_VIEW_PROPERTY(defaultSource, UIImage)
 
 - (UIView *)view
 {
     FirebaseImageView *imageView = [[FirebaseImageView alloc] init];
-
+    
     return imageView;
 }
 
diff --git a/ios/UIImageView+FirebaseStorage.h b/ios/UIImageView+FirebaseStorage.h
@@ -60,6 +60,7 @@ NS_ASSUME_NONNULL_BEGIN
  *   could not be found in cache).
  */
 - (nullable FIRStorageDownloadTask *)sd_setImageWithStorageReference:(FIRStorageReference *)storageRef
+                                                    placeholderImage:(nullable UIImage *)placeholder
                                                     customKey:(NSString*)customKey;
 
 /**
diff --git a/ios/UIImageView+FirebaseStorage.m b/ios/UIImageView+FirebaseStorage.m
@@ -39,10 +39,11 @@ - (FIRStorageDownloadTask *)sd_setImageWithStorageReference:(FIRStorageReference
 }
 
 - (FIRStorageDownloadTask *)sd_setImageWithStorageReference:(FIRStorageReference *)storageRef
+                                           placeholderImage:(nullable UIImage *)placeholder
                                            customKey:(NSString*)customKey {
   return [self sd_setImageWithStorageReference:storageRef
                                   maxImageSize:[UIImageView sd_defaultMaxImageSize]
-                              placeholderImage:nil
+                              placeholderImage:placeholder
                                          cache:[SDImageCache sharedImageCache]
                                     completion:nil
                                     customKey:customKey];
diff --git a/src/index.android.js b/src/index.android.js
@@ -0,0 +1,41 @@
+// On Android, both Image and Photo view are supported,
+// and defaultSource is converted to an uri that the
+// native side can interpret
+import React, { Component } from 'react'
+import { requireNativeComponent, Image, Platform } from 'react-native'
+import iface from './interface'
+
+const RCTFirebaseImageView = requireNativeComponent(
+  'RCTFirebaseImageView',
+  iface
+)
+const RCTFirebasePhotoView = requireNativeComponent(
+  'RCTFirebasePhotoView',
+  iface
+)
+
+class ImageView extends Component {
+  render() {
+    let { defaultSource, ...otherProps } = this.props
+    defaultSource = defaultSource
+      ? Image.resolveAssetSource(defaultSource).uri
+      : undefined
+    return (
+      <RCTFirebaseImageView {...otherProps} defaultSource={defaultSource} />
+    )
+  }
+}
+
+class PhotoView extends Component {
+  render() {
+    let { defaultSource, ...otherProps } = this.props
+    defaultSource = defaultSource
+      ? Image.resolveAssetSource(defaultSource).uri
+      : undefined
+    return (
+      <RCTFirebasePhotoView {...otherProps} defaultSource={defaultSource} />
+    )
+  }
+}
+
+module.exports = { ImageView, PhotoView }
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,7 @@
+import { requireNativeComponent } from 'react-native'
+import iface from './interface'
+
+const ImageView = requireNativeComponent('RCTFirebaseImageView', iface)
+const PhotoView = ImageView //PhotoView is supported only on android
+
+module.exports = { ImageView, PhotoView }
diff --git a/src/interface.js b/src/interface.js

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "javascript.preferences.quoteStyle": "single",
 +  "editor.formatOnSave": false
 +}
Original file line number	Diff line number	Diff line change
`@@ -132,6 +132,7 @@ android {`
`132`	`132`	`release {`
`133`	`133`	`minifyEnabled enableProguardInReleaseBuilds`
`134`	`134`	`proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"`
	`135`	`+ signingConfig signingConfigs.debug`
`135`	`136`	`}`
`136`	`137`	`debug {`
`137`	`138`	`minifyEnabled false`