PlatformColor implementations for iOS and Android (#27908)

Summary:
This Pull Request implements the PlatformColor proposal discussed at react-native-community/discussions-and-proposals#126.   The changes include implementations for iOS and Android as well as a PlatformColorExample page in RNTester.

Every native platform has the concept of system defined colors. Instead of specifying a concrete color value the app developer can choose a system color that varies in appearance depending on a system theme settings such Light or Dark mode, accessibility settings such as a High Contrast mode, and even its context within the app such as the traits of a containing view or window.

The proposal is to add true platform color support to react-native by extending the Flow type `ColorValue` with platform specific color type information for each platform and to provide a convenience function, `PlatformColor()`, for instantiating platform specific ColorValue objects.

`PlatformColor(name [, name ...])` where `name` is a system color name on a given platform.  If `name` does not resolve to a color for any reason, the next `name` in the argument list will be resolved and so on.   If none of the names resolve, a RedBox error occurs.  This allows a latest platform color to be used, but if running on an older platform it will fallback to a previous version.
 The function returns a `ColorValue`.

On iOS the values of `name` is one of the iOS [UI Element](https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors) or [Standard Color](https://developer.apple.com/documentation/uikit/uicolor/standard_colors) names such as `labelColor` or `systemFillColor`.

On Android the `name` values are the same [app resource](https://developer.android.com/guide/topics/resources/providing-resources) path strings that can be expressed in XML:
XML Resource:
`@ [<package_name>:]<resource_type>/<resource_name>`
Style reference from current theme:
`?[<package_name>:][<resource_type>/]<resource_name>`
For example:
- `?android:colorError`
- `?android:attr/colorError`
- `?attr/colorPrimary`
- `?colorPrimaryDark`
- `android:color/holo_purple`
- `color/catalyst_redbox_background`

On iOS another type of system dynamic color can be created using the `IOSDynamicColor({dark: <color>, light:<color>})` method.   The arguments are a tuple containing custom colors for light and dark themes. Such dynamic colors are useful for branding colors or other app specific colors that still respond automatically to system setting changes.

Example: `<View style={{ backgroundColor: IOSDynamicColor({light: 'black', dark: 'white'}) }}/>`

Other platforms could create platform specific functions similar to `IOSDynamicColor` per the needs of those platforms.   For example, macOS has a similar dynamic color type that could be implemented via a `MacDynamicColor`.   On Windows custom brushes that tint or otherwise modify a system brush could be created using a platform specific method.

## Changelog

[General] [Added] - Added PlatformColor implementations for iOS and Android
Pull Request resolved: #27908

Test Plan:
The changes have been tested using the RNTester test app for iOS and Android.   On iOS a set of XCTestCase's were added to the Unit Tests.

<img width="924" alt="PlatformColor-ios-android" src="https://user-images.githubusercontent.com/30053638/73472497-ff183a80-433f-11ea-90d8-2b04338bbe79.png">

In addition `PlatformColor` support has been added to other out-of-tree platforms such as macOS and Windows has been implemented using these changes:

react-native for macOS branch: microsoft/react-native-macos@master...tom-un:tomun/platformcolors

react-native for Windows branch: microsoft/react-native-windows@master...tom-un:tomun/platformcolors

iOS
|Light|Dark|
|{F229354502}|{F229354515}|

Android
|Light|Dark|
|{F230114392}|{F230114490}|

{F230122700}

Reviewed By: hramos

Differential Revision: D19837753

Pulled By: TheSavior

fbshipit-source-id: 82ca70d40802f3b24591bfd4b94b61f3c38ba829

Libraries/ART/ARTSurfaceView.m

@@ -47,6 +47,7 @@ - (void)invalidate
 
 - (void)drawRect:(CGRect)rect
 {
+  [super drawRect:rect];
   CGContextRef context = UIGraphicsGetCurrentContext();
   for (ARTNode *node in self.subviews) {
     [node renderTo:context];

Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -14,6 +14,8 @@ import RCTActionSheetManager from './NativeActionSheetManager';
 
 const invariant = require('invariant');
 const processColor = require('../StyleSheet/processColor');
+import type {ColorValue} from '../StyleSheet/StyleSheetTypes';
+import type {ProcessedColorValue} from '../StyleSheet/processColor';
 
 /**
  * Display action sheets and share sheets on iOS.
@@ -45,7 +47,7 @@ const ActionSheetIOS = {
       +destructiveButtonIndex?: ?number | ?Array<number>,
       +cancelButtonIndex?: ?number,
       +anchor?: ?number,
-      +tintColor?: number | string,
+      +tintColor?: ColorValue | ProcessedColorValue,
       +userInterfaceStyle?: string,
     |},
     callback: (buttonIndex: number) => void,

Libraries/Animated/src/nodes/AnimatedInterpolation.js

@@ -164,17 +164,17 @@ function interpolate(
 }
 
 function colorToRgba(input: string): string {
-  let int32Color = normalizeColor(input);
-  if (int32Color === null) {
+  let normalizedColor = normalizeColor(input);
+  if (normalizedColor === null || typeof normalizedColor !== 'number') {
     return input;
   }
 
-  int32Color = int32Color || 0;
+  normalizedColor = normalizedColor || 0;
 
-  const r = (int32Color & 0xff000000) >>> 24;
-  const g = (int32Color & 0x00ff0000) >>> 16;
-  const b = (int32Color & 0x0000ff00) >>> 8;
-  const a = (int32Color & 0x000000ff) / 255;
+  const r = (normalizedColor & 0xff000000) >>> 24;
+  const g = (normalizedColor & 0x00ff0000) >>> 16;
+  const b = (normalizedColor & 0x0000ff00) >>> 8;
+  const a = (normalizedColor & 0x000000ff) / 255;
 
   return `rgba(${r}, ${g}, ${b}, ${a})`;
 }

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -16,6 +16,7 @@ const StyleSheet = require('../../StyleSheet/StyleSheet');
 const View = require('../View/View');
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
 
 const PlatformActivityIndicator =
   Platform.OS === 'android'
@@ -50,7 +51,7 @@ type Props = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/activityindicator.html#color
    */
-  color?: ?string,
+  color?: ?ColorValue,
 
   /**
    * Size of the indicator (default is 'small').

Libraries/Components/Button.js

@@ -21,6 +21,7 @@ const View = require('./View/View');
 const invariant = require('invariant');
 
 import type {PressEvent} from '../Types/CoreEventTypes';
+import type {ColorValue} from '../StyleSheet/StyleSheetTypes';
 
 type ButtonProps = $ReadOnly<{|
   /**
@@ -41,7 +42,7 @@ type ButtonProps = $ReadOnly<{|
   /**
    * Color of the text (iOS), or background color of the button (Android)
    */
-  color?: ?string,
+  color?: ?ColorValue,
 
   /**
    * TV preferred focus (see documentation for the View component).

Libraries/Components/CheckBox/AndroidCheckBoxNativeComponent.js

@@ -19,6 +19,7 @@ const requireNativeComponent = require('../../ReactNative/requireNativeComponent
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 
 type CheckBoxEvent = SyntheticEvent<
   $ReadOnly<{|
@@ -47,7 +48,12 @@ type NativeProps = $ReadOnly<{|
 
   on?: ?boolean,
   enabled?: boolean,
-  tintColors: {|true: ?number, false: ?number|} | typeof undefined,
+  tintColors:
+    | {|
+        true: ?ProcessedColorValue,
+        false: ?ProcessedColorValue,
+      |}
+    | typeof undefined,
 |}>;
 
 type NativeType = HostComponent<NativeProps>;

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -185,7 +185,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
       ...props
     } = this.props;
     const drawStatusBar =
-      Platform.Version >= 21 && this.props.statusBarBackgroundColor;
+      Platform.Version >= 21 && this.props.statusBarBackgroundColor != null;
     const drawerViewWrapper = (
       <View
         style={[

Libraries/Components/Picker/AndroidDialogPickerNativeComponent.js

@@ -23,11 +23,12 @@ import type {
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
 import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 import type {ViewProps} from '../../Components/View/ViewPropTypes';
 
 type PickerItem = $ReadOnly<{|
   label: string,
-  color?: ?Int32,
+  color?: ?ProcessedColorValue,
 |}>;
 
 type PickerItemSelectEvent = $ReadOnly<{|

Libraries/Components/Picker/AndroidDropdownPickerNativeComponent.js

@@ -23,11 +23,12 @@ import type {
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
 import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 import type {ViewProps} from '../../Components/View/ViewPropTypes';
 
 type PickerItem = $ReadOnly<{|
   label: string,
-  color?: ?Int32,
+  color?: ?ProcessedColorValue,
 |}>;
 
 type PickerItemSelectEvent = $ReadOnly<{|

Libraries/Components/Picker/PickerIOS.ios.js

@@ -24,6 +24,7 @@ import RCTPickerNativeComponent, {
 } from './RCTPickerNativeComponent';
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
 import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
@@ -37,7 +38,7 @@ type PickerIOSChangeEvent = SyntheticEvent<
 type RCTPickerIOSItemType = $ReadOnly<{|
   label: ?Label,
   value: ?(number | string),
-  textColor: ?number,
+  textColor: ?ProcessedColorValue,
 |}>;
 
 type Label = Stringish | number;

Libraries/Components/Picker/RCTPickerNativeComponent.js

@@ -15,6 +15,7 @@ const requireNativeComponent = require('../../ReactNative/requireNativeComponent
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import * as React from 'react';
 
@@ -28,7 +29,7 @@ type PickerIOSChangeEvent = SyntheticEvent<
 type RCTPickerIOSItemType = $ReadOnly<{|
   label: ?Label,
   value: ?(number | string),
-  textColor: ?number,
+  textColor: ?ProcessedColorValue,
 |}>;
 
 type Label = Stringish | number;

Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -15,6 +15,7 @@ const React = require('react');
 import ProgressBarAndroidNativeComponent from './ProgressBarAndroidNativeComponent';
 
 import type {ViewProps} from '../View/ViewPropTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
 
 export type ProgressBarAndroidProps = $ReadOnly<{|
   ...ViewProps,
@@ -49,7 +50,7 @@ export type ProgressBarAndroidProps = $ReadOnly<{|
   /**
    * Color of the progress bar.
    */
-  color?: ?string,
+  color?: ?ColorValue,
   /**
    * Used to locate this view in end-to-end tests.
    */

Libraries/Components/StatusBar/StatusBar.js

@@ -15,6 +15,7 @@ const React = require('react');
 
 const invariant = require('invariant');
 const processColor = require('../../StyleSheet/processColor');
+import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
 
 import NativeStatusBarManagerAndroid from './NativeStatusBarManagerAndroid';
 import NativeStatusBarManagerIOS from './NativeStatusBarManagerIOS';
@@ -62,7 +63,7 @@ type AndroidProps = $ReadOnly<{|
    * The background color of the status bar.
    * @platform android
    */
-  backgroundColor?: ?string,
+  backgroundColor?: ?ColorValue,
   /**
    * If the status bar is translucent.
    * When translucent is set to true, the app will draw under the status bar.

Libraries/Pressability/PressabilityDebug.js

@@ -11,12 +11,14 @@
 'use strict';
 
 import normalizeColor from '../StyleSheet/normalizeColor.js';
+import type {ColorValue} from '../StyleSheet/StyleSheetTypes';
+
 import Touchable from '../Components/Touchable/Touchable';
 import View from '../Components/View/View';
 import * as React from 'react';
 
 type Props = $ReadOnly<{|
-  color: string,
+  color: ColorValue,
   hitSlop: ?$ReadOnly<{|
     bottom?: ?number,
     left?: ?number,
@@ -43,8 +45,12 @@ type Props = $ReadOnly<{|
 export function PressabilityDebugView({color, hitSlop}: Props): React.Node {
   if (__DEV__) {
     if (isEnabled()) {
+      const normalizedColor = normalizeColor(color);
+      if (typeof normalizedColor !== 'number') {
+        return null;
+      }
       const baseColor =
-        '#' + (normalizeColor(color) ?? 0).toString(16).padStart(8, '0');
+        '#' + (normalizedColor ?? 0).toString(16).padStart(8, '0');
 
       return (
         <View

Libraries/Share/Share.js

@@ -125,7 +125,7 @@ class Share {
               typeof content.message === 'string' ? content.message : undefined,
             url: typeof content.url === 'string' ? content.url : undefined,
             subject: options.subject,
-            tintColor: tintColor != null ? tintColor : undefined,
+            tintColor: typeof tintColor === 'number' ? tintColor : undefined,
             excludedActivityTypes: options.excludedActivityTypes,
           },
           error => reject(error),

Libraries/StyleSheet/PlatformColorValueTypes.android.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+import type {ColorValue} from './StyleSheetTypes';
+import type {ProcessedColorValue} from './processColor';
+
+export opaque type NativeColorValue = {
+  resource_paths?: Array<string>,
+};
+
+export const PlatformColor = (...names: Array<string>): ColorValue => {
+  return {resource_paths: names};
+};
+
+export const ColorAndroidPrivate = (color: string): ColorValue => {
+  return {resource_paths: [color]};
+};
+
+export const normalizeColorObject = (
+  color: NativeColorValue,
+): ?ProcessedColorValue => {
+  if ('resource_paths' in color) {
+    return color;
+  }
+  return null;
+};
+
+export const processColorObject = (
+  color: NativeColorValue,
+): ?NativeColorValue => {
+  return color;
+};

Libraries/StyleSheet/PlatformColorValueTypes.ios.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+import type {ColorValue} from './StyleSheetTypes';
+import type {ProcessedColorValue} from './processColor';
+
+export opaque type NativeColorValue = {
+  semantic?: Array<string>,
+  dynamic?: {
+    light: ?(ColorValue | ProcessedColorValue),
+    dark: ?(ColorValue | ProcessedColorValue),
+  },
+};
+
+export const PlatformColor = (...names: Array<string>): ColorValue => {
+  return {semantic: names};
+};
+
+export type DynamicColorIOSTuplePrivate = {
+  light: ColorValue,
+  dark: ColorValue,
+};
+
+export const DynamicColorIOSPrivate = (
+  tuple: DynamicColorIOSTuplePrivate,
+): ColorValue => {
+  return {dynamic: {light: tuple.light, dark: tuple.dark}};
+};
+
+export const normalizeColorObject = (
+  color: NativeColorValue,
+): ?ProcessedColorValue => {
+  if ('semantic' in color) {
+    // an ios semantic color
+    return color;
+  } else if ('dynamic' in color && color.dynamic !== undefined) {
+    const normalizeColor = require('./normalizeColor');
+
+    // a dynamic, appearance aware color
+    const dynamic = color.dynamic;
+    const dynamicColor: NativeColorValue = {
+      dynamic: {
+        light: normalizeColor(dynamic.light),
+        dark: normalizeColor(dynamic.dark),
+      },
+    };
+    return dynamicColor;
+  }
+
+  return null;
+};
+
+export const processColorObject = (
+  color: NativeColorValue,
+): ?NativeColorValue => {
+  if ('dynamic' in color && color.dynamic != null) {
+    const processColor = require('./processColor');
+    const dynamic = color.dynamic;
+    const dynamicColor: NativeColorValue = {
+      dynamic: {
+        light: processColor(dynamic.light),
+        dark: processColor(dynamic.dark),
+      },
+    };
+    return dynamicColor;
+  }
+  return color;
+};

Libraries/StyleSheet/PlatformColorValueTypesAndroid.android.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+import type {ColorValue} from './StyleSheetTypes';
+import {ColorAndroidPrivate} from './PlatformColorValueTypes';
+
+export const ColorAndroid = (color: string): ColorValue => {
+  return ColorAndroidPrivate(color);
+};