Skip to content

Commit a9659ce

Browse files
mdvaccafacebook-github-bot
authored andcommitted
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
1 parent 5ed6ac1 commit a9659ce

File tree

1 file changed

+20
-5
lines changed

1 file changed

+20
-5
lines changed

ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ private enum BorderStyle {
8989
private @Nullable Path mOuterClipPathForBorderRadius;
9090
private @Nullable Path mPathForBorderRadiusOutline;
9191
private @Nullable Path mPathForBorder;
92-
private Path mPathForSingleBorder = new Path();
92+
private final Path mPathForSingleBorder = new Path();
9393
private @Nullable Path mCenterDrawPath;
9494
private @Nullable RectF mInnerClipTempRectForBorderRadius;
9595
private @Nullable RectF mOuterClipTempRectForBorderRadius;
@@ -217,6 +217,7 @@ public void setBorderWidth(int position, float width) {
217217
public void setBorderColor(int position, float rgb, float alpha) {
218218
this.setBorderRGB(position, rgb);
219219
this.setBorderAlpha(position, alpha);
220+
mNeedUpdatePathForBorderRadius = true;
220221
}
221222

222223
private void setBorderRGB(int position, float rgb) {
@@ -523,10 +524,24 @@ private void updatePath() {
523524

524525
final RectF borderWidth = getDirectionAwareBorderInsets();
525526

526-
mInnerClipTempRectForBorderRadius.top += borderWidth.top;
527-
mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom;
528-
mInnerClipTempRectForBorderRadius.left += borderWidth.left;
529-
mInnerClipTempRectForBorderRadius.right -= borderWidth.right;
527+
int colorLeft = getBorderColor(Spacing.LEFT);
528+
int colorTop = getBorderColor(Spacing.TOP);
529+
int colorRight = getBorderColor(Spacing.RIGHT);
530+
int colorBottom = getBorderColor(Spacing.BOTTOM);
531+
int borderColor = getBorderColor(Spacing.ALL);
532+
533+
// Clip border ONLY if its color is non transparent
534+
if (Color.alpha(colorLeft) != 0
535+
&& Color.alpha(colorTop) != 0
536+
&& Color.alpha(colorRight) != 0
537+
&& Color.alpha(colorBottom) != 0
538+
&& Color.alpha(borderColor) != 0) {
539+
540+
mInnerClipTempRectForBorderRadius.top += borderWidth.top;
541+
mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom;
542+
mInnerClipTempRectForBorderRadius.left += borderWidth.left;
543+
mInnerClipTempRectForBorderRadius.right -= borderWidth.right;
544+
}
530545

531546
mTempRectForCenterDrawPath.top += borderWidth.top * 0.5f;
532547
mTempRectForCenterDrawPath.bottom -= borderWidth.bottom * 0.5f;

0 commit comments

Comments
 (0)