fix(android): fixed border-radius no longer working for image-view

Author: IjzerenHein

android/src/main/java/io/rumors/reactnativefirebaseui/storage/ExtendedImageView.java

@@ -1,39 +1,20 @@
 package io.rumors.reactnativefirebaseui.storage;
 
-import java.util.Map;
-import java.util.Map.Entry;
-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;
 import com.bumptech.glide.Glide;
-import com.bumptech.glide.load.Transformation;
-import com.bumptech.glide.load.resource.bitmap.FitCenter;
-import com.bumptech.glide.load.resource.bitmap.CenterCrop;
-import com.bumptech.glide.load.MultiTransformation;
 import com.bumptech.glide.signature.MediaStoreSignature;
-import com.bumptech.glide.request.RequestOptions;
-import static com.bumptech.glide.request.RequestOptions.bitmapTransform;
-
-import jp.wasabeef.glide.transformations.RoundedCornersTransformation;
-import jp.wasabeef.glide.transformations.RoundedCornersTransformation.CornerType;
-
 
 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;
 
   protected ThemedReactContext mContext = null;
@@ -55,78 +36,12 @@ public void setTimestamp(long timestamp) {
     mTimestamp = timestamp;
   }
 
-  @Override
-  public void setScaleType(ScaleType scaleType) {
-    mScaleType = scaleType;
-  }
-
-  public void setBorderRadius(int borderRadius, CornerType cornerType) {
-    mBorderRadii.put(cornerType, borderRadius);
-  }
-
-  static Integer getCommonBorderRadii(Map<CornerType, Integer> borderRadii) {
-    int borderRadiiCount = 0;
-    Integer borderRadius = 0;
-    for (Entry<CornerType, Integer> entry : borderRadii.entrySet()) {
-      CornerType cornerType = entry.getKey();
-      Integer radius = entry.getValue();
-      if (borderRadiiCount == 0) {
-        borderRadius = radius;
-      } else if (radius != borderRadius) {
-        return -1; // not the same
-      }
-      borderRadiiCount += (cornerType == RoundedCornersTransformation.CornerType.ALL) ? 4 : 1;
-    }
-    return ((borderRadiiCount == 0) || (borderRadiiCount >= 4)) ? borderRadius : -1;
-  }
-
   public void updateView() {
     StorageReference storageReference = FirebaseStorage.getInstance().getReference(mPath);
-    FirebaseImageLoader imageLoader = new FirebaseImageLoader();
-
-    // When the border-radii are not all the same, apply the 
-    // rounded corner transformation directly on top of the 
-    // scaled bitmap.
-    RequestOptions transform;
-    if (ExtendedImageView.getCommonBorderRadii(mBorderRadii) < 0) {
-      ArrayList<Transformation> transformations = new ArrayList<Transformation>(1 + mBorderRadii.size());
-
-      if (mScaleType == ScaleType.CENTER_CROP) {
-        transformations.add(new CenterCrop());
-      } else {
-        transformations.add(new FitCenter());
-      }
-
-      for (Entry<CornerType, Integer> entry : mBorderRadii.entrySet()) {
-        CornerType cornerType = entry.getKey();
-        Integer radius = entry.getValue();
-        transformations.add(new RoundedCornersTransformation(radius, 0, cornerType));
-      }
-
-      Transformation[] transformationsArray = transformations.toArray(new Transformation[transformations.size()]);
-
-      MultiTransformation multi = new MultiTransformation<>(transformationsArray);
-      transform = bitmapTransform(multi);
-    }
-
-    // When all border-radii are the same (or none are set)
-    // then let the ImageView apply the scale-type. This causes the 
-    // underlying BitmapDrawable to use the original bitmap and makes
-    // it possible to do shared element transitions on this view.
-    else {
-      transform = null;
-      super.setScaleType(mScaleType);
-    }
-
-    GlideRequest request = GlideApp.with(mContext)
+    GlideApp.with(mContext)
             .load(storageReference)
-            .placeholder(mDefaultImageDrawable);
-    if (transform != null) {
-      request = request.apply(transform);
-    } else {
-      request = request.dontTransform();
-    }
-    request
+            .placeholder(mDefaultImageDrawable)
+            .dontTransform()
             //(String mimeType, long dateModified, int orientation)
             .signature(new MediaStoreSignature("", mTimestamp, 0))
             .into(this);

android/src/main/java/io/rumors/reactnativefirebaseui/storage/FirebaseImageViewManager.java

@@ -3,16 +3,10 @@
 import javax.annotation.Nullable;
 import android.widget.ImageView.ScaleType;
 
-import jp.wasabeef.glide.transformations.RoundedCornersTransformation;
-
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.annotations.ReactPropGroup;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.yoga.YogaConstants;
-import com.facebook.react.uimanager.PixelUtil;
-import com.facebook.react.uimanager.ThemedReactContext;
 
 public class FirebaseImageViewManager extends SimpleViewManager<ExtendedImageView> {
   public static final String REACT_CLASS = "RCTFirebaseImageView";
@@ -54,40 +48,6 @@ public void setResizeMode(ExtendedImageView imageView, @Nullable String resizeMo
     imageView.setScaleType(scaleType);
   }
 
-  @ReactPropGroup(names = {
-      ViewProps.BORDER_RADIUS,
-      ViewProps.BORDER_TOP_LEFT_RADIUS,
-      ViewProps.BORDER_TOP_RIGHT_RADIUS,
-      ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
-      ViewProps.BORDER_BOTTOM_LEFT_RADIUS
-  }, defaultFloat = YogaConstants.UNDEFINED)
-  public void setBorderRadius(ExtendedImageView imageView, int index, float borderRadius) {
-    if (!YogaConstants.isUndefined(borderRadius)) {
-      borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
-    }
-
-    RoundedCornersTransformation.CornerType cornerType = RoundedCornersTransformation.CornerType.ALL;
-    switch (index) {
-      case 0:
-        cornerType = RoundedCornersTransformation.CornerType.ALL;
-        break;
-      case 1:
-        cornerType = RoundedCornersTransformation.CornerType.TOP_LEFT;
-        break;
-      case 2:
-        cornerType = RoundedCornersTransformation.CornerType.TOP_RIGHT;
-        break;
-      case 3:
-        cornerType = RoundedCornersTransformation.CornerType.BOTTOM_RIGHT;
-        break;
-      case 4:
-        cornerType = RoundedCornersTransformation.CornerType.BOTTOM_LEFT;
-        break;
-    }
-
-    imageView.setBorderRadius(Math.round(borderRadius), cornerType);
-  }
-
   @Override
   protected void onAfterUpdateTransaction(ExtendedImageView imageView) {
     super.onAfterUpdateTransaction(imageView);

src/index.android.js

@@ -2,7 +2,7 @@
 // and defaultSource is converted to a uri that the
 // native side can interpret
 import React, { Component } from 'react'
-import { requireNativeComponent, Image, Platform } from 'react-native'
+import { requireNativeComponent, Image, View, StyleSheet } from 'react-native'
 import iface from './interface'
 
 const RCTFirebaseImageView = requireNativeComponent(
@@ -14,14 +14,27 @@ const RCTFirebasePhotoView = requireNativeComponent(
   iface
 )
 
+const styles = StyleSheet.create({
+  imageContainer: {
+      overflow: 'hidden',
+  },
+});
+
 class ImageView extends Component {
   render() {
-    let { defaultSource, ...otherProps } = this.props
+    let { source, style, defaultSource, resizeMode, ...otherProps } = this.props
     defaultSource = defaultSource
       ? Image.resolveAssetSource(defaultSource).uri
       : undefined
+    resizeMode = resizeMode || (style ? style.resizeMode : undefined) || 'cover';
     return (
-      <RCTFirebaseImageView {...otherProps} defaultSource={defaultSource} />
+      <View style={[styles.imageContainer, style]}>
+        <RCTFirebaseImageView
+          style={StyleSheet.absoluteFill}
+          defaultSource={defaultSource}
+          resizeMode={resizeMode}
+          {...otherProps} />
+      </View>
     )
   }
 }