Skip to content

Commit

Permalink
Fix Android border positioning regression (#32398)
Browse files Browse the repository at this point in the history
Summary:
#29099 introduced a regression where non-rounded borders on Android would render partly outside of the bounds of the view as I reported in #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: #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
  • Loading branch information
oblador authored and Luna Wei committed Oct 15, 2021
1 parent e94f9fa commit 80e5abd
Showing 1 changed file with 8 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -1106,35 +1106,35 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) {
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) {
mPathForSingleBorder.reset();
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) {
mPathForSingleBorder.reset();
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) {
mPathForSingleBorder.reset();
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);
}
}
Expand Down

0 comments on commit 80e5abd

Please sign in to comment.