Skip to content

Commit

Permalink
Fix rendering of transparent borders in RN Android
Browse files Browse the repository at this point in the history
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
  • Loading branch information
mdvacca authored and facebook-github-bot committed Jun 5, 2022
1 parent 5ed6ac1 commit a9659ce
Showing 1 changed file with 20 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit a9659ce

Please sign in to comment.