Skip to content

Commit

Permalink
Properly set the border color when there are round borders on Android (
Browse files Browse the repository at this point in the history
…facebook#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: facebook#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 facebook#25643

Differential Revision: D16258526

Pulled By: mdvacca

fbshipit-source-id: 2d43eade23a5a78ccfda8693cc4e2e336ccec156
  • Loading branch information
cabelitos authored and facebook-github-bot committed Jul 15, 2019
1 parent d60fbe4 commit 79853d6
Showing 1 changed file with 10 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,10 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) {
}

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
Expand All @@ -346,12 +350,16 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) {

// 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);
Expand All @@ -366,11 +374,6 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) {
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);
Expand Down

0 comments on commit 79853d6

Please sign in to comment.