Migrate DrawerAndroid, ProgressBarAndroid, SafeAreaView, ScrollView, TextInput, ToastAndroid, UnimplementedView and View components to export syntax (#48807)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/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

fbshipit-source-id: e3496fe69d66932dd4ed82f41d810f3ef1f850f5

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

@@ -12,7 +12,7 @@
 'use strict';
 
 const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
-const View = require('../../View/View');
+const View = require('../../View/View').default;
 /* $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. */

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

@@ -15,7 +15,7 @@ import SafeAreaView from '../SafeAreaView';
 
 const Text = require('../../../Text/Text').default;
 const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
-const View = require('../../View/View');
+const View = require('../../View/View').default;
 const React = require('react');
 
 describe('<SafeAreaView />', () => {

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

@@ -14,7 +14,7 @@
 const {create, unmount, update} = require('../../../../jest/renderer');
 const Text = require('../../../Text/Text').default;
 const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
-const View = require('../../View/View');
+const View = require('../../View/View').default;
 const ScrollView = require('../ScrollView').default;
 const React = require('react');
 

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

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

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

@@ -14,7 +14,7 @@ const {
   enter,
   expectRendersMatchingSnapshot,
 } = require('../../../Utilities/ReactNativeTestTools');
-const TextInput = require('../TextInput');
+const TextInput = require('../TextInput').default;
 const React = require('react');
 const ReactTestRenderer = require('react-test-renderer');
 

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 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

@@ -13,7 +13,7 @@
 jest.disableAutomock();
 
 const {create} = require('../../../jest/renderer');
-const View = require('../../Components/View/View');
+const View = require('../../Components/View/View').default;
 const Image = require('../Image');
 const React = require('react');
 

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').default;
 const resolveBoxStyle = require('./resolveBoxStyle').default;

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').default;

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').default;
 

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').default;
 const ElementProperties = require('./ElementProperties').default;

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').default;
 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').default;
 

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

@@ -17,8 +17,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').default;
 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());

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -2795,7 +2795,7 @@ exports[`public API should not change unintentionally Libraries/Components/TextI
   PartialViewConfig,
   { uiViewClassName: string },
 >;
-declare module.exports: PartialViewConfigWithoutName;
+declare export default PartialViewConfigWithoutName;
 "
 `;
 
@@ -3484,7 +3484,7 @@ export type TextInputComponentStatics = $ReadOnly<{
     blurTextInput: typeof TextInputState.blurTextInput,
   }>,
 }>;
-declare module.exports: TextInputType;
+declare export default TextInputType;
 "
 `;
 
@@ -3517,7 +3517,7 @@ declare function blurTextInput(textField: ?HostInstance): void;
 declare function registerInput(textField: HostInstance): void;
 declare function unregisterInput(textField: HostInstance): void;
 declare function isTextInput(textField: HostInstance): boolean;
-declare module.exports: {
+declare const TextInputState: {
   currentlyFocusedInput: currentlyFocusedInput,
   focusInput: focusInput,
   blurInput: blurInput,
@@ -3530,6 +3530,7 @@ declare module.exports: {
   unregisterInput: unregisterInput,
   isTextInput: isTextInput,
 };
+declare export default typeof TextInputState;
 "
 `;
 
@@ -3556,7 +3557,7 @@ exports[`public API should not change unintentionally Libraries/Components/Toast
     yOffset: number
   ) => void,
 };
-declare module.exports: ToastAndroid;
+declare export default typeof ToastAndroid;
 "
 `;
 
@@ -3898,13 +3899,13 @@ exports[`public API should not change unintentionally Libraries/Components/Unimp
 declare class UnimplementedView extends React.Component<Props> {
   render(): React.Node;
 }
-declare module.exports: UnimplementedView;
+declare export default typeof UnimplementedView;
 "
 `;
 
 exports[`public API should not change unintentionally Libraries/Components/View/ReactNativeStyleAttributes.js 1`] = `
 "declare const ReactNativeStyleAttributes: { [string]: AnyAttributeType, ... };
-declare module.exports: ReactNativeStyleAttributes;
+declare export default typeof ReactNativeStyleAttributes;
 "
 `;
 
@@ -3940,7 +3941,7 @@ exports[`public API should not change unintentionally Libraries/Components/View/
 };
 declare const RCTView: { ...UIView, removeClippedSubviews: true };
 declare const ReactNativeViewAttributes: { UIView: UIView, RCTView: RCTView };
-declare module.exports: ReactNativeViewAttributes;
+declare export default typeof ReactNativeViewAttributes;
 "
 `;
 
@@ -3950,7 +3951,7 @@ declare const View: component(
   ref: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
   ...props: ViewProps
 );
-declare module.exports: View;
+declare export default typeof View;
 "
 `;
 

packages/react-native/index.js

@@ -186,7 +186,7 @@ module.exports = {
     return require('./Libraries/Text/Text').default;
   },
   get TextInput(): TextInput {
-    return require('./Libraries/Components/TextInput/TextInput');
+    return require('./Libraries/Components/TextInput/TextInput').default;
   },
   get Touchable(): Touchable {
     return require('./Libraries/Components/Touchable/Touchable').default;
@@ -207,7 +207,7 @@ module.exports = {
       .default;
   },
   get View(): View {
-    return require('./Libraries/Components/View/View');
+    return require('./Libraries/Components/View/View').default;
   },
   get VirtualizedList(): VirtualizedList {
     return require('./Libraries/Lists/VirtualizedList');
@@ -328,7 +328,7 @@ module.exports = {
   },
   // $FlowFixMe[value-as-type]
   get ToastAndroid(): ToastAndroid {
-    return require('./Libraries/Components/ToastAndroid/ToastAndroid');
+    return require('./Libraries/Components/ToastAndroid/ToastAndroid').default;
   },
   get TurboModuleRegistry(): TurboModuleRegistry {
     return require('./Libraries/TurboModule/TurboModuleRegistry');

packages/react-native/jest/mockScrollView.js

@@ -12,7 +12,7 @@
 
 'use strict';
 
-const View = require('../Libraries/Components/View/View');
+const View = require('../Libraries/Components/View/View').default;
 const requireNativeComponent =
   require('../Libraries/ReactNative/requireNativeComponent').default;
 const React = require('react');

packages/react-native/jest/setup.js

@@ -128,22 +128,32 @@ jest
       /* isESModule */ true,
     ),
   }))
-  .mock('../Libraries/Components/TextInput/TextInput', () =>
-    mockComponent('../Libraries/Components/TextInput/TextInput', {
-      ...MockNativeMethods,
-      isFocused: jest.fn(),
-      clear: jest.fn(),
-      getNativeRef: jest.fn(),
-    }),
-  )
+  .mock('../Libraries/Components/TextInput/TextInput', () => ({
+    __esModule: true,
+    default: mockComponent(
+      '../Libraries/Components/TextInput/TextInput',
+      /* instanceMethods */ {
+        ...MockNativeMethods,
+        isFocused: jest.fn(),
+        clear: jest.fn(),
+        getNativeRef: jest.fn(),
+      },
+      /* isESModule */ true,
+    ),
+  }))
   .mock('../Libraries/Modal/Modal', () => {
     const baseComponent = mockComponent('../Libraries/Modal/Modal');
     const mockModal = jest.requireActual('./mockModal');
     return mockModal(baseComponent);
   })
-  .mock('../Libraries/Components/View/View', () =>
-    mockComponent('../Libraries/Components/View/View', MockNativeMethods),
-  )
+  .mock('../Libraries/Components/View/View', () => ({
+    __esModule: true,
+    default: mockComponent(
+      '../Libraries/Components/View/View',
+      /* instanceMethods */ MockNativeMethods,
+      /* isESModule */ true,
+    ),
+  }))
   .mock('../Libraries/Components/AccessibilityInfo/AccessibilityInfo', () => ({
     __esModule: true,
     default: {

packages/rn-tester/js/examples/Snapshot/SnapshotViewIOS.android.js

@@ -9,4 +9,5 @@
 
 'use strict';
 
-module.exports = require('react-native/Libraries/Components/UnimplementedViews/UnimplementedView');
+module.exports =
+  require('react-native/Libraries/Components/UnimplementedViews/UnimplementedView').default;