Skip to content

fix: border width top/bottom not matching the border radius #34362

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
hurali97 wants to merge 1 commit into from
Closed

fix: border width top/bottom not matching the border radius #34362

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -791,7 +791,7 @@ private void updatePath() {

/** Compute mInnerTopLeftCorner */
mInnerTopLeftCorner.x = mInnerClipTempRectForBorderRadius.left;
mInnerTopLeftCorner.y = mInnerClipTempRectForBorderRadius.top;
mInnerTopLeftCorner.y = mInnerClipTempRectForBorderRadius.top * 2;
Copy link
Contributor

@lunaleaps lunaleaps Aug 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you go into detail about why we multiply by 2?

Copy link
Contributor Author

@hurali97 hurali97 Aug 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So basically, the reason for applying with 2 is that, the mInnerClipTempRectForBorderRadius without multiplying doesn't really curves the border at the end, which leaves the white space around the view. As you can see in the attached image and the issue as well. So after debugging it clicked that if the mInnerClipTempRectForBorderRadius can have twice the value we can have a nice curve around borders.


getEllipseIntersectionWithLine(
// Ellipse Bounds
Expand All @@ -817,7 +817,7 @@ private void updatePath() {
}

mInnerBottomLeftCorner.x = mInnerClipTempRectForBorderRadius.left;
mInnerBottomLeftCorner.y = mInnerClipTempRectForBorderRadius.bottom;
mInnerBottomLeftCorner.y = mInnerClipTempRectForBorderRadius.bottom * -2;

getEllipseIntersectionWithLine(
// Ellipse Bounds
Expand All @@ -843,7 +843,7 @@ private void updatePath() {
}

mInnerTopRightCorner.x = mInnerClipTempRectForBorderRadius.right;
mInnerTopRightCorner.y = mInnerClipTempRectForBorderRadius.top;
mInnerTopRightCorner.y = mInnerClipTempRectForBorderRadius.top * 2;

getEllipseIntersectionWithLine(
// Ellipse Bounds
Expand All @@ -869,7 +869,7 @@ private void updatePath() {
}

mInnerBottomRightCorner.x = mInnerClipTempRectForBorderRadius.right;
mInnerBottomRightCorner.y = mInnerClipTempRectForBorderRadius.bottom;
mInnerBottomRightCorner.y = mInnerClipTempRectForBorderRadius.bottom * -2;

getEllipseIntersectionWithLine(
// Ellipse Bounds
Expand Down