diff --git a/React/Views/RCTView.h b/React/Views/RCTView.h index 7b86d088ae6..c82242d90b1 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 91e28ab95ec..87ff206081f 100644 --- a/React/Views/RCTView.m +++ b/React/Views/RCTView.m @@ -729,28 +729,28 @@ static CGFloat RCTDefaultIfNegativeTo(CGFloat defaultValue, CGFloat x) 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 @@ static void RCTUpdateShadowPathForView(RCTView *view) #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 @@ setBorderColor() setBorderColor(Top) setBorderColor(Right) setBorderColor(Bottom [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 @@ setBorderColor() setBorderColor(Top) setBorderColor(Right) setBorderColor(Bottom [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 @@ setBorderColor() setBorderColor(Top) setBorderColor(Right) setBorderColor(Bottom [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 36f8851f04a..a2d5dd683e0 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -269,7 +269,7 @@ RCT_CUSTOM_VIEW_PROPERTY(borderRadius, CGFloat, RCTView) 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; } @@ -318,7 +318,7 @@ RCT_CUSTOM_VIEW_PROPERTY(collapsable, BOOL, RCTView) 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 14f5d816a6b..5c333a9d44a 100644 --- a/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js +++ b/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js @@ -237,6 +237,20 @@ function DynamicColorsExample() { }} /> + + + DynamicColorIOS({'{\n'} + {' '}light: 'red', dark: 'blue'{'\n'} + {'}'}) + + + DynamicColorIOS({'{\n'}