Make ColorValue public in StyleSheet.js

Summary:
This diff makes the ColorValue export "official" by exporting it from StyleSheet in order to encourage its use in product code.

Changelog: Moved ColorValue export from StyleSheetTypes to StyleSheet

Reviewed By: TheSavior

Differential Revision: D21076969

fbshipit-source-id: 972ef5a1b13bd9f6b7691a279a73168e7ce9d9ab

Author: Zack Argyle

Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -14,7 +14,7 @@ import RCTActionSheetManager from './NativeActionSheetManager';
 
 const invariant = require('invariant');
 const processColor = require('../StyleSheet/processColor');
-import type {ColorValue} from '../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../StyleSheet/StyleSheet';
 import type {ProcessedColorValue} from '../StyleSheet/processColor';
 
 /**

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -16,7 +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';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 
 const PlatformActivityIndicator =
   Platform.OS === 'android'

Libraries/Components/ActivityIndicator/ActivityIndicatorViewNativeComponent.js

@@ -12,7 +12,7 @@
 
 import type {WithDefault} from '../../Types/CodegenTypes';
 
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 import codegenNativeComponent from '../../Utilities/codegenNativeComponent';

Libraries/Components/Button.js

@@ -21,7 +21,7 @@ const View = require('./View/View');
 const invariant = require('invariant');
 
 import type {PressEvent} from '../Types/CoreEventTypes';
-import type {ColorValue} from '../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../StyleSheet/StyleSheet';
 
 type ButtonProps = $ReadOnly<{|
   /**

Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
+import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
   WithDefault,
   DirectEventHandler,

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -25,8 +25,7 @@ import AndroidDrawerLayoutNativeComponent, {
 
 const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'];
 
-import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue, ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {DirectEventHandler} from '../../Types/CodegenTypes';
 import type {
   MeasureOnSuccessCallback,

Libraries/Components/Picker/AndroidDialogPickerNativeComponent.js

@@ -22,7 +22,7 @@ import type {
 } from '../../Types/CodegenTypes';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 import type {ViewProps} from '../../Components/View/ViewPropTypes';
 

Libraries/Components/Picker/AndroidDropdownPickerNativeComponent.js

@@ -22,7 +22,7 @@ import type {
 } from '../../Types/CodegenTypes';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 import type {ViewProps} from '../../Components/View/ViewPropTypes';
 

Libraries/Components/Picker/Picker.js

@@ -17,7 +17,7 @@ const React = require('react');
 const UnimplementedView = require('../UnimplementedViews/UnimplementedView');
 
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 
 const MODE_DIALOG = 'dialog';
 const MODE_DROPDOWN = 'dropdown';

Libraries/Components/Picker/PickerAndroid.android.js

@@ -21,9 +21,8 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import invariant from 'invariant';
 import processColor from '../../StyleSheet/processColor';
 
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
-import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
+import type {ColorValue, TextStyleProp} from '../../StyleSheet/StyleSheet';
 
 type PickerItemSelectSyntheticEvent = SyntheticEvent<
   $ReadOnly<{|

Libraries/Components/Picker/PickerIOS.ios.js

@@ -23,7 +23,7 @@ import RCTPickerNativeComponent, {
   Commands as PickerCommands,
 } from './RCTPickerNativeComponent';
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';

Libraries/Components/Pressable/useAndroidRippleForView.js

@@ -12,7 +12,7 @@
 
 import invariant from 'invariant';
 import {Commands} from '../View/ViewNativeComponent';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {PressEvent} from '../../Types/CoreEventTypes';
 import {Platform, View, processColor} from 'react-native';
 import * as React from 'react';

Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -15,7 +15,7 @@ const React = require('react');
 import ProgressBarAndroidNativeComponent from './ProgressBarAndroidNativeComponent';
 
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 
 export type ProgressBarAndroidProps = $ReadOnly<{|
   ...ViewProps,

Libraries/Components/ProgressBarAndroid/ProgressBarAndroidNativeComponent.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {Double, WithDefault} from '../../Types/CodegenTypes';
 

Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js

@@ -15,7 +15,7 @@ const StyleSheet = require('../../StyleSheet/StyleSheet');
 
 import RCTProgressViewNativeComponent from './RCTProgressViewNativeComponent';
 import type {ImageSource} from '../../Image/ImageSource';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 type Props = $ReadOnly<{|

Libraries/Components/ProgressViewIOS/RCTProgressViewNativeComponent.js

@@ -12,7 +12,7 @@
 
 import type {Float, WithDefault} from '../../Types/CodegenTypes';
 import type {ImageSource} from '../../Image/ImageSource';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 import codegenNativeComponent from '../../Utilities/codegenNativeComponent';

Libraries/Components/RefreshControl/AndroidSwipeRefreshLayoutNativeComponent.js

@@ -22,7 +22,7 @@ import type {
   Int32,
   WithDefault,
 } from '../../Types/CodegenTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 type NativeProps = $ReadOnly<{|

Libraries/Components/RefreshControl/PullToRefreshViewNativeComponent.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import type {DirectEventHandler, WithDefault} from '../../Types/CodegenTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 import * as React from 'react';
 

Libraries/Components/RefreshControl/RefreshControl.js

@@ -13,7 +13,7 @@
 const Platform = require('../../Utilities/Platform');
 const React = require('react');
 
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 import AndroidSwipeRefreshLayoutNativeComponent, {
   Commands as AndroidSwipeRefreshLayoutCommands,

Libraries/Components/ScrollView/ScrollView.js

@@ -31,7 +31,7 @@ const setAndForwardRef = require('../../Utilities/setAndForwardRef');
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {PointProp} from '../../StyleSheet/PointPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {
   PressEvent,
   ScrollEvent,

Libraries/Components/ScrollView/ScrollViewNativeComponentType.js

@@ -16,7 +16,7 @@ import type {
   ViewStyleProp,
   DangerouslyImpreciseStyle,
 } from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ScrollEvent} from '../../Types/CoreEventTypes';
 import type {PointProp} from '../../StyleSheet/PointPropType';

Libraries/Components/SegmentedControlIOS/RCTSegmentedControlNativeComponent.js

@@ -18,7 +18,7 @@ import type {
   WithDefault,
   Int32,
 } from '../../Types/CodegenTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 
 export type OnChangeEvent = $ReadOnly<{|
   value: Int32,

Libraries/Components/Slider/Slider.js

@@ -17,7 +17,7 @@ const StyleSheet = require('../../StyleSheet/StyleSheet');
 
 import type {ImageSource} from '../../Image/ImageSource';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 

Libraries/Components/Slider/SliderNativeComponent.js

@@ -20,7 +20,7 @@ import type {
 import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ImageSource} from '../../Image/ImageSource';
 import type {ViewProps} from '../View/ViewPropTypes';
 

Libraries/Components/StatusBar/StatusBar.js

@@ -15,7 +15,7 @@ const React = require('react');
 
 const invariant = require('invariant');
 const processColor = require('../../StyleSheet/processColor');
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 
 import NativeStatusBarManagerAndroid from './NativeStatusBarManagerAndroid';
 import NativeStatusBarManagerIOS from './NativeStatusBarManagerIOS';

Libraries/Components/Switch/AndroidSwitchNativeComponent.js

@@ -21,7 +21,7 @@ import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativ
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 type SwitchChangeEvent = $ReadOnly<{|

Libraries/Components/Switch/Switch.js

@@ -22,7 +22,7 @@ import SwitchNativeComponent, {
   Commands as SwitchCommands,
 } from './SwitchNativeComponent';
 
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 

Libraries/Components/Switch/SwitchNativeComponent.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import type {BubblingEventHandler, WithDefault} from '../../Types/CodegenTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 import * as React from 'react';
 

Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -21,7 +21,7 @@ import type {
 } from '../../Types/CodegenTypes';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {TextStyleProp, ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import requireNativeComponent from '../../ReactNative/requireNativeComponent';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';

Libraries/Components/TextInput/InputAccessoryView.js

@@ -17,7 +17,7 @@ const StyleSheet = require('../../StyleSheet/StyleSheet');
 import RCTInputAccessoryViewNativeComponent from './RCTInputAccessoryViewNativeComponent';
 
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 
 /**
  * Note: iOS only

Libraries/Components/TextInput/RCTInputAccessoryViewNativeComponent.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 import codegenNativeComponent from '../../Utilities/codegenNativeComponent';

Libraries/Components/TextInput/TextInput.js

@@ -24,7 +24,7 @@ const nullthrows = require('nullthrows');
 const setAndForwardRef = require('../../Utilities/setAndForwardRef');
 
 import type {TextStyleProp, ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {SyntheticEvent, ScrollEvent} from '../../Types/CoreEventTypes';
 import type {PressEvent} from '../../Types/CoreEventTypes';

Libraries/Components/Touchable/TouchableHighlight.js

@@ -15,7 +15,7 @@ import Pressability, {
 } from '../../Pressability/Pressability';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import TVTouchable from './TVTouchable';
 import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 import Platform from '../../Utilities/Platform';

Libraries/Image/ImageViewNativeComponent.js

@@ -18,7 +18,7 @@ import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
 import type {ImageProps} from './ImageProps';
 import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
-import type {ColorValue} from '../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../StyleSheet/StyleSheet';
 
 import ImageViewViewConfig from './ImageViewViewConfig';
 const ReactNativeViewConfigRegistry = require('../Renderer/shims/ReactNativeViewConfigRegistry');

Libraries/Pressability/PressabilityDebug.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import normalizeColor from '../StyleSheet/normalizeColor';
-import type {ColorValue} from '../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../StyleSheet/StyleSheet';
 
 import Touchable from '../Components/Touchable/Touchable';
 import View from '../Components/View/View';

Libraries/StyleSheet/PlatformColorValueTypes.android.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {ColorValue} from './StyleSheetTypes';
+import type {ColorValue} from './StyleSheet';
 import type {ProcessedColorValue} from './processColor';
 
 export opaque type NativeColorValue = {

Libraries/StyleSheet/PlatformColorValueTypes.ios.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {ColorValue} from './StyleSheetTypes';
+import type {ColorValue} from './StyleSheet';
 import type {ProcessedColorValue} from './processColor';
 
 export opaque type NativeColorValue = {

Libraries/StyleSheet/PlatformColorValueTypesIOS.ios.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {ColorValue} from './StyleSheetTypes';
+import type {ColorValue} from './StyleSheet';
 import {DynamicColorIOSPrivate} from './PlatformColorValueTypes';
 
 export type DynamicColorIOSTuple = {

Libraries/StyleSheet/PlatformColorValueTypesIOS.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {ColorValue} from './StyleSheetTypes';
+import type {ColorValue} from './StyleSheet';
 
 export type DynamicColorIOSTuple = {
   light: ColorValue,

Libraries/StyleSheet/StyleSheet.js

@@ -17,6 +17,7 @@ const StyleSheetValidation = require('./StyleSheetValidation');
 const flatten = require('./flattenStyle');
 
 import type {
+  ____ColorValue_Internal,
   ____Styles_Internal,
   ____DangerouslyImpreciseStyle_Internal,
   ____DangerouslyImpreciseStyleProp_Internal,
@@ -28,6 +29,15 @@ import type {
   ____ImageStyleProp_Internal,
 } 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
+ * color object.
+ *
+ * type props = {backgroundColor: ColorValue};
+ */
+export type ColorValue = ____ColorValue_Internal;
+
 /**
  * This type should be used as the type for a prop that is passed through
  * to a <View>'s `style` prop. This ensures call sites of the component