Revert "Set rounded rectangle mask on TouchableNativeFeedback's rippl…

…es (#25342)" This reverts commit 14b455f.
facebook · Oct 1, 2019 · 8fd9ab2 · 8fd9ab2
1 parent 7745025
commit 8fd9ab2
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 142 deletions.
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactDrawableHelper.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactDrawableHelper.java
@@ -9,6 +9,8 @@
 import android.annotation.TargetApi;
 import android.content.Context;
 import android.content.res.ColorStateList;
+import android.graphics.Color;
+import android.graphics.drawable.ColorDrawable;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.RippleDrawable;
 import android.os.Build;
@@ -28,8 +30,7 @@ public class ReactDrawableHelper {
 
   @TargetApi(Build.VERSION_CODES.LOLLIPOP)
   public static Drawable createDrawableFromJSDescription(
-      ReactViewGroup view, ReadableMap drawableDescriptionDict) {
-    Context context = view.getContext();
+      Context context, ReadableMap drawableDescriptionDict) {
     String type = drawableDescriptionDict.getString("type");
     if ("ThemeAttrAndroid".equals(type)) {
       String attr = drawableDescriptionDict.getString("attribute");
@@ -74,7 +75,7 @@ public static Drawable createDrawableFromJSDescription(
       if (!drawableDescriptionDict.hasKey("borderless")
           || drawableDescriptionDict.isNull("borderless")
           || !drawableDescriptionDict.getBoolean("borderless")) {
-        mask = view.getBorderRadiusMask();
+        mask = new ColorDrawable(Color.WHITE);
       }
       ColorStateList colorStateList =
           new ColorStateList(new int[][] {new int[] {}}, new int[] {color});

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java
@@ -18,15 +18,12 @@
 import android.graphics.RectF;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.LayerDrawable;
-import android.graphics.drawable.ShapeDrawable;
-import android.graphics.drawable.shapes.RoundRectShape;
 import android.os.Build;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewStructure;
 import android.view.animation.Animation;
-import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.Assertions;
@@ -289,31 +286,6 @@ public void setBorderStyle(@Nullable String style) {
     getOrCreateReactViewBackground().setBorderStyle(style);
   }
 
-  @NonNull
-  public Drawable getBorderRadiusMask() {
-    final float[] outerRadii;
-    if (mReactBackgroundDrawable == null) {
-      outerRadii = null;
-    } else {
-      final float[] borderRadii = getBorderRadii(mReactBackgroundDrawable);
-      outerRadii =
-          new float[] {
-            borderRadii[0],
-            borderRadii[0],
-            borderRadii[1],
-            borderRadii[1],
-            borderRadii[2],
-            borderRadii[2],
-            borderRadii[3],
-            borderRadii[3]
-          };
-    }
-    final ShapeDrawable shapeDrawable =
-        new ShapeDrawable(new RoundRectShape(outerRadii, null, null));
-    shapeDrawable.getPaint().setColor(Color.WHITE);
-    return shapeDrawable;
-  }
-
   @Override
   public void setRemoveClippedSubviews(boolean removeClippedSubviews) {
     if (removeClippedSubviews == mRemoveClippedSubviews) {
@@ -760,11 +732,92 @@ private void dispatchOverflowDraw(Canvas canvas) {
               bottom -= borderWidth.bottom;
             }
 
-            final float borderRadii[] = getBorderRadii(mReactBackgroundDrawable);
-            final float topLeftBorderRadius = borderRadii[0];
-            final float topRightBorderRadius = borderRadii[1];
-            final float bottomRightBorderRadius = borderRadii[2];
-            final float bottomLeftBorderRadius = borderRadii[3];
+            final float borderRadius = mReactBackgroundDrawable.getFullBorderRadius();
+            float topLeftBorderRadius =
+                mReactBackgroundDrawable.getBorderRadiusOrDefaultTo(
+                    borderRadius, ReactViewBackgroundDrawable.BorderRadiusLocation.TOP_LEFT);
+            float topRightBorderRadius =
+                mReactBackgroundDrawable.getBorderRadiusOrDefaultTo(
+                    borderRadius, ReactViewBackgroundDrawable.BorderRadiusLocation.TOP_RIGHT);
+            float bottomLeftBorderRadius =
+                mReactBackgroundDrawable.getBorderRadiusOrDefaultTo(
+                    borderRadius, ReactViewBackgroundDrawable.BorderRadiusLocation.BOTTOM_LEFT);
+            float bottomRightBorderRadius =
+                mReactBackgroundDrawable.getBorderRadiusOrDefaultTo(
+                    borderRadius, ReactViewBackgroundDrawable.BorderRadiusLocation.BOTTOM_RIGHT);
+
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
+              final boolean isRTL = mLayoutDirection == View.LAYOUT_DIRECTION_RTL;
+              float topStartBorderRadius =
+                  mReactBackgroundDrawable.getBorderRadius(
+                      ReactViewBackgroundDrawable.BorderRadiusLocation.TOP_START);
+              float topEndBorderRadius =
+                  mReactBackgroundDrawable.getBorderRadius(
+                      ReactViewBackgroundDrawable.BorderRadiusLocation.TOP_END);
+              float bottomStartBorderRadius =
+                  mReactBackgroundDrawable.getBorderRadius(
+                      ReactViewBackgroundDrawable.BorderRadiusLocation.BOTTOM_START);
+              float bottomEndBorderRadius =
+                  mReactBackgroundDrawable.getBorderRadius(
+                      ReactViewBackgroundDrawable.BorderRadiusLocation.BOTTOM_END);
+
+              if (I18nUtil.getInstance().doLeftAndRightSwapInRTL(getContext())) {
+                if (YogaConstants.isUndefined(topStartBorderRadius)) {
+                  topStartBorderRadius = topLeftBorderRadius;
+                }
+
+                if (YogaConstants.isUndefined(topEndBorderRadius)) {
+                  topEndBorderRadius = topRightBorderRadius;
+                }
+
+                if (YogaConstants.isUndefined(bottomStartBorderRadius)) {
+                  bottomStartBorderRadius = bottomLeftBorderRadius;
+                }
+
+                if (YogaConstants.isUndefined(bottomEndBorderRadius)) {
+                  bottomEndBorderRadius = bottomRightBorderRadius;
+                }
+
+                final float directionAwareTopLeftRadius =
+                    isRTL ? topEndBorderRadius : topStartBorderRadius;
+                final float directionAwareTopRightRadius =
+                    isRTL ? topStartBorderRadius : topEndBorderRadius;
+                final float directionAwareBottomLeftRadius =
+                    isRTL ? bottomEndBorderRadius : bottomStartBorderRadius;
+                final float directionAwareBottomRightRadius =
+                    isRTL ? bottomStartBorderRadius : bottomEndBorderRadius;
+
+                topLeftBorderRadius = directionAwareTopLeftRadius;
+                topRightBorderRadius = directionAwareTopRightRadius;
+                bottomLeftBorderRadius = directionAwareBottomLeftRadius;
+                bottomRightBorderRadius = directionAwareBottomRightRadius;
+              } else {
+                final float directionAwareTopLeftRadius =
+                    isRTL ? topEndBorderRadius : topStartBorderRadius;
+                final float directionAwareTopRightRadius =
+                    isRTL ? topStartBorderRadius : topEndBorderRadius;
+                final float directionAwareBottomLeftRadius =
+                    isRTL ? bottomEndBorderRadius : bottomStartBorderRadius;
+                final float directionAwareBottomRightRadius =
+                    isRTL ? bottomStartBorderRadius : bottomEndBorderRadius;
+
+                if (!YogaConstants.isUndefined(directionAwareTopLeftRadius)) {
+                  topLeftBorderRadius = directionAwareTopLeftRadius;
+                }
+
+                if (!YogaConstants.isUndefined(directionAwareTopRightRadius)) {
+                  topRightBorderRadius = directionAwareTopRightRadius;
+                }
+
+                if (!YogaConstants.isUndefined(directionAwareBottomLeftRadius)) {
+                  bottomLeftBorderRadius = directionAwareBottomLeftRadius;
+                }
+
+                if (!YogaConstants.isUndefined(directionAwareBottomRightRadius)) {
+                  bottomRightBorderRadius = directionAwareBottomRightRadius;
+                }
+              }
+            }
 
             if (topLeftBorderRadius > 0
                 || topRightBorderRadius > 0
@@ -803,97 +856,6 @@ private void dispatchOverflowDraw(Canvas canvas) {
     }
   }
 
-  @NonNull
-  private float[] getBorderRadii(@NonNull ReactViewBackgroundDrawable backgroundDrawable) {
-    final float borderRadius = backgroundDrawable.getFullBorderRadius();
-    float topLeftBorderRadius =
-        backgroundDrawable.getBorderRadiusOrDefaultTo(
-            borderRadius, ReactViewBackgroundDrawable.BorderRadiusLocation.TOP_LEFT);
-    float topRightBorderRadius =
-        backgroundDrawable.getBorderRadiusOrDefaultTo(
-            borderRadius, ReactViewBackgroundDrawable.BorderRadiusLocation.TOP_RIGHT);
-    float bottomLeftBorderRadius =
-        backgroundDrawable.getBorderRadiusOrDefaultTo(
-            borderRadius, ReactViewBackgroundDrawable.BorderRadiusLocation.BOTTOM_LEFT);
-    float bottomRightBorderRadius =
-        backgroundDrawable.getBorderRadiusOrDefaultTo(
-            borderRadius, ReactViewBackgroundDrawable.BorderRadiusLocation.BOTTOM_RIGHT);
-
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
-      final boolean isRTL = mLayoutDirection == View.LAYOUT_DIRECTION_RTL;
-      float topStartBorderRadius =
-          backgroundDrawable.getBorderRadius(
-              ReactViewBackgroundDrawable.BorderRadiusLocation.TOP_START);
-      float topEndBorderRadius =
-          backgroundDrawable.getBorderRadius(
-              ReactViewBackgroundDrawable.BorderRadiusLocation.TOP_END);
-      float bottomStartBorderRadius =
-          backgroundDrawable.getBorderRadius(
-              ReactViewBackgroundDrawable.BorderRadiusLocation.BOTTOM_START);
-      float bottomEndBorderRadius =
-          backgroundDrawable.getBorderRadius(
-              ReactViewBackgroundDrawable.BorderRadiusLocation.BOTTOM_END);
-
-      if (I18nUtil.getInstance().doLeftAndRightSwapInRTL(getContext())) {
-        if (YogaConstants.isUndefined(topStartBorderRadius)) {
-          topStartBorderRadius = topLeftBorderRadius;
-        }
-
-        if (YogaConstants.isUndefined(topEndBorderRadius)) {
-          topEndBorderRadius = topRightBorderRadius;
-        }
-
-        if (YogaConstants.isUndefined(bottomStartBorderRadius)) {
-          bottomStartBorderRadius = bottomLeftBorderRadius;
-        }
-
-        if (YogaConstants.isUndefined(bottomEndBorderRadius)) {
-          bottomEndBorderRadius = bottomRightBorderRadius;
-        }
-
-        final float directionAwareTopLeftRadius = isRTL ? topEndBorderRadius : topStartBorderRadius;
-        final float directionAwareTopRightRadius =
-            isRTL ? topStartBorderRadius : topEndBorderRadius;
-        final float directionAwareBottomLeftRadius =
-            isRTL ? bottomEndBorderRadius : bottomStartBorderRadius;
-        final float directionAwareBottomRightRadius =
-            isRTL ? bottomStartBorderRadius : bottomEndBorderRadius;
-
-        topLeftBorderRadius = directionAwareTopLeftRadius;
-        topRightBorderRadius = directionAwareTopRightRadius;
-        bottomLeftBorderRadius = directionAwareBottomLeftRadius;
-        bottomRightBorderRadius = directionAwareBottomRightRadius;
-      } else {
-        final float directionAwareTopLeftRadius = isRTL ? topEndBorderRadius : topStartBorderRadius;
-        final float directionAwareTopRightRadius =
-            isRTL ? topStartBorderRadius : topEndBorderRadius;
-        final float directionAwareBottomLeftRadius =
-            isRTL ? bottomEndBorderRadius : bottomStartBorderRadius;
-        final float directionAwareBottomRightRadius =
-            isRTL ? bottomStartBorderRadius : bottomEndBorderRadius;
-
-        if (!YogaConstants.isUndefined(directionAwareTopLeftRadius)) {
-          topLeftBorderRadius = directionAwareTopLeftRadius;
-        }
-
-        if (!YogaConstants.isUndefined(directionAwareTopRightRadius)) {
-          topRightBorderRadius = directionAwareTopRightRadius;
-        }
-
-        if (!YogaConstants.isUndefined(directionAwareBottomLeftRadius)) {
-          bottomLeftBorderRadius = directionAwareBottomLeftRadius;
-        }
-
-        if (!YogaConstants.isUndefined(directionAwareBottomRightRadius)) {
-          bottomRightBorderRadius = directionAwareBottomRightRadius;
-        }
-      }
-    }
-    return new float[] {
-      topLeftBorderRadius, topRightBorderRadius, bottomRightBorderRadius, bottomLeftBorderRadius
-    };
-  }
-
   public void setOpacityIfPossible(float opacity) {
     mBackfaceOpacity = opacity;
     setBackfaceVisibilityDependantOpacity();

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java
@@ -52,9 +52,6 @@ public class ReactViewManager extends ViewGroupManager<ReactViewGroup> {
   private static final int CMD_SET_PRESSED = 2;
   private static final String HOTSPOT_UPDATE_KEY = "hotspotUpdate";
 
-  private @Nullable ReadableMap mNativeBackground;
-  private @Nullable ReadableMap mNativeForeground;
-
   @ReactProp(name = "accessible")
   public void setAccessible(ReactViewGroup view, boolean accessible) {
     view.setFocusable(accessible);
@@ -121,14 +118,6 @@ public void setBorderRadius(ReactViewGroup view, int index, float borderRadius)
     } else {
       view.setBorderRadius(borderRadius, index - 1);
     }
-
-    if (mNativeBackground != null) {
-      setNativeBackground(view, mNativeBackground);
-    }
-
-    if (mNativeForeground != null) {
-      setNativeForeground(view, mNativeForeground);
-    }
   }
 
   @ReactProp(name = "borderStyle")
@@ -169,17 +158,19 @@ public void setPointerEvents(ReactViewGroup view, @Nullable String pointerEvents
 
   @ReactProp(name = "nativeBackgroundAndroid")
   public void setNativeBackground(ReactViewGroup view, @Nullable ReadableMap bg) {
-    mNativeBackground = bg;
     view.setTranslucentBackgroundDrawable(
-        bg == null ? null : ReactDrawableHelper.createDrawableFromJSDescription(view, bg));
+        bg == null
+            ? null
+            : ReactDrawableHelper.createDrawableFromJSDescription(view.getContext(), bg));
   }
 
   @TargetApi(Build.VERSION_CODES.M)
   @ReactProp(name = "nativeForegroundAndroid")
   public void setNativeForeground(ReactViewGroup view, @Nullable ReadableMap fg) {
-    mNativeForeground = fg;
     view.setForeground(
-        fg == null ? null : ReactDrawableHelper.createDrawableFromJSDescription(view, fg));
+        fg == null
+            ? null
+            : ReactDrawableHelper.createDrawableFromJSDescription(view.getContext(), fg));
   }
 
   @ReactProp(