Skip to content

Commit 1d51032

Browse files
BeeMargaridafacebook-github-bot
authored andcommitted
fix: border rendering problem in Android (#36129)
Summary: Fixes #36036 The problem was in `ReactViewBackgroundDrawable.java` that was not accounting for adjacent borders that add width set to 0. ## Changelog [Android] [Fixed] - Fix border rendering issue when bottom borders has no width Pull Request resolved: #36129 Test Plan: | Previously | Now with the fix | | --------------- | --------------- | | <img width="417" alt="image" src="https://user-images.githubusercontent.com/25725586/218149384-00e2145c-3c84-4590-87be-3258574489e5.png"> | <img width="414" alt="image" src="https://user-images.githubusercontent.com/25725586/218148215-a8d37158-0feb-47ae-874b-cba2f422d792.png"> | Reviewed By: cipolleschi Differential Revision: D43303228 Pulled By: javache fbshipit-source-id: cf9d30fe12a5740d9ee8974a66904fd0850e7606
1 parent a064de1 commit 1d51032

File tree

2 files changed

+45
-3
lines changed

2 files changed

+45
-3
lines changed

ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -911,7 +911,10 @@ private void updatePath() {
911911
}
912912

913913
mInnerBottomLeftCorner.x = mInnerClipTempRectForBorderRadius.left;
914-
mInnerBottomLeftCorner.y = mInnerClipTempRectForBorderRadius.bottom * -2;
914+
mInnerBottomLeftCorner.y =
915+
borderWidth.bottom != 0
916+
? mInnerClipTempRectForBorderRadius.bottom * -2
917+
: mInnerClipTempRectForBorderRadius.bottom;
915918

916919
getEllipseIntersectionWithLine(
917920
// Ellipse Bounds
@@ -963,7 +966,10 @@ private void updatePath() {
963966
}
964967

965968
mInnerBottomRightCorner.x = mInnerClipTempRectForBorderRadius.right;
966-
mInnerBottomRightCorner.y = mInnerClipTempRectForBorderRadius.bottom * -2;
969+
mInnerBottomRightCorner.y =
970+
borderWidth.bottom != 0
971+
? mInnerClipTempRectForBorderRadius.bottom * -2
972+
: mInnerClipTempRectForBorderRadius.bottom;
967973

968974
getEllipseIntersectionWithLine(
969975
// Ellipse Bounds

packages/rn-tester/js/examples/View/ViewExample.js

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@ exports.examples = [
431431
title: 'Rounded Borders',
432432
render(): React.Node {
433433
return (
434-
<View style={{flexDirection: 'row'}}>
434+
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
435435
<View
436436
style={{
437437
width: 50,
@@ -474,6 +474,42 @@ exports.examples = [
474474
marginRight: 10,
475475
}}
476476
/>
477+
<View
478+
style={{
479+
width: 50,
480+
height: 50,
481+
borderLeftWidth: 6,
482+
borderTopWidth: 6,
483+
borderTopLeftRadius: 20,
484+
}}
485+
/>
486+
<View
487+
style={{
488+
width: 50,
489+
height: 50,
490+
borderRightWidth: 6,
491+
borderTopWidth: 6,
492+
borderTopRightRadius: 20,
493+
}}
494+
/>
495+
<View
496+
style={{
497+
width: 50,
498+
height: 50,
499+
borderBottomWidth: 6,
500+
borderLeftWidth: 6,
501+
borderBottomLeftRadius: 20,
502+
}}
503+
/>
504+
<View
505+
style={{
506+
width: 50,
507+
height: 50,
508+
borderBottomWidth: 6,
509+
borderRightWidth: 6,
510+
borderBottomRightRadius: 20,
511+
}}
512+
/>
477513
</View>
478514
);
479515
},

0 commit comments

Comments
 (0)