Support user-defined PlatformColors on iOS (#31258)

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
facebook · Jun 10, 2021 · 36c0a7d · 36c0a7d
1 parent b3a715f
commit 36c0a7d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/React/Base/RCTConvert.m b/React/Base/RCTConvert.m
@@ -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,
@@ -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;
           }

diff --git a/packages/rn-tester/RNTester/Images.xcassets/customColor.colorset/Contents.json b/packages/rn-tester/RNTester/Images.xcassets/customColor.colorset/Contents.json
@@ -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
+  }
+}
diff --git a/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js b/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js
@@ -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 = [