Adjust typing of PlatformColorValueTypes to prepare for Flow multiplatform support (#38804)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/38804

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D48081150

fbshipit-source-id: a25f04c59ee2ae733ae6efa24d6c5be7c5d414da

packages/react-native/Libraries/Animated/nodes/AnimatedColor.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-import type {NativeColorValue} from '../../StyleSheet/PlatformColorValueTypes';
 import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {NativeColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 import normalizeColor from '../../StyleSheet/normalizeColor';

packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.android.js

@@ -9,20 +9,25 @@
  */
 
 import type {ProcessedColorValue} from './processColor';
-import type {ColorValue} from './StyleSheet';
+import type {ColorValue, NativeColorValue} from './StyleSheet';
 
-export opaque type NativeColorValue = {
+/** The actual type of the opaque NativeColorValue on Android platform */
+type LocalNativeColorValue = {
   resource_paths?: Array<string>,
 };
 
 export const PlatformColor = (...names: Array<string>): ColorValue => {
-  return {resource_paths: names};
+  /* $FlowExpectedError[incompatible-return]
+   * LocalNativeColorValue is the actual type of the opaque NativeColorValue on Android platform */
+  return ({resource_paths: names}: LocalNativeColorValue);
 };
 
 export const normalizeColorObject = (
   color: NativeColorValue,
 ): ?ProcessedColorValue => {
-  if ('resource_paths' in color) {
+  /* $FlowExpectedError[incompatible-cast]
+   * LocalNativeColorValue is the actual type of the opaque NativeColorValue on Android platform */
+  if ('resource_paths' in (color: LocalNativeColorValue)) {
     return color;
   }
   return null;

packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.ios.js

@@ -9,9 +9,10 @@
  */
 
 import type {ProcessedColorValue} from './processColor';
-import type {ColorValue} from './StyleSheet';
+import type {ColorValue, NativeColorValue} from './StyleSheet';
 
-export opaque type NativeColorValue = {
+/** The actual type of the opaque NativeColorValue on iOS platform */
+type LocalNativeColorValue = {
   semantic?: Array<string>,
   dynamic?: {
     light: ?(ColorValue | ProcessedColorValue),
@@ -22,7 +23,8 @@ export opaque type NativeColorValue = {
 };
 
 export const PlatformColor = (...names: Array<string>): ColorValue => {
-  return {semantic: names};
+  // $FlowExpectedError[incompatible-return] LocalNativeColorValue is the iOS LocalNativeColorValue type
+  return ({semantic: names}: LocalNativeColorValue);
 };
 
 export type DynamicColorIOSTuplePrivate = {
@@ -35,19 +37,21 @@ export type DynamicColorIOSTuplePrivate = {
 export const DynamicColorIOSPrivate = (
   tuple: DynamicColorIOSTuplePrivate,
 ): ColorValue => {
-  return {
+  return ({
     dynamic: {
       light: tuple.light,
       dark: tuple.dark,
       highContrastLight: tuple.highContrastLight,
       highContrastDark: tuple.highContrastDark,
     },
-  };
+    /* $FlowExpectedError[incompatible-return]
+     * LocalNativeColorValue is the actual type of the opaque NativeColorValue on iOS platform */
+  }: LocalNativeColorValue);
 };
 
-export const normalizeColorObject = (
-  color: NativeColorValue,
-): ?ProcessedColorValue => {
+const _normalizeColorObject = (
+  color: LocalNativeColorValue,
+): ?LocalNativeColorValue => {
   if ('semantic' in color) {
     // an ios semantic color
     return color;
@@ -56,7 +60,7 @@ export const normalizeColorObject = (
 
     // a dynamic, appearance aware color
     const dynamic = color.dynamic;
-    const dynamicColor: NativeColorValue = {
+    const dynamicColor: LocalNativeColorValue = {
       dynamic: {
         // $FlowFixMe[incompatible-use]
         light: normalizeColor(dynamic.light),
@@ -70,17 +74,22 @@ export const normalizeColorObject = (
     };
     return dynamicColor;
   }
-
   return null;
 };
 
-export const processColorObject = (
+export const normalizeColorObject: (
   color: NativeColorValue,
-): ?NativeColorValue => {
+  /* $FlowExpectedError[incompatible-type]
+   * LocalNativeColorValue is the actual type of the opaque NativeColorValue on iOS platform */
+) => ?ProcessedColorValue = _normalizeColorObject;
+
+const _processColorObject = (
+  color: LocalNativeColorValue,
+): ?LocalNativeColorValue => {
   if ('dynamic' in color && color.dynamic != null) {
     const processColor = require('./processColor').default;
     const dynamic = color.dynamic;
-    const dynamicColor: NativeColorValue = {
+    const dynamicColor: LocalNativeColorValue = {
       dynamic: {
         // $FlowFixMe[incompatible-use]
         light: processColor(dynamic.light),
@@ -96,3 +105,9 @@ export const processColorObject = (
   }
   return color;
 };
+
+export const processColorObject: (
+  color: NativeColorValue,
+  /* $FlowExpectedError[incompatible-type]
+   * LocalNativeColorValue is the actual type of the opaque NativeColorValue on iOS platform */
+) => ?NativeColorValue = _processColorObject;

packages/react-native/Libraries/StyleSheet/PlatformColorValueTypesIOS.ios.js

@@ -10,7 +10,7 @@
 
 import type {ColorValue} from './StyleSheet';
 
-import {DynamicColorIOSPrivate} from './PlatformColorValueTypes';
+import {DynamicColorIOSPrivate} from './PlatformColorValueTypes.ios';
 
 export type DynamicColorIOSTuple = {
   light: ColorValue,

packages/react-native/Libraries/StyleSheet/StyleSheet.js

@@ -27,6 +27,8 @@ const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleA
 const PixelRatio = require('../Utilities/PixelRatio').default;
 const flatten = require('./flattenStyle');
 
+export type {NativeColorValue} from './StyleSheetTypes';
+
 /**
  * This type should be used as the type for anything that is a color. It is
  * most useful when using DynamicColorIOS which can be a string or a dynamic

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

@@ -11,7 +11,6 @@
 'use strict';
 
 import type AnimatedNode from '../Animated/nodes/AnimatedNode';
-import type {NativeColorValue} from './PlatformColorValueTypes';
 import type {
   ____DangerouslyImpreciseStyle_InternalOverrides,
   ____ImageStyle_InternalOverrides,
@@ -21,6 +20,7 @@ import type {
 } from './private/_StyleSheetTypesOverrides';
 import type {____TransformStyle_Internal} from './private/_TransformStyle';
 
+declare export opaque type NativeColorValue;
 export type ____ColorValue_Internal = null | string | number | NativeColorValue;
 export type ColorArrayValue = null | $ReadOnlyArray<____ColorValue_Internal>;
 export type PointValue = {

packages/react-native/Libraries/StyleSheet/processColor.js

@@ -10,8 +10,7 @@
 
 'use strict';
 
-import type {NativeColorValue} from './PlatformColorValueTypes';
-import type {ColorValue} from './StyleSheet';
+import type {ColorValue, NativeColorValue} from './StyleSheet';
 
 const Platform = require('../Utilities/Platform');
 const normalizeColor = require('./normalizeColor');