@office-iss/react-native-win32 0.77.0 → 0.78.0-preview.2

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -8,17 +8,17 @@
  * @format
  */
 
-import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import invariant from 'invariant';
 
-const {startListeningToAnimatedNodeValue, stopListeningToAnimatedNodeValue} =
-  NativeAnimatedHelper.API;
-
 type ValueListenerCallback = (state: {value: number, ...}) => mixed;
 
+export type AnimatedNodeConfig = $ReadOnly<{
+  debugID?: string,
+}>;
+
 let _uniqueId = 1;
 let _assertNativeAnimatedModule: ?() => void = () => {
   NativeAnimatedHelper.assertNativeAnimatedModule();
@@ -29,9 +29,20 @@ let _assertNativeAnimatedModule: ?() => void = () => {
 
 export default class AnimatedNode {
   #listeners: Map<string, ValueListenerCallback> = new Map();
-  #updateSubscription: ?EventSubscription = null;
 
   _platformConfig: ?PlatformConfig = undefined;
+
+  constructor(
+    config?: ?$ReadOnly<{
+      ...AnimatedNodeConfig,
+      ...
+    }>,
+  ) {
+    if (__DEV__) {
+      this.__debugID = config?.debugID;
+    }
+  }
+
   __attach(): void {}
   __detach(): void {
     this.removeAllListeners();
@@ -62,9 +73,6 @@ export default class AnimatedNode {
     );
 
     this._platformConfig = platformConfig;
-    if (this.#listeners.size > 0) {
-      this.#ensureUpdateSubscriptionExists();
-    }
   }
 
   /**
@@ -77,9 +85,6 @@ export default class AnimatedNode {
   addListener(callback: (value: any) => mixed): string {
     const id = String(_uniqueId++);
     this.#listeners.set(id, callback);
-    if (this.__isNative) {
-      this.#ensureUpdateSubscriptionExists();
-    }
     return id;
   }
 
@@ -91,9 +96,6 @@ export default class AnimatedNode {
    */
   removeListener(id: string): void {
     this.#listeners.delete(id);
-    if (this.__isNative && this.#listeners.size === 0) {
-      this.#updateSubscription?.remove();
-    }
   }
 
   /**
@@ -103,44 +105,12 @@ export default class AnimatedNode {
    */
   removeAllListeners(): void {
     this.#listeners.clear();
-    if (this.__isNative) {
-      this.#updateSubscription?.remove();
-    }
   }
 
   hasListeners(): boolean {
     return this.#listeners.size > 0;
   }
 
-  #ensureUpdateSubscriptionExists(): void {
-    if (this.#updateSubscription != null) {
-      return;
-    }
-    const nativeTag = this.__getNativeTag();
-    startListeningToAnimatedNodeValue(nativeTag);
-    const subscription: EventSubscription =
-      NativeAnimatedHelper.nativeEventEmitter.addListener(
-        'onAnimatedValueUpdate',
-        data => {
-          if (data.tag === nativeTag) {
-            this.__onAnimatedValueUpdateReceived(data.value);
-          }
-        },
-      );
-
-    this.#updateSubscription = {
-      remove: () => {
-        // Only this function assigns to `this.#updateSubscription`.
-        if (this.#updateSubscription == null) {
-          return;
-        }
-        this.#updateSubscription = null;
-        subscription.remove();
-        stopListeningToAnimatedNodeValue(nativeTag);
-      },
-    };
-  }
-
   __onAnimatedValueUpdateReceived(value: number): void {
     this.__callListeners(value);
   }
@@ -197,4 +167,13 @@ export default class AnimatedNode {
   toJSON(): mixed {
     return this.__getValue();
   }
+
+  __debugID: ?string = undefined;
+
+  __getDebugID(): ?string {
+    if (__DEV__) {
+      return this.__debugID;
+    }
+    return undefined;
+  }
 }

package/Libraries/Animated/nodes/AnimatedObject.js

@@ -12,6 +12,7 @@
 'use strict';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedNode from './AnimatedNode';
 import AnimatedWithChildren from './AnimatedWithChildren';
@@ -99,8 +100,12 @@ export default class AnimatedObject extends AnimatedWithChildren {
   /**
    * Should only be called by `AnimatedObject.from`.
    */
-  constructor(nodes: $ReadOnlyArray<AnimatedNode>, value: mixed) {
-    super();
+  constructor(
+    nodes: $ReadOnlyArray<AnimatedNode>,
+    value: mixed,
+    config?: ?AnimatedNodeConfig,
+  ) {
+    super(config);
     this.#nodes = nodes;
     this._value = value;
   }
@@ -131,6 +136,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
       const node = nodes[ii];
       node.__addChild(this);
     }
+    super.__attach();
   }
 
   __detach(): void {
@@ -157,6 +163,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
       value: mapAnimatedNodes(this._value, node => {
         return {nodeTag: node.__getNativeTag()};
       }),
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -9,6 +9,7 @@
  */
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 import type {AnimatedStyleAllowlist} from './AnimatedStyle';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
@@ -84,8 +85,9 @@ export default class AnimatedProps extends AnimatedNode {
     inputProps: {[string]: mixed},
     callback: () => void,
     allowlist?: ?AnimatedPropsAllowlist,
+    config?: ?AnimatedNodeConfig,
   ) {
-    super();
+    super(config);
     const [nodeKeys, nodes, props] = createAnimatedProps(inputProps, allowlist);
     this.#nodeKeys = nodeKeys;
     this.#nodes = nodes;
@@ -158,6 +160,7 @@ export default class AnimatedProps extends AnimatedNode {
       const node = nodes[ii];
       node.__addChild(this);
     }
+    super.__attach();
   }
 
   __detach(): void {
@@ -268,6 +271,7 @@ export default class AnimatedProps extends AnimatedNode {
     return {
       type: 'props',
       props: propsConfig,
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -9,6 +9,7 @@
  */
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import {validateStyles} from '../../../src/private/animated/NativeAnimatedValidation';
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
@@ -112,8 +113,9 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     nodes: $ReadOnlyArray<AnimatedNode>,
     style: {[string]: mixed},
     inputStyle: any,
+    config?: ?AnimatedNodeConfig,
   ) {
-    super();
+    super(config);
     this.#nodeKeys = nodeKeys;
     this.#nodes = nodes;
     this.#style = style;
@@ -199,6 +201,7 @@ export default class AnimatedStyle extends AnimatedWithChildren {
       const node = nodes[ii];
       node.__addChild(this);
     }
+    super.__attach();
   }
 
   __detach(): void {
@@ -238,6 +241,7 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     return {
       type: 'style',
       style: styleConfig,
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedSubtraction.js

@@ -13,6 +13,7 @@
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type AnimatedNode from './AnimatedNode';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedValue from './AnimatedValue';
@@ -22,8 +23,12 @@ export default class AnimatedSubtraction extends AnimatedWithChildren {
   _a: AnimatedNode;
   _b: AnimatedNode;
 
-  constructor(a: AnimatedNode | number, b: AnimatedNode | number) {
-    super();
+  constructor(
+    a: AnimatedNode | number,
+    b: AnimatedNode | number,
+    config?: ?AnimatedNodeConfig,
+  ) {
+    super(config);
     this._a = typeof a === 'number' ? new AnimatedValue(a) : a;
     this._b = typeof b === 'number' ? new AnimatedValue(b) : b;
   }
@@ -47,6 +52,7 @@ export default class AnimatedSubtraction extends AnimatedWithChildren {
   __attach(): void {
     this._a.__addChild(this);
     this._b.__addChild(this);
+    super.__attach();
   }
 
   __detach(): void {
@@ -59,6 +65,7 @@ export default class AnimatedSubtraction extends AnimatedWithChildren {
     return {
       type: 'subtraction',
       input: [this._a.__getNativeTag(), this._b.__getNativeTag()],
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedTracking.js

@@ -12,6 +12,7 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {EndCallback} from '../animations/Animation';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 import type AnimatedValue from './AnimatedValue';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
@@ -31,8 +32,9 @@ export default class AnimatedTracking extends AnimatedNode {
     animationClass: any,
     animationConfig: Object,
     callback?: ?EndCallback,
+    config?: ?AnimatedNodeConfig,
   ) {
-    super();
+    super(config);
     this._value = value;
     this._parent = parent;
     this._animationClass = animationClass;
@@ -65,6 +67,7 @@ export default class AnimatedTracking extends AnimatedNode {
       let {platformConfig} = this._animationConfig;
       this.__makeNative(platformConfig);
     }
+    super.__attach();
   }
 
   __detach(): void {
@@ -95,6 +98,7 @@ export default class AnimatedTracking extends AnimatedNode {
       animationConfig,
       toValue: this._parent.__getNativeTag(),
       value: this._value.__getNativeTag(),
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedTransform.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import {validateTransform} from '../../../src/private/animated/NativeAnimatedValidation';
@@ -70,8 +71,9 @@ export default class AnimatedTransform extends AnimatedWithChildren {
   constructor(
     nodes: $ReadOnlyArray<AnimatedNode>,
     transforms: $ReadOnlyArray<Transform<>>,
+    config?: ?AnimatedNodeConfig,
   ) {
-    super();
+    super(config);
     this.#nodes = nodes;
     this._transforms = transforms;
   }
@@ -115,6 +117,7 @@ export default class AnimatedTransform extends AnimatedWithChildren {
       const node = nodes[ii];
       node.__addChild(this);
     }
+    super.__attach();
   }
 
   __detach(): void {
@@ -160,6 +163,7 @@ export default class AnimatedTransform extends AnimatedWithChildren {
     return {
       type: 'transform',
       transforms: transformsConfig,
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -8,11 +8,12 @@
  * @format
  */
 
-'use strict';
-
+import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type Animation, {EndCallback} from '../animations/Animation';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type AnimatedNode from './AnimatedNode';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 import type AnimatedTracking from './AnimatedTracking';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
@@ -21,6 +22,7 @@ import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
 export type AnimatedValueConfig = $ReadOnly<{
+  ...AnimatedNodeConfig,
   useNativeDriver: boolean,
 }>;
 
@@ -83,6 +85,9 @@ function _executeAsAnimatedBatch(id: string, operation: () => void) {
  * See https://reactnative.dev/docs/animatedvalue
  */
 export default class AnimatedValue extends AnimatedWithChildren {
+  #attached: boolean = false;
+  #updateSubscription: ?EventSubscription = null;
+
   _value: number;
   _startingValue: number;
   _offset: number;
@@ -90,7 +95,7 @@ export default class AnimatedValue extends AnimatedWithChildren {
   _tracking: ?AnimatedTracking;
 
   constructor(value: number, config?: ?AnimatedValueConfig) {
-    super();
+    super(config);
     if (typeof value !== 'number') {
       throw new Error('AnimatedValue: Attempting to set value to undefined');
     }
@@ -102,20 +107,73 @@ export default class AnimatedValue extends AnimatedWithChildren {
     }
   }
 
-  __detach() {
+  __attach(): void {
+    this.#attached = true;
+    this.#ensureUpdateSubscriptionExists();
+  }
+
+  __detach(): void {
     if (this.__isNative) {
+      this.#updateSubscription?.remove();
       NativeAnimatedAPI.getValue(this.__getNativeTag(), value => {
         this._value = value - this._offset;
       });
     }
     this.stopAnimation();
     super.__detach();
+    this.#attached = false;
   }
 
   __getValue(): number {
     return this._value + this._offset;
   }
 
+  __makeNative(platformConfig: ?PlatformConfig): void {
+    super.__makeNative(platformConfig);
+    this.#ensureUpdateSubscriptionExists();
+  }
+
+  /**
+   * NOTE: In theory, we should only need to call this when any listeners
+   * are added. However, there is a global `onUserDrivenAnimationEnded`
+   * listener that relies on `onAnimatedValueUpdate` having fired to update
+   * the values in JavaScript. If that listener is removed, this could be
+   * re-optimized.
+   */
+  #ensureUpdateSubscriptionExists(): void {
+    if (this.#updateSubscription != null) {
+      return;
+    }
+    // The order in which `__attach` and `__makeNative` are called is not
+    // deterministic, and we only want to do this when both have occurred.
+    if (!this.#attached || !this.__isNative) {
+      return;
+    }
+    const nativeTag = this.__getNativeTag();
+    NativeAnimatedAPI.startListeningToAnimatedNodeValue(nativeTag);
+    const subscription: EventSubscription =
+      NativeAnimatedHelper.nativeEventEmitter.addListener(
+        'onAnimatedValueUpdate',
+        data => {
+          if (data.tag === nativeTag) {
+            this.__onAnimatedValueUpdateReceived(data.value);
+          }
+        },
+      );
+
+    this.#updateSubscription = {
+      remove: () => {
+        // Only this function assigns to `this.#updateSubscription`.
+        if (this.#updateSubscription == null) {
+          return;
+        }
+        this.#updateSubscription = null;
+        subscription.remove();
+        NativeAnimatedAPI.stopListeningToAnimatedNodeValue(nativeTag);
+      },
+    };
+  }
+
   /**
    * Directly set the value.  This will stop any animations running on the value
    * and update all the bound properties.
@@ -298,6 +356,7 @@ export default class AnimatedValue extends AnimatedWithChildren {
       type: 'value',
       value: this._value,
       offset: this._offset,
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedValueXY.js

@@ -11,12 +11,14 @@
 'use strict';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedValue from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
 import invariant from 'invariant';
 
 export type AnimatedValueXYConfig = $ReadOnly<{
+  ...AnimatedNodeConfig,
   useNativeDriver: boolean,
 }>;
 type ValueXYListenerCallback = (value: {x: number, y: number, ...}) => mixed;
@@ -49,7 +51,7 @@ export default class AnimatedValueXY extends AnimatedWithChildren {
     },
     config?: ?AnimatedValueXYConfig,
   ) {
-    super();
+    super(config);
     const value: any = valueIn || {x: 0, y: 0}; // @flowfixme: shouldn't need `: any`
     if (typeof value.x === 'number' && typeof value.y === 'number') {
       this.x = new AnimatedValue(value.x);

package/Libraries/Animated/useAnimatedProps.js

@@ -17,9 +17,7 @@ import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNa
 import {isPublicInstance as isFabricPublicInstance} from '../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
 import useRefEffect from '../Utilities/useRefEffect';
 import {AnimatedEvent} from './AnimatedEvent';
-import AnimatedNode from './nodes/AnimatedNode';
 import AnimatedProps from './nodes/AnimatedProps';
-import AnimatedValue from './nodes/AnimatedValue';
 import {
   useCallback,
   useEffect,
@@ -39,11 +37,6 @@ type CallbackRef<T> = T => mixed;
 
 type UpdateCallback = () => void;
 
-type AnimatedValueListeners = Array<{
-  propValue: AnimatedValue,
-  listenerId: string,
-}>;
-
 const useMemoOrAnimatedPropsMemo =
   ReactNativeFeatureFlags.enableAnimatedPropsMemo()
     ? useAnimatedPropsMemo
@@ -169,7 +162,6 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
 
       const target = getEventTarget(instance);
       const events = [];
-      const animatedValueListeners: AnimatedValueListeners = [];
 
       for (const propName in props) {
         // $FlowFixMe[invalid-computed-prop]
@@ -177,8 +169,6 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
         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);
         }
       }
 
@@ -188,10 +178,6 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
         for (const [propName, propValue] of events) {
           propValue.__detach(target, propName);
         }
-
-        for (const {propValue, listenerId} of animatedValueListeners) {
-          propValue.removeListener(listenerId);
-        }
       };
     },
     [node, useNativePropsInFabric, props],
@@ -215,35 +201,6 @@ function reduceAnimatedProps<TProps>(
   };
 }
 
-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`
@@ -319,6 +276,20 @@ function useAnimatedPropsLifecycle_insertionEffects(node: AnimatedProps): void {
     // if the queue is empty. When multiple animated components are mounted at
     // the same time. Only first component flushes the queue and the others will noop.
     NativeAnimatedHelper.API.flushQueue();
+    let drivenAnimationEndedListener: ?EventSubscription = null;
+    if (node.__isNative) {
+      drivenAnimationEndedListener =
+        NativeAnimatedHelper.nativeEventEmitter.addListener(
+          'onUserDrivenAnimationEnded',
+          data => {
+            node.update();
+          },
+        );
+    }
+
+    return () => {
+      drivenAnimationEndedListener?.remove();
+    };
   });
 
   useInsertionEffect(() => {
@@ -330,17 +301,6 @@ function useAnimatedPropsLifecycle_insertionEffects(node: AnimatedProps): void {
 
   useInsertionEffect(() => {
     node.__attach();
-    let drivenAnimationEndedListener: ?EventSubscription = null;
-
-    if (node.__isNative) {
-      drivenAnimationEndedListener =
-        NativeAnimatedHelper.nativeEventEmitter.addListener(
-          'onUserDrivenAnimationEnded',
-          data => {
-            node.update();
-          },
-        );
-    }
     if (prevNodeRef.current != null) {
       const prevNode = prevNodeRef.current;
       // TODO: Stop restoring default values (unless `reset` is called).
@@ -355,8 +315,6 @@ function useAnimatedPropsLifecycle_insertionEffects(node: AnimatedProps): void {
       } else {
         prevNodeRef.current = node;
       }
-
-      drivenAnimationEndedListener?.remove();
     };
   }, [node]);
 }

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.d.ts

@@ -105,7 +105,7 @@ export interface DrawerLayoutAndroidProps extends ViewProps {
    * The navigation view that will be rendered to the side of the
    * screen and can be pulled in.
    */
-  renderNavigationView: () => JSX.Element;
+  renderNavigationView: () => React.JSX.Element;
 
   /**
    * Make the drawer take the entire screen and draw the background of

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js

@@ -10,5 +10,8 @@
 
 'use strict';
 
+// $FlowFixMe[cannot-resolve-module]
+import typeof DrawerLayoutAndroid from './DrawerLayoutAndroid.android';
+
 module.exports =
-  require('../UnimplementedViews/UnimplementedView') as $FlowFixMe;
+  require('../UnimplementedViews/UnimplementedView') as $FlowFixMe as DrawerLayoutAndroid;

package/Libraries/Components/LayoutConformance/LayoutConformance.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type * as React from 'react';
+
+type LayoutConformanceProps = {
+  /**
+   * strict: Layout in accordance with W3C spec, even when breaking
+   * compatibility: Layout with the same behavior as previous versions of React Native
+   */
+  mode: 'strict' | 'compatibility';
+  children: React.ReactNode;
+};
+
+export const experimental_LayoutConformance: React.ComponentType<LayoutConformanceProps>;