@office-iss/react-native-win32 0.0.0-canary.284 → 0.0.0-canary.285

package/overrides.json

@@ -7,7 +7,7 @@
     "**/__snapshots__/**",
     "src-win/rntypes/**"
   ],
-  "baseVersion": "0.79.0-nightly-20250123-d1028885e",
+  "baseVersion": "0.79.0-nightly-20250206-fb8a6a5bb",
   "overrides": [
     {
       "type": "derived",
@@ -19,7 +19,7 @@
       "type": "derived",
       "file": "src-win/index.win32.js",
       "baseFile": "packages/react-native/index.js",
-      "baseHash": "21f5672451ddb764217c795a6d3d65a5d416a0c5"
+      "baseHash": "ec48ab28959a5c8978fb3cceccd9a294e5f6dc7e"
     },
     {
       "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": "82ea5ff7a8a7eb79269f0ab136312c6cf8063773"
+      "baseHash": "5191de27105f056043f07bf83c1db5d0241fbe96"
     },
     {
       "type": "derived",
@@ -54,7 +54,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Components/AccessibilityInfo/NativeAccessibilityInfoWin32.js",
       "baseFile": "packages/react-native/Libraries/Components/AccessibilityInfo/NativeAccessibilityInfo.js",
-      "baseHash": "c3b9975c5fe1c91712fe70546c7b06a1e78cea77"
+      "baseHash": "f6217411d2c787f76461a278fe027e1ac32dd5ac"
     },
     {
       "type": "derived",
@@ -74,7 +74,7 @@
       "type": "patch",
       "file": "src-win/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js",
       "baseFile": "packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js",
-      "baseHash": "bb80311bca01d1765424d931ebc328f09c290948",
+      "baseHash": "8d67db83e2c43a20a5081375eb3fc4f5b8afdea1",
       "issue": 14290
     },
     {
@@ -92,7 +92,7 @@
       "type": "patch",
       "file": "src-win/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js",
       "baseFile": "packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js",
-      "baseHash": "ece82469597901f974f64c49c02870ee9b33565e",
+      "baseHash": "c785bfee2b2fe3d1ffee7fc38e5669b0b4dfb533",
       "issue": 0
     },
     {
@@ -109,13 +109,13 @@
       "type": "derived",
       "file": "src-win/Libraries/Components/TextInput/TextInput.win32.js",
       "baseFile": "packages/react-native/Libraries/Components/TextInput/TextInput.js",
-      "baseHash": "d3033f628b289a6178466984402bb359f20d3c7a"
+      "baseHash": "103e01e40f864bb4b5749c02ec526c5ec3720c9d"
     },
     {
       "type": "patch",
       "file": "src-win/Libraries/Components/TextInput/TextInputState.win32.js",
       "baseFile": "packages/react-native/Libraries/Components/TextInput/TextInputState.js",
-      "baseHash": "7a12ca2e17da0a0f487af5a27c120ef59b2ab9ef"
+      "baseHash": "2826039a29aa7bd68c64032b260317bae836d078"
     },
     {
       "type": "platform",
@@ -125,7 +125,7 @@
       "type": "copy",
       "file": "src-win/Libraries/Components/ToastAndroid/ToastAndroid.win32.js",
       "baseFile": "packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.js",
-      "baseHash": "37f29678da7a4de7bc92cf52796a7e0388e1540a",
+      "baseHash": "4948464c2ad124338c1ce6ac68b6b2f01af28876",
       "issue": 4378
     },
     {
@@ -149,7 +149,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Components/Touchable/TouchableNativeFeedback.win32.js",
       "baseFile": "packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js",
-      "baseHash": "ee79fc5b491d9dd05bd90eb365324bc16bde1f46"
+      "baseHash": "5be72257c6d6f421d9eea0c9cc87a32993aa5bec"
     },
     {
       "type": "platform",
@@ -167,13 +167,13 @@
       "type": "patch",
       "file": "src-win/Libraries/Components/View/ReactNativeViewAttributes.win32.js",
       "baseFile": "packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js",
-      "baseHash": "4279b8fc936dbb03599892069fb7e3ceeb86b846"
+      "baseHash": "096d430d02315c4017c5971daaee5790db6787f6"
     },
     {
       "type": "patch",
       "file": "src-win/Libraries/Components/View/View.win32.js",
       "baseFile": "packages/react-native/Libraries/Components/View/View.js",
-      "baseHash": "85d97fc0638ce73353898f67d0f891a86ee83f3f"
+      "baseHash": "0ab4937047f1469a6e8b5095d1112d0c4892af3d"
     },
     {
       "type": "derived",
@@ -214,14 +214,14 @@
       "type": "patch",
       "file": "src-win/Libraries/Core/Devtools/loadBundleFromServer.win32.js",
       "baseFile": "packages/react-native/Libraries/Core/Devtools/loadBundleFromServer.js",
-      "baseHash": "14662281c97222b45893308b744a7dc7c2000801",
+      "baseHash": "e0158fd16d4a787e5a94d69e2b7a721e81b7c3da",
       "issue": 12704
     },
     {
       "type": "patch",
       "file": "src-win/Libraries/Core/ReactNativeVersionCheck.win32.js",
       "baseFile": "packages/react-native/Libraries/Core/ReactNativeVersionCheck.js",
-      "baseHash": "453c4da8036736aefbd950bb7c90603859933f4e",
+      "baseHash": "b755142f421cc35c549c1d45768779d0910054b7",
       "issue": 5170
     },
     {
@@ -232,7 +232,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Image/Image.win32.js",
       "baseFile": "packages/react-native/Libraries/Image/Image.ios.js",
-      "baseHash": "a5abee6de7dca3cb043b834925de3f6f0443c738",
+      "baseHash": "c0bc913aa95b6d1309ba44ef7968ba58fc488427",
       "issue": 4320
     },
     {
@@ -243,7 +243,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Image/NativeImageLoaderWin32.js",
       "baseFile": "packages/react-native/Libraries/Image/NativeImageLoaderIOS.js",
-      "baseHash": "a6f98dd6f021e1fbfbcdff29b695d2144fdf6559",
+      "baseHash": "ea0a243edfa7b35c9558d7d14fd0646e84ea0aa9",
       "issue": 4320
     },
     {
@@ -282,18 +282,6 @@
       "type": "platform",
       "file": "src-win/Libraries/Image/Tests/img/en-us/dpitest@3x.png"
     },
-    {
-      "type": "patch",
-      "file": "src-win/Libraries/Inspector/Inspector.win32.js",
-      "baseFile": "packages/react-native/Libraries/Inspector/Inspector.js",
-      "baseHash": "ac6fdd601cb13861598fd8dc17732b066de8e405"
-    },
-    {
-      "type": "patch",
-      "file": "src-win/Libraries/Inspector/InspectorOverlay.win32.js",
-      "baseFile": "packages/react-native/Libraries/Inspector/InspectorOverlay.js",
-      "baseHash": "8de3989a83192b69872f5bf593e720ff1aab26b7"
-    },
     {
       "type": "derived",
       "file": "src-win/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.win32.js",
@@ -337,7 +325,7 @@
       "type": "copy",
       "file": "src-win/Libraries/Network/RCTNetworking.win32.js",
       "baseFile": "packages/react-native/Libraries/Network/RCTNetworking.ios.js",
-      "baseHash": "9f1622d938405344bc27a2cf61a1c26773518a88",
+      "baseHash": "cdda150c411ef03de0f52d5dbbd3976d094d136b",
       "issue": 4318
     },
     {
@@ -390,13 +378,13 @@
       "type": "patch",
       "file": "src-win/Libraries/ReactNative/PaperUIManager.win32.js",
       "baseFile": "packages/react-native/Libraries/ReactNative/PaperUIManager.js",
-      "baseHash": "be8b8afbf4964018271c06f35219ec17888bc93b"
+      "baseHash": "0011b1ecbb845e7d634f8a5c62b1fb902c4606ad"
     },
     {
       "type": "derived",
       "file": "src-win/Libraries/Settings/Settings.win32.js",
       "baseFile": "packages/react-native/Libraries/Settings/Settings.js",
-      "baseHash": "1aa8e2b8b3c8e1577f617383c3a47fe8499eb031"
+      "baseHash": "030ad9c005e35cbd2b3bbb2e3c6c6a5b29965b4a"
     },
     {
       "type": "platform",
@@ -414,7 +402,7 @@
       "type": "patch",
       "file": "src-win/Libraries/StyleSheet/StyleSheet.win32.js",
       "baseFile": "packages/react-native/Libraries/StyleSheet/StyleSheet.js",
-      "baseHash": "028556b0f8b31b5cfbd4cb98f3203fad957e330a"
+      "baseHash": "6d0e21e38e081e55ee5148fb146de6a7ee51c6a6"
     },
     {
       "type": "derived",
@@ -426,7 +414,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Text/Text.win32.js",
       "baseFile": "packages/react-native/Libraries/Text/Text.js",
-      "baseHash": "64cdf1c520112ead78e348bc306c208f212ac3c5"
+      "baseHash": "f493b2f8d8fddeec94d1603023ff6c6eb10a1c42"
     },
     {
       "type": "derived",
@@ -445,7 +433,7 @@
       "type": "patch",
       "file": "src-win/Libraries/Types/CoreEventTypes.win32.js",
       "baseFile": "packages/react-native/Libraries/Types/CoreEventTypes.js",
-      "baseHash": "284aef610312bc89a1ae19acaad698ed740d142a",
+      "baseHash": "18dd62b3ecabdb9996549b608d159ba47a817969",
       "issue": 6240
     },
     {
@@ -479,7 +467,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Utilities/NativePlatformConstantsWin.js",
       "baseFile": "packages/react-native/Libraries/Utilities/NativePlatformConstantsIOS.js",
-      "baseHash": "7b9db1bdc43128938d261961e3765c24d17e68b6"
+      "baseHash": "092016d462d51606f0b9c32b3a8e3da19b0d7586"
     },
     {
       "type": "derived",
@@ -510,24 +498,24 @@
       "type": "copy",
       "file": "src-win/src/private/debugging/ReactDevToolsSettingsManager.win32.js",
       "baseFile": "packages/react-native/src/private/debugging/ReactDevToolsSettingsManager.android.js",
-      "baseHash": "df41b76dc3d2df9455fae588748261d7b0a22d01"
+      "baseHash": "1e0309d141da6c7a6a9afa571aae831ca221bbe2"
     },
     {
       "type": "derived",
-      "file": "src-win/src/private/specs/modules/NativeAccessibilityInfoWin32.js",
-      "baseFile": "packages/react-native/src/private/specs/modules/NativeAccessibilityInfo.js",
+      "file": "src-win/src/private/specs_DEPRECATED/modules/NativeAccessibilityInfoWin32.js",
+      "baseFile": "packages/react-native/src/private/specs_DEPRECATED/modules/NativeAccessibilityInfo.js",
       "baseHash": "82fc086f675dec489e485c3aabaabe1225ef5f36"
     },
     {
       "type": "derived",
-      "file": "src-win/src/private/specs/modules/NativeImageLoaderWin32.js",
-      "baseFile": "packages/react-native/src/private/specs/modules/NativeImageLoaderAndroid.js",
+      "file": "src-win/src/private/specs_DEPRECATED/modules/NativeImageLoaderWin32.js",
+      "baseFile": "packages/react-native/src/private/specs_DEPRECATED/modules/NativeImageLoaderAndroid.js",
       "baseHash": "98c031d5f249af5f8d9198290750825b70827dcc"
     },
     {
       "type": "derived",
-      "file": "src-win/src/private/specs/modules/NativePlatformConstantsWin.js",
-      "baseFile": "packages/react-native/src/private/specs/modules/NativePlatformConstantsAndroid.js",
+      "file": "src-win/src/private/specs_DEPRECATED/modules/NativePlatformConstantsWin.js",
+      "baseFile": "packages/react-native/src/private/specs_DEPRECATED/modules/NativePlatformConstantsAndroid.js",
       "baseHash": "365c5df75b38b129d364af3f6700cb206ce5bd2a"
     }
   ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.0.0-canary.284",
+  "version": "0.0.0-canary.285",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "repository": {
     "type": "git",
@@ -30,13 +30,13 @@
     "@react-native-community/cli-platform-android": "15.0.0-alpha.2",
     "@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
     "@react-native/assets": "1.0.0",
-    "@react-native/assets-registry": "0.79.0-nightly-20250123-d1028885e",
-    "@react-native/codegen": "0.79.0-nightly-20250123-d1028885e",
-    "@react-native/community-cli-plugin": "0.79.0-nightly-20250123-d1028885e",
-    "@react-native/gradle-plugin": "0.79.0-nightly-20250123-d1028885e",
-    "@react-native/js-polyfills": "0.79.0-nightly-20250123-d1028885e",
-    "@react-native/normalize-colors": "0.79.0-nightly-20250123-d1028885e",
-    "@react-native/virtualized-lists": "0.79.0-nightly-20250123-d1028885e",
+    "@react-native/assets-registry": "0.79.0-nightly-20250206-fb8a6a5bb",
+    "@react-native/codegen": "0.79.0-nightly-20250206-fb8a6a5bb",
+    "@react-native/community-cli-plugin": "0.79.0-nightly-20250206-fb8a6a5bb",
+    "@react-native/gradle-plugin": "0.79.0-nightly-20250206-fb8a6a5bb",
+    "@react-native/js-polyfills": "0.79.0-nightly-20250206-fb8a6a5bb",
+    "@react-native/normalize-colors": "0.79.0-nightly-20250206-fb8a6a5bb",
+    "@react-native/virtualized-lists": "0.79.0-nightly-20250206-fb8a6a5bb",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
@@ -59,7 +59,7 @@
     "pretty-format": "^29.7.0",
     "promise": "^8.3.0",
     "react-clone-referenced-element": "^1.0.1",
-    "react-devtools-core": "^6.0.1",
+    "react-devtools-core": "^6.1.0",
     "react-refresh": "^0.14.0",
     "react-shallow-renderer": "^16.15.0",
     "regenerator-runtime": "^0.13.2",
@@ -73,11 +73,11 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/eslint-parser": "^7.25.1",
-    "@react-native/metro-config": "0.79.0-nightly-20250123-d1028885e",
+    "@react-native/metro-config": "0.79.0-nightly-20250206-fb8a6a5bb",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
-    "@rnw-scripts/eslint-config": "1.2.34",
-    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.38",
-    "@rnw-scripts/just-task": "2.3.51",
+    "@rnw-scripts/eslint-config": "1.2.35",
+    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.39",
+    "@rnw-scripts/just-task": "2.3.52",
     "@rnw-scripts/metro-dev-config": "0.0.0",
     "@rnx-kit/jest-preset": "^0.1.17",
     "@types/node": "^18.0.0",
@@ -89,14 +89,14 @@
     "just-scripts": "^1.3.3",
     "prettier": "2.8.8",
     "react": "19.0.0",
-    "react-native": "0.79.0-nightly-20250123-d1028885e",
-    "react-native-platform-override": "^1.9.53",
+    "react-native": "0.79.0-nightly-20250206-fb8a6a5bb",
+    "react-native-platform-override": "^1.9.54",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "react": "^19.0.0",
-    "react-native": "0.79.0-nightly-20250123-d1028885e"
+    "react-native": "0.79.0-nightly-20250206-fb8a6a5bb"
   },
   "beachball": {
     "defaultNpmTag": "canary",

package/src/private/animated/createAnimatedPropsHook.js

@@ -0,0 +1,360 @@
+/**
+ * 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
+ */
+
+import type {AnimatedPropsAllowlist} from '../../../Libraries/Animated/nodes/AnimatedProps';
+import type {EventSubscription} from '../../../Libraries/EventEmitter/NativeEventEmitter';
+
+import {AnimatedEvent} from '../../../Libraries/Animated/AnimatedEvent';
+import AnimatedNode from '../../../Libraries/Animated/nodes/AnimatedNode';
+import AnimatedProps from '../../../Libraries/Animated/nodes/AnimatedProps';
+import AnimatedValue from '../../../Libraries/Animated/nodes/AnimatedValue';
+import {isPublicInstance as isFabricPublicInstance} from '../../../Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
+import useRefEffect from '../../../Libraries/Utilities/useRefEffect';
+import * as ReactNativeFeatureFlags from '../featureflags/ReactNativeFeatureFlags';
+import {createAnimatedPropsMemoHook} from './createAnimatedPropsMemoHook';
+import NativeAnimatedHelper from './NativeAnimatedHelper';
+import {
+  useCallback,
+  useEffect,
+  useInsertionEffect,
+  useReducer,
+  useRef,
+} from 'react';
+
+type ReducedProps<TProps> = {
+  ...TProps,
+  collapsable: boolean,
+  ...
+};
+type CallbackRef<T> = T => mixed;
+
+export type AnimatedPropsHook = <TProps: {...}, TInstance>(
+  props: TProps,
+) => [ReducedProps<TProps>, CallbackRef<TInstance | null>];
+
+type UpdateCallback = () => void;
+
+type AnimatedValueListeners = Array<{
+  propValue: AnimatedValue,
+  listenerId: string,
+}>;
+
+export default function createAnimatedPropsHook(
+  allowlist: ?AnimatedPropsAllowlist,
+): AnimatedPropsHook {
+  const useAnimatedPropsMemo = createAnimatedPropsMemoHook(allowlist);
+
+  return function useAnimatedProps<TProps: {...}, TInstance>(
+    props: TProps,
+  ): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
+    const [, scheduleUpdate] = useReducer<number, void>(count => count + 1, 0);
+    const onUpdateRef = useRef<UpdateCallback | null>(null);
+    const timerRef = useRef<TimeoutID | null>(null);
+
+    const node = useAnimatedPropsMemo(
+      () => new AnimatedProps(props, () => onUpdateRef.current?.(), allowlist),
+      props,
+    );
+
+    const useNativePropsInFabric =
+      ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
+
+    useEffect(() => {
+      // If multiple components call `flushQueue`, the first one will flush the
+      // queue and subsequent ones will do nothing.
+      NativeAnimatedHelper.API.flushQueue();
+      let drivenAnimationEndedListener: ?EventSubscription = null;
+      if (node.__isNative) {
+        drivenAnimationEndedListener =
+          NativeAnimatedHelper.nativeEventEmitter.addListener(
+            'onUserDrivenAnimationEnded',
+            data => {
+              node.update();
+            },
+          );
+      }
+
+      return () => {
+        drivenAnimationEndedListener?.remove();
+      };
+    });
+
+    // NOTE: This feature flag must be evaluated inside the hook because this
+    // module factory can be evaluated much sooner, before overrides are set.
+    const useAnimatedPropsLifecycle =
+      ReactNativeFeatureFlags.scheduleAnimatedCleanupInMicrotask()
+        ? useAnimatedPropsLifecycleWithCleanupInMicrotask
+        : useAnimatedPropsLifecycleWithPrevNodeRef;
+
+    useAnimatedPropsLifecycle(node);
+
+    // TODO: This "effect" does three things:
+    //
+    //   1) Call `setNativeView`.
+    //   2) Update `onUpdateRef`.
+    //   3) Update listeners for `AnimatedEvent` props.
+    //
+    // Ideally, each of these would be separate "effects" so that they are not
+    // unnecessarily re-run when irrelevant dependencies change. For example, we
+    // should be able to hoist all `AnimatedEvent` props and only do #3 if either
+    // the `AnimatedEvent` props change or `instance` changes.
+    //
+    // But there is no way to transparently compose three separate callback refs,
+    // so we just combine them all into one for now.
+    const refEffect = useCallback(
+      (instance: TInstance) => {
+        // NOTE: This may be called more often than necessary (e.g. when `props`
+        // changes), but `setNativeView` already optimizes for that.
+        node.setNativeView(instance);
+
+        // NOTE: When using the JS animation driver, this callback is called on
+        // every animation frame. When using the native driver, this callback is
+        // called when the animation completes.
+        onUpdateRef.current = () => {
+          if (process.env.NODE_ENV === 'test') {
+            // Check 1: this is a test.
+            // call `scheduleUpdate` to bypass use of setNativeProps.
+            return scheduleUpdate();
+          }
+
+          const isFabricNode = isFabricInstance(instance);
+          if (node.__isNative) {
+            // Check 2: this is an animation driven by native.
+            // In native driven animations, this callback is only called once the animation completes.
+            if (isFabricNode) {
+              // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
+              // Must not be called in Paper.
+              scheduleUpdate();
+            }
+            return;
+          }
+
+          if (
+            typeof instance !== 'object' ||
+            typeof instance?.setNativeProps !== 'function'
+          ) {
+            // Check 3: the instance does not support setNativeProps. Call `scheduleUpdate`.
+            return scheduleUpdate();
+          }
+
+          if (!isFabricNode) {
+            // Check 4: this is a paper instance, call setNativeProps.
+            // $FlowIgnore[not-a-function] - Assume it's still a function.
+            // $FlowFixMe[incompatible-use]
+            return instance.setNativeProps(node.__getAnimatedValue());
+          }
+
+          if (!useNativePropsInFabric) {
+            // Check 5: setNativeProps are disabled.
+            return scheduleUpdate();
+          }
+
+          // This is a Fabric instance and setNativeProps is supported.
+
+          // $FlowIgnore[not-a-function] - Assume it's still a function.
+          // $FlowFixMe[incompatible-use]
+          instance.setNativeProps(node.__getAnimatedValue());
+
+          // Keeping state of Fiber tree and Shadow tree in sync.
+          //
+          // This is done by calling `scheduleUpdate` which will trigger a commit.
+          // However, React commit is not fast enough to drive animations.
+          // This is where setNativeProps comes in handy but the state between
+          // Fiber tree and Shadow tree needs to be kept in sync.
+          // The goal is to call `scheduleUpdate` as little as possible to maintain
+          // performance but frequently enough to keep state in sync.
+          // Debounce is set to 48ms, which is 3 * the duration of a frame.
+          // 3 frames was the highest value where flickering state was not observed.
+          if (timerRef.current != null) {
+            clearTimeout(timerRef.current);
+          }
+          timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            scheduleUpdate();
+          }, 48);
+        };
+
+        const target = getEventTarget(instance);
+        const events = [];
+        const animatedValueListeners: AnimatedValueListeners = [];
+
+        for (const propName in props) {
+          // $FlowFixMe[invalid-computed-prop]
+          const propValue = props[propName];
+          if (propValue instanceof AnimatedEvent && propValue.__isNative) {
+            propValue.__attach(target, propName);
+            events.push([propName, propValue]);
+            // $FlowFixMe[incompatible-call] - the `addListenersToPropsValue` drills down the propValue.
+            addListenersToPropsValue(propValue, animatedValueListeners);
+          }
+        }
+
+        return () => {
+          onUpdateRef.current = null;
+
+          for (const [propName, propValue] of events) {
+            propValue.__detach(target, propName);
+          }
+
+          for (const {propValue, listenerId} of animatedValueListeners) {
+            propValue.removeListener(listenerId);
+          }
+        };
+      },
+      [node, useNativePropsInFabric, props],
+    );
+    const callbackRef = useRefEffect<TInstance>(refEffect);
+
+    return [reduceAnimatedProps<TProps>(node, props), callbackRef];
+  };
+}
+
+function reduceAnimatedProps<TProps>(
+  node: AnimatedProps,
+  props: TProps,
+): ReducedProps<TProps> {
+  // Force `collapsable` to be false so that the native view is not flattened.
+  // Flattened views cannot be accurately referenced by the native driver.
+  return {
+    ...node.__getValueWithStaticProps(props),
+    collapsable: false,
+  };
+}
+
+function addListenersToPropsValue(
+  propValue: AnimatedValue,
+  accumulator: AnimatedValueListeners,
+) {
+  // propValue can be a scalar value, an array or an object.
+  if (propValue instanceof AnimatedValue) {
+    const listenerId = propValue.addListener(() => {});
+    accumulator.push({propValue, listenerId});
+  } else if (Array.isArray(propValue)) {
+    // An array can be an array of scalar values, arrays of arrays, or arrays of objects
+    for (const prop of propValue) {
+      addListenersToPropsValue(prop, accumulator);
+    }
+  } else if (propValue instanceof Object) {
+    addAnimatedValuesListenersToProps(propValue, accumulator);
+  }
+}
+
+function addAnimatedValuesListenersToProps(
+  props: AnimatedNode,
+  accumulator: AnimatedValueListeners,
+) {
+  for (const propName in props) {
+    // $FlowFixMe[prop-missing] - This is an object contained in a prop, but we don't know the exact type.
+    const propValue = props[propName];
+    addListenersToPropsValue(propValue, accumulator);
+  }
+}
+
+/**
+ * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
+ * and `__detach`. However, this is more complicated because `AnimatedProps`
+ * uses reference counting to determine when to recursively detach its children
+ * nodes. So in order to optimize this, we avoid detaching until the next attach
+ * unless we are unmounting.
+ */
+function useAnimatedPropsLifecycleWithPrevNodeRef(node: AnimatedProps): void {
+  const prevNodeRef = useRef<?AnimatedProps>(null);
+  const isUnmountingRef = useRef<boolean>(false);
+
+  useInsertionEffect(() => {
+    isUnmountingRef.current = false;
+    return () => {
+      isUnmountingRef.current = true;
+    };
+  }, []);
+
+  useInsertionEffect(() => {
+    node.__attach();
+    if (prevNodeRef.current != null) {
+      const prevNode = prevNodeRef.current;
+      // TODO: Stop restoring default values (unless `reset` is called).
+      prevNode.__restoreDefaultValues();
+      prevNode.__detach();
+      prevNodeRef.current = null;
+    }
+    return () => {
+      if (isUnmountingRef.current) {
+        // NOTE: Do not restore default values on unmount, see D18197735.
+        node.__detach();
+      } else {
+        prevNodeRef.current = node;
+      }
+    };
+  }, [node]);
+}
+
+/**
+ * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
+ * and `__detach`. However, `__detach` occurs in a microtask for these reasons:
+ *
+ *   1. Optimizes detaching and attaching `AnimatedNode` instances that rely on
+ *      reference counting to cleanup state, by causing detach to be scheduled
+ *      after any subsequent attach.
+ *   2. Avoids calling `detach` during the insertion effect phase (which
+ *      occurs during the commit phase), which may invoke completion callbacks.
+ *
+ * We should avoid invoking completion callbacks during the commit phase because
+ * callbacks may update state, which is unsupported and will force synchronous
+ * updates.
+ */
+function useAnimatedPropsLifecycleWithCleanupInMicrotask(
+  node: AnimatedProps,
+): void {
+  const isMounted = useRef<boolean>(false);
+
+  useInsertionEffect(() => {
+    isMounted.current = true;
+    node.__attach();
+
+    return () => {
+      isMounted.current = false;
+      queueMicrotask(() => {
+        // NOTE: Do not restore default values on unmount, see D18197735.
+        if (isMounted.current) {
+          // TODO: Stop restoring default values (unless `reset` is called).
+          node.__restoreDefaultValues();
+        }
+        node.__detach();
+      });
+    };
+  }, [node]);
+}
+
+function getEventTarget<TInstance>(instance: TInstance): TInstance {
+  return typeof instance === 'object' &&
+    typeof instance?.getScrollableNode === 'function'
+    ? // $FlowFixMe[incompatible-use] - Legacy instance assumptions.
+      instance.getScrollableNode()
+    : instance;
+}
+
+// $FlowFixMe[unclear-type] - Legacy instance assumptions.
+function isFabricInstance(instance: any): boolean {
+  return (
+    isFabricPublicInstance(instance) ||
+    // Some components have a setNativeProps function but aren't a host component
+    // such as lists like FlatList and SectionList. These should also use
+    // forceUpdate in Fabric since setNativeProps doesn't exist on the underlying
+    // host component. This crazy hack is essentially special casing those lists and
+    // ScrollView itself to use forceUpdate in Fabric.
+    // If these components end up using forwardRef then these hacks can go away
+    // as instance would actually be the underlying host component and the above check
+    // would be sufficient.
+    isFabricPublicInstance(instance?.getNativeScrollRef?.()) ||
+    isFabricPublicInstance(
+      instance?.getScrollResponder?.()?.getNativeScrollRef?.(),
+    )
+  );
+}