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

package/Libraries/Alert/NativeAlertManager.js

@@ -8,6 +8,6 @@
  * @format
  */
 
-export * from '../../src/private/specs/modules/NativeAlertManager';
-import NativeAlertManager from '../../src/private/specs/modules/NativeAlertManager';
+export * from '../../src/private/specs_DEPRECATED/modules/NativeAlertManager';
+import NativeAlertManager from '../../src/private/specs_DEPRECATED/modules/NativeAlertManager';
 export default NativeAlertManager;

package/Libraries/Alert/RCTAlertManager.android.js

@@ -11,7 +11,7 @@ import NativeDialogManagerAndroid from '../NativeModules/specs/NativeDialogManag
 
 function emptyCallback() {}
 
-module.exports = {
+export default {
   alertWithArgs: function (args, callback) {
     // TODO(5998984): Polyfill it correctly with DialogManagerAndroid
     if (!NativeDialogManagerAndroid) {

package/Libraries/Alert/RCTAlertManager.flow.js

@@ -0,0 +1,20 @@
+/**
+ * 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 strict-local
+ */
+
+import type {Args} from './NativeAlertManager';
+
+declare const RCTAlertManager: {
+  alertWithArgs(
+    args: Args,
+    callback: (id: number, value: string) => void,
+  ): void,
+};
+
+export default RCTAlertManager;

package/Libraries/Alert/RCTAlertManager.ios.js

@@ -12,7 +12,7 @@ import type {Args} from './NativeAlertManager';
 
 import NativeAlertManager from './NativeAlertManager';
 
-module.exports = {
+export default {
   alertWithArgs(
     args: Args,
     callback: (id: number, value: string) => void,

package/Libraries/Animated/AnimatedMock.js

@@ -192,4 +192,4 @@ export default {
   forkEvent: AnimatedImplementation.forkEvent,
   unforkEvent: AnimatedImplementation.unforkEvent,
   Event: AnimatedEvent,
-};
+} as typeof AnimatedImplementation;

package/Libraries/Animated/NativeAnimatedModule.js

@@ -8,6 +8,6 @@
  * @format
  */
 
-export * from '../../src/private/specs/modules/NativeAnimatedModule';
-import NativeAnimatedModule from '../../src/private/specs/modules/NativeAnimatedModule';
+export * from '../../src/private/specs_DEPRECATED/modules/NativeAnimatedModule';
+import NativeAnimatedModule from '../../src/private/specs_DEPRECATED/modules/NativeAnimatedModule';
 export default NativeAnimatedModule;

package/Libraries/Animated/NativeAnimatedTurboModule.js

@@ -8,6 +8,6 @@
  * @format
  */
 
-export * from '../../src/private/specs/modules/NativeAnimatedTurboModule';
-import NativeAnimatedTurboModule from '../../src/private/specs/modules/NativeAnimatedTurboModule';
+export * from '../../src/private/specs_DEPRECATED/modules/NativeAnimatedTurboModule';
+import NativeAnimatedTurboModule from '../../src/private/specs_DEPRECATED/modules/NativeAnimatedTurboModule';
 export default NativeAnimatedTurboModule;

package/Libraries/Animated/createAnimatedComponent.js

@@ -10,10 +10,10 @@
 
 import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
 
+import createAnimatedPropsHook from '../../src/private/animated/createAnimatedPropsHook';
 import composeStyles from '../../src/private/styles/composeStyles';
 import View from '../Components/View/View';
 import useMergeRefs from '../Utilities/useMergeRefs';
-import useAnimatedProps from './useAnimatedProps';
 import * as React from 'react';
 import {useMemo} from 'react';
 
@@ -58,14 +58,14 @@ export function unstable_createAnimatedComponentWithAllowlist<
   Component: component(ref: React.RefSetter<TInstance>, ...TProps),
   allowlist: ?AnimatedPropsAllowlist,
 ): StrictAnimatedComponentType<TProps, TInstance> {
+  const useAnimatedProps = createAnimatedPropsHook(allowlist);
+
   const AnimatedComponent = React.forwardRef<
     StrictAnimatedProps<TProps>,
     TInstance,
   >((props, forwardedRef) => {
     const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
-      // $FlowFixMe[incompatible-call]
       props,
-      allowlist,
     );
     const ref = useMergeRefs<TInstance>(callbackRef, forwardedRef);
 

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -9,6 +9,7 @@
  */
 
 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';
@@ -84,6 +85,7 @@ function _executeAsAnimatedBatch(id: string, operation: () => void) {
  * See https://reactnative.dev/docs/animatedvalue
  */
 export default class AnimatedValue extends AnimatedWithChildren {
+  #listenerCount: number = 0;
   #updateSubscription: ?EventSubscription = null;
 
   _value: number;
@@ -105,20 +107,8 @@ export default class AnimatedValue extends AnimatedWithChildren {
     }
   }
 
-  __attach(): void {
+  __detach() {
     if (this.__isNative) {
-      // 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.
-      this.#ensureUpdateSubscriptionExists();
-    }
-  }
-
-  __detach(): void {
-    if (this.__isNative) {
-      this.#updateSubscription?.remove();
       NativeAnimatedAPI.getValue(this.__getNativeTag(), value => {
         this._value = value - this._offset;
       });
@@ -131,6 +121,38 @@ export default class AnimatedValue extends AnimatedWithChildren {
     return this._value + this._offset;
   }
 
+  __makeNative(platformConfig: ?PlatformConfig): void {
+    super.__makeNative(platformConfig);
+    if (this.#listenerCount > 0) {
+      this.#ensureUpdateSubscriptionExists();
+    }
+  }
+
+  addListener(callback: (value: any) => mixed): string {
+    const id = super.addListener(callback);
+    this.#listenerCount++;
+    if (this.__isNative) {
+      this.#ensureUpdateSubscriptionExists();
+    }
+    return id;
+  }
+
+  removeListener(id: string): void {
+    super.removeListener(id);
+    this.#listenerCount--;
+    if (this.__isNative && this.#listenerCount === 0) {
+      this.#updateSubscription?.remove();
+    }
+  }
+
+  removeAllListeners(): void {
+    super.removeAllListeners();
+    this.#listenerCount = 0;
+    if (this.__isNative) {
+      this.#updateSubscription?.remove();
+    }
+  }
+
   #ensureUpdateSubscriptionExists(): void {
     if (this.#updateSubscription != null) {
       return;

package/Libraries/Animated/useAnimatedProps.js

@@ -8,339 +8,11 @@
  * @format
  */
 
-import type {EventSubscription} from '../EventEmitter/NativeEventEmitter';
-import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
+import type {AnimatedPropsHook} from '../../src/private/animated/createAnimatedPropsHook';
 
-import NativeAnimatedHelper from '../../src/private/animated/NativeAnimatedHelper';
-import {useAnimatedPropsMemo} from '../../src/private/animated/useAnimatedPropsMemo';
-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 AnimatedProps from './nodes/AnimatedProps';
-import {
-  useCallback,
-  useEffect,
-  useInsertionEffect,
-  useLayoutEffect,
-  useMemo,
-  useReducer,
-  useRef,
-} from 'react';
-
-type ReducedProps<TProps> = {
-  ...TProps,
-  collapsable: boolean,
-  ...
-};
-type CallbackRef<T> = T => mixed;
-
-type UpdateCallback = () => void;
-
-const useMemoOrAnimatedPropsMemo =
-  ReactNativeFeatureFlags.enableAnimatedPropsMemo()
-    ? useAnimatedPropsMemo
-    : useMemo;
-
-export default function useAnimatedProps<TProps: {...}, TInstance>(
-  props: TProps,
-  allowlist?: ?AnimatedPropsAllowlist,
-): [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 allowlistIfEnabled = ReactNativeFeatureFlags.enableAnimatedAllowlist()
-    ? allowlist
-    : null;
-
-  const node = useMemoOrAnimatedPropsMemo(
-    () =>
-      new AnimatedProps(
-        props,
-        () => onUpdateRef.current?.(),
-        allowlistIfEnabled,
-      ),
-    [allowlistIfEnabled, props],
-  );
-
-  const useNativePropsInFabric =
-    ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
-
-  const useAnimatedPropsLifecycle =
-    ReactNativeFeatureFlags.useInsertionEffectsForAnimations()
-      ? useAnimatedPropsLifecycle_insertionEffects
-      : useAnimatedPropsLifecycle_layoutEffects;
-
-  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 = [];
-
-      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]);
-        }
-      }
-
-      return () => {
-        onUpdateRef.current = null;
-
-        for (const [propName, propValue] of events) {
-          propValue.__detach(target, propName);
-        }
-      };
-    },
-    [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 {
-    ...(ReactNativeFeatureFlags.enableAnimatedPropsMemo()
-      ? node.__getValueWithStaticProps(props)
-      : node.__getValue()),
-    collapsable: false,
-  };
-}
+import createAnimatedPropsHook from '../../src/private/animated/createAnimatedPropsHook';
 
 /**
- * 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.
+ * @deprecated
  */
-function useAnimatedPropsLifecycle_layoutEffects(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();
-    let drivenAnimationEndedListener: ?EventSubscription = null;
-    if (node.__isNative) {
-      drivenAnimationEndedListener =
-        NativeAnimatedHelper.nativeEventEmitter.addListener(
-          'onUserDrivenAnimationEnded',
-          data => {
-            node.update();
-          },
-        );
-    }
-
-    return () => {
-      drivenAnimationEndedListener?.remove();
-    };
-  });
-
-  useLayoutEffect(() => {
-    isUnmountingRef.current = false;
-    return () => {
-      isUnmountingRef.current = true;
-    };
-  }, []);
-
-  useLayoutEffect(() => {
-    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, 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 useAnimatedPropsLifecycle_insertionEffects(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();
-  });
-
-  useInsertionEffect(() => {
-    isUnmountingRef.current = false;
-    return () => {
-      isUnmountingRef.current = true;
-    };
-  }, []);
-
-  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).
-      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'
-    ? // $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?.(),
-    )
-  );
-}
+export default createAnimatedPropsHook(null) as AnimatedPropsHook;

package/Libraries/AppState/AppState.js

@@ -125,4 +125,4 @@ class AppState {
   }
 }
 
-module.exports = (new AppState(): AppState);
+export default (new AppState(): AppState);

package/Libraries/AppState/NativeAppState.js

@@ -8,6 +8,6 @@
  * @format
  */
 
-export * from '../../src/private/specs/modules/NativeAppState';
-import NativeAppState from '../../src/private/specs/modules/NativeAppState';
+export * from '../../src/private/specs_DEPRECATED/modules/NativeAppState';
+import NativeAppState from '../../src/private/specs_DEPRECATED/modules/NativeAppState';
 export default NativeAppState;

package/Libraries/BatchedBridge/BatchedBridge.js

@@ -10,7 +10,9 @@
 
 'use strict';
 
-const MessageQueue = require('./MessageQueue');
+import typeof MessageQueueT from './MessageQueue';
+
+const MessageQueue: MessageQueueT = require('./MessageQueue').default;
 
 const BatchedBridge: MessageQueue = new MessageQueue();
 
@@ -25,4 +27,4 @@ Object.defineProperty(global, '__fbBatchedBridge', {
   value: BatchedBridge,
 });
 
-module.exports = BatchedBridge;
+export default BatchedBridge;

package/Libraries/BatchedBridge/MessageQueue.js

@@ -14,7 +14,7 @@ const Systrace = require('../Performance/Systrace');
 const deepFreezeAndThrowOnMutationInDev = require('../Utilities/deepFreezeAndThrowOnMutationInDev');
 const stringifySafe = require('../Utilities/stringifySafe').default;
 const warnOnce = require('../Utilities/warnOnce');
-const ErrorUtils = require('../vendor/core/ErrorUtils');
+const ErrorUtils = require('../vendor/core/ErrorUtils').default;
 const invariant = require('invariant');
 
 export type SpyData = {
@@ -489,4 +489,4 @@ class MessageQueue {
   }
 }
 
-module.exports = MessageQueue;
+export default MessageQueue;

package/Libraries/BatchedBridge/NativeModules.js

@@ -12,7 +12,7 @@
 
 import type {ExtendedError} from '../Core/ExtendedError';
 
-const BatchedBridge = require('./BatchedBridge');
+const BatchedBridge = require('./BatchedBridge').default;
 const invariant = require('invariant');
 
 export type ModuleConfig = [
@@ -176,7 +176,8 @@ function updateErrorWithErrorData(
   return Object.assign(error, errorData || {});
 }
 
-let NativeModules: {[moduleName: string]: $FlowFixMe, ...} = {};
+/* $FlowFixMe[unclear-type] unclear type of NativeModules */
+let NativeModules: {[moduleName: string]: any, ...} = {};
 if (global.nativeModuleProxy) {
   NativeModules = global.nativeModuleProxy;
 } else {
@@ -209,4 +210,4 @@ if (global.nativeModuleProxy) {
   );
 }
 
-module.exports = NativeModules;
+export default NativeModules;

package/Libraries/Blob/Blob.js

@@ -58,7 +58,7 @@ class Blob {
    * Reference: https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob
    */
   constructor(parts: Array<Blob | string> = [], options?: BlobOptions) {
-    const BlobManager = require('./BlobManager');
+    const BlobManager = require('./BlobManager').default;
     this.data = BlobManager.createFromParts(parts, options).data;
   }
 
@@ -82,7 +82,7 @@ class Blob {
   }
 
   slice(start?: number, end?: number, contentType: string = ''): Blob {
-    const BlobManager = require('./BlobManager');
+    const BlobManager = require('./BlobManager').default;
     let {offset, size} = this.data;
 
     if (typeof start === 'number') {
@@ -132,7 +132,7 @@ class Blob {
    * `new Blob([blob, ...])` actually copies the data in memory.
    */
   close() {
-    const BlobManager = require('./BlobManager');
+    const BlobManager = require('./BlobManager').default;
     BlobManager.release(this.data.blobId);
     this.data = null;
   }
@@ -155,4 +155,4 @@ class Blob {
   }
 }
 
-module.exports = Blob;
+export default Blob;

package/Libraries/Blob/BlobManager.js

@@ -8,12 +8,13 @@
  * @format
  */
 
+import typeof BlobT from './Blob';
 import type {BlobCollector, BlobData, BlobOptions} from './BlobTypes';
 
 import NativeBlobModule from './NativeBlobModule';
 import invariant from 'invariant';
 
-const Blob = require('./Blob');
+const Blob: BlobT = require('./Blob').default;
 const BlobRegistry = require('./BlobRegistry');
 
 /*eslint-disable no-bitwise */
@@ -176,4 +177,4 @@ class BlobManager {
   }
 }
 
-module.exports = BlobManager;
+export default BlobManager;