@office-iss/react-native-win32 0.0.0-canary.257 → 0.0.0-canary.259

package/Libraries/TurboModule/TurboModuleRegistry.js

@@ -16,52 +16,25 @@ const NativeModules = require('../BatchedBridge/NativeModules');
 
 const turboModuleProxy = global.__turboModuleProxy;
 
-const moduleLoadHistory = {
-  NativeModules: ([]: Array<string>),
-  TurboModules: ([]: Array<string>),
-  NotFound: ([]: Array<string>),
-};
+const useLegacyNativeModuleInterop =
+  global.RN$Bridgeless !== true || global.RN$TurboInterop === true;
 
-function isBridgeless() {
-  return global.RN$Bridgeless === true;
-}
-
-function isTurboModuleInteropEnabled() {
-  return global.RN$TurboInterop === true;
-}
-
-// TODO(154308585): Remove "module not found" debug info logging
-function shouldReportDebugInfo() {
-  return true;
-}
-
-// TODO(148943970): Consider reversing the lookup here:
-// Lookup on __turboModuleProxy, then lookup on nativeModuleProxy
 function requireModule<T: TurboModule>(name: string): ?T {
-  if (!isBridgeless() || isTurboModuleInteropEnabled()) {
-    // Backward compatibility layer during migration.
-    const legacyModule = NativeModules[name];
-    if (legacyModule != null) {
-      if (shouldReportDebugInfo()) {
-        moduleLoadHistory.NativeModules.push(name);
-      }
-      return ((legacyModule: $FlowFixMe): T);
-    }
-  }
-
   if (turboModuleProxy != null) {
     const module: ?T = turboModuleProxy(name);
     if (module != null) {
-      if (shouldReportDebugInfo()) {
-        moduleLoadHistory.TurboModules.push(name);
-      }
       return module;
     }
   }
 
-  if (shouldReportDebugInfo() && !moduleLoadHistory.NotFound.includes(name)) {
-    moduleLoadHistory.NotFound.push(name);
+  if (useLegacyNativeModuleInterop) {
+    // Backward compatibility layer during migration.
+    const legacyModule: ?T = NativeModules[name];
+    if (legacyModule != null) {
+      return legacyModule;
+    }
   }
+
   return null;
 }
 
@@ -71,20 +44,10 @@ export function get<T: TurboModule>(name: string): ?T {
 
 export function getEnforcing<T: TurboModule>(name: string): T {
   const module = requireModule<T>(name);
-  let message =
+  invariant(
+    module != null,
     `TurboModuleRegistry.getEnforcing(...): '${name}' could not be found. ` +
-    'Verify that a module by this name is registered in the native binary.';
-
-  if (shouldReportDebugInfo()) {
-    message +=
-      ' Bridgeless mode: ' + (isBridgeless() ? 'true' : 'false') + '. ';
-    message +=
-      'TurboModule interop: ' +
-      (isTurboModuleInteropEnabled() ? 'true' : 'false') +
-      '. ';
-    message += 'Modules loaded: ' + JSON.stringify(moduleLoadHistory);
-  }
-
-  invariant(module != null, message);
+      'Verify that a module by this name is registered in the native binary.',
+  );
   return module;
 }

package/Libraries/Types/CodegenTypes.js

@@ -42,4 +42,6 @@ type DefaultTypes = number | boolean | string | $ReadOnlyArray<string>;
 // eslint-disable-next-line no-unused-vars
 export type WithDefault<Type: DefaultTypes, Value: ?Type | string> = ?Type;
 
-export type EventEmitter<T> = (handler: (T) => mixed) => EventSubscription;
+export type EventEmitter<T> = (
+  handler: (T) => void | Promise<void>,
+) => EventSubscription;

package/Libraries/Utilities/HMRClient.js

@@ -379,6 +379,7 @@ function showCompileError() {
 
   /* $FlowFixMe[class-object-subtyping] added when improving typing for this
    * parameters */
+  // $FlowFixMe[incompatible-type]
   const error: ExtendedError = new Error(message);
   // Symbolicating compile errors is wasted effort
   // because the stack trace is meaningless:

package/Libraries/Utilities/Platform.android.js

@@ -31,7 +31,7 @@ const Platform: PlatformType = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string,
     |},
     Version: number,
     Release: string,

package/Libraries/Utilities/Platform.d.ts

@@ -24,7 +24,7 @@ type PlatformConstants = {
     major: number;
     minor: number;
     patch: number;
-    prerelease?: number | null | undefined;
+    prerelease?: string | null | undefined;
   };
 };
 interface PlatformStatic {

package/Libraries/Utilities/Platform.flow.js

@@ -32,7 +32,7 @@ type IOSPlatform = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string,
     |},
     systemName: string,
     isMacCatalyst?: boolean,
@@ -65,7 +65,7 @@ type AndroidPlatform = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string,
     |},
     Version: number,
     Release: string,

package/Libraries/Utilities/Platform.flow.win32.js

@@ -34,7 +34,7 @@ type IOSPlatform = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?string | number,
+      prerelease: ?string,
     |},
     isMacCatalyst?: boolean,
   |},
@@ -66,7 +66,7 @@ type AndroidPlatform = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string,
     |},
     Version: number,
     Release: string,
@@ -105,7 +105,7 @@ type Win32Platform = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?string | number,
+      prerelease: ?string,
     |},
     systemName: string,
     isMacCatalyst?: boolean,

package/Libraries/Utilities/Platform.ios.js

@@ -34,7 +34,7 @@ const Platform: PlatformType = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string,
     |},
     systemName: string,
     isMacCatalyst?: boolean,

package/Libraries/Utilities/Platform.win32.js

@@ -32,7 +32,7 @@ const Platform: PlatformType = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?string | number,
+      prerelease: ?string,
     |},
     systemName: string,
     isMacCatalyst?: boolean,

package/Libraries/vendor/emitter/EventEmitter.js

@@ -113,6 +113,7 @@ export default class EventEmitter<TEventToArgsMap: {...}>
       // Copy `registrations` to take a snapshot when we invoke `emit`, in case
       // registrations are added or removed when listeners are invoked.
       for (const registration of Array.from(registrations)) {
+        // $FlowFixMe[incompatible-call]
         registration.listener.apply(registration.context, args);
       }
     }

package/index.js

@@ -9,6 +9,7 @@
  */
 
 'use strict';
+'use client';
 
 // APIs
 import typeof ActionSheetIOS from './Libraries/ActionSheetIOS/ActionSheetIOS';

package/index.win32.js

@@ -9,6 +9,7 @@
  */
 
 'use strict';
+'use client';
 
 // APIs
 import typeof ActionSheetIOS from './Libraries/ActionSheetIOS/ActionSheetIOS';

package/jest/mockComponent.js

@@ -16,7 +16,10 @@ module.exports = (moduleName, instanceMethods, isESModule) => {
   const React = require('react');
 
   const SuperClass =
-    typeof RealComponent === 'function' ? RealComponent : React.Component;
+    typeof RealComponent === 'function' &&
+    RealComponent.prototype.constructor instanceof React.Component
+      ? RealComponent
+      : React.Component;
 
   const name =
     RealComponent.displayName ||

package/jest/setup.js

@@ -287,7 +287,14 @@ jest
     },
     PlatformConstants: {
       getConstants() {
-        return {};
+        return {
+          reactNativeVersion: {
+            major: 1000,
+            minor: 0,
+            patch: 0,
+            prerelease: undefined,
+          },
+        };
       },
     },
     PushNotificationManager: {

package/overrides.json

@@ -7,19 +7,19 @@
     "**/__snapshots__/**",
     "src-win/rntypes/**"
   ],
-  "baseVersion": "0.75.0-nightly-20240618-5df5ed1a8",
+  "baseVersion": "0.76.0-nightly-20240719-6d56cea28",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "75582b181be0cd6790f7c021bfafb761dfc42381"
+      "baseHash": "83d25eb077cc8d865039ec211f3fedeac9e57d39"
     },
     {
       "type": "derived",
       "file": "src-win/index.win32.js",
       "baseFile": "packages/react-native/index.js",
-      "baseHash": "dd3b224f82882d17be0a79a368b293c9ac6599a0"
+      "baseHash": "2690130ef7a40e3fb37fc465979e69b1036cdae8"
     },
     {
       "type": "platform",
@@ -29,7 +29,7 @@
       "type": "patch",
       "file": "src-win/Libraries/Alert/Alert.win32.js",
       "baseFile": "packages/react-native/Libraries/Alert/Alert.js",
-      "baseHash": "897569d77df852480332b7ce7ec1b594cf40aa28"
+      "baseHash": "173b99e6ae120f14176cf3425877728787d3feed"
     },
     {
       "type": "derived",
@@ -116,7 +116,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Components/TextInput/TextInput.win32.js",
       "baseFile": "packages/react-native/Libraries/Components/TextInput/TextInput.js",
-      "baseHash": "dad569fd3dd81f212afd7b35ffe75108e926eb5e"
+      "baseHash": "2cc1ee09c4a71e79656db18576b4983cfca153ed"
     },
     {
       "type": "patch",
@@ -317,7 +317,7 @@
       "type": "patch",
       "file": "src-win/Libraries/LogBox/UI/LogBoxInspectorHeader.win32.js",
       "baseFile": "packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js",
-      "baseHash": "e85290422895e30d58e2d804f11e73407a743282",
+      "baseHash": "46b6ee5d65a0c820dd0a2415bd8f43e5e8807bae",
       "issue": 7952
     },
     {
@@ -344,7 +344,7 @@
       "type": "derived",
       "file": "src-win/Libraries/NativeComponent/BaseViewConfig.win32.js",
       "baseFile": "packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js",
-      "baseHash": "d7b9540d5e637cb86b29d119838a4024bfc2b7d6"
+      "baseHash": "86178b8f2e04b5df9e4c8dc8ca412c22231e6673"
     },
     {
       "type": "copy",
@@ -439,7 +439,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Text/Text.win32.js",
       "baseFile": "packages/react-native/Libraries/Text/Text.js",
-      "baseHash": "71c24366f3f0baa9a48ba34c08b255483bf77553"
+      "baseHash": "fa9abb0db816a992824228c520fc0381bf2a1f63"
     },
     {
       "type": "derived",
@@ -498,13 +498,13 @@
       "type": "derived",
       "file": "src-win/Libraries/Utilities/Platform.flow.win32.js",
       "baseFile": "packages/react-native/Libraries/Utilities/Platform.flow.js",
-      "baseHash": "d07d4656dc872e92e873bcce248262132085bd99"
+      "baseHash": "f38efa527b9426ae0178bb2336be2e93af0392ba"
     },
     {
       "type": "derived",
       "file": "src-win/Libraries/Utilities/Platform.win32.js",
       "baseFile": "packages/react-native/Libraries/Utilities/Platform.android.js",
-      "baseHash": "ddd8013d71adc13b3ef3016631012efd096a9518"
+      "baseHash": "33f07d6fddb5290d05c8d4cc490312e3af88c70b"
     },
     {
       "type": "copy",
@@ -528,7 +528,7 @@
       "type": "derived",
       "file": "src-win/src/private/specs/modules/NativePlatformConstantsWin.js",
       "baseFile": "packages/react-native/src/private/specs/modules/NativePlatformConstantsAndroid.js",
-      "baseHash": "b4a125d9134f33aeaba9e06988e18cbb0b4e9e9c"
+      "baseHash": "fa0f34a2de33b641bd63863629087644796d8b59"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.0.0-canary.257",
+  "version": "0.0.0-canary.259",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "repository": {
     "type": "git",
@@ -12,31 +12,31 @@
   "types": "types",
   "scripts": {
     "build": "rnw-scripts build",
-    "bundle": "rnw-scripts prepareBundle && react-native bundle --platform win32 --entry-file ../react-native-win32-tester/js/RNTesterApp.win32.js --bundle-output dist/win32/dev/js/RNTesterApp.bundle --assets-dest dist/win32/dev --sourcemap-output ./dist/win32/dev/js/RNTesterApp.bundle.map",
+    "bundle": "rnw-scripts prepareBundle && npx @react-native-community/cli bundle --platform win32 --entry-file ../react-native-win32-tester/js/RNTesterApp.win32.js --bundle-output dist/win32/dev/js/RNTesterApp.bundle --assets-dest dist/win32/dev --sourcemap-output ./dist/win32/dev/js/RNTesterApp.bundle.map",
     "clean": "rnw-scripts clean",
     "flow-check": "rnw-scripts flow-check",
     "lint:fix": "rnw-scripts lint:fix",
     "lint": "rnw-scripts lint",
     "run-win32-devmain": "npx @office-iss/rex-win32@0.71.15-devmain.16607.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain --useDirectDebugger --useFastRefresh",
     "run-win32": "npx @office-iss/rex-win32@0.71.15-devmain.16607.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDirectDebugger --useFastRefresh",
-    "start": "react-native start --projectRoot ../react-native-win32-tester",
+    "start": "npx @react-native-community/cli start --projectRoot ../react-native-win32-tester",
     "test": "jest",
     "validate-overrides": "react-native-platform-override validate"
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@jest/create-cache-key-function": "^29.6.3",
-    "@react-native-community/cli": "14.0.0-alpha.2",
-    "@react-native-community/cli-platform-android": "14.0.0-alpha.2",
-    "@react-native-community/cli-platform-ios": "14.0.0-alpha.2",
+    "@react-native-community/cli": "14.0.0-alpha.11",
+    "@react-native-community/cli-platform-android": "14.0.0-alpha.11",
+    "@react-native-community/cli-platform-ios": "14.0.0-alpha.11",
     "@react-native/assets": "1.0.0",
-    "@react-native/assets-registry": "0.75.0-nightly-20240618-5df5ed1a8",
-    "@react-native/codegen": "0.75.0-nightly-20240618-5df5ed1a8",
-    "@react-native/community-cli-plugin": "0.75.0-nightly-20240618-5df5ed1a8",
-    "@react-native/gradle-plugin": "0.75.0-nightly-20240618-5df5ed1a8",
-    "@react-native/js-polyfills": "0.75.0-nightly-20240618-5df5ed1a8",
-    "@react-native/normalize-colors": "0.75.0-nightly-20240618-5df5ed1a8",
-    "@react-native/virtualized-lists": "0.75.0-nightly-20240618-5df5ed1a8",
+    "@react-native/assets-registry": "0.76.0-nightly-20240719-6d56cea28",
+    "@react-native/codegen": "0.76.0-nightly-20240719-6d56cea28",
+    "@react-native/community-cli-plugin": "0.76.0-nightly-20240719-6d56cea28",
+    "@react-native/gradle-plugin": "0.76.0-nightly-20240719-6d56cea28",
+    "@react-native/js-polyfills": "0.76.0-nightly-20240719-6d56cea28",
+    "@react-native/normalize-colors": "0.76.0-nightly-20240719-6d56cea28",
+    "@react-native/virtualized-lists": "0.76.0-nightly-20240719-6d56cea28",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
@@ -57,7 +57,7 @@
     "pretty-format": "^26.5.2",
     "promise": "^8.3.0",
     "react-clone-referenced-element": "^1.0.1",
-    "react-devtools-core": "5.1.0",
+    "react-devtools-core": "^5.3.1",
     "react-refresh": "^0.14.0",
     "react-shallow-renderer": "^16.15.0",
     "regenerator-runtime": "^0.13.2",
@@ -65,36 +65,36 @@
     "semver": "^7.1.3",
     "stacktrace-parser": "^0.1.10",
     "whatwg-fetch": "^3.0.0",
-    "ws": "^6.2.2",
+    "ws": "^6.2.3",
     "yargs": "^17.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/eslint-parser": "^7.20.0",
-    "@react-native/metro-config": "0.75.0-nightly-20240614-8b53d41a8",
+    "@react-native/metro-config": "0.76.0-nightly-20240701-9f6cb21ed",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
-    "@rnw-scripts/eslint-config": "1.2.25",
-    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.29",
-    "@rnw-scripts/just-task": "2.3.42",
+    "@rnw-scripts/eslint-config": "1.2.26",
+    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.30",
+    "@rnw-scripts/just-task": "2.3.43",
     "@rnw-scripts/metro-dev-config": "0.0.0",
     "@rnx-kit/jest-preset": "^0.1.17",
     "@types/node": "^18.0.0",
     "@types/prop-types": "15.7.1",
     "@types/react": "^18.2.6",
     "eslint": "^8.19.0",
-    "flow-bin": "^0.217.2",
+    "flow-bin": "^0.241.0",
     "jscodeshift": "^0.14.0",
     "just-scripts": "^1.3.3",
     "prettier": "2.8.8",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
-    "react-native": "0.75.0-nightly-20240618-5df5ed1a8",
-    "react-native-platform-override": "^1.9.44",
+    "react-native": "0.76.0-nightly-20240719-6d56cea28",
+    "react-native-platform-override": "^1.9.45",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "@types/react": "^18.2.6",
     "react": "^19.0.0-rc-fb9a90fa48-20240614",
-    "react-native": "0.75.0-nightly-20240618-5df5ed1a8"
+    "react-native": "0.76.0-nightly-20240719-6d56cea28"
   },
   "beachball": {
     "defaultNpmTag": "canary",

package/src/private/core/components/HScrollViewNativeComponents.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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
+ * @format
+ * @oncall react_native
+ */
+
+import type {ScrollViewNativeProps} from '../../../../Libraries/Components/ScrollView/ScrollViewNativeComponentType';
+import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
+import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {TScrollViewNativeImperativeHandle} from './useSyncOnScroll';
+
+import AndroidHorizontalScrollViewNativeComponent from '../../../../Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent';
+import ScrollContentViewNativeComponent from '../../../../Libraries/Components/ScrollView/ScrollContentViewNativeComponent';
+import ScrollViewNativeComponent from '../../../../Libraries/Components/ScrollView/ScrollViewNativeComponent';
+import Platform from '../../../../Libraries/Utilities/Platform';
+import AndroidHorizontalScrollContentViewNativeComponent from '../../specs/components/AndroidHorizontalScrollContentViewNativeComponent';
+import useSyncOnScroll from './useSyncOnScroll';
+import * as React from 'react';
+
+const HScrollViewNativeComponentForPlatform =
+  Platform.OS === 'android'
+    ? AndroidHorizontalScrollViewNativeComponent
+    : ScrollViewNativeComponent;
+
+export const HScrollViewNativeComponent: React.AbstractComponent<
+  ScrollViewNativeProps,
+  TScrollViewNativeImperativeHandle,
+  // $FlowExpectedError[incompatible-type] - Flow cannot model imperative handles, yet.
+> = function HScrollViewNativeComponent(props: {
+  ...ScrollViewNativeProps,
+  ref?: React.RefSetter<TScrollViewNativeImperativeHandle | null>,
+  ...
+}): React.Node {
+  const [ref, enableSyncOnScroll] = useSyncOnScroll(props.ref);
+  // NOTE: When `useSyncOnScroll` triggers an update, `props` will not have
+  // changed. Notably, `props.children` will be the same, allowing React to
+  // bail out during reconciliation.
+  return (
+    <HScrollViewNativeComponentForPlatform
+      {...props}
+      ref={ref}
+      enableSyncOnScroll={enableSyncOnScroll}
+    />
+  );
+};
+
+export const HScrollContentViewNativeComponent: HostComponent<ViewProps> =
+  Platform.OS === 'android'
+    ? AndroidHorizontalScrollContentViewNativeComponent
+    : ScrollContentViewNativeComponent;

package/src/private/core/components/VScrollViewNativeComponents.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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
+ * @format
+ * @oncall react_native
+ */
+
+import type {ScrollViewNativeProps} from '../../../../Libraries/Components/ScrollView/ScrollViewNativeComponentType';
+import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
+import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {TScrollViewNativeImperativeHandle} from './useSyncOnScroll';
+
+import ScrollContentViewNativeComponent from '../../../../Libraries/Components/ScrollView/ScrollContentViewNativeComponent';
+import ScrollViewNativeComponent from '../../../../Libraries/Components/ScrollView/ScrollViewNativeComponent';
+import View from '../../../../Libraries/Components/View/View';
+import Platform from '../../../../Libraries/Utilities/Platform';
+import useSyncOnScroll from './useSyncOnScroll';
+import * as React from 'react';
+
+export const VScrollViewNativeComponent: React.AbstractComponent<
+  ScrollViewNativeProps,
+  TScrollViewNativeImperativeHandle,
+  // $FlowExpectedError[incompatible-type] - Flow cannot model imperative handles, yet.
+> = function VScrollViewNativeComponent(props: {
+  ...ScrollViewNativeProps,
+  ref?: React.RefSetter<TScrollViewNativeImperativeHandle | null>,
+  ...
+}): React.Node {
+  const [ref, enableSyncOnScroll] = useSyncOnScroll(props.ref);
+  // NOTE: When `useSyncOnScroll` triggers an update, `props` will not have
+  // changed. Notably, `props.children` will be the same, allowing React to
+  // bail out during reconciliation.
+  return (
+    <ScrollViewNativeComponent
+      {...props}
+      ref={ref}
+      enableSyncOnScroll={enableSyncOnScroll}
+    />
+  );
+};
+
+export const VScrollContentViewNativeComponent: HostComponent<ViewProps> =
+  Platform.OS === 'android' ? View : ScrollContentViewNativeComponent;

package/src/private/core/components/useSyncOnScroll.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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
+ * @format
+ * @oncall react_native
+ */
+
+import type {ScrollViewNativeProps} from '../../../../Libraries/Components/ScrollView/ScrollViewNativeComponentType';
+import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
+
+import * as React from 'react';
+import {useImperativeHandle, useRef, useState} from 'react';
+
+export type TScrollViewNativeComponentInstance = React.ElementRef<
+  HostComponent<ScrollViewNativeProps>,
+>;
+
+export type TScrollViewNativeImperativeHandle = {
+  componentRef: React.RefObject<TScrollViewNativeComponentInstance | null>,
+  unstable_setEnableSyncOnScroll: (enabled: true) => void,
+};
+
+/**
+ * Hook used by `HScrollViewNativeComponent` and `VScrollViewNativeComponent`
+ * to make an implementation of `unstable_setEnableSyncOnScroll` available that
+ * does not require updating all `ScrollView` children.
+ */
+export default function useSyncOnScroll(
+  inputRef: ?React.RefSetter<TScrollViewNativeImperativeHandle | null>,
+): [React.RefSetter<TScrollViewNativeComponentInstance | null>, true | void] {
+  const componentRef = useRef<TScrollViewNativeComponentInstance | null>(null);
+  const [enableSyncOnScroll, setEnableSyncOnScroll] = useState<true | void>();
+
+  useImperativeHandle<TScrollViewNativeImperativeHandle>(inputRef, () => {
+    return {
+      componentRef,
+      unstable_setEnableSyncOnScroll(enabled: true): void {
+        setEnableSyncOnScroll(enabled);
+      },
+    };
+  }, []);
+
+  return [componentRef, enableSyncOnScroll];
+}