From b432b8f13b4871dcafd690e57d37298662712b50 Mon Sep 17 00:00:00 2001
From: Guilherme Iscaro <cabelitostos@gmail.com>
Date: Wed, 17 Jul 2019 12:19:03 -0700
Subject: [PATCH] Properly set borderRadius on Android (#25626)

Summary:
In order to properly set the view's borderRadius the inner*RadiusX/inner*RadiusY should not
be used, since their values are obtained via the following formula:

int innerTopLeftRadiusX = Math.max(topLeftRadius - borderWidth.left, 0);

If topLeftRadius and borderWidth.left have the same value innerTopLeftRadiusX will
be zero and it will cause the top left radius to never be set since
"(innerTopLeftRadiusX > 0 ? extraRadiusForOutline : 0)" will evaluate to zero.
In order to prevent this issue the condition will only consider topLeftRadius, topRightRadius, and etc.

I took a closer look to see if this fix does not causes a regression in https://github.com/facebook/react-native/issues/22511

## Changelog

[Android] [FIX] - Correctly set the border radius on android
Pull Request resolved: https://github.com/facebook/react-native/pull/25626

Test Plan:
Using the following code and Android certify that the border radius is correctly applied.
```javascript
import React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";

export default class App extends React.Component<Props> {
  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.box1}>
          <Text>borderWidth: 2</Text>
          <Text>borderRadius: 2</Text>
        </View>
        <View style={styles.box2}>
          <Text>borderWidth: 2</Text>
          <Text>borderRadius: 2.000001</Text>
        </View>
        <View style={styles.box3}>
          <Text>borderWidth: 5</Text>
          <Text>borderRadius: 5</Text>
        </View>
        <View style={styles.box4}>
          <Text>borderWidth: 5</Text>
          <Text>borderRadius: 5.000001</Text>
        </View>
        <View style={styles.box5}>
          <Text>borderWidth: 10</Text>
          <Text>borderRadius: 10</Text>
        </View>
        <View style={styles.box6}>
          <Text>borderWidth: 10</Text>
          <Text>borderRadius: 11</Text>
        </View>
        <View style={styles.box7}>
          <Text>borderWidth: 10</Text>
          <Text>borderRadius: 5</Text>
        </View>
        <Text>Testing if this does not cause a regression in https://github.com/facebook/react-native/issues/22511</Text>
        <View style={{
          margin: 10,
          backgroundColor: 'red',
          width: 100,
          height: 100,
          borderWidth: 5,
          borderBottomLeftRadius: 15,
        }} />
        <View style={{
          margin: 10,
          backgroundColor: 'green',
          borderWidth: 5,
          width: 100,
          height: 100,
        }} />
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  box1: {
    margin: 10,
    height: 100,
    borderRadius: 2,
    borderWidth: 2,
    borderColor: "#000000"
  },
  box2: {
    margin: 10,
    height: 100,
    borderRadius: 2.000001,
    borderWidth: 2,
    borderColor: "#000000"
  },
  box3: {
    margin: 10,
    height: 100,
    borderRadius: 5,
    borderWidth: 5,
    borderColor: "#000000"
  },
  box4: {
    margin: 10,
    height: 100,
    borderRadius: 5.000001,
    borderWidth: 5,
    borderColor: "#000000"
  },
  box5: {
    margin: 10,
    height: 100,
    borderRadius: 10,
    borderWidth: 10,
    borderColor: "#000000"
  },
  box6: {
    margin: 10,
    height: 100,
    borderRadius: 11,
    borderWidth: 10,
    borderColor: "#000000"
  },
  box7: {
    margin: 10,
    height: 100,
    borderRadius: 5,
    borderWidth: 10,
    borderColor: "#000000"
  }
});

```

### Without the fix

![not-working](https://user-images.githubusercontent.com/984610/61164801-e1dc6580-a4ee-11e9-91f3-6ca2fab7c461.gif)

### With the fix

![fixed](https://user-images.githubusercontent.com/984610/61164794-db4dee00-a4ee-11e9-88d7-367c29c785ec.gif)

Closes https://github.com/facebook/react-native/issues/25591

Reviewed By: osdnk

Differential Revision: D16243602

Pulled By: mdvacca

fbshipit-source-id: 1e16572fdf6936aa19c3d4c01ff6434028652942
---
 .../views/view/ReactViewBackgroundDrawable.java  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 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 f4b59e3551ea07..7b17c7f6d3ea68 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
@@ -662,14 +662,14 @@ private void updatePath() {
     mCenterDrawPath.addRoundRect(
         mTempRectForCenterDrawPath,
         new float[] {
-          innerTopLeftRadiusX + (innerTopLeftRadiusX > 0 ? extraRadiusForOutline : 0),
-          innerTopLeftRadiusY + (innerTopLeftRadiusY > 0 ? extraRadiusForOutline : 0),
-          innerTopRightRadiusX + (innerTopRightRadiusX > 0 ? extraRadiusForOutline : 0),
-          innerTopRightRadiusY + (innerTopRightRadiusY > 0 ? extraRadiusForOutline : 0),
-          innerBottomRightRadiusX + (innerBottomRightRadiusX > 0 ? extraRadiusForOutline : 0),
-          innerBottomRightRadiusY + (innerBottomRightRadiusY > 0 ? extraRadiusForOutline : 0),
-          innerBottomLeftRadiusX + (innerBottomLeftRadiusX > 0 ? extraRadiusForOutline : 0),
-          innerBottomLeftRadiusY + (innerBottomLeftRadiusY > 0 ? extraRadiusForOutline : 0)
+          innerTopLeftRadiusX + (topLeftRadius > 0 ? extraRadiusForOutline : 0),
+          innerTopLeftRadiusY + (topLeftRadius > 0 ? extraRadiusForOutline : 0),
+          innerTopRightRadiusX + (topRightRadius > 0 ? extraRadiusForOutline : 0),
+          innerTopRightRadiusY + (topRightRadius > 0 ? extraRadiusForOutline : 0),
+          innerBottomRightRadiusX + (bottomRightRadius > 0 ? extraRadiusForOutline : 0),
+          innerBottomRightRadiusY + (bottomRightRadius > 0 ? extraRadiusForOutline : 0),
+          innerBottomLeftRadiusX + (bottomLeftRadius > 0 ? extraRadiusForOutline : 0),
+          innerBottomLeftRadiusY + (bottomLeftRadius > 0 ? extraRadiusForOutline : 0)
         },
         Path.Direction.CW);