Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow PlatformColor to work with RCTView border colors (#29728)

Browse Source 
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
<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: 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
This commit is contained in:
Danilo Bürger
2021-06-23 13:37:22 -07:00
committed by Facebook GitHub Bot
parent 123d184944
commit c974cbff04
4 changed files with 53 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
React/Views/RCTView.h
+7 -7
View File
@@ -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.
React/Views/RCTView.m
+30 -42
View File
@@ -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
React/Views/RCTViewManager.m
+2 -2
View File
@@ -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; \
} \
}
packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js
+14
View File
@@ -237,6 +237,20 @@ function DynamicColorsExample() {
}}
/>
</View>
<View style={styles.row}>
<Text style={styles.labelCell}>
DynamicColorIOS({'{\n'}
{' '}light: 'red', dark: 'blue'{'\n'}
{'}'})
</Text>
<View
style={{
...styles.colorCell,
borderColor: DynamicColorIOS({light: 'red', dark: 'blue'}),
borderWidth: 1,
}}
/>
</View>
<View style={styles.row}>
<Text style={styles.labelCell}>
DynamicColorIOS({'{\n'}