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
facebook · Feb 16, 2023 · 1d51032 · 1d51032
1 parent a064de1
commit 1d51032
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
@@ -911,7 +911,10 @@ private void updatePath() {
     }
 
     mInnerBottomLeftCorner.x = mInnerClipTempRectForBorderRadius.left;
-    mInnerBottomLeftCorner.y = mInnerClipTempRectForBorderRadius.bottom * -2;
+    mInnerBottomLeftCorner.y =
+        borderWidth.bottom != 0
+            ? mInnerClipTempRectForBorderRadius.bottom * -2
+            : mInnerClipTempRectForBorderRadius.bottom;
 
     getEllipseIntersectionWithLine(
         // Ellipse Bounds
@@ -963,7 +966,10 @@ private void updatePath() {
     }
 
     mInnerBottomRightCorner.x = mInnerClipTempRectForBorderRadius.right;
-    mInnerBottomRightCorner.y = mInnerClipTempRectForBorderRadius.bottom * -2;
+    mInnerBottomRightCorner.y =
+        borderWidth.bottom != 0
+            ? mInnerClipTempRectForBorderRadius.bottom * -2
+            : mInnerClipTempRectForBorderRadius.bottom;
 
     getEllipseIntersectionWithLine(
         // Ellipse Bounds

diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js
@@ -431,7 +431,7 @@ exports.examples = [
     title: 'Rounded Borders',
     render(): React.Node {
       return (
-        <View style={{flexDirection: 'row'}}>
+        <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
           <View
             style={{
               width: 50,
@@ -474,6 +474,42 @@ exports.examples = [
               marginRight: 10,
             }}
           />
+          <View
+            style={{
+              width: 50,
+              height: 50,
+              borderLeftWidth: 6,
+              borderTopWidth: 6,
+              borderTopLeftRadius: 20,
+            }}
+          />
+          <View
+            style={{
+              width: 50,
+              height: 50,
+              borderRightWidth: 6,
+              borderTopWidth: 6,
+              borderTopRightRadius: 20,
+            }}
+          />
+          <View
+            style={{
+              width: 50,
+              height: 50,
+              borderBottomWidth: 6,
+              borderLeftWidth: 6,
+              borderBottomLeftRadius: 20,
+            }}
+          />
+          <View
+            style={{
+              width: 50,
+              height: 50,
+              borderBottomWidth: 6,
+              borderRightWidth: 6,
+              borderBottomRightRadius: 20,
+            }}
+          />
         </View>
       );
     },