From f8a2d3bebf83f3290ddabcc49bef1ca79d90d958 Mon Sep 17 00:00:00 2001 From: Iwo Plaza Date: Fri, 24 Jan 2025 04:19:16 -0800 Subject: [PATCH] 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 --- .../DrawerAndroid/DrawerLayoutAndroid.js | 3 +- .../__tests__/DrawerAndroid-test.js | 8 ++--- .../ProgressBarAndroid/ProgressBarAndroid.js | 4 +-- .../__tests__/SafeAreaView-test.js | 9 +++--- .../ScrollView/__tests__/ScrollView-test.js | 12 +++---- .../TextInput/RCTTextInputViewConfig.js | 2 +- .../Components/TextInput/TextInput.js | 2 +- .../Components/TextInput/TextInputState.js | 4 ++- .../__tests__/InputAccessoryView-test.js | 8 ++--- .../TextInput/__tests__/TextInput-test.js | 16 +++++----- .../ToastAndroid/ToastAndroid.android.js | 2 +- .../Components/ToastAndroid/ToastAndroid.js | 2 +- .../UnimplementedViews/UnimplementedView.js | 4 +-- .../View/ReactNativeStyleAttributes.js | 2 +- .../View/ReactNativeViewAttributes.js | 2 +- .../Libraries/Components/View/View.js | 2 +- .../Components/View/__tests__/View-itest.js | 2 +- .../Components/View/__tests__/View-test.js | 2 +- .../Libraries/Core/setUpReactDevTools.js | 3 +- .../assetRelativePathInSnapshot-test.js | 8 ++--- .../Libraries/Inspector/BorderBox.js | 2 +- .../Libraries/Inspector/BoxInspector.js | 2 +- .../Libraries/Inspector/ElementBox.js | 2 +- .../Libraries/Inspector/ElementProperties.js | 2 +- .../Libraries/Inspector/Inspector.js | 2 +- .../Libraries/Inspector/InspectorOverlay.js | 2 +- .../Libraries/Inspector/InspectorPanel.js | 2 +- .../Libraries/Inspector/NetworkOverlay.js | 2 +- .../Libraries/Inspector/PerformanceOverlay.js | 2 +- .../Libraries/Inspector/StyleInspector.js | 2 +- .../react-native/Libraries/Modal/Modal.js | 2 +- .../Libraries/Modal/__tests__/Modal-test.js | 2 +- .../getNativeComponentAttributes.js | 3 +- .../ReactNativePrivateInterface.js | 2 +- .../Libraries/StyleSheet/StyleSheet.js | 3 +- .../Utilities/ReactNativeTestTools.js | 4 +-- .../Libraries/Utilities/dismissKeyboard.js | 3 +- .../__snapshots__/public-api-test.js.snap | 17 +++++----- packages/react-native/index.js | 6 ++-- packages/react-native/jest/mockScrollView.js | 2 +- packages/react-native/jest/setup.js | 32 ++++++++++++------- .../Snapshot/SnapshotViewIOS.android.js | 3 +- 42 files changed, 107 insertions(+), 89 deletions(-) diff --git a/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js b/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js index b3d689ebafc807..ded93fa25477fa 100644 --- a/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js +++ b/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; diff --git a/packages/react-native/Libraries/Components/DrawerAndroid/__tests__/DrawerAndroid-test.js b/packages/react-native/Libraries/Components/DrawerAndroid/__tests__/DrawerAndroid-test.js index 115e0f0778ae87..bad237a0c17aeb 100644 --- a/packages/react-native/Libraries/Components/DrawerAndroid/__tests__/DrawerAndroid-test.js +++ b/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('', () => { it('should render as expected', async () => { diff --git a/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js b/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js index 685a2210dbff01..5ec51658a79a88 100644 --- a/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js +++ b/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; diff --git a/packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-test.js b/packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-test.js index b10a96c8e30af1..116cb747ca2120 100644 --- a/packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-test.js +++ b/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('', () => { it('should render as expected', async () => { diff --git a/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-test.js b/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-test.js index 815699ecc56cd7..3bc3b432fa10f8 100644 --- a/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-test.js +++ b/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(() => { diff --git a/packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js b/packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js index 2e528a415b49d2..d7cce56d367982 100644 --- a/packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js +++ b/packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js @@ -166,4 +166,4 @@ const RCTTextInputViewConfig = { }, }; -module.exports = (RCTTextInputViewConfig: PartialViewConfigWithoutName); +export default RCTTextInputViewConfig as PartialViewConfigWithoutName; diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js index d429a41604b593..43fd74bd2fd219 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.js +++ b/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; diff --git a/packages/react-native/Libraries/Components/TextInput/TextInputState.js b/packages/react-native/Libraries/Components/TextInput/TextInputState.js index b3dfd5c8ca061b..a7177add6457c6 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInputState.js +++ b/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; diff --git a/packages/react-native/Libraries/Components/TextInput/__tests__/InputAccessoryView-test.js b/packages/react-native/Libraries/Components/TextInput/__tests__/InputAccessoryView-test.js index b0bf085d517b3b..316eda337ecb0a 100644 --- a/packages/react-native/Libraries/Components/TextInput/__tests__/InputAccessoryView-test.js +++ b/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 when mocked', async () => { diff --git a/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js b/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js index 5173b8975acc9e..f8b7fdbd2f2bf5 100644 --- a/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js +++ b/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'); diff --git a/packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.android.js b/packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.android.js index 81e03fd8f30feb..815f702f7b7b8c 100644 --- a/packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.android.js +++ b/packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.android.js @@ -71,4 +71,4 @@ const ToastAndroid = { }, }; -module.exports = ToastAndroid; +export default ToastAndroid; diff --git a/packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.js b/packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.js index ebdd82b59f8a30..c2e061b6b553cd 100644 --- a/packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.js +++ b/packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.js @@ -42,4 +42,4 @@ const ToastAndroid = { }, }; -module.exports = ToastAndroid; +export default ToastAndroid; diff --git a/packages/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js b/packages/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js index 00effa4508e3f9..f7b32329e444ad 100644 --- a/packages/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js +++ b/packages/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js @@ -27,7 +27,7 @@ type Props = $ReadOnly<{ class UnimplementedView extends React.Component { render(): React.Node { // Workaround require cycle from requireNativeComponent - const View = require('../View/View'); + const View = require('../View/View').default; return ( {this.props.children} @@ -46,4 +46,4 @@ const styles = StyleSheet.create({ : {}, }); -module.exports = UnimplementedView; +export default UnimplementedView; diff --git a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js index 428bca4a1fbba7..d684d878050111 100644 --- a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -215,4 +215,4 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { objectFit: true, }; -module.exports = ReactNativeStyleAttributes; +export default ReactNativeStyleAttributes; diff --git a/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js index d07a319837aacb..f5445a02efcd7c 100644 --- a/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js +++ b/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js @@ -57,4 +57,4 @@ const ReactNativeViewAttributes = { RCTView: RCTView, }; -module.exports = ReactNativeViewAttributes; +export default ReactNativeViewAttributes; diff --git a/packages/react-native/Libraries/Components/View/View.js b/packages/react-native/Libraries/Components/View/View.js index f1522cf7a857f3..97b8ba39152fdd 100644 --- a/packages/react-native/Libraries/Components/View/View.js +++ b/packages/react-native/Libraries/Components/View/View.js @@ -130,4 +130,4 @@ const View: component( View.displayName = 'View'; -module.exports = View; +export default View; diff --git a/packages/react-native/Libraries/Components/View/__tests__/View-itest.js b/packages/react-native/Libraries/Components/View/__tests__/View-itest.js index faf23d4e17be2c..f1b5a5a60491a7 100644 --- a/packages/react-native/Libraries/Components/View/__tests__/View-itest.js +++ b/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', () => { diff --git a/packages/react-native/Libraries/Components/View/__tests__/View-test.js b/packages/react-native/Libraries/Components/View/__tests__/View-test.js index 1102acc61ca23c..39db27fc3428f5 100644 --- a/packages/react-native/Libraries/Components/View/__tests__/View-test.js +++ b/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'); diff --git a/packages/react-native/Libraries/Core/setUpReactDevTools.js b/packages/react-native/Libraries/Core/setUpReactDevTools.js index 6dbeb5f04fcd0a..5b366e6056572d 100644 --- a/packages/react-native/Libraries/Core/setUpReactDevTools.js +++ b/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) { diff --git a/packages/react-native/Libraries/Image/__tests__/assetRelativePathInSnapshot-test.js b/packages/react-native/Libraries/Image/__tests__/assetRelativePathInSnapshot-test.js index 6ecc501872debe..c71823bbed35e0 100644 --- a/packages/react-native/Libraries/Image/__tests__/assetRelativePathInSnapshot-test.js +++ b/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( diff --git a/packages/react-native/Libraries/Inspector/BorderBox.js b/packages/react-native/Libraries/Inspector/BorderBox.js index 600db4f1b7af68..e0033e0b2bec7c 100644 --- a/packages/react-native/Libraries/Inspector/BorderBox.js +++ b/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, diff --git a/packages/react-native/Libraries/Inspector/BoxInspector.js b/packages/react-native/Libraries/Inspector/BoxInspector.js index 8e67f3b97eaa50..bfafab9d022423 100644 --- a/packages/react-native/Libraries/Inspector/BoxInspector.js +++ b/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'); diff --git a/packages/react-native/Libraries/Inspector/ElementBox.js b/packages/react-native/Libraries/Inspector/ElementBox.js index 35d0c697db2ec4..46f69af1f618a9 100644 --- a/packages/react-native/Libraries/Inspector/ElementBox.js +++ b/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; diff --git a/packages/react-native/Libraries/Inspector/ElementProperties.js b/packages/react-native/Libraries/Inspector/ElementProperties.js index 5900a77f41f284..1d161c161137ba 100644 --- a/packages/react-native/Libraries/Inspector/ElementProperties.js +++ b/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'); diff --git a/packages/react-native/Libraries/Inspector/Inspector.js b/packages/react-native/Libraries/Inspector/Inspector.js index 85a239b01b4630..26d6d8bf5d06e8 100644 --- a/packages/react-native/Libraries/Inspector/Inspector.js +++ b/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'); diff --git a/packages/react-native/Libraries/Inspector/InspectorOverlay.js b/packages/react-native/Libraries/Inspector/InspectorOverlay.js index 6f19c7339a6d0c..3f9a3025c85a10 100644 --- a/packages/react-native/Libraries/Inspector/InspectorOverlay.js +++ b/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'); diff --git a/packages/react-native/Libraries/Inspector/InspectorPanel.js b/packages/react-native/Libraries/Inspector/InspectorPanel.js index 812eb08bf816dc..52ae41eb94b8be 100644 --- a/packages/react-native/Libraries/Inspector/InspectorPanel.js +++ b/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'); diff --git a/packages/react-native/Libraries/Inspector/NetworkOverlay.js b/packages/react-native/Libraries/Inspector/NetworkOverlay.js index 10346dfea0ee70..44d596b9ab4ee4 100644 --- a/packages/react-native/Libraries/Inspector/NetworkOverlay.js +++ b/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'); diff --git a/packages/react-native/Libraries/Inspector/PerformanceOverlay.js b/packages/react-native/Libraries/Inspector/PerformanceOverlay.js index ec30fbbb8bdbf6..7dc4730cec601d 100644 --- a/packages/react-native/Libraries/Inspector/PerformanceOverlay.js +++ b/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'); diff --git a/packages/react-native/Libraries/Inspector/StyleInspector.js b/packages/react-native/Libraries/Inspector/StyleInspector.js index ac757adfe882b6..8c3472e843b06d 100644 --- a/packages/react-native/Libraries/Inspector/StyleInspector.js +++ b/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'); diff --git a/packages/react-native/Libraries/Modal/Modal.js b/packages/react-native/Libraries/Modal/Modal.js index 1af2281d52b3fe..7247506593f971 100644 --- a/packages/react-native/Libraries/Modal/Modal.js +++ b/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'); diff --git a/packages/react-native/Libraries/Modal/__tests__/Modal-test.js b/packages/react-native/Libraries/Modal/__tests__/Modal-test.js index 364f083ce3be67..bdd2b23b63f38a 100644 --- a/packages/react-native/Libraries/Modal/__tests__/Modal-test.js +++ b/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'); diff --git a/packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js b/packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js index 2af83f4c4e5298..949e9e2a4eb505 100644 --- a/packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js +++ b/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; diff --git a/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js b/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js index 3c5385d23b4a98..e9d4cda55bc139 100644 --- a/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js +++ b/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'); diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheet.js b/packages/react-native/Libraries/StyleSheet/StyleSheet.js index a57a8d9e6347ee..890a839acb1c3f 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheet.js +++ b/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'; diff --git a/packages/react-native/Libraries/Utilities/ReactNativeTestTools.js b/packages/react-native/Libraries/Utilities/ReactNativeTestTools.js index 208deddeffcd08..6ca88ffaeb8307 100644 --- a/packages/react-native/Libraries/Utilities/ReactNativeTestTools.js +++ b/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'); diff --git a/packages/react-native/Libraries/Utilities/dismissKeyboard.js b/packages/react-native/Libraries/Utilities/dismissKeyboard.js index fd14c37bdc4a29..9de937dac95894 100644 --- a/packages/react-native/Libraries/Utilities/dismissKeyboard.js +++ b/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()); diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index be2e248ca4f36e..100ec5b30623a1 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -2796,7 +2796,7 @@ exports[`public API should not change unintentionally Libraries/Components/TextI PartialViewConfig, { uiViewClassName: string }, >; -declare module.exports: PartialViewConfigWithoutName; +declare export default PartialViewConfigWithoutName; " `; @@ -3485,7 +3485,7 @@ export type TextInputComponentStatics = $ReadOnly<{ blurTextInput: typeof TextInputState.blurTextInput, }>, }>; -declare module.exports: TextInputType; +declare export default TextInputType; " `; @@ -3518,7 +3518,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, @@ -3531,6 +3531,7 @@ declare module.exports: { unregisterInput: unregisterInput, isTextInput: isTextInput, }; +declare export default typeof TextInputState; " `; @@ -3557,7 +3558,7 @@ exports[`public API should not change unintentionally Libraries/Components/Toast yOffset: number ) => void, }; -declare module.exports: ToastAndroid; +declare export default typeof ToastAndroid; " `; @@ -3899,13 +3900,13 @@ exports[`public API should not change unintentionally Libraries/Components/Unimp declare class UnimplementedView extends React.Component { 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; " `; @@ -3941,7 +3942,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; " `; @@ -3951,7 +3952,7 @@ declare const View: component( ref: React.RefSetter>, ...props: ViewProps ); -declare module.exports: View; +declare export default typeof View; " `; diff --git a/packages/react-native/index.js b/packages/react-native/index.js index 9c67858e31b7a1..d6a70f2c2b2e5b 100644 --- a/packages/react-native/index.js +++ b/packages/react-native/index.js @@ -186,7 +186,7 @@ module.exports = { return require('./Libraries/Text/Text'); }, 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'); diff --git a/packages/react-native/jest/mockScrollView.js b/packages/react-native/jest/mockScrollView.js index 4d42a206ff73b0..843071b672409a 100644 --- a/packages/react-native/jest/mockScrollView.js +++ b/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'); diff --git a/packages/react-native/jest/setup.js b/packages/react-native/jest/setup.js index a8d9fb29a6130b..e0a1a0ac3059b1 100644 --- a/packages/react-native/jest/setup.js +++ b/packages/react-native/jest/setup.js @@ -123,22 +123,32 @@ jest .mock('../Libraries/Text/Text', () => mockComponent('../Libraries/Text/Text', MockNativeMethods), ) - .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: { diff --git a/packages/rn-tester/js/examples/Snapshot/SnapshotViewIOS.android.js b/packages/rn-tester/js/examples/Snapshot/SnapshotViewIOS.android.js index 5e6d840c88342a..e9109b4bf9354a 100644 --- a/packages/rn-tester/js/examples/Snapshot/SnapshotViewIOS.android.js +++ b/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;