@office-iss/react-native-win32 0.75.1 → 0.76.0-preview.1

package/Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -12,26 +12,29 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
 
-export default class AnimatedWithChildren extends AnimatedNode {
-  _children: Array<AnimatedNode>;
+const {connectAnimatedNodes, disconnectAnimatedNodes} =
+  NativeAnimatedHelper.API;
 
-  constructor() {
-    super();
-    this._children = [];
-  }
+export default class AnimatedWithChildren extends AnimatedNode {
+  _children: Array<AnimatedNode> = [];
 
   __makeNative(platformConfig: ?PlatformConfig) {
     if (!this.__isNative) {
       this.__isNative = true;
-      for (const child of this._children) {
-        child.__makeNative(platformConfig);
-        NativeAnimatedHelper.API.connectAnimatedNodes(
-          this.__getNativeTag(),
-          child.__getNativeTag(),
-        );
+
+      const children = this._children;
+      let length = children.length;
+      if (length > 0) {
+        const nativeTag = this.__getNativeTag();
+
+        for (let ii = 0; ii < length; ii++) {
+          const child = children[ii];
+          child.__makeNative(platformConfig);
+          connectAnimatedNodes(nativeTag, child.__getNativeTag());
+        }
       }
     }
     super.__makeNative(platformConfig);
@@ -45,10 +48,7 @@ export default class AnimatedWithChildren extends AnimatedNode {
     if (this.__isNative) {
       // Only accept "native" animated nodes as children
       child.__makeNative(this.__getPlatformConfig());
-      NativeAnimatedHelper.API.connectAnimatedNodes(
-        this.__getNativeTag(),
-        child.__getNativeTag(),
-      );
+      connectAnimatedNodes(this.__getNativeTag(), child.__getNativeTag());
     }
   }
 
@@ -59,10 +59,7 @@ export default class AnimatedWithChildren extends AnimatedNode {
       return;
     }
     if (this.__isNative && child.__isNative) {
-      NativeAnimatedHelper.API.disconnectAnimatedNodes(
-        this.__getNativeTag(),
-        child.__getNativeTag(),
-      );
+      disconnectAnimatedNodes(this.__getNativeTag(), child.__getNativeTag());
     }
     this._children.splice(index, 1);
     if (this._children.length === 0) {
@@ -77,7 +74,9 @@ export default class AnimatedWithChildren extends AnimatedNode {
   __callListeners(value: number): void {
     super.__callListeners(value);
     if (!this.__isNative) {
-      for (const child of this._children) {
+      const children = this._children;
+      for (let ii = 0, length = children.length; ii < length; ii++) {
+        const child = children[ii];
         // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         if (child.__getValue) {
           child.__callListeners(child.__getValue());

package/Libraries/Animated/useAnimatedProps.js

@@ -10,12 +10,16 @@
 
 'use strict';
 
+import type {EventSubscription} from '../EventEmitter/NativeEventEmitter';
+
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import {isPublicInstance as isFabricPublicInstance} from '../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
 import useRefEffect from '../Utilities/useRefEffect';
 import {AnimatedEvent} from './AnimatedEvent';
-import NativeAnimatedHelper from './NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../src/private/animated/NativeAnimatedHelper';
+import AnimatedNode from './nodes/AnimatedNode';
 import AnimatedProps from './nodes/AnimatedProps';
+import AnimatedValue from './nodes/AnimatedValue';
 import {
   useCallback,
   useEffect,
@@ -32,6 +36,11 @@ type ReducedProps<TProps> = {
 };
 type CallbackRef<T> = T => mixed;
 
+type AnimatedValueListeners = Array<{
+  propValue: AnimatedValue,
+  listenerId: string,
+}>;
+
 export default function useAnimatedProps<TProps: {...}, TInstance>(
   props: TProps,
 ): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
@@ -49,6 +58,14 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
   );
   const useNativePropsInFabric =
     ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
+  const useSetNativePropsInNativeAnimationsInFabric =
+    ReactNativeFeatureFlags.shouldUseSetNativePropsInNativeAnimationsInFabric();
+
+  const useAnimatedPropsLifecycle =
+    ReactNativeFeatureFlags.usePassiveEffectsForAnimations()
+      ? useAnimatedPropsLifecycle_passiveEffects
+      : useAnimatedPropsLifecycle_layoutEffects;
+
   useAnimatedPropsLifecycle(node);
 
   // TODO: This "effect" does three things:
@@ -87,7 +104,12 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
           if (isFabricNode) {
             // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
             // Must not be called in Paper.
-            scheduleUpdate();
+            if (useSetNativePropsInNativeAnimationsInFabric) {
+              // $FlowFixMe[incompatible-use]
+              instance.setNativeProps(node.__getAnimatedValue());
+            } else {
+              scheduleUpdate();
+            }
           }
           return;
         }
@@ -139,6 +161,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
 
       const target = getEventTarget(instance);
       const events = [];
+      const animatedValueListeners: AnimatedValueListeners = [];
 
       for (const propName in props) {
         // $FlowFixMe[invalid-computed-prop]
@@ -146,6 +169,8 @@ 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);
         }
       }
 
@@ -155,18 +180,25 @@ 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);
+        }
       };
     },
-    [props, node, useNativePropsInFabric],
+    [
+      node,
+      useNativePropsInFabric,
+      useSetNativePropsInNativeAnimationsInFabric,
+      props,
+    ],
   );
   const callbackRef = useRefEffect<TInstance>(refEffect);
 
   return [reduceAnimatedProps<TProps>(node), callbackRef];
 }
 
-function reduceAnimatedProps<TProps>(
-  node: AnimatedProps,
-): ReducedProps<TProps> {
+function reduceAnimatedProps<TProps>(node: AnimatedNode): 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 {
@@ -175,6 +207,35 @@ 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`
@@ -182,7 +243,7 @@ function reduceAnimatedProps<TProps>(
  * nodes. So in order to optimize this, we avoid detaching until the next attach
  * unless we are unmounting.
  */
-function useAnimatedPropsLifecycle(node: AnimatedProps): void {
+function useAnimatedPropsLifecycle_layoutEffects(node: AnimatedProps): void {
   const prevNodeRef = useRef<?AnimatedProps>(null);
   const isUnmountingRef = useRef<boolean>(false);
 
@@ -191,6 +252,20 @@ function useAnimatedPropsLifecycle(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();
+    };
   });
 
   useLayoutEffect(() => {
@@ -220,6 +295,66 @@ function useAnimatedPropsLifecycle(node: AnimatedProps): void {
   }, [node]);
 }
 
+/**
+ * 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.
+ *
+ * NOTE: unlike `useAnimatedPropsLifecycle_layoutEffects`, this version uses passive effects to setup animation graph.
+ */
+function useAnimatedPropsLifecycle_passiveEffects(node: AnimatedProps): void {
+  const prevNodeRef = useRef<?AnimatedProps>(null);
+  const isUnmountingRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    // It is ok for multiple components to call `flushQueue` because it noops
+    // 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();
+  });
+
+  useEffect(() => {
+    isUnmountingRef.current = false;
+    return () => {
+      isUnmountingRef.current = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    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).
+      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;
+      }
+
+      drivenAnimationEndedListener?.remove();
+    };
+  }, [node]);
+}
+
 function getEventTarget<TInstance>(instance: TInstance): TInstance {
   return typeof instance === 'object' &&
     typeof instance?.getScrollableNode === 'function'

package/Libraries/BatchedBridge/NativeModules.js

@@ -102,6 +102,7 @@ function genMethod(moduleID: number, methodID: number, type: MethodType) {
       // In case we reject, capture a useful stack trace here.
       /* $FlowFixMe[class-object-subtyping] added when improving typing for
        * this parameters */
+      // $FlowFixMe[incompatible-type]
       const enqueueingFrameError: ExtendedError = new Error();
       return new Promise((resolve, reject) => {
         BatchedBridge.enqueueNativeCall(
@@ -171,6 +172,7 @@ function updateErrorWithErrorData(
 ): ExtendedError {
   /* $FlowFixMe[class-object-subtyping] added when improving typing for this
    * parameters */
+  // $FlowFixMe[incompatible-return]
   return Object.assign(error, errorData || {});
 }
 

package/Libraries/Blob/FileReader.js

@@ -34,7 +34,7 @@ const EMPTY = 0;
 const LOADING = 1;
 const DONE = 2;
 
-class FileReader extends (EventTarget(...READER_EVENTS): any) {
+class FileReader extends (EventTarget(...READER_EVENTS): typeof EventTarget) {
   static EMPTY: number = EMPTY;
   static LOADING: number = LOADING;
   static DONE: number = DONE;

package/Libraries/Blob/URL.js

@@ -27,7 +27,7 @@ if (
   }
 }
 
-/**
+/*
  * To allow Blobs be accessed via `content://` URIs,
  * you need to register `BlobProvider` as a ContentProvider in your app's `AndroidManifest.xml`:
  *
@@ -52,67 +52,7 @@ if (
  * ```
  */
 
-// Small subset from whatwg-url: https://github.com/jsdom/whatwg-url/tree/master/src
-// The reference code bloat comes from Unicode issues with URLs, so those won't work here.
-export class URLSearchParams {
-  _searchParams: Array<Array<string>> = [];
-
-  constructor(params: any) {
-    if (typeof params === 'object') {
-      Object.keys(params).forEach(key => this.append(key, params[key]));
-    }
-  }
-
-  append(key: string, value: string): void {
-    this._searchParams.push([key, value]);
-  }
-
-  delete(name: string): void {
-    throw new Error('URLSearchParams.delete is not implemented');
-  }
-
-  get(name: string): void {
-    throw new Error('URLSearchParams.get is not implemented');
-  }
-
-  getAll(name: string): void {
-    throw new Error('URLSearchParams.getAll is not implemented');
-  }
-
-  has(name: string): void {
-    throw new Error('URLSearchParams.has is not implemented');
-  }
-
-  set(name: string, value: string): void {
-    throw new Error('URLSearchParams.set is not implemented');
-  }
-
-  sort(): void {
-    throw new Error('URLSearchParams.sort is not implemented');
-  }
-
-  // $FlowFixMe[unsupported-syntax]
-  // $FlowFixMe[missing-local-annot]
-  [Symbol.iterator]() {
-    return this._searchParams[Symbol.iterator]();
-  }
-
-  toString(): string {
-    if (this._searchParams.length === 0) {
-      return '';
-    }
-    const last = this._searchParams.length - 1;
-    return this._searchParams.reduce((acc, curr, index) => {
-      return (
-        acc +
-        encodeURIComponent(curr[0]) +
-        '=' +
-        encodeURIComponent(curr[1]) +
-        (index === last ? '' : '&')
-      );
-    }, '');
-  }
-}
+export {URLSearchParams} from './URLSearchParams';
 
 function validateBaseUrl(url: string) {
   // from this MIT-licensed gist: https://gist.github.com/dperini/729294

package/Libraries/Blob/URLSearchParams.js

@@ -0,0 +1,71 @@
+/**
+ * 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
+ * @flow
+ */
+
+// Small subset from whatwg-url: https://github.com/jsdom/whatwg-url/tree/master/src
+// The reference code bloat comes from Unicode issues with URLs, so those won't work here.
+export class URLSearchParams {
+  _searchParams: Array<Array<string>> = [];
+
+  constructor(params: any) {
+    if (typeof params === 'object') {
+      Object.keys(params).forEach(key => this.append(key, params[key]));
+    }
+  }
+
+  append(key: string, value: string): void {
+    this._searchParams.push([key, value]);
+  }
+
+  delete(name: string): void {
+    throw new Error('URLSearchParams.delete is not implemented');
+  }
+
+  get(name: string): void {
+    throw new Error('URLSearchParams.get is not implemented');
+  }
+
+  getAll(name: string): void {
+    throw new Error('URLSearchParams.getAll is not implemented');
+  }
+
+  has(name: string): void {
+    throw new Error('URLSearchParams.has is not implemented');
+  }
+
+  set(name: string, value: string): void {
+    throw new Error('URLSearchParams.set is not implemented');
+  }
+
+  sort(): void {
+    throw new Error('URLSearchParams.sort is not implemented');
+  }
+
+  // $FlowFixMe[unsupported-syntax]
+  // $FlowFixMe[missing-local-annot]
+  [Symbol.iterator]() {
+    return this._searchParams[Symbol.iterator]();
+  }
+
+  toString(): string {
+    if (this._searchParams.length === 0) {
+      return '';
+    }
+    const last = this._searchParams.length - 1;
+    return this._searchParams.reduce((acc, curr, index) => {
+      return (
+        acc +
+        encodeURIComponent(curr[0]) +
+        '=' +
+        encodeURIComponent(curr[1]) +
+        (index === last ? '' : '&')
+      );
+    }, '');
+  }
+}

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -105,7 +105,7 @@ type Props = $ReadOnly<{|
   /**
    * The navigation view that will be rendered to the side of the screen and can be pulled in.
    */
-  renderNavigationView: () => React.Element<any>,
+  renderNavigationView: () => React.MixedElement,
 
   /**
    * Make the drawer take the entire screen and draw the background of the

package/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js

@@ -22,7 +22,7 @@ class RefreshControlMock extends React.Component<{...}> {
   componentDidMount() {
     RefreshControlMock.latestRef = this;
   }
-  render(): React.Element<typeof RCTRefreshControl> {
+  render(): React.MixedElement {
     return <RCTRefreshControl />;
   }
 }