Skip to content

Commit

Permalink
Support user-defined PlatformColors on iOS (#31258)
Browse files Browse the repository at this point in the history
Summary:
Original PR: #31258

## Imported PR from Github:

This is a continuation of #29683. I've talked to danilobuerger who does not intend on continue work on it and is OK with me picking up where he left. This PR is identical besides adding a test case in the RN Tester app as requested in the original PR.

In summary it gives iOS feature parity with Android in the sense that one can use user-defined native colors, something even the docs claim is possible. It's useful as it enables accessibility features such as high contrast colors and makes implementing dark mode simple. For an example on how it can be used, see https://github.com/klarna-incubator/platform-colors

## Changelog

[iOS] [Added] - Allow PlatformColor to return user-defined named asset color

Pull Request resolved: #31258

Test Plan: Test case added to RN Tester.

Reviewed By: sammy-SC

Differential Revision: D28803206

Pulled By: p-sun

fbshipit-source-id: e0f0690274799bd2d09c9f9d1a6a95ac0f979498
  • Loading branch information
oblador authored and facebook-github-bot committed Jun 10, 2021
1 parent b3a715f commit 36c0a7d
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 2 deletions.
12 changes: 10 additions & 2 deletions React/Base/RCTConvert.m
Original file line number Diff line number Diff line change
Expand Up @@ -850,7 +850,11 @@ + (UIColor *)UIColor:(id)json
if ((value = [dictionary objectForKey:@"semantic"])) {
if ([value isKindOfClass:[NSString class]]) {
NSString *semanticName = value;
UIColor *color = RCTColorFromSemanticColorName(semanticName);
UIColor *color = [UIColor colorNamed:semanticName];
if (color != nil) {
return color;
}
color = RCTColorFromSemanticColorName(semanticName);
if (color == nil) {
RCTLogConvertError(
json,
Expand All @@ -859,7 +863,11 @@ + (UIColor *)UIColor:(id)json
return color;
} else if ([value isKindOfClass:[NSArray class]]) {
for (id name in value) {
UIColor *color = RCTColorFromSemanticColorName(name);
UIColor *color = [UIColor colorNamed:name];
if (color != nil) {
return color;
}
color = RCTColorFromSemanticColorName(name);
if (color != nil) {
return color;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "1.000",
"green" : "1.000",
"red" : "0.516"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.746",
"green" : "0.195",
"red" : "0.080"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ function PlatformColorsExample() {
{label: 'systemGray6', color: PlatformColor('systemGray6')},
// Transparent Color
{label: 'clear', color: PlatformColor('clear')},
{label: 'customColor', color: PlatformColor('customColor')},
];
} else if (Platform.OS === 'android') {
colors = [
Expand Down

0 comments on commit 36c0a7d

Please sign in to comment.