Migrate DrawerAndroid, ProgressBarAndroid, SafeAreaView, ScrollView, …

…TextInput, ToastAndroid, UnimplementedView and View components to export syntax (facebook#48807)

Summary:
Pull Request resolved: facebook#48807

## Motivation
Modernising the react-native codebase to allow for ingestion by modern Flow tooling.

## This diff
- Updates a handful of components in `Libraries/Components` to use `export` syntax
  - `export default` for qualified objects, many `export` statements for collections (determined by how it's imported)
- Appends `.default` to requires of the changed files.
- Updates test files.
- Updates the public API snapshot (intented breaking change)

Changelog:
[General][Breaking] - Files inside `Libraries/Components` use `export` syntax, which requires the addition of `.default` when imported with the CJS `require` syntax.

Reviewed By: huntie

Differential Revision: D68436127

packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js

@@ -12,4 +12,5 @@
 
 import typeof DrawerLayoutAndroid from './DrawerLayoutAndroid.android';
 
-export default require('../UnimplementedViews/UnimplementedView') as $FlowFixMe as DrawerLayoutAndroid;
+export default require('../UnimplementedViews/UnimplementedView')
+  .default as $FlowFixMe as DrawerLayoutAndroid;

packages/react-native/Libraries/Components/DrawerAndroid/__tests__/DrawerAndroid-test.js

@@ -11,14 +11,14 @@
 
 'use strict';
 
-const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
-const View = require('../../View/View');
+import * as ReactNativeTestTools from '../../../Utilities/ReactNativeTestTools';
+import View from '../../View/View';
 /* $FlowFixMe[cannot-resolve-module] (>=0.99.0 site=react_native_ios_fb) This
  * comment suppresses an error found when Flow v0.99 was deployed. To see the
  * error, delete this comment and run Flow. */
 // $FlowFixMe[missing-platform-support]
-const DrawerLayoutAndroid = require('../DrawerLayoutAndroid.android').default;
-const React = require('react');
+import DrawerLayoutAndroid from '../DrawerLayoutAndroid.android';
+import * as React from 'react';
 
 describe('<DrawerLayoutAndroid />', () => {
   it('should render as expected', async () => {

packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js

@@ -15,6 +15,6 @@ import typeof ProgressBarAndroidNativeComponentType from './ProgressBarAndroidNa
 
 export type {ProgressBarAndroidProps} from './ProgressBarAndroid.android';
 
-export default (require('../UnimplementedViews/UnimplementedView'):
+export default require('../UnimplementedViews/UnimplementedView').default as
   | UnimplementedViewType
-  | ProgressBarAndroidNativeComponentType);
+  | ProgressBarAndroidNativeComponentType;

packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-test.js

@@ -11,12 +11,11 @@
 
 'use strict';
 
+import Text from '../../../Text/Text';
+import * as ReactNativeTestTools from '../../../Utilities/ReactNativeTestTools';
+import View from '../../View/View';
 import SafeAreaView from '../SafeAreaView';
-
-const Text = require('../../../Text/Text');
-const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
-const View = require('../../View/View');
-const React = require('react');
+import * as React from 'react';
 
 describe('<SafeAreaView />', () => {
   it('should render as expected', async () => {

packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-test.js

@@ -11,12 +11,12 @@
 
 'use strict';
 
-const {create, unmount, update} = require('../../../../jest/renderer');
-const Text = require('../../../Text/Text');
-const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
-const View = require('../../View/View');
-const ScrollView = require('../ScrollView').default;
-const React = require('react');
+import {create, unmount, update} from '../../../../jest/renderer';
+import Text from '../../../Text/Text';
+import * as ReactNativeTestTools from '../../../Utilities/ReactNativeTestTools';
+import View from '../../View/View';
+import ScrollView from '../ScrollView';
+import * as React from 'react';
 
 describe('ScrollView', () => {
   beforeEach(() => {

packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -166,4 +166,4 @@ const RCTTextInputViewConfig = {
   },
 };
 
-module.exports = (RCTTextInputViewConfig: PartialViewConfigWithoutName);
+export default RCTTextInputViewConfig as PartialViewConfigWithoutName;

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -1900,4 +1900,4 @@ const verticalAlignToTextAlignVerticalMap = {
 };
 
 // $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.
-module.exports = ((ExportedForwardRef: any): TextInputType);
+export default ExportedForwardRef as any as TextInputType;

packages/react-native/Libraries/Components/TextInput/TextInputState.js

@@ -196,7 +196,7 @@ function isTextInput(textField: HostInstance): boolean {
   return inputs.has(textField);
 }
 
-module.exports = {
+const TextInputState = {
   currentlyFocusedInput,
   focusInput,
   blurInput,
@@ -210,3 +210,5 @@ module.exports = {
   unregisterInput,
   isTextInput,
 };
+
+export default TextInputState;

packages/react-native/Libraries/Components/TextInput/__tests__/InputAccessoryView-test.js

@@ -11,10 +11,10 @@
 
 'use strict';
 
-const render = require('../../../../jest/renderer');
-const View = require('../../View/View');
-const InputAccessoryView = require('../InputAccessoryView').default;
-const React = require('react');
+import * as render from '../../../../jest/renderer';
+import View from '../../View/View';
+import InputAccessoryView from '../InputAccessoryView';
+import * as React from 'react';
 
 describe('InputAccessoryView', () => {
   it('should render as <RCTInputAccessoryView> when mocked', async () => {

packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js

@@ -7,16 +7,16 @@
  * @format
  */
 
-const {create} = require('../../../../jest/renderer');
-const ReactNativeFeatureFlags = require('../../../../src/private/featureflags/ReactNativeFeatureFlags');
-const ReactNative = require('../../../ReactNative/RendererProxy');
-const {
+import {create} from '../../../../jest/renderer';
+import ReactNativeFeatureFlags from '../../../../src/private/featureflags/ReactNativeFeatureFlags';
+import ReactNative from '../../../ReactNative/RendererProxy';
+import {
   enter,
   expectRendersMatchingSnapshot,
-} = require('../../../Utilities/ReactNativeTestTools');
-const TextInput = require('../TextInput');
-const React = require('react');
-const ReactTestRenderer = require('react-test-renderer');
+} from '../../../Utilities/ReactNativeTestTools';
+import TextInput from '../TextInput';
+import * as React from 'react';
+import ReactTestRenderer from 'react-test-renderer';
 
 jest.unmock('../TextInput');
 

packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.android.js

@@ -71,4 +71,4 @@ const ToastAndroid = {
   },
 };
 
-module.exports = ToastAndroid;
+export default ToastAndroid;

packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.js

@@ -42,4 +42,4 @@ const ToastAndroid = {
   },
 };
 
-module.exports = ToastAndroid;
+export default ToastAndroid;

packages/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js

@@ -27,7 +27,7 @@ type Props = $ReadOnly<{
 class UnimplementedView extends React.Component<Props> {
   render(): React.Node {
     // Workaround require cycle from requireNativeComponent
-    const View = require('../View/View');
+    const View = require('../View/View').default;
     return (
       <View style={[styles.unimplementedView, this.props.style]}>
         {this.props.children}
@@ -46,4 +46,4 @@ const styles = StyleSheet.create({
     : {},
 });
 
-module.exports = UnimplementedView;
+export default UnimplementedView;

packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -215,4 +215,4 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   objectFit: true,
 };
 
-module.exports = ReactNativeStyleAttributes;
+export default ReactNativeStyleAttributes;

packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -57,4 +57,4 @@ const ReactNativeViewAttributes = {
   RCTView: RCTView,
 };
 
-module.exports = ReactNativeViewAttributes;
+export default ReactNativeViewAttributes;

packages/react-native/Libraries/Components/View/View.js

@@ -130,4 +130,4 @@ const View: component(
 
 View.displayName = 'View';
 
-module.exports = View;
+export default View;

packages/react-native/Libraries/Components/View/__tests__/View-itest.js

@@ -14,7 +14,7 @@ import '../../../Core/InitializeCore.js';
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 
-const View = require('../View');
+const View = require('../View').default;
 
 describe('width and height style', () => {
   it('handles correct percentage-based dimensions', () => {

packages/react-native/Libraries/Components/View/__tests__/View-test.js

@@ -12,7 +12,7 @@
 
 const render = require('../../../../jest/renderer');
 const React = require('../React');
-const View = require('../View');
+const View = require('../View').default;
 
 jest.unmock('../View');
 jest.unmock('../ViewNativeComponent');

packages/react-native/Libraries/Core/setUpReactDevTools.js

@@ -70,7 +70,8 @@ if (__DEV__) {
   const reactDevToolsFuseboxGlobalBindingName =
     fuseboxReactDevToolsDispatcher.BINDING_NAME;
 
-  const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
+  const ReactNativeStyleAttributes =
+    require('../Components/View/ReactNativeStyleAttributes').default;
   const resolveRNStyle = require('../StyleSheet/flattenStyle');
 
   function handleReactDevToolsSettingsUpdate(settings: Object) {

packages/react-native/Libraries/Image/__tests__/assetRelativePathInSnapshot-test.js

@@ -12,10 +12,10 @@
 
 jest.disableAutomock();
 
-const {create} = require('../../../jest/renderer');
-const View = require('../../Components/View/View');
-const Image = require('../Image');
-const React = require('react');
+import {create} from '../../../jest/renderer';
+import View from '../../Components/View/View';
+import Image from '../Image';
+import * as React from 'react';
 
 it('renders assets based on relative path', async () => {
   expect(

packages/react-native/Libraries/Inspector/BorderBox.js

@@ -14,7 +14,7 @@ import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 
 import React from 'react';
 
-const View = require('../Components/View/View');
+const View = require('../Components/View/View').default;
 
 type Props = $ReadOnly<{
   children: React.Node,

packages/react-native/Libraries/Inspector/BoxInspector.js

@@ -15,7 +15,7 @@ import type {InspectedElementFrame} from './Inspector';
 
 import React from 'react';
 
-const View = require('../Components/View/View');
+const View = require('../Components/View/View').default;
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
 const resolveBoxStyle = require('./resolveBoxStyle');

packages/react-native/Libraries/Inspector/ElementBox.js

@@ -15,7 +15,7 @@ import type {InspectedElementFrame} from './Inspector';
 
 import React from 'react';
 
-const View = require('../Components/View/View');
+const View = require('../Components/View/View').default;
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Dimensions = require('../Utilities/Dimensions').default;

packages/react-native/Libraries/Inspector/ElementProperties.js

@@ -19,7 +19,7 @@ const TouchableHighlight =
   require('../Components/Touchable/TouchableHighlight').default;
 const TouchableWithoutFeedback =
   require('../Components/Touchable/TouchableWithoutFeedback').default;
-const View = require('../Components/View/View');
+const View = require('../Components/View/View').default;
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');

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

@@ -21,7 +21,7 @@ import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
 import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 import React from 'react';
 
-const View = require('../Components/View/View');
+const View = require('../Components/View/View').default;
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
 const {findNodeHandle} = require('../ReactNative/RendererProxy');
 const StyleSheet = require('../StyleSheet/StyleSheet');

packages/react-native/Libraries/Inspector/InspectorOverlay.js

@@ -15,7 +15,7 @@ import type {InspectedElement} from './Inspector';
 
 import React from 'react';
 
-const View = require('../Components/View/View');
+const View = require('../Components/View/View').default;
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const ElementBox = require('./ElementBox');
 

packages/react-native/Libraries/Inspector/InspectorPanel.js

@@ -18,7 +18,7 @@ import React from 'react';
 const ScrollView = require('../Components/ScrollView/ScrollView').default;
 const TouchableHighlight =
   require('../Components/Touchable/TouchableHighlight').default;
-const View = require('../Components/View/View');
+const View = require('../Components/View/View').default;
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
 const ElementProperties = require('./ElementProperties');

packages/react-native/Libraries/Inspector/NetworkOverlay.js

@@ -17,7 +17,7 @@ import React from 'react';
 
 const TouchableHighlight =
   require('../Components/Touchable/TouchableHighlight').default;
-const View = require('../Components/View/View');
+const View = require('../Components/View/View').default;
 const FlatList = require('../Lists/FlatList');
 const XHRInterceptor = require('../Network/XHRInterceptor');
 const StyleSheet = require('../StyleSheet/StyleSheet');

packages/react-native/Libraries/Inspector/PerformanceOverlay.js

@@ -12,7 +12,7 @@
 
 import React from 'react';
 
-const View = require('../Components/View/View');
+const View = require('../Components/View/View').default;
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
 const PerformanceLogger = require('../Utilities/GlobalPerformanceLogger');

packages/react-native/Libraries/Inspector/StyleInspector.js

@@ -15,7 +15,7 @@ import type {____FlattenStyleProp_Internal} from '../StyleSheet/StyleSheetTypes'
 
 import React from 'react';
 
-const View = require('../Components/View/View');
+const View = require('../Components/View/View').default;
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
 

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

@@ -21,7 +21,7 @@ import {VirtualizedListContextResetter} from '@react-native/virtualized-lists';
 import React from 'react';
 
 const ScrollView = require('../Components/ScrollView/ScrollView').default;
-const View = require('../Components/View/View');
+const View = require('../Components/View/View').default;
 const AppContainer = require('../ReactNative/AppContainer');
 const I18nManager = require('../ReactNative/I18nManager');
 const {RootTagContext} = require('../ReactNative/RootTag');

packages/react-native/Libraries/Modal/__tests__/Modal-test.js

@@ -12,7 +12,7 @@
 'use strict';
 
 const render = require('../../../jest/renderer');
-const View = require('../../Components/View/View');
+const View = require('../../Components/View/View').default;
 const Modal = require('../Modal');
 const React = require('react');
 

packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -12,7 +12,8 @@
 
 import processBoxShadow from '../StyleSheet/processBoxShadow';
 
-const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
+const ReactNativeStyleAttributes =
+  require('../Components/View/ReactNativeStyleAttributes').default;
 const resolveAssetSource = require('../Image/resolveAssetSource');
 const processBackgroundImage =
   require('../StyleSheet/processBackgroundImage').default;

packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js

@@ -53,7 +53,7 @@ module.exports = {
     return require('../Renderer/shims/ReactNativeViewConfigRegistry');
   },
   get TextInputState(): TextInputState {
-    return require('../Components/TextInput/TextInputState');
+    return require('../Components/TextInput/TextInputState').default;
   },
   get UIManager(): UIManager {
     return require('../ReactNative/UIManager');

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

@@ -26,7 +26,8 @@ import type {
 import composeStyles from '../../src/private/styles/composeStyles';
 import flatten from './flattenStyle';
 
-const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
+const ReactNativeStyleAttributes =
+  require('../Components/View/ReactNativeStyleAttributes').default;
 const PixelRatio = require('../Utilities/PixelRatio').default;
 
 export type {NativeColorValue} from './StyleSheetTypes';

packages/react-native/Libraries/Utilities/ReactNativeTestTools.js

@@ -18,8 +18,8 @@ import React from 'react';
 import ReactTestRenderer from 'react-test-renderer';
 
 const Switch = require('../Components/Switch/Switch').default;
-const TextInput = require('../Components/TextInput/TextInput');
-const View = require('../Components/View/View');
+const TextInput = require('../Components/TextInput/TextInput').default;
+const View = require('../Components/View/View').default;
 const Text = require('../Text/Text');
 const {VirtualizedList} = require('@react-native/virtualized-lists');
 

packages/react-native/Libraries/Utilities/dismissKeyboard.js

@@ -12,7 +12,8 @@
 
 'use strict';
 
-const TextInputState = require('../Components/TextInput/TextInputState');
+const TextInputState =
+  require('../Components/TextInput/TextInputState').default;
 
 function dismissKeyboard() {
   TextInputState.blurTextInput(TextInputState.currentlyFocusedInput());