Convert require to import in Libraries/Components

Summary:
Changelog:
[General][Changed] Convert require statements to use import from in Libraries/Components

Reviewed By: lunaleaps

Differential Revision: D27921557

fbshipit-source-id: 3f1618455a47a56c4a090f3ececfef88476c0b8a

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -10,14 +10,12 @@
  */
 
 'use strict';
-
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
+import * as React from 'react';
+import Platform from '../../Utilities/Platform';
+import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 
 const PlatformActivityIndicator =
   Platform.OS === 'android'

Libraries/Components/Button.js

@@ -11,18 +11,17 @@
 
 'use strict';
 
-const Platform = require('../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Text = require('../Text/Text');
-const TouchableNativeFeedback = require('./Touchable/TouchableNativeFeedback');
-const TouchableOpacity = require('./Touchable/TouchableOpacity');
-const View = require('./View/View');
-const invariant = require('invariant');
+import * as React from 'react';
+import Platform from '../Utilities/Platform';
+import StyleSheet, {type ColorValue} from '../StyleSheet/StyleSheet';
+import Text from '../Text/Text';
+import TouchableNativeFeedback from './Touchable/TouchableNativeFeedback';
+import TouchableOpacity from './Touchable/TouchableOpacity';
+import View from './View/View';
+import invariant from 'invariant';
 
 import type {AccessibilityState} from './View/ViewAccessibility';
 import type {PressEvent} from '../Types/CoreEventTypes';
-import type {ColorValue} from '../StyleSheet/StyleSheet';
 
 type ButtonProps = $ReadOnly<{|
   /**

Libraries/Components/DatePicker/DatePickerIOS.android.js

@@ -8,11 +8,10 @@
  */
 
 'use strict';
-
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const Text = require('../../Text/Text');
-const View = require('../View/View');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import View from '../View/View';
 
 class DummyDatePickerIOS extends React.Component {
   render() {

Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -10,14 +10,13 @@
 
 // This is a controlled component version of RCTDatePickerIOS.
 
+import * as React from 'react';
 import RCTDatePickerNativeComponent, {
   Commands as DatePickerCommands,
 } from './RCTDatePickerNativeComponent';
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
-
-const invariant = require('invariant');
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
+import invariant from 'invariant';
 
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';

Libraries/Components/Keyboard/Keyboard.js

@@ -13,7 +13,7 @@ import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
 import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
 import NativeKeyboardObserver from './NativeKeyboardObserver';
-import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
+import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 
 export type KeyboardEventName = $Keys<KeyboardEventDefinitions>;
 

Libraries/Components/MaskedView/MaskedViewIOS.ios.js

@@ -8,9 +8,9 @@
  * @flow
  */
 
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
 
 import type {ViewProps} from '../View/ViewPropTypes';
 import RCTMaskedViewNativeComponent from './RCTMaskedViewNativeComponent';

Libraries/Components/Picker/Picker.js

@@ -10,14 +10,13 @@
 
 'use strict';
 
-const PickerAndroid = require('./PickerAndroid');
-const PickerIOS = require('./PickerIOS');
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-const UnimplementedView = require('../UnimplementedViews/UnimplementedView');
+import * as React from 'react';
+import PickerAndroid from './PickerAndroid';
+import PickerIOS from './PickerIOS';
+import Platform from '../../Utilities/Platform';
+import UnimplementedView from '../UnimplementedViews/UnimplementedView';
 
-import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {TextStyleProp, ColorValue} from '../../StyleSheet/StyleSheet';
 
 const MODE_DIALOG = 'dialog';
 const MODE_DROPDOWN = 'dropdown';

Libraries/Components/Picker/PickerIOS.ios.js

@@ -10,19 +10,20 @@
 
 // This is a controlled component version of RCTPickerIOS.
 
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
-
-const invariant = require('invariant');
-const processColor = require('../../StyleSheet/processColor');
+import * as React from 'react';
+import StyleSheet, {
+  type TextStyleProp,
+  type ColorValue,
+} from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
+import invariant from 'invariant';
+import processColor, {
+  type ProcessedColorValue,
+} from '../../StyleSheet/processColor';
 
 import RCTPickerNativeComponent, {
   Commands as PickerCommands,
 } from './RCTPickerNativeComponent';
-import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
-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/ProgressViewIOS/ProgressViewIOS.android.js

@@ -8,11 +8,10 @@
  */
 
 'use strict';
-
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const Text = require('../../Text/Text');
-const View = require('../View/View');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import View from '../View/View';
 
 class DummyProgressViewIOS extends React.Component {
   render() {

Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js

@@ -8,12 +8,11 @@
  * @flow strict-local
  */
 
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
+import * as React from 'react';
+import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
 
 import RCTProgressViewNativeComponent from './RCTProgressViewNativeComponent';
 import type {ImageSource} from '../../Image/ImageSource';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 type Props = $ReadOnly<{|

Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js

@@ -9,10 +9,9 @@
  */
 
 'use strict';
+import * as React from 'react';
 
-const React = require('react');
-
-const requireNativeComponent = require('../../../ReactNative/requireNativeComponent');
+import requireNativeComponent from '../../../ReactNative/requireNativeComponent';
 
 import type {HostComponent} from '../../../Renderer/shims/ReactNativeTypes';
 

Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -8,8 +8,8 @@
  * @format
  */
 
-import {type ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
-import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 
 const AndroidHorizontalScrollViewNativeComponent: HostComponent<Props> = NativeComponentRegistry.get<Props>(

Libraries/Components/ScrollView/ScrollContentViewNativeComponent.js

@@ -8,9 +8,9 @@
  * @flow
  */
 
-import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
-import {type ViewProps as Props} from '../View/ViewPropTypes';
+import type {ViewProps as Props} from '../View/ViewPropTypes';
 
 const ScrollContentViewNativeComponent: HostComponent<Props> = NativeComponentRegistry.get<Props>(
   'RCTScrollContentView',

Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -8,8 +8,8 @@
  * @format
  */
 
-import {type ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
-import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 
 const ScrollViewNativeComponent: HostComponent<Props> = NativeComponentRegistry.get<Props>(

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.android.js

@@ -8,11 +8,10 @@
  */
 
 'use strict';
-
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const Text = require('../../Text/Text');
-const View = require('../View/View');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import View from '../View/View';
 
 class DummySegmentedControlIOS extends React.Component {
   render() {

Libraries/Components/Slider/Slider.js

@@ -8,14 +8,15 @@
  * @flow strict-local
  */
 
-const Platform = require('../../Utilities/Platform');
+import * as React from 'react';
+import Platform from '../../Utilities/Platform';
 import SliderNativeComponent from './SliderNativeComponent';
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
+import StyleSheet, {
+  type ViewStyleProp,
+  type ColorValue,
+} from '../../StyleSheet/StyleSheet';
 
 import type {ImageSource} from '../../Image/ImageSource';
-import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 

Libraries/Components/StatusBar/StatusBar.js

@@ -8,11 +8,10 @@
  * @flow
  */
 
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-
-const invariant = require('invariant');
-const processColor = require('../../StyleSheet/processColor');
+import * as React from 'react';
+import Platform from '../../Utilities/Platform';
+import invariant from 'invariant';
+import processColor from '../../StyleSheet/processColor';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 
 import NativeStatusBarManagerAndroid from './NativeStatusBarManagerAndroid';

Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

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

Libraries/Components/TextInput/AndroidTextInputViewConfig.js

@@ -9,7 +9,7 @@
  */
 
 import ReactNativeViewViewConfig from '../../Components/View/ReactNativeViewViewConfig';
-import {type PartialViewConfig} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import type {PartialViewConfig} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 
 const AndroidTextInputViewConfig = {
   uiViewClassName: 'AndroidTextInput',

Libraries/Components/TextInput/InputAccessoryView.js

@@ -8,15 +8,15 @@
  * @format
  */
 
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
+import * as React from 'react';
+import Platform from '../../Utilities/Platform';
+import StyleSheet, {
+  type ViewStyleProp,
+  type ColorValue,
+} from '../../StyleSheet/StyleSheet';
 
 import RCTInputAccessoryViewNativeComponent from './RCTInputAccessoryViewNativeComponent';
 
-import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
-
 /**
  * Note: iOS only
  *

Libraries/Components/TextInput/RCTMultilineTextInputNativeComponent.js

@@ -13,7 +13,7 @@ import requireNativeComponent from '../../ReactNative/requireNativeComponent';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';
 import RCTTextInputViewConfig from './RCTTextInputViewConfig';
-const ReactNativeViewConfigRegistry = require('../../Renderer/shims/ReactNativeViewConfigRegistry');
+import ReactNativeViewConfigRegistry from '../../Renderer/shims/ReactNativeViewConfigRegistry';
 
 type NativeType = HostComponent<mixed>;
 

Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js

@@ -13,7 +13,7 @@ import requireNativeComponent from '../../ReactNative/requireNativeComponent';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';
 import RCTTextInputViewConfig from './RCTTextInputViewConfig';
-const ReactNativeViewConfigRegistry = require('../../Renderer/shims/ReactNativeViewConfigRegistry');
+import ReactNativeViewConfigRegistry from '../../Renderer/shims/ReactNativeViewConfigRegistry';
 
 type NativeType = HostComponent<mixed>;
 

Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -9,7 +9,7 @@
  */
 
 import ReactNativeViewViewConfig from '../../Components/View/ReactNativeViewViewConfig';
-import {type ViewConfig} from '../../Renderer/shims/ReactNativeTypes';
+import type {ViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 
 const RCTTextInputViewConfig = {
   uiViewClassName: 'RCTSinglelineTextInputView',

Libraries/Components/TextInput/TextInput.js

@@ -8,25 +8,31 @@
  * @format
  */
 
-const DeprecatedTextInputPropTypes = require('../../DeprecatedPropTypes/DeprecatedTextInputPropTypes');
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const Text = require('../../Text/Text');
-const TextAncestor = require('../../Text/TextAncestor');
-const TextInputState = require('./TextInputState');
+import * as React from 'react';
 
-const invariant = require('invariant');
-const nullthrows = require('nullthrows');
-const setAndForwardRef = require('../../Utilities/setAndForwardRef');
+import DeprecatedTextInputPropTypes from '../../DeprecatedPropTypes/DeprecatedTextInputPropTypes';
+
+import Platform from '../../Utilities/Platform';
+import StyleSheet, {
+  type TextStyleProp,
+  type ViewStyleProp,
+  type ColorValue,
+} from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import TextAncestor from '../../Text/TextAncestor';
+import TextInputState from './TextInputState';
+import invariant from 'invariant';
+import nullthrows from 'nullthrows';
+import setAndForwardRef from '../../Utilities/setAndForwardRef';
 
 import usePressability from '../../Pressability/usePressability';
 
-import type {TextStyleProp, ViewStyleProp} from '../../StyleSheet/StyleSheet';
-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';
+import type {
+  SyntheticEvent,
+  ScrollEvent,
+  PressEvent,
+} from '../../Types/CoreEventTypes';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';
 

Libraries/Components/Touchable/BoundingDimensions.js

@@ -8,8 +8,7 @@
  */
 
 'use strict';
-
-const PooledClass = require('./PooledClass');
+import PooledClass from './PooledClass';
 
 const twoArgumentPooler = PooledClass.twoArgumentPooler;
 

Libraries/Components/Touchable/PooledClass.js

@@ -9,8 +9,7 @@
  */
 
 'use strict';
-
-const invariant = require('invariant');
+import invariant from 'invariant';
 
 /**
  * Static poolers. Several custom versions for each potential number of

Libraries/Components/Touchable/Position.js

@@ -8,8 +8,7 @@
  */
 
 'use strict';
-
-const PooledClass = require('./PooledClass');
+import PooledClass from './PooledClass';
 
 const twoArgumentPooler = PooledClass.twoArgumentPooler;
 

Libraries/Components/Touchable/Touchable.js

@@ -8,12 +8,12 @@
  * @format
  */
 
-const BoundingDimensions = require('./BoundingDimensions');
-const Platform = require('../../Utilities/Platform');
-const Position = require('./Position');
-const React = require('react');
-const UIManager = require('../../ReactNative/UIManager');
-const SoundManager = require('../Sound/SoundManager');
+import * as React from 'react';
+import BoundingDimensions from './BoundingDimensions';
+import Platform from '../../Utilities/Platform';
+import Position from './Position';
+import UIManager from '../../ReactNative/UIManager';
+import SoundManager from '../Sound/SoundManager';
 
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 

Libraries/Components/Touchable/ensurePositiveDelayProps.js

@@ -9,8 +9,7 @@
  */
 
 'use strict';
-
-const invariant = require('invariant');
+import invariant from 'invariant';
 
 const ensurePositiveDelayProps = function(props: any) {
   invariant(

Libraries/Components/UnimplementedViews/UnimplementedView.js

@@ -9,9 +9,8 @@
  */
 
 'use strict';
-
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
 
 /**
  * Common implementation for a simple stubbed view. Simply applies the view's styles to the inner

Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -9,14 +9,12 @@
  */
 
 'use strict';
-
-const DeprecatedImageStylePropTypes = require('../../DeprecatedPropTypes/DeprecatedImageStylePropTypes');
-const DeprecatedTextStylePropTypes = require('../../DeprecatedPropTypes/DeprecatedTextStylePropTypes');
-const DeprecatedViewStylePropTypes = require('../../DeprecatedPropTypes/DeprecatedViewStylePropTypes');
-
-const processColor = require('../../StyleSheet/processColor');
-const processTransform = require('../../StyleSheet/processTransform');
-const sizesDiffer = require('../../Utilities/differ/sizesDiffer');
+import DeprecatedImageStylePropTypes from '../../DeprecatedPropTypes/DeprecatedImageStylePropTypes';
+import DeprecatedTextStylePropTypes from '../../DeprecatedPropTypes/DeprecatedTextStylePropTypes';
+import DeprecatedViewStylePropTypes from '../../DeprecatedPropTypes/DeprecatedViewStylePropTypes';
+import processColor from '../../StyleSheet/processColor';
+import processTransform from '../../StyleSheet/processTransform';
+import sizesDiffer from '../../Utilities/differ/sizesDiffer';
 
 type ReturnBoolType = <V>(V) => true;
 type BoolifiedDeprecatedViewStylePropTypes = $ObjMap<

Libraries/Components/View/ReactNativeViewAttributes.js

@@ -9,8 +9,7 @@
  */
 
 'use strict';
-
-const ReactNativeStyleAttributes = require('./ReactNativeStyleAttributes');
+import ReactNativeStyleAttributes from './ReactNativeStyleAttributes';
 
 const UIView = {
   pointerEvents: true,

Libraries/Components/View/ReactNativeViewViewConfig.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import {type ViewConfig} from '../../Renderer/shims/ReactNativeTypes';
+import type {ViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import ReactNativeViewViewConfigAndroid from './ReactNativeViewViewConfigAndroid';
 import {Platform} from 'react-native';