PlatformColor implementations for iOS and Android

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);
+};