Guilherme Iscaro 79853d6e53 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

2019-07-14 22:54:41 -07:00

..

facebook

Properly set the border color when there are round borders on Android (#25649)

2019-07-14 22:54:41 -07:00