Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Android border positioning regression (#32398)

Browse Source 
Summary:
https://github.com/facebook/react-native/issues/29099 introduced a regression where non-rounded borders on Android would render partly outside of the bounds of the view as I reported in https://github.com/facebook/react-native/issues/32393. This PR addresses that by rendering the borders completely inside the view like it works on iOS, previous version of RN and for rounded corners.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Fix Android border positioning regression

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

Test Plan:
Rendering the following code (as reported in the issue) in the RN Tester app:

```jsx
<View
  style={{
    aspectRatio: 1,
    backgroundColor: 'green',
    borderWidth: 8,
    borderColor: 'black',
    borderStyle: 'dashed',
  }}
/>
```

|Before|After|
|--|--|
|![before](https://user-images.githubusercontent.com/378279/137178113-dd2fea7e-48c8-450b-be3a-92706ef93194.png)|![after](https://user-images.githubusercontent.com/378279/137178140-b5ce7b3d-d455-48a9-a57f-0f3194a65c9a.png)|

Reviewed By: yungsters

Differential Revision: D31623647

Pulled By: lunaleaps

fbshipit-source-id: c38d172ae4a9dc48f800c63258223a59e2f621ed
This commit is contained in:
Joel Arvidsson
2021-10-13 17:00:33 -07:00
committed by Facebook GitHub Bot
parent 046a7d2286
commit d1a33cd139
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
+8 -8
View File
@@ -1106,8 +1106,8 @@ public class ReactViewBackgroundDrawable extends Drawable {
int width = Math.round(borderWidth.left);
updatePathEffect(width);
mPaint.setStrokeWidth(width);
mPathForSingleBorder.moveTo(left, top - borderWidth.top / 2);
mPathForSingleBorder.lineTo(left, bottom + borderWidth.bottom / 2);
mPathForSingleBorder.moveTo(left + width / 2, top);
mPathForSingleBorder.lineTo(left + width / 2, bottom);
canvas.drawPath(mPathForSingleBorder, mPaint);
}
if (borderTop > 0) {
@@ -1115,8 +1115,8 @@ public class ReactViewBackgroundDrawable extends Drawable {
int width = Math.round(borderWidth.top);
updatePathEffect(width);
mPaint.setStrokeWidth(width);
mPathForSingleBorder.moveTo(left, top);
mPathForSingleBorder.lineTo(right, top);
mPathForSingleBorder.moveTo(left, top + width / 2);
mPathForSingleBorder.lineTo(right, top + width / 2);
canvas.drawPath(mPathForSingleBorder, mPaint);
}
if (borderRight > 0) {
@@ -1124,8 +1124,8 @@ public class ReactViewBackgroundDrawable extends Drawable {
int width = Math.round(borderWidth.right);
updatePathEffect(width);
mPaint.setStrokeWidth(width);
mPathForSingleBorder.moveTo(right, top - borderWidth.top / 2);
mPathForSingleBorder.lineTo(right, bottom + borderWidth.bottom / 2);
mPathForSingleBorder.moveTo(right - width / 2, top);
mPathForSingleBorder.lineTo(right - width / 2, bottom);
canvas.drawPath(mPathForSingleBorder, mPaint);
}
if (borderBottom > 0) {
@@ -1133,8 +1133,8 @@ public class ReactViewBackgroundDrawable extends Drawable {
int width = Math.round(borderWidth.bottom);
updatePathEffect(width);
mPaint.setStrokeWidth(width);
mPathForSingleBorder.moveTo(left, bottom);
mPathForSingleBorder.lineTo(right, bottom);
mPathForSingleBorder.moveTo(left, bottom - width / 2);
mPathForSingleBorder.lineTo(right, bottom - width / 2);
canvas.drawPath(mPathForSingleBorder, mPaint);
}
}