@office-iss/react-native-win32 0.83.0-preview.1 → 0.84.0-preview.1

package/.flowconfig

@@ -144,7 +144,7 @@ module.name_mapper='^@office-iss/react-native-win32$' -> '<PROJECT_ROOT>/index.w
 module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/\1'
 module.name_mapper='^@office-iss/react-native-win32/\(.*\)$' -> '<PROJECT_ROOT>\/1'
 module.name_mapper='^@react-native/dev-middleware$' -> '<PROJECT_ROOT>/\1'
-module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\|xml\|ktx\)$' -> '<PROJECT_ROOT>/Libraries/Image/RelativeImageStub'
+module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\|xml\|ktx\|heic\|heif\)$' -> '<PROJECT_ROOT>/Libraries/Image/RelativeImageStub'
 
 module.system.haste.module_ref_prefix=m#
 
@@ -175,4 +175,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.289.0
+^0.295.0

package/CHANGELOG.json

@@ -2,21 +2,57 @@
   "name": "@office-iss/react-native-win32",
   "entries": [
     {
-      "date": "Thu, 26 Mar 2026 12:02:27 GMT",
-      "version": "0.83.0-preview.1",
-      "tag": "@office-iss/react-native-win32_v0.83.0-preview.1",
+      "date": "Mon, 06 Apr 2026 06:35:45 GMT",
+      "version": "0.84.0-preview.1",
+      "tag": "@office-iss/react-native-win32_v0.84.0-preview.1",
       "comments": {
         "prerelease": [
           {
             "author": "protikbiswas@microsoft.com",
             "package": "@office-iss/react-native-win32",
-            "commit": "b3b48d21776b189c66ab6ef77f0a48a9a3781b75",
-            "comment": "Promote 0.83 to preview"
+            "commit": "4708eb68f37a790791e873c8d873da78315a6c7f",
+            "comment": "Promote 0.84 to preview"
           },
           {
             "author": "beachball",
             "package": "@office-iss/react-native-win32",
-            "comment": "Bump react-native-platform-override to v0.83.0-preview.1",
+            "comment": "Bump react-native-platform-override to v0.84.0-preview.1",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 27 Mar 2026 03:00:07 GMT",
+      "version": "0.0.0-canary.310",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.310",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "66076509+vineethkuttan@users.noreply.github.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "e57c920b275ea89dfe7e372f7fed8b34f7ab81aa",
+            "comment": "Integrate 0.84.0-nightly-20260107-58bc6c3e3"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 25 Mar 2026 02:08:13 GMT",
+      "version": "0.0.0-canary.309",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.309",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "66076509+vineethkuttan@users.noreply.github.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "70ed4bc8ac65bb551143b97576dd24ccb6bba702",
+            "comment": "Integrate 0.84.0-nightly-20251212-dd390dbbe"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump react-native-platform-override to v0.0.0-canary.1021",
             "commit": "not available"
           }
         ]

package/CHANGELOG.md

@@ -1,17 +1,34 @@
 # Change Log - @office-iss/react-native-win32
 
-<!-- This log was last generated on Thu, 26 Mar 2026 12:02:27 GMT and should not be manually modified. -->
+<!-- This log was last generated on Mon, 06 Apr 2026 06:35:45 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
-## 0.83.0-preview.1
+## 0.84.0-preview.1
 
-Thu, 26 Mar 2026 12:02:27 GMT
+Mon, 06 Apr 2026 06:35:45 GMT
 
 ### Changes
 
-- Promote 0.83 to preview (protikbiswas@microsoft.com)
-- Bump react-native-platform-override to v0.83.0-preview.1
+- Promote 0.84 to preview (protikbiswas@microsoft.com)
+- Bump react-native-platform-override to v0.84.0-preview.1
+
+## 0.0.0-canary.310
+
+Fri, 27 Mar 2026 03:00:07 GMT
+
+### Changes
+
+- Integrate 0.84.0-nightly-20260107-58bc6c3e3 (66076509+vineethkuttan@users.noreply.github.com)
+
+## 0.0.0-canary.309
+
+Wed, 25 Mar 2026 02:08:13 GMT
+
+### Changes
+
+- Integrate 0.84.0-nightly-20251212-dd390dbbe (66076509+vineethkuttan@users.noreply.github.com)
+- Bump react-native-platform-override to v0.0.0-canary.1021
 
 ## 0.0.0-canary.308
 

package/IntegrationTests/AccessibilityManagerTest.js

@@ -23,6 +23,16 @@ function AccessibilityManagerTest(): React.Node {
       "NativeAccessibilityManager doesn't exist",
     );
 
+    const subscription = DeviceEventEmitter.addListener(
+      'didUpdateDimensions',
+      update => {
+        // some of the updates may come from lifecycle methods, which would carry different values than the ones we set
+        if (update.window.fontScale === 4.0) {
+          TestModule.markTestPassed(true);
+        }
+      },
+    );
+
     NativeAccessibilityManager.setAccessibilityContentSizeMultipliers({
       extraSmall: 1.0,
       small: 2.0,
@@ -38,13 +48,6 @@ function AccessibilityManagerTest(): React.Node {
       accessibilityExtraExtraExtraLarge: 12.0,
     });
 
-    const subscription = DeviceEventEmitter.addListener(
-      'didUpdateDimensions',
-      update => {
-        TestModule.markTestPassed(update.window.fontScale === 4.0);
-      },
-    );
-
     return () => {
       subscription.remove();
     };

package/IntegrationTests/ImageCachePolicyTest.js

@@ -32,14 +32,14 @@ const TESTS = ['only-if-cached', 'default', 'reload', 'force-cache'] as const;
 
 function ImageCachePolicyTest(): React.Node {
   const [state, setState] = useState<{[string]: ?boolean}>({
-    'only-if-cached': undefined,
     default: undefined,
-    reload: undefined,
     'force-cache': undefined,
+    'only-if-cached': undefined,
+    reload: undefined,
   });
 
   const testComplete = (
-    name: $NonMaybeType<ImageURISource['cache']>,
+    name: NonNullable<ImageURISource['cache']>,
     pass: boolean,
   ) => {
     setState(prevState => ({
@@ -89,19 +89,19 @@ function ImageCachePolicyTest(): React.Node {
 }
 
 const getImageSource = (cache: ImageURISource['cache']) => ({
+  cache,
   uri:
     'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
     Date.now(),
-  cache,
 });
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   base: {
-    width: 100,
     height: 100,
+    width: 100,
+  },
+  container: {
+    flex: 1,
   },
 });
 

package/IntegrationTests/IntegrationTestsApp.js

@@ -31,11 +31,11 @@ const TESTS = [
   require('./WebSocketTest'),
   require('./AccessibilityManagerTest'),
   require('./GlobalEvalWithSourceUrlTest'),
-];
+].map(mod => mod.default);
 
 TESTS.forEach(test =>
   AppRegistry.registerComponent(
-    test.displayName || test.name || '',
+    (test as React.ComponentType<any>).displayName || test.name || '',
     /* $FlowFixMe[incompatible-type] (>=0.54.0 site=react_native_fb,react_native_
      * oss) This comment suppresses an error found when Flow v0.54 was deployed.
      * To see the error delete this comment and run Flow. */
@@ -83,7 +83,7 @@ class IntegrationTestsApp extends React.Component<{...}, $FlowFixMe> {
                */
               style={styles.row}>
               <Text style={styles.testName}>
-                {test.displayName || test.name}
+                {(test as React.ComponentType<any>).displayName || test.name}
               </Text>
             </TouchableOpacity>,
             <View style={styles.separator} />,

package/IntegrationTests/LayoutEventsTest.js

@@ -201,4 +201,4 @@ const styles = StyleSheet.create({
 });
 
 LayoutEventsTest.displayName = 'LayoutEventsTest';
-module.exports = LayoutEventsTest;
+export default LayoutEventsTest;

package/IntegrationTests/TimersTest.js

@@ -283,4 +283,4 @@ const styles = StyleSheet.create({
 });
 
 TimersTest.displayName = 'TimersTest';
-module.exports = TimersTest;
+export default TimersTest;

package/IntegrationTests/WebSocketTest.js

@@ -151,4 +151,4 @@ class WebSocketTest extends React.Component<{...}, State> {
 
 WebSocketTest.displayName = 'WebSocketTest';
 
-module.exports = WebSocketTest;
+export default WebSocketTest;

package/Libraries/Animated/AnimatedEvent.js

@@ -25,7 +25,7 @@ export type Mapping =
   | AnimatedValue
   | AnimatedValueXY;
 export type EventConfig<T> = {
-  listener?: ?(NativeSyntheticEvent<T>) => mixed,
+  listener?: ?(NativeSyntheticEvent<T>) => unknown,
   useNativeDriver: boolean,
   platformConfig?: PlatformConfig,
 };
@@ -40,7 +40,7 @@ export function attachNativeEventImpl(
   // key path inside the `nativeEvent` object. Ex.: ['contentOffset', 'x'].
   const eventMappings: Array<EventMapping> = [];
 
-  const traverse = (value: mixed, path: Array<string>) => {
+  const traverse = (value: unknown, path: Array<string>) => {
     if (value instanceof AnimatedValue) {
       value.__makeNative(platformConfig);
 

package/Libraries/Animated/animations/Animation.js

@@ -151,9 +151,7 @@ export default class Animation {
             animatedValue.__onAnimatedValueUpdateReceived(value, offset);
 
             const isJsSyncRemoved =
-              ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
-              !ReactNativeFeatureFlags.disableFabricCommitInCXXAnimated() &&
-              ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync();
+              ReactNativeFeatureFlags.cxxNativeAnimatedEnabled();
             if (!isJsSyncRemoved) {
               if (this.__isLooping === true) {
                 return;

package/Libraries/Animated/createAnimatedComponent.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {NativeColorValue} from '../StyleSheet/StyleSheetTypes';
 import type AnimatedAddition from './nodes/AnimatedAddition';
 import type AnimatedDiffClamp from './nodes/AnimatedDiffClamp';
 import type AnimatedDivision from './nodes/AnimatedDivision';
@@ -28,7 +29,7 @@ import {useMemo} from 'react';
 
 type Nullable = void | null;
 type Primitive = string | number | boolean | symbol | void;
-type Builtin = (...$ReadOnlyArray<empty>) => mixed | Date | Error | RegExp;
+type Builtin = (...$ReadOnlyArray<empty>) => unknown | Date | Error | RegExp;
 
 export type WithAnimatedValue<+T> = T extends Builtin | Nullable
   ? T
@@ -46,6 +47,7 @@ export type WithAnimatedValue<+T> = T extends Builtin | Nullable
         | AnimatedInterpolation<number | string>
         | AnimatedInterpolation<number>
         | AnimatedInterpolation<string>
+        | AnimatedInterpolation<NativeColorValue>
     : T extends $ReadOnlyArray<infer P>
       ? $ReadOnlyArray<WithAnimatedValue<P>>
       : T extends {...}
@@ -87,10 +89,10 @@ export type AnimatedBaseProps<Props: {...}> = LooseOmit<
   'ref',
 >;
 
-export type AnimatedComponentType<Props: {...}, +Instance = mixed> = component(
-  ref?: React.RefSetter<Instance>,
-  ...AnimatedProps<Props>
-);
+export type AnimatedComponentType<
+  Props: {...},
+  +Instance = unknown,
+> = component(ref?: React.RefSetter<Instance>, ...AnimatedProps<Props>);
 
 export default function createAnimatedComponent<
   TInstance: React.ComponentType<any>,
@@ -125,6 +127,7 @@ export function unstable_createAnimatedComponentWithAllowlist<
     const [reducedProps, callbackRef] = useAnimatedProps<
       TProps,
       React.ElementRef<TInstance>,
+      // $FlowFixMe[incompatible-type]
     >(props);
     const ref = useMergeRefs<React.ElementRef<TInstance>>(
       callbackRef,

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -27,7 +27,7 @@ export type AnimatedColorConfig = $ReadOnly<{
   useNativeDriver: boolean,
 }>;
 
-type ColorListenerCallback = (value: ColorValue) => mixed;
+type ColorListenerCallback = (value: ColorValue) => unknown;
 
 export type RgbaValue = {
   +r: number,

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -12,6 +12,7 @@
 
 'use strict';
 
+import type {NativeColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedNode from './AnimatedNode';
 import type {AnimatedNodeConfig} from './AnimatedNode';
@@ -26,7 +27,14 @@ import invariant from 'invariant';
 
 type ExtrapolateType = 'extend' | 'identity' | 'clamp';
 
-export type InterpolationConfigType<OutputT: number | string> = $ReadOnly<{
+export type InterpolationConfigSupportedOutputType =
+  | number
+  | string
+  | NativeColorValue;
+
+export type InterpolationConfigType<
+  OutputT: InterpolationConfigSupportedOutputType,
+> = $ReadOnly<{
   ...AnimatedNodeConfig,
   inputRange: $ReadOnlyArray<number>,
   outputRange: $ReadOnlyArray<OutputT>,
@@ -82,6 +90,28 @@ function createNumericInterpolation(
   };
 }
 
+function createPlatformColorInterpolation(
+  config: InterpolationConfigType<NativeColorValue>,
+): (input: number) => NativeColorValue {
+  const outputRange = config.outputRange;
+  const outputRangeIndices = Array.from(Array(outputRange.length).keys());
+  const interpolateIndex = createNumericInterpolation({
+    ...config,
+    inputRange: config.inputRange,
+    outputRange: outputRangeIndices,
+  });
+
+  return input => {
+    const interpolateResult = interpolateIndex(input);
+    if (!Number.isInteger(interpolateResult)) {
+      console.warn(
+        'PlatformColor interpolation should happen natively, here we fallback to the closest color',
+      );
+    }
+    return outputRange[Math.floor(interpolateResult)];
+  };
+}
+
 function interpolate(
   input: number,
   inputMin: number,
@@ -277,7 +307,7 @@ function findRange(input: number, inputRange: $ReadOnlyArray<number>) {
   return i - 1;
 }
 
-function checkValidRanges<OutputT: number | string>(
+function checkValidRanges<OutputT: InterpolationConfigSupportedOutputType>(
   inputRange: $ReadOnlyArray<number>,
   outputRange: $ReadOnlyArray<OutputT>,
 ) {
@@ -304,7 +334,7 @@ function checkValidInputRange(arr: $ReadOnlyArray<number>) {
   }
 }
 
-function checkInfiniteRange<OutputT: number | string>(
+function checkInfiniteRange<OutputT: InterpolationConfigSupportedOutputType>(
   name: string,
   arr: $ReadOnlyArray<OutputT>,
 ) {
@@ -322,7 +352,7 @@ function checkInfiniteRange<OutputT: number | string>(
 }
 
 export default class AnimatedInterpolation<
-  OutputT: number | string,
+  OutputT: InterpolationConfigSupportedOutputType,
 > extends AnimatedWithChildren {
   _parent: AnimatedNode;
   _config: InterpolationConfigType<OutputT>;
@@ -347,6 +377,10 @@ export default class AnimatedInterpolation<
       const config = this._config;
       if (config.outputRange && typeof config.outputRange[0] === 'string') {
         this._interpolation = (createStringInterpolation((config: any)): any);
+      } else if (typeof config.outputRange[0] === 'object') {
+        this._interpolation = (createPlatformColorInterpolation(
+          (config: any),
+        ): any);
       } else {
         this._interpolation = (createNumericInterpolation((config: any)): any);
       }
@@ -403,6 +437,8 @@ export default class AnimatedInterpolation<
           return NativeAnimatedHelper.transformDataType(value);
         }
       }): any);
+    } else if (typeof outputRange[0] === 'object') {
+      outputType = 'platform_color';
     }
 
     return {

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -13,7 +13,7 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import invariant from 'invariant';
 
-type ValueListenerCallback = (state: {value: number, ...}) => mixed;
+type ValueListenerCallback = (state: {value: number, ...}) => unknown;
 
 export type AnimatedNodeConfig = $ReadOnly<{
   debugID?: string,
@@ -87,7 +87,7 @@ export default class AnimatedNode {
    *
    * See https://reactnative.dev/docs/animatedvalue#addlistener
    */
-  addListener(callback: (value: any) => mixed): string {
+  addListener(callback: (value: any) => unknown): string {
     const id = String(_uniqueId++);
     this._listeners.set(id, callback);
     return id;
@@ -172,7 +172,7 @@ export default class AnimatedNode {
    * NOTE: This is intended to prevent `JSON.stringify` from throwing "cyclic
    * structure" errors in React DevTools. Avoid depending on this!
    */
-  toJSON(): mixed {
+  toJSON(): unknown {
     return this.__getValue();
   }
 

package/Libraries/Animated/nodes/AnimatedObject.js

@@ -20,21 +20,26 @@ import {isValidElement} from 'react';
 const MAX_DEPTH = 5;
 
 export function isPlainObject(
-  value: mixed,
+  value: unknown,
   /* $FlowFixMe[incompatible-type-guard] - Flow does not know that the prototype
      and ReactElement checks preserve the type refinement of `value`. */
-): value is $ReadOnly<{[string]: mixed}> {
+): value is $ReadOnly<{[string]: unknown}> {
+  const proto =
+    value !== null && typeof value === 'object'
+      ? Object.getPrototypeOf(value)
+      : undefined;
+  if (proto === undefined) {
+    // $FlowFixMe[incompatible-type-guard]
+    return false;
+  }
   return (
     // $FlowFixMe[incompatible-type-guard]
-    value !== null &&
-    typeof value === 'object' &&
-    Object.getPrototypeOf(value).isPrototypeOf(Object) &&
-    !isValidElement(value)
+    (proto == null || proto.isPrototypeOf(Object)) && !isValidElement(value)
   );
 }
 
 function flatAnimatedNodes(
-  value: mixed,
+  value: unknown,
   nodes: Array<AnimatedNode> = [],
   depth: number = 0,
 ): Array<AnimatedNode> {
@@ -83,13 +88,13 @@ function mapAnimatedNodes(value: any, fn: any => any, depth: number = 0): any {
 
 export default class AnimatedObject extends AnimatedWithChildren {
   _nodes: $ReadOnlyArray<AnimatedNode>;
-  _value: mixed;
+  _value: unknown;
 
   /**
    * Creates an `AnimatedObject` if `value` contains `AnimatedNode` instances.
    * Otherwise, returns `null`.
    */
-  static from(value: mixed): ?AnimatedObject {
+  static from(value: unknown): ?AnimatedObject {
     const nodes = flatAnimatedNodes(value);
     if (nodes.length === 0) {
       return null;
@@ -102,7 +107,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
    */
   constructor(
     nodes: $ReadOnlyArray<AnimatedNode>,
-    value: mixed,
+    value: unknown,
     config?: ?AnimatedNodeConfig,
   ) {
     super(config);
@@ -116,7 +121,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
     });
   }
 
-  __getValueWithStaticObject(staticObject: mixed): any {
+  __getValueWithStaticObject(staticObject: unknown): any {
     const nodes = this._nodes;
     let index = 0;
     // NOTE: We can depend on `this._value` and `staticObject` sharing a

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -8,12 +8,15 @@
  * @format
  */
 
+import type {RootTag} from '../../Types/RootTagTypes';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {AnimatedNodeConfig} from './AnimatedNode';
 import type {AnimatedStyleAllowlist} from './AnimatedStyle';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
+import {getNodeFromPublicInstance} from '../../ReactPrivate/ReactNativePrivateInterface';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import {AnimatedEvent} from '../AnimatedEvent';
 import AnimatedNode from './AnimatedNode';
@@ -33,12 +36,12 @@ type TargetView = {
 type TargetViewInstance = React.ElementRef<React.ElementType>;
 
 function createAnimatedProps(
-  inputProps: {[string]: mixed},
+  inputProps: {[string]: unknown},
   allowlist: ?AnimatedPropsAllowlist,
-): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, {[string]: mixed}] {
+): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, {[string]: unknown}] {
   const nodeKeys: Array<string> = [];
   const nodes: Array<AnimatedNode> = [];
-  const props: {[string]: mixed} = {};
+  const props: {[string]: unknown} = {};
 
   const keys = Object.keys(inputProps);
   for (let ii = 0, length = keys.length; ii < length; ii++) {
@@ -95,13 +98,15 @@ export default class AnimatedProps extends AnimatedNode {
   _callback: () => void;
   _nodeKeys: $ReadOnlyArray<string>;
   _nodes: $ReadOnlyArray<AnimatedNode>;
-  _props: {[string]: mixed};
+  _props: {[string]: unknown};
   _target: ?TargetView = null;
+  _rootTag: ?RootTag = undefined;
 
   constructor(
-    inputProps: {[string]: mixed},
+    inputProps: {[string]: unknown},
     callback: () => void,
     allowlist?: ?AnimatedPropsAllowlist,
+    rootTag?: RootTag,
     config?: ?AnimatedNodeConfig,
   ) {
     super(config);
@@ -110,10 +115,11 @@ export default class AnimatedProps extends AnimatedNode {
     this._nodes = nodes;
     this._props = props;
     this._callback = callback;
+    this._rootTag = rootTag;
   }
 
   __getValue(): Object {
-    const props: {[string]: mixed} = {};
+    const props: {[string]: unknown} = {};
 
     const keys = Object.keys(this._props);
     for (let ii = 0, length = keys.length; ii < length; ii++) {
@@ -138,7 +144,7 @@ export default class AnimatedProps extends AnimatedNode {
    * created by this `AnimatedProps` instance.
    */
   __getValueWithStaticProps(staticProps: Object): Object {
-    const props: {[string]: mixed} = {...staticProps};
+    const props: {[string]: unknown} = {...staticProps};
 
     const keys = Object.keys(staticProps);
     for (let ii = 0, length = keys.length; ii < length; ii++) {
@@ -149,7 +155,7 @@ export default class AnimatedProps extends AnimatedNode {
         const staticStyle = staticProps.style;
         const flatStaticStyle = flattenStyle(staticStyle);
         if (maybeNode instanceof AnimatedStyle) {
-          const mutableStyle: {[string]: mixed} =
+          const mutableStyle: {[string]: unknown} =
             flatStaticStyle == null
               ? {}
               : flatStaticStyle === staticStyle
@@ -190,7 +196,7 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   __getAnimatedValue(): Object {
-    const props: {[string]: mixed} = {};
+    const props: {[string]: unknown} = {};
 
     const nodeKeys = this._nodeKeys;
     const nodes = this._nodes;
@@ -247,7 +253,9 @@ export default class AnimatedProps extends AnimatedNode {
       super.__setPlatformConfig(platformConfig);
 
       if (this._target != null) {
-        this.#connectAnimatedView(this._target);
+        const target = this._target;
+        this.#connectAnimatedView(target);
+        this.#connectShadowNode(target);
       }
     }
   }
@@ -256,9 +264,10 @@ export default class AnimatedProps extends AnimatedNode {
     if (this._target?.instance === instance) {
       return;
     }
-    this._target = {instance, connectedViewTag: null};
+    const target = (this._target = {instance, connectedViewTag: null});
     if (this.__isNative) {
-      this.#connectAnimatedView(this._target);
+      this.#connectAnimatedView(target);
+      this.#connectShadowNode(target);
     }
   }
 
@@ -279,6 +288,27 @@ export default class AnimatedProps extends AnimatedNode {
     target.connectedViewTag = viewTag;
   }
 
+  #connectShadowNode(target: TargetView): void {
+    if (
+      !ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() ||
+      //eslint-disable-next-line
+      !ReactNativeFeatureFlags.useSharedAnimatedBackend()
+    ) {
+      return;
+    }
+
+    invariant(this.__isNative, 'Expected node to be marked as "native"');
+    // $FlowExpectedError[incompatible-type] - target.instance may be an HTMLElement but we need ReactNativeElement for Fabric
+    const shadowNode = getNodeFromPublicInstance(target.instance);
+    if (shadowNode == null) {
+      return;
+    }
+    NativeAnimatedHelper.API.connectAnimatedNodeToShadowNodeFamily(
+      this.__getNativeTag(),
+      shadowNode,
+    );
+  }
+
   #disconnectAnimatedView(target: TargetView): void {
     invariant(this.__isNative, 'Expected node to be marked as "native"');
     const viewTag = target.connectedViewTag;
@@ -318,6 +348,7 @@ export default class AnimatedProps extends AnimatedNode {
     return {
       type: 'props',
       props: propsConfig,
+      rootTag: this._rootTag ?? undefined,
       debugID: this.__getDebugID(),
     };
   }