Skip to content

Commit c974cbf

Browse files
danilobuergerfacebook-github-bot
danilobuerger
authored and
facebook-github-bot
committed
Allow PlatformColor to work with RCTView border colors (#29728)
Summary: # See PR #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 <View style={{ borderColor: DynamicColorIOS({ dark: "yellow", light: "red" }), borderWidth: 1, }} > ... </View> ``` 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: #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
1 parent 123d184 commit c974cbf

File tree

4 files changed

+53
-51
lines changed

4 files changed

+53
-51
lines changed

‎React/Views/RCTView.h‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -82,13 +82,13 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
8282
/**
8383
* Border colors (actually retained).
8484
*/
85-
@property (nonatomic, assign) CGColorRef borderTopColor;
86-
@property (nonatomic, assign) CGColorRef borderRightColor;
87-
@property (nonatomic, assign) CGColorRef borderBottomColor;
88-
@property (nonatomic, assign) CGColorRef borderLeftColor;
89-
@property (nonatomic, assign) CGColorRef borderStartColor;
90-
@property (nonatomic, assign) CGColorRef borderEndColor;
91-
@property (nonatomic, assign) CGColorRef borderColor;
85+
@property (nonatomic, strong) UIColor *borderTopColor;
86+
@property (nonatomic, strong) UIColor *borderRightColor;
87+
@property (nonatomic, strong) UIColor *borderBottomColor;
88+
@property (nonatomic, strong) UIColor *borderLeftColor;
89+
@property (nonatomic, strong) UIColor *borderStartColor;
90+
@property (nonatomic, strong) UIColor *borderEndColor;
91+
@property (nonatomic, strong) UIColor *borderColor;
9292

9393
/**
9494
* Border widths.

‎React/Views/RCTView.m‎

Lines changed: 30 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -729,28 +729,28 @@ - (RCTBorderColors)borderColors
729729
const BOOL isRTL = _reactLayoutDirection == UIUserInterfaceLayoutDirectionRightToLeft;
730730

731731
if ([[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL]) {
732-
const CGColorRef borderStartColor = _borderStartColor ?: _borderLeftColor;
733-
const CGColorRef borderEndColor = _borderEndColor ?: _borderRightColor;
732+
UIColor *borderStartColor = _borderStartColor ?: _borderLeftColor;
733+
UIColor *borderEndColor = _borderEndColor ?: _borderRightColor;
734734

735-
const CGColorRef directionAwareBorderLeftColor = isRTL ? borderEndColor : borderStartColor;
736-
const CGColorRef directionAwareBorderRightColor = isRTL ? borderStartColor : borderEndColor;
735+
UIColor *directionAwareBorderLeftColor = isRTL ? borderEndColor : borderStartColor;
736+
UIColor *directionAwareBorderRightColor = isRTL ? borderStartColor : borderEndColor;
737737

738738
return (RCTBorderColors){
739-
_borderTopColor ?: _borderColor,
740-
directionAwareBorderLeftColor ?: _borderColor,
741-
_borderBottomColor ?: _borderColor,
742-
directionAwareBorderRightColor ?: _borderColor,
739+
(_borderTopColor ?: _borderColor).CGColor,
740+
(directionAwareBorderLeftColor ?: _borderColor).CGColor,
741+
(_borderBottomColor ?: _borderColor).CGColor,
742+
(directionAwareBorderRightColor ?: _borderColor).CGColor,
743743
};
744744
}
745745

746-
const CGColorRef directionAwareBorderLeftColor = isRTL ? _borderEndColor : _borderStartColor;
747-
const CGColorRef directionAwareBorderRightColor = isRTL ? _borderStartColor : _borderEndColor;
746+
UIColor *directionAwareBorderLeftColor = isRTL ? _borderEndColor : _borderStartColor;
747+
UIColor *directionAwareBorderRightColor = isRTL ? _borderStartColor : _borderEndColor;
748748

749749
return (RCTBorderColors){
750-
_borderTopColor ?: _borderColor,
751-
directionAwareBorderLeftColor ?: _borderLeftColor ?: _borderColor,
752-
_borderBottomColor ?: _borderColor,
753-
directionAwareBorderRightColor ?: _borderRightColor ?: _borderColor,
750+
(_borderTopColor ?: _borderColor).CGColor,
751+
(directionAwareBorderLeftColor ?: _borderLeftColor ?: _borderColor).CGColor,
752+
(_borderBottomColor ?: _borderColor).CGColor,
753+
(directionAwareBorderRightColor ?: _borderRightColor ?: _borderColor).CGColor,
754754
};
755755
}
756756

@@ -902,19 +902,18 @@ - (void)updateClippingForLayer:(CALayer *)layer
902902

903903
#pragma mark Border Color
904904

905-
#define setBorderColor(side) \
906-
-(void)setBorder##side##Color : (CGColorRef)color \
907-
{ \
908-
if (CGColorEqualToColor(_border##side##Color, color)) { \
909-
return; \
910-
} \
911-
CGColorRelease(_border##side##Color); \
912-
_border##side##Color = CGColorRetain(color); \
913-
[self.layer setNeedsDisplay]; \
905+
#define setBorderColor(side) \
906+
-(void)setBorder##side##Color : (UIColor *)color \
907+
{ \
908+
if ([_border##side##Color isEqual:color]) { \
909+
return; \
910+
} \
911+
_border##side##Color = color; \
912+
[self.layer setNeedsDisplay]; \
914913
}
915914

916915
setBorderColor() setBorderColor(Top) setBorderColor(Right) setBorderColor(Bottom) setBorderColor(Left)
917-
setBorderColor(Start) setBorderColor(End)
916+
setBorderColor(Start) setBorderColor(End)
918917

919918
#pragma mark - Border Width
920919

@@ -928,8 +927,8 @@ -(void)setBorder##side##Width : (CGFloat)width \
928927
[self.layer setNeedsDisplay]; \
929928
}
930929

931-
setBorderWidth() setBorderWidth(Top) setBorderWidth(Right) setBorderWidth(Bottom) setBorderWidth(Left)
932-
setBorderWidth(Start) setBorderWidth(End)
930+
setBorderWidth() setBorderWidth(Top) setBorderWidth(Right) setBorderWidth(Bottom) setBorderWidth(Left)
931+
setBorderWidth(Start) setBorderWidth(End)
933932

934933
#pragma mark - Border Radius
935934

@@ -943,9 +942,9 @@ -(void)setBorder##side##Radius : (CGFloat)radius \
943942
[self.layer setNeedsDisplay]; \
944943
}
945944

946-
setBorderRadius() setBorderRadius(TopLeft) setBorderRadius(TopRight) setBorderRadius(TopStart)
947-
setBorderRadius(TopEnd) setBorderRadius(BottomLeft) setBorderRadius(BottomRight)
948-
setBorderRadius(BottomStart) setBorderRadius(BottomEnd)
945+
setBorderRadius() setBorderRadius(TopLeft) setBorderRadius(TopRight) setBorderRadius(TopStart)
946+
setBorderRadius(TopEnd) setBorderRadius(BottomLeft) setBorderRadius(BottomRight)
947+
setBorderRadius(BottomStart) setBorderRadius(BottomEnd)
949948

950949
#pragma mark - Border Style
951950

@@ -959,17 +958,6 @@ -(void)setBorder##side##Style : (RCTBorderStyle)style \
959958
[self.layer setNeedsDisplay]; \
960959
}
961960

962-
setBorderStyle()
961+
setBorderStyle()
963962

964-
- (void)dealloc
965-
{
966-
CGColorRelease(_borderColor);
967-
CGColorRelease(_borderTopColor);
968-
CGColorRelease(_borderRightColor);
969-
CGColorRelease(_borderBottomColor);
970-
CGColorRelease(_borderLeftColor);
971-
CGColorRelease(_borderStartColor);
972-
CGColorRelease(_borderEndColor);
973-
}
974-
975-
@end
963+
@end

‎React/Views/RCTViewManager.m‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ - (RCTShadowView *)shadowView
269269
RCT_CUSTOM_VIEW_PROPERTY(borderColor, CGColor, RCTView)
270270
{
271271
if ([view respondsToSelector:@selector(setBorderColor:)]) {
272-
view.borderColor = json ? [RCTConvert CGColor:json] : defaultView.borderColor;
272+
view.borderColor = json ? [RCTConvert UIColor:json] : defaultView.borderColor;
273273
} else {
274274
view.layer.borderColor = json ? [RCTConvert CGColor:json] : defaultView.layer.borderColor;
275275
}
@@ -318,7 +318,7 @@ - (RCTShadowView *)shadowView
318318
RCT_CUSTOM_VIEW_PROPERTY(border##SIDE##Color, UIColor, RCTView) \
319319
{ \
320320
if ([view respondsToSelector:@selector(setBorder##SIDE##Color:)]) { \
321-
view.border##SIDE##Color = json ? [RCTConvert CGColor:json] : defaultView.border##SIDE##Color; \
321+
view.border##SIDE##Color = json ? [RCTConvert UIColor:json] : defaultView.border##SIDE##Color; \
322322
} \
323323
}
324324

‎packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,20 @@ function DynamicColorsExample() {
237237
}}
238238
/>
239239
</View>
240+
<View style={styles.row}>
241+
<Text style={styles.labelCell}>
242+
DynamicColorIOS({'{\n'}
243+
{' '}light: 'red', dark: 'blue'{'\n'}
244+
{'}'})
245+
</Text>
246+
<View
247+
style={{
248+
...styles.colorCell,
249+
borderColor: DynamicColorIOS({light: 'red', dark: 'blue'}),
250+
borderWidth: 1,
251+
}}
252+
/>
253+
</View>
240254
<View style={styles.row}>
241255
<Text style={styles.labelCell}>
242256
DynamicColorIOS({'{\n'}

0 commit comments

Comments
 (0)