From 36c0a7dec121bd3a4b92d02c03a24771d3c4cf84 Mon Sep 17 00:00:00 2001
From: Joel Arvidsson <joel.arvidsson@klarna.com>
Date: Thu, 10 Jun 2021 12:13:10 -0700
Subject: [PATCH] Support user-defined PlatformColors on iOS (#31258)

Summary:
Original PR: https://github.com/facebook/react-native/pull/31258

## Imported PR from Github:

This is a continuation of https://github.com/facebook/react-native/pull/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: https://github.com/facebook/react-native/pull/31258

Test Plan: Test case added to RN Tester.

Reviewed By: sammy-SC

Differential Revision: D28803206

Pulled By: p-sun

fbshipit-source-id: e0f0690274799bd2d09c9f9d1a6a95ac0f979498
---
 React/Base/RCTConvert.m                       | 12 +++++-
 .../customColor.colorset/Contents.json        | 38 +++++++++++++++++++
 .../PlatformColor/PlatformColorExample.js     |  1 +
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 packages/rn-tester/RNTester/Images.xcassets/customColor.colorset/Contents.json

diff --git a/React/Base/RCTConvert.m b/React/Base/RCTConvert.m
index d60b80b2dc7069..cced186f7a1a33 100644
--- 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
new file mode 100644
index 00000000000000..01f38e73bd883b
--- /dev/null
+++ 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
index ebed5b1fdfa1ef..14f5d816a6b33e 100644
--- 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 = [