Migrated components to export syntax (part 1) (#48765)

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

## 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: cortinico

Differential Revision: D68330077

fbshipit-source-id: 6bf00c82f72dbcaaa26470d7ea0917639fc3de4a

packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.android.js

@@ -33,4 +33,4 @@ function legacySendAccessibilityEvent(
   }
 }
 
-module.exports = legacySendAccessibilityEvent;
+export default legacySendAccessibilityEvent;

packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.ios.js

@@ -23,4 +23,4 @@ function legacySendAccessibilityEvent(
   }
 }
 
-module.exports = legacySendAccessibilityEvent;
+export default legacySendAccessibilityEvent;

packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.js.flow

@@ -17,4 +17,4 @@ declare function legacySendAccessibilityEvent(
   eventType: string,
 ): void;
 
-module.exports = legacySendAccessibilityEvent;
+export default legacySendAccessibilityEvent;

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

@@ -13,7 +13,7 @@ import NativeClipboard from './NativeClipboard';
 /**
  * `Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android
  */
-module.exports = {
+export default {
   /**
    * Get content of string type, this method returns a `Promise`, so you can use following code to get clipboard content
    * ```javascript

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

@@ -391,4 +391,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = DrawerLayoutAndroid;
+export default DrawerLayoutAndroid;

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

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

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

@@ -17,7 +17,7 @@ const View = require('../../View/View');
  * 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');
+const DrawerLayoutAndroid = require('../DrawerLayoutAndroid.android').default;
 const React = require('react');
 
 describe('<DrawerLayoutAndroid />', () => {

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

@@ -202,4 +202,4 @@ class Keyboard {
   }
 }
 
-module.exports = (new Keyboard(): Keyboard);
+export default (new Keyboard(): Keyboard);

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

@@ -11,7 +11,7 @@
 
 const LayoutAnimation = require('../../../LayoutAnimation/LayoutAnimation');
 const dismissKeyboard = require('../../../Utilities/dismissKeyboard');
-const Keyboard = require('../Keyboard');
+const Keyboard = require('../Keyboard').default;
 
 jest.mock('../../../LayoutAnimation/LayoutAnimation');
 jest.mock('../../../Utilities/dismissKeyboard');

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

@@ -77,7 +77,8 @@ module.exports = {
     return require('../Core/ReactFiberErrorDialog').default;
   },
   get legacySendAccessibilityEvent(): legacySendAccessibilityEvent {
-    return require('../Components/AccessibilityInfo/legacySendAccessibilityEvent');
+    return require('../Components/AccessibilityInfo/legacySendAccessibilityEvent')
+      .default;
   },
   get RawEventEmitter(): RawEventEmitter {
     return require('../Core/RawEventEmitter').default;

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

@@ -1631,7 +1631,7 @@ exports[`public API should not change unintentionally Libraries/Components/Acces
   reactTag: number,
   eventType: string
 ): void;
-declare module.exports: legacySendAccessibilityEvent;
+declare export default typeof legacySendAccessibilityEvent;
 "
 `;
 
@@ -1703,7 +1703,7 @@ declare export default typeof Button;
 `;
 
 exports[`public API should not change unintentionally Libraries/Components/Clipboard/Clipboard.js 1`] = `
-"declare module.exports: {
+"declare export default {
   getString(): Promise<string>,
   setString(content: string): void,
 };
@@ -1723,7 +1723,7 @@ declare export default typeof AndroidDrawerLayoutNativeComponent;
 `;
 
 exports[`public API should not change unintentionally Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js 1`] = `
-"declare module.exports: DrawerLayoutAndroid;
+"declare export default DrawerLayoutAndroid;
 "
 `;
 
@@ -1780,7 +1780,7 @@ declare class Keyboard {
   metrics(): ?KeyboardMetrics;
   scheduleLayoutAnimation(event: KeyboardEvent): void;
 }
-declare module.exports: Keyboard;
+declare export default Keyboard;
 "
 `;
 

packages/react-native/index.js

@@ -122,7 +122,8 @@ module.exports = {
   },
   // $FlowFixMe[value-as-type]
   get DrawerLayoutAndroid(): DrawerLayoutAndroid {
-    return require('./Libraries/Components/DrawerAndroid/DrawerLayoutAndroid');
+    return require('./Libraries/Components/DrawerAndroid/DrawerLayoutAndroid')
+      .default;
   },
   get FlatList(): FlatList {
     return require('./Libraries/Lists/FlatList');
@@ -242,7 +243,7 @@ module.exports = {
         "It can now be installed and imported from '@react-native-clipboard/clipboard' instead of 'react-native'. " +
         'See https://github.com/react-native-clipboard/clipboard',
     );
-    return require('./Libraries/Components/Clipboard/Clipboard');
+    return require('./Libraries/Components/Clipboard/Clipboard').default;
   },
   get DeviceInfo(): DeviceInfo {
     return require('./Libraries/Utilities/DeviceInfo');
@@ -269,7 +270,7 @@ module.exports = {
     return require('./Libraries/Interaction/InteractionManager');
   },
   get Keyboard(): Keyboard {
-    return require('./Libraries/Components/Keyboard/Keyboard');
+    return require('./Libraries/Components/Keyboard/Keyboard').default;
   },
   get LayoutAnimation(): LayoutAnimation {
     return require('./Libraries/LayoutAnimation/LayoutAnimation');

packages/react-native/jest/setup.js

@@ -163,8 +163,11 @@ jest
     },
   }))
   .mock('../Libraries/Components/Clipboard/Clipboard', () => ({
-    getString: jest.fn(() => ''),
-    setString: jest.fn(),
+    __esModule: true,
+    default: {
+      getString: jest.fn(() => ''),
+      setString: jest.fn(),
+    },
   }))
   .mock('../Libraries/Components/RefreshControl/RefreshControl', () =>
     jest.requireActual(