From 02ca88d0c869b7f16cd400ae20af3d08165ec4e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danilo=20B=C3=BCrger?= Date: Thu, 28 Oct 2021 14:33:53 +0200 Subject: [PATCH] Use trait collection to resolve border colors https://github.com/facebook/react-native/commit/c974cbff04a8d90ac0f856dbada3fc5a75c75b49 changed the border colors to be of UIColor instead of CGColor. This allowed working with dark mode to switch the border colors automatically. However, in certain situation the system can't resolve the current trait collection (see https://stackoverflow.com/a/57177411/2525941). This commit resolves the colors with the current trait collection to ensure the right colors are selected. This matches with the behavior of how the background color is resolved (also in displayLayer:). --- React/Views/RCTView.m | 44 ++++++++++++++++++++++++++----------------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/React/Views/RCTView.m b/React/Views/RCTView.m index 8ed93cdf51cf1e..a99229e21d53ef 100644 --- a/React/Views/RCTView.m +++ b/React/Views/RCTView.m @@ -706,33 +706,43 @@ - (RCTCornerRadii)cornerRadii }; } -- (RCTBorderColors)borderColors +- (RCTBorderColors)borderColorsWithTraitCollection:(UITraitCollection *)traitCollection { const BOOL isRTL = _reactLayoutDirection == UIUserInterfaceLayoutDirectionRightToLeft; + UIColor *directionAwareBorderLeftColor = nil; + UIColor *directionAwareBorderRightColor = nil; + if ([[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL]) { UIColor *borderStartColor = _borderStartColor ?: _borderLeftColor; UIColor *borderEndColor = _borderEndColor ?: _borderRightColor; - UIColor *directionAwareBorderLeftColor = isRTL ? borderEndColor : borderStartColor; - UIColor *directionAwareBorderRightColor = isRTL ? borderStartColor : borderEndColor; - - return (RCTBorderColors){ - (_borderTopColor ?: _borderColor).CGColor, - (directionAwareBorderLeftColor ?: _borderColor).CGColor, - (_borderBottomColor ?: _borderColor).CGColor, - (directionAwareBorderRightColor ?: _borderColor).CGColor, - }; + directionAwareBorderLeftColor = isRTL ? borderEndColor : borderStartColor; + directionAwareBorderRightColor = isRTL ? borderStartColor : borderEndColor; + } else { + directionAwareBorderLeftColor = (isRTL ? _borderEndColor : _borderStartColor) ?: _borderLeftColor; + directionAwareBorderRightColor = (isRTL ? _borderStartColor : _borderEndColor) ?: _borderRightColor; } - UIColor *directionAwareBorderLeftColor = isRTL ? _borderEndColor : _borderStartColor; - UIColor *directionAwareBorderRightColor = isRTL ? _borderStartColor : _borderEndColor; + UIColor *borderColor = _borderColor; + UIColor *borderTopColor = _borderTopColor; + UIColor *borderBottomColor = _borderBottomColor; + +#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000 + if (@available(iOS 13.0, *)) { + borderColor = [borderColor resolvedColorWithTraitCollection:self.traitCollection]; + borderTopColor = [borderTopColor resolvedColorWithTraitCollection:self.traitCollection]; + directionAwareBorderLeftColor = [directionAwareBorderLeftColor resolvedColorWithTraitCollection:self.traitCollection]; + borderBottomColor = [borderBottomColor resolvedColorWithTraitCollection:self.traitCollection]; + directionAwareBorderRightColor = [directionAwareBorderRightColor resolvedColorWithTraitCollection:self.traitCollection]; + } +#endif return (RCTBorderColors){ - (_borderTopColor ?: _borderColor).CGColor, - (directionAwareBorderLeftColor ?: _borderLeftColor ?: _borderColor).CGColor, - (_borderBottomColor ?: _borderColor).CGColor, - (directionAwareBorderRightColor ?: _borderRightColor ?: _borderColor).CGColor, + (borderTopColor ?: borderColor).CGColor, + (directionAwareBorderLeftColor ?: borderColor).CGColor, + (borderBottomColor ?: borderColor).CGColor, + (directionAwareBorderRightColor ?: borderColor).CGColor, }; } @@ -758,7 +768,7 @@ - (void)displayLayer:(CALayer *)layer const RCTCornerRadii cornerRadii = [self cornerRadii]; const UIEdgeInsets borderInsets = [self bordersAsInsets]; - const RCTBorderColors borderColors = [self borderColors]; + const RCTBorderColors borderColors = [self borderColorsWithTraitCollection:self.traitCollection]; BOOL useIOSBorderRendering = RCTCornerRadiiAreEqual(cornerRadii) && RCTBorderInsetsAreEqual(borderInsets) && RCTBorderColorsAreEqual(borderColors) && _borderStyle == RCTBorderStyleSolid &&