From 1d5103227851ab92de889d5e7e910393b5d8743a Mon Sep 17 00:00:00 2001
From: Ana Margarida Silva <ana.margarida.silva@callstack.com>
Date: Thu, 16 Feb 2023 08:09:22 -0800
Subject: [PATCH] fix: border rendering problem in Android (#36129)

Summary:
Fixes https://github.com/facebook/react-native/issues/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: https://github.com/facebook/react-native/pull/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
---
 .../view/ReactViewBackgroundDrawable.java     | 10 ++++-
 .../rn-tester/js/examples/View/ViewExample.js | 38 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 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
index eded03ee94dfb0..dc54a6ff8a3465 100644
--- 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
index 8602101cf521bd..58a20c7b20980a 100644
--- 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>
       );
     },