react-native-windows 0.78.7 → 0.79.0-preview.1

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -85,7 +85,7 @@ function _executeAsAnimatedBatch(id: string, operation: () => void) {
  * See https://reactnative.dev/docs/animatedvalue
  */
 export default class AnimatedValue extends AnimatedWithChildren {
-  #attached: boolean = false;
+  #listenerCount: number = 0;
   #updateSubscription: ?EventSubscription = null;
 
   _value: number;
@@ -107,21 +107,14 @@ export default class AnimatedValue extends AnimatedWithChildren {
     }
   }
 
-  __attach(): void {
-    this.#attached = true;
-    this.#ensureUpdateSubscriptionExists();
-  }
-
-  __detach(): void {
+  __detach() {
     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 {
@@ -130,25 +123,40 @@ export default class AnimatedValue extends AnimatedWithChildren {
 
   __makeNative(platformConfig: ?PlatformConfig): void {
     super.__makeNative(platformConfig);
-    this.#ensureUpdateSubscriptionExists();
+    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();
+    }
   }
 
-  /**
-   * 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 =

package/Libraries/Animated/useAnimatedProps.js

@@ -8,340 +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,
-  };
-}
-
-/**
- * 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_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]);
-}
+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_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();
-    let drivenAnimationEndedListener: ?EventSubscription = null;
-    if (node.__isNative) {
-      drivenAnimationEndedListener =
-        NativeAnimatedHelper.nativeEventEmitter.addListener(
-          'onUserDrivenAnimationEnded',
-          data => {
-            node.update();
-          },
-        );
-    }
-
-    return () => {
-      drivenAnimationEndedListener?.remove();
-    };
-  });
-
-  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]);
-}
-
-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/Animated/useAnimatedValue.js

@@ -8,14 +8,12 @@
  * @format
  */
 
-import type {AnimatedValueConfig} from './nodes/AnimatedValue';
-
 import Animated from './Animated';
 import {useRef} from 'react';
 
 export default function useAnimatedValue(
   initialValue: number,
-  config?: ?AnimatedValueConfig,
+  config?: ?Animated.AnimatedConfig,
 ): Animated.Value {
   const ref = useRef<null | Animated.Value>(null);
   if (ref.current == null) {

package/Libraries/AppState/AppState.js

@@ -14,17 +14,33 @@ import Platform from '../Utilities/Platform';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import NativeAppState from './NativeAppState';
 
-export type AppStateValues = 'inactive' | 'background' | 'active';
+/**
+ * active - The app is running in the foreground
+ * background - The app is running in the background. The user is either:
+ *   - in another app
+ *   - on the home screen
+ *   - @platform android - on another Activity (even if it was launched by your app)
+ * @platform ios - inactive - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
+ */
+export type AppStateStatus = 'inactive' | 'background' | 'active';
 
+/**
+ * change - This even is received when the app state has changed.
+ * memoryWarning - This event is used in the need of throwing memory warning or releasing it.
+ * @platform android - focus - Received when the app gains focus (the user is interacting with the app).
+ * @platform android - blur - Received when the user is not actively interacting with the app.
+ */
 type AppStateEventDefinitions = {
-  change: [AppStateValues],
+  change: [AppStateStatus],
   memoryWarning: [],
   blur: [],
   focus: [],
 };
 
+export type AppStateEvent = $Keys<AppStateEventDefinitions>;
+
 type NativeAppStateEventDefinitions = {
-  appStateDidChange: [{app_state: AppStateValues}],
+  appStateDidChange: [{app_state: AppStateStatus}],
   appStateFocusChange: [boolean],
   memoryWarning: [],
 };
@@ -35,7 +51,7 @@ type NativeAppStateEventDefinitions = {
  *
  * See https://reactnative.dev/docs/appstate
  */
-class AppState {
+class AppStateImpl {
   currentState: ?string = null;
   isAvailable: boolean;
 
@@ -89,7 +105,7 @@ class AppState {
    *
    * See https://reactnative.dev/docs/appstate#addeventlistener
    */
-  addEventListener<K: $Keys<AppStateEventDefinitions>>(
+  addEventListener<K: AppStateEvent>(
     type: K,
     handler: (...$ElementType<AppStateEventDefinitions, K>) => void,
   ): EventSubscription {
@@ -100,7 +116,7 @@ class AppState {
     switch (type) {
       case 'change':
         // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
-        const changeHandler: AppStateValues => void = handler;
+        const changeHandler: AppStateStatus => void = handler;
         return emitter.addListener('appStateDidChange', appStateData => {
           changeHandler(appStateData.app_state);
         });
@@ -125,4 +141,5 @@ class AppState {
   }
 }
 
-module.exports = (new AppState(): AppState);
+const AppState: AppStateImpl = new AppStateImpl();
+export default 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/AppTheme/NativeAppTheme.js

@@ -6,6 +6,6 @@
  * @flow strict-local
  */
 
-export * from '../../src/private/specs/modules/NativeAppTheme';
-import NativeAppTheme from '../../src/private/specs/modules/NativeAppTheme';
+export * from '../../src/private/specs_DEPRECATED/modules/NativeAppTheme';
+import NativeAppTheme from '../../src/private/specs_DEPRECATED/modules/NativeAppTheme';
 export default NativeAppTheme;

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

@@ -11,10 +11,11 @@
 'use strict';
 
 const Systrace = require('../Performance/Systrace');
-const deepFreezeAndThrowOnMutationInDev = require('../Utilities/deepFreezeAndThrowOnMutationInDev');
+const deepFreezeAndThrowOnMutationInDev =
+  require('../Utilities/deepFreezeAndThrowOnMutationInDev').default;
 const stringifySafe = require('../Utilities/stringifySafe').default;
-const warnOnce = require('../Utilities/warnOnce');
-const ErrorUtils = require('../vendor/core/ErrorUtils');
+const warnOnce = require('../Utilities/warnOnce').default;
+const ErrorUtils = require('../vendor/core/ErrorUtils').default;
 const invariant = require('invariant');
 
 export type SpyData = {
@@ -489,4 +490,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 {
@@ -186,7 +187,8 @@ if (global.nativeModuleProxy) {
     '__fbBatchedBridgeConfig is not set, cannot invoke native modules',
   );
 
-  const defineLazyObjectProperty = require('../Utilities/defineLazyObjectProperty');
+  const defineLazyObjectProperty =
+    require('../Utilities/defineLazyObjectProperty').default;
   (bridgeConfig.remoteModuleConfig || []).forEach(
     (config: ModuleConfig, moduleID: number) => {
       // Initially this config will only contain the module name when running in JSC. The actual
@@ -209,4 +211,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;
   }
 
@@ -81,8 +81,8 @@ class Blob {
     return this._data;
   }
 
-  slice(start?: number, end?: number, contentType: string = ''): Blob {
-    const BlobManager = require('./BlobManager');
+  slice(start?: number, end?: number, contentType?: string = ''): Blob {
+    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;