From 4476fbc66c9bd0cb1c0483aa5c29805a2dc4a9ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danilo=20B=C3=BCrger?= Date: Wed, 23 Jun 2021 13:36:11 -0700 Subject: [PATCH] Allow PlatformColor to work with RCTView border colors (#29728) Summary: # See PR https://github.com/facebook/react-native/pull/29728 # From PR Author Using `PlatformColor` with border colors doesn't work currently when switching dark mode as the information is lost when converting to `CGColor`. This change keeps the border colors around as `UIColor` so switching to dark mode works. ```ts ... ``` This view will start with a red border (assuming light mode when started), but will not change to a yellow border when switching to dark mode. With this PR, the border color will be correctly set to yellow. ## Changelog [iOS] [Fixed] - Allow PlatformColor to work with border colors Pull Request resolved: https://github.com/facebook/react-native/pull/29728 Test Plan: 1. Assign a `PlatformColor` or `DynamicColorIOS` to a view border color. 2. Toggle between dark / light mode. See the colors change. Reviewed By: lunaleaps Differential Revision: D29268376 Pulled By: p-sun fbshipit-source-id: 586545b05be0beb0e6e5ace6e3f74b304620ad94 --- React/Views/RCTView.h | 14 ++-- React/Views/RCTView.m | 72 ++++++++----------- React/Views/RCTViewManager.m | 4 +- .../PlatformColor/PlatformColorExample.js | 14 ++++ 4 files changed, 53 insertions(+), 51 deletions(-) diff --git a/React/Views/RCTView.h b/React/Views/RCTView.h index 7b86d088ae66e9..c82242d90b1042 100644 --- a/React/Views/RCTView.h +++ b/React/Views/RCTView.h @@ -82,13 +82,13 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait; /** * Border colors (actually retained). */ -@property (nonatomic, assign) CGColorRef borderTopColor; -@property (nonatomic, assign) CGColorRef borderRightColor; -@property (nonatomic, assign) CGColorRef borderBottomColor; -@property (nonatomic, assign) CGColorRef borderLeftColor; -@property (nonatomic, assign) CGColorRef borderStartColor; -@property (nonatomic, assign) CGColorRef borderEndColor; -@property (nonatomic, assign) CGColorRef borderColor; +@property (nonatomic, strong) UIColor *borderTopColor; +@property (nonatomic, strong) UIColor *borderRightColor; +@property (nonatomic, strong) UIColor *borderBottomColor; +@property (nonatomic, strong) UIColor *borderLeftColor; +@property (nonatomic, strong) UIColor *borderStartColor; +@property (nonatomic, strong) UIColor *borderEndColor; +@property (nonatomic, strong) UIColor *borderColor; /** * Border widths. diff --git a/React/Views/RCTView.m b/React/Views/RCTView.m index 91e28ab95ec664..87ff206081f6f8 100644 --- a/React/Views/RCTView.m +++ b/React/Views/RCTView.m @@ -729,28 +729,28 @@ - (RCTBorderColors)borderColors const BOOL isRTL = _reactLayoutDirection == UIUserInterfaceLayoutDirectionRightToLeft; if ([[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL]) { - const CGColorRef borderStartColor = _borderStartColor ?: _borderLeftColor; - const CGColorRef borderEndColor = _borderEndColor ?: _borderRightColor; + UIColor *borderStartColor = _borderStartColor ?: _borderLeftColor; + UIColor *borderEndColor = _borderEndColor ?: _borderRightColor; - const CGColorRef directionAwareBorderLeftColor = isRTL ? borderEndColor : borderStartColor; - const CGColorRef directionAwareBorderRightColor = isRTL ? borderStartColor : borderEndColor; + UIColor *directionAwareBorderLeftColor = isRTL ? borderEndColor : borderStartColor; + UIColor *directionAwareBorderRightColor = isRTL ? borderStartColor : borderEndColor; return (RCTBorderColors){ - _borderTopColor ?: _borderColor, - directionAwareBorderLeftColor ?: _borderColor, - _borderBottomColor ?: _borderColor, - directionAwareBorderRightColor ?: _borderColor, + (_borderTopColor ?: _borderColor).CGColor, + (directionAwareBorderLeftColor ?: _borderColor).CGColor, + (_borderBottomColor ?: _borderColor).CGColor, + (directionAwareBorderRightColor ?: _borderColor).CGColor, }; } - const CGColorRef directionAwareBorderLeftColor = isRTL ? _borderEndColor : _borderStartColor; - const CGColorRef directionAwareBorderRightColor = isRTL ? _borderStartColor : _borderEndColor; + UIColor *directionAwareBorderLeftColor = isRTL ? _borderEndColor : _borderStartColor; + UIColor *directionAwareBorderRightColor = isRTL ? _borderStartColor : _borderEndColor; return (RCTBorderColors){ - _borderTopColor ?: _borderColor, - directionAwareBorderLeftColor ?: _borderLeftColor ?: _borderColor, - _borderBottomColor ?: _borderColor, - directionAwareBorderRightColor ?: _borderRightColor ?: _borderColor, + (_borderTopColor ?: _borderColor).CGColor, + (directionAwareBorderLeftColor ?: _borderLeftColor ?: _borderColor).CGColor, + (_borderBottomColor ?: _borderColor).CGColor, + (directionAwareBorderRightColor ?: _borderRightColor ?: _borderColor).CGColor, }; } @@ -902,19 +902,18 @@ - (void)updateClippingForLayer:(CALayer *)layer #pragma mark Border Color -#define setBorderColor(side) \ - -(void)setBorder##side##Color : (CGColorRef)color \ - { \ - if (CGColorEqualToColor(_border##side##Color, color)) { \ - return; \ - } \ - CGColorRelease(_border##side##Color); \ - _border##side##Color = CGColorRetain(color); \ - [self.layer setNeedsDisplay]; \ +#define setBorderColor(side) \ + -(void)setBorder##side##Color : (UIColor *)color \ + { \ + if ([_border##side##Color isEqual:color]) { \ + return; \ + } \ + _border##side##Color = color; \ + [self.layer setNeedsDisplay]; \ } setBorderColor() setBorderColor(Top) setBorderColor(Right) setBorderColor(Bottom) setBorderColor(Left) - setBorderColor(Start) setBorderColor(End) + setBorderColor(Start) setBorderColor(End) #pragma mark - Border Width @@ -928,8 +927,8 @@ -(void)setBorder##side##Width : (CGFloat)width \ [self.layer setNeedsDisplay]; \ } - setBorderWidth() setBorderWidth(Top) setBorderWidth(Right) setBorderWidth(Bottom) setBorderWidth(Left) - setBorderWidth(Start) setBorderWidth(End) + setBorderWidth() setBorderWidth(Top) setBorderWidth(Right) setBorderWidth(Bottom) setBorderWidth(Left) + setBorderWidth(Start) setBorderWidth(End) #pragma mark - Border Radius @@ -943,9 +942,9 @@ -(void)setBorder##side##Radius : (CGFloat)radius \ [self.layer setNeedsDisplay]; \ } - setBorderRadius() setBorderRadius(TopLeft) setBorderRadius(TopRight) setBorderRadius(TopStart) - setBorderRadius(TopEnd) setBorderRadius(BottomLeft) setBorderRadius(BottomRight) - setBorderRadius(BottomStart) setBorderRadius(BottomEnd) + setBorderRadius() setBorderRadius(TopLeft) setBorderRadius(TopRight) setBorderRadius(TopStart) + setBorderRadius(TopEnd) setBorderRadius(BottomLeft) setBorderRadius(BottomRight) + setBorderRadius(BottomStart) setBorderRadius(BottomEnd) #pragma mark - Border Style @@ -959,17 +958,6 @@ -(void)setBorder##side##Style : (RCTBorderStyle)style \ [self.layer setNeedsDisplay]; \ } - setBorderStyle() + setBorderStyle() - - (void)dealloc -{ - CGColorRelease(_borderColor); - CGColorRelease(_borderTopColor); - CGColorRelease(_borderRightColor); - CGColorRelease(_borderBottomColor); - CGColorRelease(_borderLeftColor); - CGColorRelease(_borderStartColor); - CGColorRelease(_borderEndColor); -} - -@end + @end diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index 48dcd0a06ce4a3..5d7c7839fbc9b6 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -261,7 +261,7 @@ - (RCTShadowView *)shadowView RCT_CUSTOM_VIEW_PROPERTY(borderColor, CGColor, RCTView) { if ([view respondsToSelector:@selector(setBorderColor:)]) { - view.borderColor = json ? [RCTConvert CGColor:json] : defaultView.borderColor; + view.borderColor = json ? [RCTConvert UIColor:json] : defaultView.borderColor; } else { view.layer.borderColor = json ? [RCTConvert CGColor:json] : defaultView.layer.borderColor; } @@ -303,7 +303,7 @@ - (RCTShadowView *)shadowView RCT_CUSTOM_VIEW_PROPERTY(border##SIDE##Color, UIColor, RCTView) \ { \ if ([view respondsToSelector:@selector(setBorder##SIDE##Color:)]) { \ - view.border##SIDE##Color = json ? [RCTConvert CGColor:json] : defaultView.border##SIDE##Color; \ + view.border##SIDE##Color = json ? [RCTConvert UIColor:json] : defaultView.border##SIDE##Color; \ } \ } diff --git a/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js b/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js index ebed5b1fdfa1ef..9cf616184f46f4 100644 --- a/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js +++ b/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js @@ -236,6 +236,20 @@ function DynamicColorsExample() { }} /> + + + DynamicColorIOS({'{\n'} + {' '}light: 'red', dark: 'blue'{'\n'} + {'}'}) + + + DynamicColorIOS({'{\n'}