From a9659ce86d94dd34768b067763740a5c41917e42 Mon Sep 17 00:00:00 2001 From: David Vacca Date: Sun, 5 Jun 2022 15:18:39 -0700 Subject: [PATCH] Fix rendering of transparent borders in RN Android Summary: This diff fixes the rendering of transparent borders in RN Android views The fix clips the view ONLY when there is a border color that's non transparent This change unifies the rendering of transparent and semitransparent borders for Views between RN Android, iOS and Web Changelog: [Android][Fix] Fix rendering of transparent borders in RN Android Reviewed By: JoshuaGross Differential Revision: D36890856 fbshipit-source-id: 38fc2ae215f136160a73ca470e03fada8cb81ced --- .../view/ReactViewBackgroundDrawable.java | 25 +++++++++++++++---- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java index a464382e3c5f63..6a53ed80f1becc 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java @@ -89,7 +89,7 @@ private enum BorderStyle { private @Nullable Path mOuterClipPathForBorderRadius; private @Nullable Path mPathForBorderRadiusOutline; private @Nullable Path mPathForBorder; - private Path mPathForSingleBorder = new Path(); + private final Path mPathForSingleBorder = new Path(); private @Nullable Path mCenterDrawPath; private @Nullable RectF mInnerClipTempRectForBorderRadius; private @Nullable RectF mOuterClipTempRectForBorderRadius; @@ -217,6 +217,7 @@ public void setBorderWidth(int position, float width) { public void setBorderColor(int position, float rgb, float alpha) { this.setBorderRGB(position, rgb); this.setBorderAlpha(position, alpha); + mNeedUpdatePathForBorderRadius = true; } private void setBorderRGB(int position, float rgb) { @@ -523,10 +524,24 @@ private void updatePath() { final RectF borderWidth = getDirectionAwareBorderInsets(); - mInnerClipTempRectForBorderRadius.top += borderWidth.top; - mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom; - mInnerClipTempRectForBorderRadius.left += borderWidth.left; - mInnerClipTempRectForBorderRadius.right -= borderWidth.right; + int colorLeft = getBorderColor(Spacing.LEFT); + int colorTop = getBorderColor(Spacing.TOP); + int colorRight = getBorderColor(Spacing.RIGHT); + int colorBottom = getBorderColor(Spacing.BOTTOM); + int borderColor = getBorderColor(Spacing.ALL); + + // Clip border ONLY if its color is non transparent + if (Color.alpha(colorLeft) != 0 + && Color.alpha(colorTop) != 0 + && Color.alpha(colorRight) != 0 + && Color.alpha(colorBottom) != 0 + && Color.alpha(borderColor) != 0) { + + mInnerClipTempRectForBorderRadius.top += borderWidth.top; + mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom; + mInnerClipTempRectForBorderRadius.left += borderWidth.left; + mInnerClipTempRectForBorderRadius.right -= borderWidth.right; + } mTempRectForCenterDrawPath.top += borderWidth.top * 0.5f; mTempRectForCenterDrawPath.bottom -= borderWidth.bottom * 0.5f;