microsoft · marlenecota · Aug 26, 2019 · Aug 14, 2019 · Aug 22, 2019 · Aug 22, 2019
diff --git a/.flowconfig.android b/.flowconfig.android
@@ -1,6 +1,7 @@
 [ignore]
 ; We fork some components by platform
 .*/*[.]ios.js
+.*/*[.]macos.js
 
 ; Ignore templates for 'react-native init'
 <PROJECT_ROOT>/template/.*

diff --git a/Libraries/Color/normalizeColor.js b/Libraries/Color/normalizeColor.js
@@ -11,23 +11,16 @@
 /* eslint no-bitwise: 0 */
 'use strict';
 
-const Platform = require('Platform'); // [TODO(macOS ISS#2323203)
-
-export type SemanticOrDynamicColorType = {
-  semantic?: string,
-  dynamic?: {
-    light: ?(string | number | SemanticOrDynamicColorType),
-    dark: ?(string | number | SemanticOrDynamicColorType),
-  },
-}; // ]TODO(macOS ISS#2323203)
+const normalizeColorObject = require('normalizeColorObject'); // TODO(macOS ISS#2323203)
+import type {NativeOrDynamicColorType} from 'normalizeColorObject'; // TODO(macOS ISS#2323203)
 
 function normalizeColor(
   color: ?(
     | string
     | number
-    | SemanticOrDynamicColorType
+    | NativeOrDynamicColorType
   ) /* TODO(macOS ISS#2323203) */,
-): ?(number | SemanticOrDynamicColorType) /* TODO(macOS ISS#2323203) */ {
+): ?(number | NativeOrDynamicColorType) /* TODO(macOS ISS#2323203) */ {
   const matchers = getMatchers();
   let match;
 
@@ -39,26 +32,14 @@ function normalizeColor(
   }
 
   // [TODO(macOS ISS#2323203)
-  if (
-    typeof color === 'object' &&
-    color !== null &&
-    (Platform.OS === 'macos' || Platform.OS === 'ios')
-  ) {
-    if ('semantic' in color) {
-      // a macos semantic color
+  if (typeof color === 'object' && color !== null) {
+    const normalizedColorObj = normalizeColorObject(color);
+
+    if (normalizedColorObj !== null) {
       return color;
-    } else if ('dynamic' in color && color.dynamic !== undefined) {
-      // a dynamic, appearance aware color
-      const dynamic = color.dynamic;
-      const dynamicColor: SemanticOrDynamicColorType = {
-        dynamic: {
-          light: normalizeColor(dynamic.light),
-          dark: normalizeColor(dynamic.dark),
-        },
-      };
-      return dynamicColor;
     }
   }
+
   if (typeof color !== 'string') {
     return null;
   } // ]TODO(macOS ISS#2323203)

diff --git a/Libraries/Color/normalizeColorObject.android.js b/Libraries/Color/normalizeColorObject.android.js
@@ -0,0 +1,22 @@
+/**
+ * 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
+ */
+// [TODO(macOS ISS#2323203)
+'use strict';
+
+export type NativeOrDynamicColorType = {};
+
+function normalizeColorObject(
+  color: NativeOrDynamicColorType,
+): ?(number | NativeOrDynamicColorType) {
+  return null;
+}
+
+module.exports = normalizeColorObject;
+// ]TODO(macOS ISS#2323203)
diff --git a/Libraries/Color/normalizeColorObject.ios.js b/Libraries/Color/normalizeColorObject.ios.js
@@ -0,0 +1,45 @@
+/**
+ * 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
+ */
+// [TODO(macOS ISS#2323203)
+'use strict';
+
+export type NativeOrDynamicColorType = {
+  semantic?: string,
+  dynamic?: {
+    light: ?(string | number | NativeOrDynamicColorType),
+    dark: ?(string | number | NativeOrDynamicColorType),
+  },
+};
+
+function normalizeColorObject(
+  color: NativeOrDynamicColorType,
+): ?(number | NativeOrDynamicColorType) {
+  if ('semantic' in color) {
+    // a macos 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: NativeOrDynamicColorType = {
+      dynamic: {
+        light: normalizeColor(dynamic.light),
+        dark: normalizeColor(dynamic.dark),
+      },
+    };
+    return dynamicColor;
+  }
+
+  return null;
+}
+
+module.exports = normalizeColorObject;
+// ]TODO(macOS ISS#2323203)
diff --git a/Libraries/Color/normalizeColorObject.macos.js b/Libraries/Color/normalizeColorObject.macos.js
@@ -0,0 +1,45 @@
+/**
+ * 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
+ */
+// [TODO(macOS ISS#2323203)
+'use strict';
+
+const normalizeColor = require('normalizeColor');
+
+export type NativeOrDynamicColorType = {
+  semantic?: string,
+  dynamic?: {
+    light: ?(string | number | NativeOrDynamicColorType),
+    dark: ?(string | number | NativeOrDynamicColorType),
+  },
+};
+
+function normalizeColorObject(
+  color: NativeOrDynamicColorType,
+): ?(number | NativeOrDynamicColorType) {
+  if ('semantic' in color) {
+    // a macos semantic color
+    return color;
+  } else if ('dynamic' in color && color.dynamic !== undefined) {
+    // a dynamic, appearance aware color
+    const dynamic = color.dynamic;
+    const dynamicColor: NativeOrDynamicColorType = {
+      dynamic: {
+        light: normalizeColor(dynamic.light),
+        dark: normalizeColor(dynamic.dark),
+      },
+    };
+    return dynamicColor;
+  }
+
+  return null;
+}
+
+module.exports = normalizeColorObject;
+// ]TODO(macOS ISS#2323203)
diff --git a/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/Libraries/Components/ActivityIndicator/ActivityIndicator.js
@@ -19,7 +19,7 @@ const RCTActivityIndicatorViewNativeComponent = require('RCTActivityIndicatorVie
 
 import type {NativeComponent} from 'ReactNative';
 import type {ViewProps} from 'ViewPropTypes';
-import type {SemanticOrDynamicColorType} from 'normalizeColor'; // ]TODO(macOS ISS#2323203)
+import type {NativeOrDynamicColorType} from 'normalizeColorObject'; // TODO(macOS ISS#2323203)
 
 const RCTActivityIndicator =
   Platform.OS === 'android'
@@ -54,7 +54,7 @@ type Props = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/activityindicator.html#color
    */
-  color?: ?(string | SemanticOrDynamicColorType), // ]TODO(macOS ISS#2323203)
+  color?: ?(string | NativeOrDynamicColorType), // TODO(macOS ISS#2323203)
 
   /**
    * Size of the indicator (default is 'small').

diff --git a/Libraries/Components/ActivityIndicator/RCTActivityIndicatorViewNativeComponent.js b/Libraries/Components/ActivityIndicator/RCTActivityIndicatorViewNativeComponent.js
@@ -15,7 +15,7 @@ const requireNativeComponent = require('requireNativeComponent');
 import type {ViewProps} from 'ViewPropTypes';
 import type {ViewStyleProp} from 'StyleSheet';
 import type {NativeComponent} from 'ReactNative';
-import type {SemanticOrDynamicColorType} from 'normalizeColor'; // ]TODO(macOS ISS#2323203)
+import type {NativeOrDynamicColorType} from 'normalizeColorObject'; // TODO(macOS ISS#2323203)
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
@@ -39,7 +39,7 @@ type NativeProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/activityindicator.html#color
    */
-  color?: ?(string | SemanticOrDynamicColorType),
+  color?: ?(string | NativeOrDynamicColorType), // TODO(macOS ISS#2323203)
 
   /**
    * Size of the indicator (default is 'small').

diff --git a/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js b/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js
@@ -16,9 +16,9 @@ import type {NativeComponent} from 'ReactNative';
 import type {SyntheticEvent} from 'CoreEventTypes';
 import type {ViewStyleProp} from 'StyleSheet';
 import type React from 'React';
-import type {SemanticOrDynamicColorType} from 'normalizeColor'; // ]TODO(macOS ISS#2323203)
+import type {NativeOrDynamicColorType} from 'normalizeColorObject'; // TODO(macOS ISS#2323203)
 
-type ColorValue = null | string | SemanticOrDynamicColorType;
+type ColorValue = null | string | NativeOrDynamicColorType; // TODO(macOS ISS#2323203)
 
 type DrawerStates = 'Idle' | 'Dragging' | 'Settling';
 

diff --git a/Libraries/Components/Picker/PickerIOS.ios.js b/Libraries/Components/Picker/PickerIOS.ios.js
@@ -24,7 +24,7 @@ import type {SyntheticEvent} from 'CoreEventTypes';
 import type {ColorValue} from 'StyleSheetTypes';
 import type {ViewProps} from 'ViewPropTypes';
 import type {TextStyleProp} from 'StyleSheet';
-import type {SemanticOrDynamicColorType} from 'normalizeColor'; // ]TODO(macOS ISS#2323203)
+import type {NativeOrDynamicColorType} from 'normalizeColorObject'; // TODO(macOS ISS#2323203)
 
 type PickerIOSChangeEvent = SyntheticEvent<
   $ReadOnly<{|
@@ -36,7 +36,7 @@ type PickerIOSChangeEvent = SyntheticEvent<
 type RCTPickerIOSItemType = $ReadOnly<{|
   label: ?Label,
   value: ?(number | string),
-  textColor: ?(number | SemanticOrDynamicColorType), // ]TODO(macOS ISS#2323203)
+  textColor: ?(number | NativeOrDynamicColorType), // TODO(macOS ISS#2323203)
 |}>;
 
 type RCTPickerIOSType = Class<

diff --git a/Libraries/Components/Picker/RCTPickerNativeComponent.js b/Libraries/Components/Picker/RCTPickerNativeComponent.js
@@ -14,7 +14,7 @@ const requireNativeComponent = require('requireNativeComponent');
 import type {SyntheticEvent} from 'CoreEventTypes';
 import type {TextStyleProp} from 'StyleSheet';
 import type {NativeComponent} from 'ReactNative';
-import type {SemanticOrDynamicColorType} from 'normalizeColor'; // ]TODO(macOS ISS#2323203)
+import type {NativeOrDynamicColorType} from 'normalizeColorObject'; // TODO(macOS ISS#2323203)
 
 type PickerIOSChangeEvent = SyntheticEvent<
   $ReadOnly<{|
@@ -26,7 +26,7 @@ type PickerIOSChangeEvent = SyntheticEvent<
 type RCTPickerIOSItemType = $ReadOnly<{|
   label: ?Label,
   value: ?(number | string),
-  textColor: ?(number | SemanticOrDynamicColorType),
+  textColor: ?(number | NativeOrDynamicColorType), // TODO(macOS ISS#2323203)
 |}>;
 
 type Label = Stringish | number;

diff --git a/Libraries/Components/Switch/SwitchNativeComponent.js b/Libraries/Components/Switch/SwitchNativeComponent.js
@@ -17,7 +17,7 @@ const requireNativeComponent = require('requireNativeComponent');
 
 import type {SwitchChangeEvent} from 'CoreEventTypes';
 import type {ViewProps} from 'ViewPropTypes';
-import type {SemanticOrDynamicColorType} from 'normalizeColor'; // TODO(macOS ISS#2323203)
+import type {NativeOrDynamicColorType} from 'normalizeColorObject'; // TODO(macOS ISS#2323203)
 
 type SwitchProps = $ReadOnly<{|
   ...ViewProps,
@@ -35,17 +35,17 @@ export type NativeAndroidProps = $ReadOnly<{|
 
   enabled?: ?boolean,
   on?: ?boolean,
-  thumbTintColor?: ?(string | SemanticOrDynamicColorType),
-  trackTintColor?: ?(string | SemanticOrDynamicColorType),
+  thumbTintColor?: ?(string | NativeOrDynamicColorType), // TODO(macOS ISS#2323203)
+  trackTintColor?: ?(string | NativeOrDynamicColorType), // TODO(macOS ISS#2323203)
 |}>;
 
 // @see RCTSwitchManager.m
 export type NativeIOSProps = $ReadOnly<{|
   ...SwitchProps,
 
-  onTintColor?: ?(string | SemanticOrDynamicColorType),
-  thumbTintColor?: ?(string | SemanticOrDynamicColorType),
-  tintColor?: ?(string | SemanticOrDynamicColorType),
+  onTintColor?: ?(string | NativeOrDynamicColorType), // TODO(macOS ISS#2323203)
+  thumbTintColor?: ?(string | NativeOrDynamicColorType), // TODO(macOS ISS#2323203)
+  tintColor?: ?(string | NativeOrDynamicColorType), // TODO(macOS ISS#2323203)
 |}>;
 
 type SwitchNativeComponentType = Class<

diff --git a/Libraries/Components/ToolbarAndroid/ToolbarAndroidNativeComponent.js b/Libraries/Components/ToolbarAndroid/ToolbarAndroidNativeComponent.js
@@ -16,7 +16,7 @@ import type {SyntheticEvent} from 'CoreEventTypes';
 import type {ImageSource} from 'ImageSource';
 import type {ViewProps} from 'ViewPropTypes';
 import type {NativeComponent} from 'ReactNative';
-import type {SemanticOrDynamicColorType} from 'normalizeColor'; // ]TODO(macOS ISS#2323203)
+import type {NativeOrDynamicColorType} from 'normalizeColorObject'; // TODO(macOS ISS#2323203)
 
 type Action = $ReadOnly<{|
   title: string,
@@ -36,7 +36,7 @@ type NativeProps = $ReadOnly<{|
   nativeActions?: Array<Action>,
 |}>;
 
-type ColorValue = null | string | SemanticOrDynamicColorType;
+type ColorValue = null | string | NativeOrDynamicColorType; // TODO(macOS ISS#2323203)
 
 type ToolbarAndroidProps = $ReadOnly<{|
   ...ViewProps,

diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js
@@ -24,7 +24,7 @@ const ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 const processColor = require('processColor');
 
 import type {PressEvent} from 'CoreEventTypes';
-import type {SemanticOrDynamicColorType} from 'normalizeColor'; // ]TODO(macOS ISS#2323203)
+import type {NativeOrDynamicColorType} from 'normalizeColorObject'; // TODO(macOS ISS#2323203)
 
 const rippleBackgroundPropType = PropTypes.shape({
   type: PropTypes.oneOf(['RippleAndroid']),
@@ -146,7 +146,7 @@ const TouchableNativeFeedback = createReactClass({
       borderless: boolean,
     ): {
       type: 'RippleAndroid',
-      color: ?(number | SemanticOrDynamicColorType),
+      color: ?(number | NativeOrDynamicColorType), // TODO(macOS ISS#2323203)
       borderless: boolean,
     } {
       return {

diff --git a/Libraries/ReactNative/getNativeComponentAttributes.js b/Libraries/ReactNative/getNativeComponentAttributes.js
@@ -21,7 +21,7 @@ const resolveAssetSource = require('resolveAssetSource');
 const sizesDiffer = require('sizesDiffer');
 const invariant = require('invariant');
 const warning = require('fbjs/lib/warning');
-import type {SemanticOrDynamicColorType} from 'normalizeColor'; // ]TODO(macOS ISS#2323203)
+import type {NativeOrDynamicColorType} from 'normalizeColorObject'; // TODO(macOS ISS#2323203)
 
 function getNativeComponentAttributes(uiViewClassName: string) {
   const viewConfig = UIManager.getViewManagerConfig(uiViewClassName);
@@ -184,7 +184,7 @@ function getProcessorForType(typeName: string): ?(nextProp: any) => any {
 
 function processColorArray(
   colors: ?Array<any>,
-): ?Array<?(number | SemanticOrDynamicColorType)> {
+): ?Array<?(number | NativeOrDynamicColorType)> /* TODO(macOS ISS#2323203) */ {
   // ]TODO(macOS ISS#2323203)
   return colors == null ? null : colors.map(processColor);
 }

diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js
@@ -11,9 +11,9 @@
 'use strict';
 
 const AnimatedNode = require('AnimatedNode');
-import type {SemanticOrDynamicColorType} from 'normalizeColor'; // TODO(macOS ISS#2323203)
+import type {NativeOrDynamicColorType} from 'normalizeColorObject'; // TODO(macOS ISS#2323203)
 
-export type ColorValue = null | string | SemanticOrDynamicColorType; // TODO(macOS ISS#2323203)
+export type ColorValue = null | string | NativeOrDynamicColorType; // TODO(macOS ISS#2323203)
 export type DimensionValue = null | number | string | AnimatedNode;
 
 /**