From cb6bd756c758b4bf678669b738690993a7f7f470 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Sat, 17 May 2025 22:50:01 -0700 Subject: [PATCH 1/6] RN: Migrate to ESM - Libraries/Components/Image (#51434) Summary: Migrates files to use ESM to mitigate the existing lint warning. I am suppressing `RelativeImageStub` to preserve compatibility with the dynamic asset exports generated by Metro (i.e. not ESM with `default` exports). Changelog: [Internal] Reviewed By: SamChou19815 Differential Revision: D74943031 --- .../react-native/Libraries/Image/AssetRegistry.js | 14 ++++---------- .../Libraries/Image/RelativeImageStub.js | 1 + .../__snapshots__/public-api-test.js.snap | 9 ++++----- 3 files changed, 9 insertions(+), 15 deletions(-) diff --git a/packages/react-native/Libraries/Image/AssetRegistry.js b/packages/react-native/Libraries/Image/AssetRegistry.js index 1209f16eb2ae..3e1785346ff3 100644 --- a/packages/react-native/Libraries/Image/AssetRegistry.js +++ b/packages/react-native/Libraries/Image/AssetRegistry.js @@ -8,13 +8,7 @@ * @format */ -'use strict'; - -import type {PackagerAsset} from '@react-native/assets-registry/registry'; - -const AssetRegistry = require('@react-native/assets-registry/registry') as { - registerAsset: (asset: PackagerAsset) => number, - getAssetByID: (assetId: number) => PackagerAsset, -}; - -module.exports = AssetRegistry; +export { + registerAsset, + getAssetByID, +} from '@react-native/assets-registry/registry'; diff --git a/packages/react-native/Libraries/Image/RelativeImageStub.js b/packages/react-native/Libraries/Image/RelativeImageStub.js index 355ff92c22aa..486aec9b299c 100644 --- a/packages/react-native/Libraries/Image/RelativeImageStub.js +++ b/packages/react-native/Libraries/Image/RelativeImageStub.js @@ -27,4 +27,5 @@ const RelativeImageStub = (AssetRegistry.registerAsset({ type: 'png', }): number); +// eslint-disable-next-line lint/no-commonjs-exports module.exports = RelativeImageStub; 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 d27466b6808c..10b1720cc639 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 @@ -4219,11 +4219,10 @@ declare export default typeof RCTNativeAppEventEmitter; `; exports[`public API should not change unintentionally Libraries/Image/AssetRegistry.js 1`] = ` -"declare const AssetRegistry: { - registerAsset: (asset: PackagerAsset) => number, - getAssetByID: (assetId: number) => PackagerAsset, -}; -declare module.exports: typeof AssetRegistry; +"export { + registerAsset, + getAssetByID, +} from \\"@react-native/assets-registry/registry\\"; " `; From c37a5c66a4fdde1d338e2dbb7be39bc80a791219 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Sat, 17 May 2025 22:50:01 -0700 Subject: [PATCH 2/6] RN: Migrate to ESM - __flowtests__ (#51437) Summary: Migrates files to use ESM to mitigate the existing lint warning. Changelog: [Internal] Differential Revision: D74949792 --- .../Lists/__flowtests__/FlatList-flowtest.js | 180 ++++++++-------- .../__flowtests__/SectionList-flowtest.js | 198 +++++++++--------- .../__flowtests__/StyleSheet-flowtest.js | 60 +++--- 3 files changed, 213 insertions(+), 225 deletions(-) diff --git a/packages/react-native/Libraries/Lists/__flowtests__/FlatList-flowtest.js b/packages/react-native/Libraries/Lists/__flowtests__/FlatList-flowtest.js index 4c2bb6b85aae..18042946737a 100644 --- a/packages/react-native/Libraries/Lists/__flowtests__/FlatList-flowtest.js +++ b/packages/react-native/Libraries/Lists/__flowtests__/FlatList-flowtest.js @@ -8,8 +8,6 @@ * @format */ -'use strict'; - const FlatList = require('../FlatList').default; const React = require('react'); @@ -21,98 +19,96 @@ function renderMyListItem(info: { return ; } -module.exports = { - testEverythingIsFine(): React.Node { - const data = [ - { - title: 'Title Text', - key: 1, - }, - ]; - return ; - }, +export function testEverythingIsFine(): React.Node { + const data = [ + { + title: 'Title Text', + key: 1, + }, + ]; + return ; +} - testBadDataWithTypicalItem(): React.Node { - const data = [ - { - title: 6, - key: 1, - }, - ]; - // $FlowExpectedError - bad title type 6, should be string - return ; - }, +export function testBadDataWithTypicalItem(): React.Node { + const data = [ + { + title: 6, + key: 1, + }, + ]; + // $FlowExpectedError - bad title type 6, should be string + return ; +} - testMissingFieldWithTypicalItem(): React.Node { - const data = [ - { - key: 1, - }, - ]; - // $FlowExpectedError - missing title - return ; - }, +export function testMissingFieldWithTypicalItem(): React.Node { + const data = [ + { + key: 1, + }, + ]; + // $FlowExpectedError - missing title + return ; +} - testGoodDataWithBadCustomRenderItemFunction(): React.Node { - const data = [ - { - widget: 6, - key: 1, - }, - ]; - return ( - ( - - { - // $FlowExpectedError - bad widgetCount type 6, should be Object - info.item.widget.missingProp - } - - )} - data={data} - /> - ); - }, +export function testGoodDataWithBadCustomRenderItemFunction(): React.Node { + const data = [ + { + widget: 6, + key: 1, + }, + ]; + return ( + ( + + { + // $FlowExpectedError - bad widgetCount type 6, should be Object + info.item.widget.missingProp + } + + )} + data={data} + /> + ); +} - testBadRenderItemFunction(): $ReadOnlyArray { - const data = [ - { - title: 'foo', - key: 1, - }, - ]; - return [ - // $FlowExpectedError - title should be inside `item` - } data={data} />, - } - data={data} - />, - } - // $FlowExpectedError - bad title type number, should be string - data={data} - />, - // EverythingIsFine - } - data={data} - />, - ]; - }, +export function testBadRenderItemFunction(): $ReadOnlyArray { + const data = [ + { + title: 'foo', + key: 1, + }, + ]; + return [ + // $FlowExpectedError - title should be inside `item` + } data={data} />, + } + data={data} + />, + } + // $FlowExpectedError - bad title type number, should be string + data={data} + />, + // EverythingIsFine + } + data={data} + />, + ]; +} - testOtherBadProps(): $ReadOnlyArray { - return [ - // $FlowExpectedError - bad numColumns type "lots" - , - // $FlowExpectedError - bad windowSize type "big" - , - // $FlowExpectedError - missing `data` prop - , - ]; - }, -}; +export function testOtherBadProps(): $ReadOnlyArray { + return [ + // $FlowExpectedError - bad numColumns type "lots" + , + // $FlowExpectedError - bad windowSize type "big" + , + // $FlowExpectedError - missing `data` prop + , + ]; +} diff --git a/packages/react-native/Libraries/Lists/__flowtests__/SectionList-flowtest.js b/packages/react-native/Libraries/Lists/__flowtests__/SectionList-flowtest.js index 60fc3086734f..f954e9e8b034 100644 --- a/packages/react-native/Libraries/Lists/__flowtests__/SectionList-flowtest.js +++ b/packages/react-native/Libraries/Lists/__flowtests__/SectionList-flowtest.js @@ -8,8 +8,6 @@ * @format */ -'use strict'; - import SectionList from '../SectionList'; import * as React from 'react'; @@ -28,107 +26,105 @@ const renderMyHeader = ({ ... }) => ; -module.exports = { - testGoodDataWithGoodItem(): React.Node { - const sections = [ - { - key: 'a', - data: [ - { - title: 'foo', - key: 1, - }, - ], - }, - ]; - return ; - }, +export function testGoodDataWithGoodItem(): React.Node { + const sections = [ + { + key: 'a', + data: [ + { + title: 'foo', + key: 1, + }, + ], + }, + ]; + return ; +} - testBadRenderItemFunction(): $ReadOnlyArray { - const sections = [ - { - key: 'a', - data: [ - { - title: 'foo', - key: 1, - }, - ], - }, - ]; - return [ - } - sections={sections} - />, - } - sections={sections} - />, - // EverythingIsFine - } - sections={sections} - />, - ]; - }, +export function testBadRenderItemFunction(): $ReadOnlyArray { + const sections = [ + { + key: 'a', + data: [ + { + title: 'foo', + key: 1, + }, + ], + }, + ]; + return [ + } + sections={sections} + />, + } + sections={sections} + />, + // EverythingIsFine + } + sections={sections} + />, + ]; +} - testBadInheritedDefaultProp(): React.MixedElement { - const sections: $FlowFixMe = []; - return ( - - ); - }, +export function testBadInheritedDefaultProp(): React.MixedElement { + const sections: $FlowFixMe = []; + return ( + + ); +} - testMissingData(): React.MixedElement { - // $FlowExpectedError - missing `sections` prop - return ; - }, +export function testMissingData(): React.MixedElement { + // $FlowExpectedError - missing `sections` prop + return ; +} - testBadSectionsShape(): React.MixedElement { - const sections = [ - { - key: 'a', - items: [ - { - title: 'foo', - key: 1, - }, - ], - }, - ]; - // $FlowExpectedError - section missing `data` field - return ; - }, +export function testBadSectionsShape(): React.MixedElement { + const sections = [ + { + key: 'a', + items: [ + { + title: 'foo', + key: 1, + }, + ], + }, + ]; + // $FlowExpectedError - section missing `data` field + return ; +} - testBadSectionsMetadata(): React.MixedElement { - const sections = [ - { - key: 'a', - fooNumber: 'string', - data: [ - { - title: 'foo', - key: 1, - }, - ], - }, - ]; - return ( - - ); - }, -}; +export function testBadSectionsMetadata(): React.MixedElement { + const sections = [ + { + key: 'a', + fooNumber: 'string', + data: [ + { + title: 'foo', + key: 1, + }, + ], + }, + ]; + return ( + + ); +} diff --git a/packages/react-native/Libraries/StyleSheet/__flowtests__/StyleSheet-flowtest.js b/packages/react-native/Libraries/StyleSheet/__flowtests__/StyleSheet-flowtest.js index add1d233296e..7f41f0a069c6 100644 --- a/packages/react-native/Libraries/StyleSheet/__flowtests__/StyleSheet-flowtest.js +++ b/packages/react-native/Libraries/StyleSheet/__flowtests__/StyleSheet-flowtest.js @@ -8,51 +8,47 @@ * @format */ -'use strict'; - import type {ImageStyleProp, TextStyleProp} from '../StyleSheet'; const StyleSheet = require('../StyleSheet').default; const imageStyle = {tintColor: 'rgb(0, 0, 0)'}; const textStyle = {color: 'rgb(0, 0, 0)'}; -module.exports = { - testGoodCompose() { - (StyleSheet.compose(imageStyle, imageStyle): ImageStyleProp); - - (StyleSheet.compose(textStyle, textStyle): TextStyleProp); +export function testGoodCompose() { + (StyleSheet.compose(imageStyle, imageStyle): ImageStyleProp); - (StyleSheet.compose(null, null): TextStyleProp); + (StyleSheet.compose(textStyle, textStyle): TextStyleProp); - (StyleSheet.compose(textStyle, null): TextStyleProp); + (StyleSheet.compose(null, null): TextStyleProp); - (StyleSheet.compose( - textStyle, - Math.random() < 0.5 ? textStyle : null, - ): TextStyleProp); + (StyleSheet.compose(textStyle, null): TextStyleProp); - (StyleSheet.compose([textStyle], null): TextStyleProp); + (StyleSheet.compose( + textStyle, + Math.random() < 0.5 ? textStyle : null, + ): TextStyleProp); - (StyleSheet.compose([textStyle], null): TextStyleProp); + (StyleSheet.compose([textStyle], null): TextStyleProp); - (StyleSheet.compose([textStyle], [textStyle]): TextStyleProp); - }, + (StyleSheet.compose([textStyle], null): TextStyleProp); - testBadCompose() { - // $FlowExpectedError - Incompatible type. - (StyleSheet.compose(textStyle, textStyle): ImageStyleProp); + (StyleSheet.compose([textStyle], [textStyle]): TextStyleProp); +} - // $FlowExpectedError - Incompatible type. - (StyleSheet.compose( - // $FlowExpectedError - Incompatible type. - [textStyle], - null, - ): ImageStyleProp); +export function testBadCompose() { + // $FlowExpectedError - Incompatible type. + (StyleSheet.compose(textStyle, textStyle): ImageStyleProp); + // $FlowExpectedError - Incompatible type. + (StyleSheet.compose( // $FlowExpectedError - Incompatible type. - (StyleSheet.compose( - Math.random() < 0.5 ? textStyle : null, - null, - ): ImageStyleProp); - }, -}; + [textStyle], + null, + ): ImageStyleProp); + + // $FlowExpectedError - Incompatible type. + (StyleSheet.compose( + Math.random() < 0.5 ? textStyle : null, + null, + ): ImageStyleProp); +} From d7812d296b7d38ca5b790e85e197539cc0409a48 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Sat, 17 May 2025 22:50:01 -0700 Subject: [PATCH 3/6] RN: Suppress Lint Error in `ReactNativePrivateInterface` (#51438) Summary: The `ReactNativePrivateInterface` module needs to continue using `module.exports` in order to lazily import dependencies. For now, we just suppress the `lint/no-commonjs-exports` lint rule. Changelog: [Internal] Differential Revision: D74949839 --- .../Libraries/ReactPrivate/ReactNativePrivateInterface.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js b/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js index fc0496354384..2583007f12ed 100644 --- a/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js +++ b/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js @@ -51,6 +51,7 @@ export type {PublicRootInstance} from '../ReactNative/ReactFabricPublicInstance/ export type PublicTextInstance = ReturnType; // flowlint unsafe-getters-setters:off +// eslint-disable-next-line lint/no-commonjs-exports module.exports = { get BatchedBridge(): BatchedBridge { return require('../BatchedBridge/BatchedBridge').default; From 897f9b0f1988ec8a3767c0fbf4d07b81ed85a90d Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Sat, 17 May 2025 22:50:01 -0700 Subject: [PATCH 4/6] RN: Migrate to ESM - BackHandler (#51439) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: Migrates the `BackHandler` mock to use ESM to mitigate the existing lint warning. I'm actually not sure this is even used anywhere… and the unmocked `BackHandler` is already using ESM. Changelog: [Internal] Differential Revision: D74949885 --- .../react-native/Libraries/Utilities/__mocks__/BackHandler.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/Utilities/__mocks__/BackHandler.js b/packages/react-native/Libraries/Utilities/__mocks__/BackHandler.js index bc5bc62dfea0..426bb6ed8c6f 100644 --- a/packages/react-native/Libraries/Utilities/__mocks__/BackHandler.js +++ b/packages/react-native/Libraries/Utilities/__mocks__/BackHandler.js @@ -42,4 +42,4 @@ const BackHandler = { }, }; -module.exports = BackHandler; +export default BackHandler; From 0b6dfe7cd34b06612d31355f40577c35aeca1454 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Sat, 17 May 2025 22:50:01 -0700 Subject: [PATCH 5/6] RN: Migrate to ESM - ReactDevToolsSettingsManager (#51440) Summary: Migrates files to use ESM to mitigate the existing lint warning. Changelog: [Internal] Differential Revision: D74949984 --- .../ReactDevToolsSettingsManager.android.js | 17 ++++++------ .../ReactDevToolsSettingsManager.ios.js | 27 +++++++++---------- .../ReactDevToolsSettingsManager.js.flow | 10 +++---- 3 files changed, 23 insertions(+), 31 deletions(-) diff --git a/packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.android.js b/packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.android.js index 96d6f94b6afe..bc95304aa0e9 100644 --- a/packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.android.js +++ b/packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.android.js @@ -4,17 +4,16 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @flow strict-local + * @flow strict * @format */ import NativeReactDevToolsSettingsManager from './specs/NativeReactDevToolsSettingsManager'; -module.exports = { - setGlobalHookSettings(settings: string) { - NativeReactDevToolsSettingsManager?.setGlobalHookSettings(settings); - }, - getGlobalHookSettings(): ?string { - return NativeReactDevToolsSettingsManager?.getGlobalHookSettings(); - }, -}; +export function setGlobalHookSettings(settings: string) { + NativeReactDevToolsSettingsManager?.setGlobalHookSettings(settings); +} + +export function getGlobalHookSettings(): ?string { + return NativeReactDevToolsSettingsManager?.getGlobalHookSettings(); +} diff --git a/packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.ios.js b/packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.ios.js index 91ac55995c00..12b10e4c5583 100644 --- a/packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.ios.js +++ b/packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.ios.js @@ -12,19 +12,16 @@ import Settings from '../../../../Libraries/Settings/Settings'; const GLOBAL_HOOK_SETTINGS = 'ReactDevTools::HookSettings'; -const ReactDevToolsSettingsManager = { - setGlobalHookSettings(settings: string): void { - Settings.set({ - [GLOBAL_HOOK_SETTINGS]: settings, - }); - }, - getGlobalHookSettings(): ?string { - const value = Settings.get(GLOBAL_HOOK_SETTINGS); - if (typeof value === 'string') { - return value; - } - return null; - }, -}; +export function setGlobalHookSettings(settings: string) { + Settings.set({ + [GLOBAL_HOOK_SETTINGS]: settings, + }); +} -module.exports = ReactDevToolsSettingsManager; +export function getGlobalHookSettings(): ?string { + const value = Settings.get(GLOBAL_HOOK_SETTINGS); + if (typeof value === 'string') { + return value; + } + return null; +} diff --git a/packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.js.flow b/packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.js.flow index f0e19aa5b53f..f50b8a2df652 100644 --- a/packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.js.flow +++ b/packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.js.flow @@ -4,13 +4,9 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @flow strict-local + * @flow strict * @format */ -declare const ReactDevToolsSettingsManager: { - setGlobalHookSettings(settings: string): void, - getGlobalHookSettings(): ?string, -}; - -module.exports = ReactDevToolsSettingsManager; +declare export function setGlobalHookSettings(settings: string): void; +declare export function getGlobalHookSettings(): ?string; From f931c1c8e6f819f03447cca4d46dc2186f6d5f6c Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Sat, 17 May 2025 22:50:01 -0700 Subject: [PATCH 6/6] RN: Unbreak Rules of React in `RNTesterPlatformTestEventRecorder` Summary: Refactors `RNTesterPlatformTestEventRecorder` so that it does not use `useMemo` from an instance method. Instead, this diff changes the module to export a hook by the same name, `useRecorderTestEventHandlers`. Changelog: [Internal] Differential Revision: D74950333 --- .../RNTesterPlatformTestEventRecorder.js | 68 ++++++++++--------- .../PointerEventPointerMoveAcross.js | 7 +- .../PointerEventPointerMoveBetween.js | 7 +- .../PointerEventPointerMoveEventOrder.js | 7 +- 4 files changed, 50 insertions(+), 39 deletions(-) diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js index 3cc360bafac0..77d54ecea8b3 100644 --- a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js +++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js @@ -26,7 +26,7 @@ type EventRecord = { event: Object, }; -class RNTesterPlatformTestEventRecorder { +export default class RNTesterPlatformTestEventRecorder { allRecords: Array = []; relevantEvents: Array = []; rawOrder: number = 1; @@ -101,41 +101,34 @@ class RNTesterPlatformTestEventRecorder { }; } - useRecorderTestEventHandlers( + createRecorderTestEventHandlers( targetNames: $ReadOnlyArray, callback?: (event: Object, eventType: string, targetName: string) => void, ): $ReadOnly<{[targetName: string]: ViewProps}> { - // Yes this method exists as a class's prototype method but it will still only be used - // in functional components - // prettier-ignore - // $FlowFixMe[react-rule-hook] - return useMemo(() => { // eslint-disable-line react-hooks/rules-of-hooks - const result: {[targetName: string]: ViewProps} = {}; - for (const targetName of targetNames) { - const recordedEventHandler = - this._generateRecordedEventHandlerWithCallback( - targetName, - (event, eventType) => - callback && callback(event, eventType, targetName), - ); - // $FlowFixMe[incompatible-call] - const eventListenerProps = this.relevantEvents.reduce( - (acc: ViewProps, eventName) => { - const eventPropName = - 'on' + eventName[0].toUpperCase() + eventName.slice(1); - return { - ...acc, - [eventPropName]: (e => { - recordedEventHandler(e, eventName); - }) as $FlowFixMe, - }; - }, - {}, + const result: {[targetName: string]: ViewProps} = {}; + for (const targetName of targetNames) { + const recordedEventHandler = + this._generateRecordedEventHandlerWithCallback( + targetName, + (event, eventType) => callback?.(event, eventType, targetName), ); - result[targetName] = eventListenerProps; - } - return result; - }, [callback, targetNames]); + // $FlowFixMe[incompatible-call] + const eventListenerProps = this.relevantEvents.reduce( + (acc: ViewProps, eventName) => { + const eventPropName = + 'on' + eventName[0].toUpperCase() + eventName.slice(1); + return { + ...acc, + [eventPropName]: (e => { + recordedEventHandler(e, eventName); + }) as $FlowFixMe, + }; + }, + {}, + ); + result[targetName] = eventListenerProps; + } + return result; } getRecords(): Array { @@ -176,4 +169,13 @@ class RNTesterPlatformTestEventRecorder { } } -export default RNTesterPlatformTestEventRecorder; +export function useRecorderTestEventHandlers( + eventRecorder: RNTesterPlatformTestEventRecorder, + targetNames: $ReadOnlyArray, + callback?: (event: Object, eventType: string, targetName: string) => void, +): $ReadOnly<{[targetName: string]: ViewProps}> { + return useMemo( + () => eventRecorder.createRecorderTestEventHandlers(targetNames, callback), + [eventRecorder, targetNames, callback], + ); +} diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveAcross.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveAcross.js index 26574a1076df..bf6afd99125a 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveAcross.js +++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveAcross.js @@ -11,7 +11,9 @@ import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes'; import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest'; -import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder'; +import RNTesterPlatformTestEventRecorder, { + useRecorderTestEventHandlers, +} from '../PlatformTest/RNTesterPlatformTestEventRecorder'; import * as React from 'react'; import {useCallback, useState} from 'react'; import {StyleSheet, View} from 'react-native'; @@ -126,7 +128,8 @@ function PointerEventPointerMoveAcrossTestCase( [eventRecorder, pointermove_across], ); - const eventProps = eventRecorder.useRecorderTestEventHandlers( + const eventProps = useRecorderTestEventHandlers( + eventRecorder, targetNames, eventHandler, ); diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js index f72b5761de7f..79e4007f2f1c 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js +++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js @@ -11,7 +11,9 @@ import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes'; import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest'; -import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder'; +import RNTesterPlatformTestEventRecorder, { + useRecorderTestEventHandlers, +} from '../PlatformTest/RNTesterPlatformTestEventRecorder'; import * as React from 'react'; import {useCallback, useState} from 'react'; import {StyleSheet, View} from 'react-native'; @@ -102,7 +104,8 @@ function PointerEventPointerMoveBetweenTestCase( [eventRecorder, pointermove_between], ); - const eventProps = eventRecorder.useRecorderTestEventHandlers( + const eventProps = useRecorderTestEventHandlers( + eventRecorder, targetNames, eventHandler, ); diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js index 232d145beee4..19986a80ed27 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js +++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js @@ -12,7 +12,9 @@ import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatf import type {PointerEvent} from 'react-native'; import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest'; -import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder'; +import RNTesterPlatformTestEventRecorder, { + useRecorderTestEventHandlers, +} from '../PlatformTest/RNTesterPlatformTestEventRecorder'; import * as React from 'react'; import {useCallback, useState} from 'react'; import {StyleSheet, View} from 'react-native'; @@ -111,7 +113,8 @@ function PointerEventPointerMoveEventOrderTestCase( [endMoved, eventRecorder, pointer_test, startMoved], ); - const eventProps = eventRecorder.useRecorderTestEventHandlers( + const eventProps = useRecorderTestEventHandlers( + eventRecorder, ['start', 'end'], eventHandler, );