mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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  Notice that the first rectangle does not have a transparent top bar and the third rectangle have all borders black ### With the fix  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
This commit is contained in:
committed by
Facebook Github Bot
parent
d60fbe4798
commit
79853d6e53
+10
-7
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user