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

Summary:
Fixes https://github.com/facebook/react-native/issues/33950

After analysing the values used for drawing the border specifically the top and bottom values of `mInnerClipTempRectForBorderRadius` weren't matching the needs when it comes to the case of borderTopWidth and borderBottomWidth, when the borderRadius is applied.

Asking for reviews cortinico

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[Android] [Fixed] - Border width top/bottom not matching the border radius

Pull Request resolved: https://github.com/facebook/react-native/pull/34362

Test Plan:
Tested in a local project, following are the outputs(Details are in the issue attached):

Before:
<img src="https://user-images.githubusercontent.com/47336142/183289227-96b20f86-1507-46f5-a79d-f61457624e8b.png" height="550">

After:
<img src="https://user-images.githubusercontent.com/47336142/183289177-6148df29-f0de-4b99-bdf0-c28a9c7d3ac7.png" height="550">

Reviewed By: hramos

Differential Revision: D38805873

Pulled By: lunaleaps

fbshipit-source-id: 69f8ff9a9caeeaf88d1c76b639271f642c2e7ea2
This commit is contained in:
hurali97
2022-08-25 21:03:28 -07:00
committed by Facebook GitHub Bot
parent 8afa04a92f
commit cd6a91343e
@@ -791,7 +791,7 @@ public class ReactViewBackgroundDrawable extends Drawable {
/** Compute mInnerTopLeftCorner */
mInnerTopLeftCorner.x = mInnerClipTempRectForBorderRadius.left;
mInnerTopLeftCorner.y = mInnerClipTempRectForBorderRadius.top;
mInnerTopLeftCorner.y = mInnerClipTempRectForBorderRadius.top * 2;
getEllipseIntersectionWithLine(
// Ellipse Bounds
@@ -817,7 +817,7 @@ public class ReactViewBackgroundDrawable extends Drawable {
}
mInnerBottomLeftCorner.x = mInnerClipTempRectForBorderRadius.left;
mInnerBottomLeftCorner.y = mInnerClipTempRectForBorderRadius.bottom;
mInnerBottomLeftCorner.y = mInnerClipTempRectForBorderRadius.bottom * -2;
getEllipseIntersectionWithLine(
// Ellipse Bounds
@@ -843,7 +843,7 @@ public class ReactViewBackgroundDrawable extends Drawable {
}
mInnerTopRightCorner.x = mInnerClipTempRectForBorderRadius.right;
mInnerTopRightCorner.y = mInnerClipTempRectForBorderRadius.top;
mInnerTopRightCorner.y = mInnerClipTempRectForBorderRadius.top * 2;
getEllipseIntersectionWithLine(
// Ellipse Bounds
@@ -869,7 +869,7 @@ public class ReactViewBackgroundDrawable extends Drawable {
}
mInnerBottomRightCorner.x = mInnerClipTempRectForBorderRadius.right;
mInnerBottomRightCorner.y = mInnerClipTempRectForBorderRadius.bottom;
mInnerBottomRightCorner.y = mInnerClipTempRectForBorderRadius.bottom * -2;
getEllipseIntersectionWithLine(
// Ellipse Bounds