From 79853d6e53337c82f064aa80dd8b8ac8916afa9d Mon Sep 17 00:00:00 2001
From: Guilherme Iscaro <cabelitostos@gmail.com>
Date: Sun, 14 Jul 2019 22:26:53 -0700
Subject: [PATCH] Properly set the border color when there are round borders on
 Android (#25649)

Summary:
Drawing the border in one pass should only be done with the borderWidth and
borderColor are the same for all directions (top, left, bottom and right),
otherwise React may draw wrong colors.
This commit adds a check to verify if all the colors are the same,
otherwise it will draw each quadrilateral independently.

## Changelog

[Android] [Fix] - Properly paint the border colors and there are round borders
Pull Request resolved: https://github.com/facebook/react-native/pull/25649

Test Plan:
Using the code below one must see the correct border colors just like the example below:
### Without the fix

![Screen Shot 2019-07-14 at 19 41 49](https://user-images.githubusercontent.com/984610/61190322-eb8dd680-a670-11e9-9db0-c7f85557eb52.png)

Notice that the first rectangle does not have a transparent top bar and the third rectangle have all borders black

### With the fix

![Screen Shot 2019-07-14 at 19 40 52](https://user-images.githubusercontent.com/984610/61190338-0bbd9580-a671-11e9-8339-c26547cfa1a3.png)

All borders are properly colored.

```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.react1}>
          <Text>Top border transparent</Text>
        </View>
        <View style={styles.react5}>
          <Text>Top border transparent - no round corners</Text>
        </View>
        <View style={styles.react2}>
          <Text>all borders green</Text>
        </View>
        <View style={styles.react3}>
          <Text>Green, Red, Blue, Purple colors</Text>
        </View>
        <View style={styles.react4}>
          <Text>Green, Red, Blue, Purple colors - no round corners</Text>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  react1: {
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'red',
    borderTopColor: 'transparent',
    borderBottomLeftRadius: 15,
    borderBottomRightRadius: 15,
    paddingVertical: 10,
    margin: 10,
    marginBottom: 20,
  },
  react5: {
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'red',
    borderTopColor: 'transparent',
    paddingVertical: 10,
    margin: 10,
    marginBottom: 20,
  },
  react2: {
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'green',
    borderRadius: 20,
    paddingVertical: 10,
    margin: 10,
    marginBottom: 20,
  },
  react3: {
    alignItems: 'center',
    borderWidth: 1,
    borderTopColor: 'green',
    borderLeftColor: 'red',
    borderBottomColor: 'blue',
    borderRightColor: 'purple',
    borderBottomLeftRadius: 15,
    borderBottomRightRadius: 15,
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    paddingVertical: 10,
    margin: 10,
    marginBottom: 20,
  },
  react4: {
    alignItems: 'center',
    borderWidth: 1,
    borderTopColor: 'green',
    borderLeftColor: 'red',
    borderBottomColor: 'blue',
    borderRightColor: 'purple',
    paddingVertical: 10,
    margin: 10,
    marginBottom: 20,
  },
});
```
Closes https://github.com/facebook/react-native/issues/25643

Differential Revision: D16258526

Pulled By: mdvacca

fbshipit-source-id: 2d43eade23a5a78ccfda8693cc4e2e336ccec156
---
 .../views/view/ReactViewBackgroundDrawable.java | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 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 ed998e60801..f4b59e3551e 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
@@ -338,6 +338,10 @@ public class ReactViewBackgroundDrawable extends Drawable {
     }
 
     final RectF borderWidth = getDirectionAwareBorderInsets();
+    int colorLeft = getBorderColor(Spacing.LEFT);
+    int colorTop = getBorderColor(Spacing.TOP);
+    int colorRight = getBorderColor(Spacing.RIGHT);
+    int colorBottom = getBorderColor(Spacing.BOTTOM);
 
     if (borderWidth.top > 0
         || borderWidth.bottom > 0
@@ -346,12 +350,16 @@ public class ReactViewBackgroundDrawable extends Drawable {
 
       // If it's a full and even border draw inner rect path with stroke
       final float fullBorderWidth = getFullBorderWidth();
+      int borderColor = getBorderColor(Spacing.ALL);
       if (borderWidth.top == fullBorderWidth
           && borderWidth.bottom == fullBorderWidth
           && borderWidth.left == fullBorderWidth
-          && borderWidth.right == fullBorderWidth) {
+          && borderWidth.right == fullBorderWidth
+          && colorLeft == borderColor
+          && colorTop == borderColor
+          && colorRight == borderColor
+          && colorBottom == borderColor) {
         if (fullBorderWidth > 0) {
-          int borderColor = getBorderColor(Spacing.ALL);
           mPaint.setColor(ColorUtil.multiplyColorAlpha(borderColor, mAlpha));
           mPaint.setStyle(Paint.Style.STROKE);
           mPaint.setStrokeWidth(fullBorderWidth);
@@ -366,11 +374,6 @@ public class ReactViewBackgroundDrawable extends Drawable {
         canvas.clipPath(mOuterClipPathForBorderRadius, Region.Op.INTERSECT);
         canvas.clipPath(mInnerClipPathForBorderRadius, Region.Op.DIFFERENCE);
 
-        int colorLeft = getBorderColor(Spacing.LEFT);
-        int colorTop = getBorderColor(Spacing.TOP);
-        int colorRight = getBorderColor(Spacing.RIGHT);
-        int colorBottom = getBorderColor(Spacing.BOTTOM);
-
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
           final boolean isRTL = getResolvedLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
           int colorStart = getBorderColor(Spacing.START);