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

package/IntegrationTests/LoggingTestModule.js

@@ -10,7 +10,8 @@
 'use strict';
 
 const invariant = require('invariant');
-const BatchedBridge = require('react-native/Libraries/BatchedBridge/BatchedBridge');
+const BatchedBridge =
+  require('react-native/Libraries/BatchedBridge/BatchedBridge').default;
 
 const LoggingTestModule = {
   logToConsole: function (str) {

package/IntegrationTests/PromiseTest.js

@@ -10,69 +10,77 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {View} = ReactNative;
-const {TestModule} = ReactNative.NativeModules;
+import * as React from 'react';
+import {useEffect, useRef} from 'react';
+import {NativeModules, View} from 'react-native';
 
-class PromiseTest extends React.Component<{...}> {
-  shouldResolve: boolean = false;
-  shouldReject: boolean = false;
-  shouldSucceedAsync: boolean = false;
-  shouldThrowAsync: boolean = false;
+const {TestModule} = NativeModules;
 
-  componentDidMount() {
-    // $FlowFixMe[unused-promise]
-    Promise.all([
-      this.testShouldResolve(),
-      this.testShouldReject(),
-      this.testShouldSucceedAsync(),
-      this.testShouldThrowAsync(),
-    ]).then(() =>
-      TestModule.markTestPassed(
-        this.shouldResolve &&
-          this.shouldReject &&
-          this.shouldSucceedAsync &&
-          this.shouldThrowAsync,
-      ),
-    );
-  }
+function PromiseTest(): React.Node {
+  const shouldResolve = useRef(false);
+  const shouldReject = useRef(false);
+  const shouldSucceedAsync = useRef(false);
+  const shouldThrowAsync = useRef(false);
 
-  testShouldResolve: () => any = () => {
+  const testShouldResolve = () => {
     return TestModule.shouldResolve()
-      .then(() => (this.shouldResolve = true))
-      .catch(() => (this.shouldResolve = false));
+      .then(() => {
+        shouldResolve.current = true;
+      })
+      .catch(() => {
+        shouldResolve.current = false;
+      });
   };
 
-  testShouldReject: () => any = () => {
+  const testShouldReject = () => {
     return TestModule.shouldReject()
-      .then(() => (this.shouldReject = false))
-      .catch(() => (this.shouldReject = true));
+      .then(() => {
+        shouldReject.current = false;
+      })
+      .catch(() => {
+        shouldReject.current = true;
+      });
   };
 
-  testShouldSucceedAsync: () => Promise<any> = async (): Promise<any> => {
+  const testShouldSucceedAsync = async () => {
     try {
       await TestModule.shouldResolve();
-      this.shouldSucceedAsync = true;
+      shouldSucceedAsync.current = true;
     } catch (e) {
-      this.shouldSucceedAsync = false;
+      shouldSucceedAsync.current = false;
     }
   };
 
-  testShouldThrowAsync: () => Promise<any> = async (): Promise<any> => {
+  const testShouldThrowAsync = async () => {
     try {
       await TestModule.shouldReject();
-      this.shouldThrowAsync = false;
+      shouldThrowAsync.current = false;
     } catch (e) {
-      this.shouldThrowAsync = true;
+      shouldThrowAsync.current = true;
     }
   };
 
-  render(): React.Node {
-    return <View />;
-  }
-}
+  useEffect(() => {
+    async function runTests() {
+      await Promise.all([
+        testShouldResolve(),
+        testShouldReject(),
+        testShouldSucceedAsync(),
+        testShouldThrowAsync(),
+      ]);
 
-PromiseTest.displayName = 'PromiseTest';
+      TestModule.markTestPassed(
+        shouldResolve.current &&
+          shouldReject.current &&
+          shouldSucceedAsync.current &&
+          shouldThrowAsync.current,
+      );
+    }
+
+    runTests().catch(console.error);
+  }, []);
+
+  return <View />;
+}
 
-module.exports = PromiseTest;
+export default PromiseTest;

package/IntegrationTests/SimpleSnapshotTest.js

@@ -10,32 +10,29 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
+import * as React from 'react';
+import {useEffect} from 'react';
+import {NativeModules, StyleSheet, View} from 'react-native';
 
-const {StyleSheet, View} = ReactNative;
-const {TestModule} = ReactNative.NativeModules;
+const {TestModule} = NativeModules;
 
-class SimpleSnapshotTest extends React.Component<{...}> {
-  componentDidMount(): void {
+function SimpleSnapshotTest(): React.Node {
+  const done = (success: boolean) => {
+    TestModule.markTestPassed(success);
+  };
+  useEffect(() => {
     if (!TestModule.verifySnapshot) {
       throw new Error('TestModule.verifySnapshot not defined.');
     }
-    requestAnimationFrame(() => TestModule.verifySnapshot(this.done));
-  }
-
-  done: (success: boolean) => void = (success: boolean) => {
-    TestModule.markTestPassed(success);
-  };
-
-  render(): React.Node {
-    return (
-      <View style={styles.container}>
-        <View style={styles.box1} />
-        <View style={styles.box2} />
-      </View>
-    );
-  }
+    requestAnimationFrame(() => TestModule.verifySnapshot(done));
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.box1} />
+      <View style={styles.box2} />
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -57,6 +54,4 @@ const styles = StyleSheet.create({
   },
 });
 
-SimpleSnapshotTest.displayName = 'SimpleSnapshotTest';
-
-module.exports = SimpleSnapshotTest;
+export default SimpleSnapshotTest;

package/IntegrationTests/SyncMethodTest.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {View} = ReactNative;
+import * as React from 'react';
+import {useEffect} from 'react';
+import {NativeModules, View} from 'react-native';
 
-const {TestModule, RNTesterTestModule} = ReactNative.NativeModules;
+const {TestModule, RNTesterTestModule} = NativeModules;
 
-class SyncMethodTest extends React.Component<{...}> {
-  componentDidMount(): void {
+function SyncMethodTest(): React.Node {
+  useEffect(() => {
     if (
       RNTesterTestModule.echoString('test string value') !== 'test string value'
     ) {
@@ -41,13 +41,9 @@ class SyncMethodTest extends React.Component<{...}> {
         );
       }
     });
-  }
+  }, []);
 
-  render(): React.Node {
-    return <View />;
-  }
+  return <View />;
 }
 
-SyncMethodTest.displayName = 'SyncMethodTest';
-
-module.exports = SyncMethodTest;
+export default SyncMethodTest;

package/IntegrationTests/TimersTest.js

@@ -15,12 +15,12 @@ const ReactNative = require('react-native');
 const {StyleSheet, Text, View} = ReactNative;
 const {TestModule} = ReactNative.NativeModules;
 
-type Props = $ReadOnly<{||}>;
+type Props = $ReadOnly<{}>;
 
-type State = {|
+type State = {
   count: number,
   done: boolean,
-|};
+};
 
 type ImmediateID = Object;
 

package/Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -40,7 +40,7 @@ const ActionSheetIOS = {
    * See https://reactnative.dev/docs/actionsheetios#showactionsheetwithoptions
    */
   showActionSheetWithOptions(
-    options: {|
+    options: {
       +title?: ?string,
       +message?: ?string,
       +options: Array<string>,
@@ -52,7 +52,7 @@ const ActionSheetIOS = {
       +disabledButtonTintColor?: ColorValue | ProcessedColorValue,
       +userInterfaceStyle?: string,
       +disabledButtonIndices?: Array<number>,
-    |},
+    },
     callback: (buttonIndex: number) => void,
   ) {
     invariant(
@@ -172,4 +172,4 @@ const ActionSheetIOS = {
   },
 };
 
-module.exports = ActionSheetIOS;
+export default ActionSheetIOS;

package/Libraries/Alert/Alert.js

@@ -174,4 +174,4 @@ class Alert {
   }
 }
 
-module.exports = Alert;
+export default Alert;

package/Libraries/Alert/Alert.win32.js

@@ -93,4 +93,4 @@ class Alert {
   }
 }
 
-module.exports = Alert;
+export default Alert;

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.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/AnimatedWeb.js

@@ -10,17 +10,35 @@
 
 'use strict';
 
+import type {AnimatedComponentType} from './createAnimatedComponent';
+
 import AnimatedImplementation from './AnimatedImplementation';
+import React from 'react';
 
 export default {
   ...AnimatedImplementation,
-  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
-   * types. Plain intrinsic components can't be typed like this */
-  div: (AnimatedImplementation.createAnimatedComponent('div'): $FlowFixMe),
-  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
-   * types. Plain intrinsic components can't be typed like this */
-  span: (AnimatedImplementation.createAnimatedComponent('span'): $FlowFixMe),
-  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
-   * types. Plain intrinsic components can't be typed like this */
-  img: (AnimatedImplementation.createAnimatedComponent('img'): $FlowFixMe),
+  div: AnimatedImplementation.createAnimatedComponent<
+    React.PropsOf<'div'>,
+    mixed,
+  >(
+    /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+     * types. Plain intrinsic components can't be typed like this */
+    'div',
+  ) as AnimatedComponentType<React.PropsOf<'div'>>,
+  span: AnimatedImplementation.createAnimatedComponent<
+    React.PropsOf<'span'>,
+    mixed,
+  >(
+    /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+     * types. Plain intrinsic components can't be typed like this */
+    'span',
+  ) as AnimatedComponentType<React.PropsOf<'span'>>,
+  img: AnimatedImplementation.createAnimatedComponent<
+    React.PropsOf<'img'>,
+    mixed,
+  >(
+    /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+     * types. Plain intrinsic components can't be typed like this */
+    'img',
+  ) as AnimatedComponentType<React.PropsOf<'img'>>,
 };

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

@@ -17,13 +17,13 @@ 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,
   useInsertionEffect,
-  useLayoutEffect,
-  useMemo,
   useReducer,
   useRef,
 } from 'react';
@@ -37,10 +37,10 @@ type CallbackRef<T> = T => mixed;
 
 type UpdateCallback = () => void;
 
-const useMemoOrAnimatedPropsMemo =
-  ReactNativeFeatureFlags.enableAnimatedPropsMemo()
-    ? useAnimatedPropsMemo
-    : useMemo;
+type AnimatedValueListeners = Array<{
+  propValue: AnimatedValue,
+  listenerId: string,
+}>;
 
 export default function useAnimatedProps<TProps: {...}, TInstance>(
   props: TProps,
@@ -50,28 +50,14 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
   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 node = useAnimatedPropsMemo(
+    () => new AnimatedProps(props, () => onUpdateRef.current?.(), allowlist),
+    [allowlist, props],
   );
 
   const useNativePropsInFabric =
     ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
 
-  const useAnimatedPropsLifecycle =
-    ReactNativeFeatureFlags.useInsertionEffectsForAnimations()
-      ? useAnimatedPropsLifecycle_insertionEffects
-      : useAnimatedPropsLifecycle_layoutEffects;
-
   useAnimatedPropsLifecycle(node);
 
   // TODO: This "effect" does three things:
@@ -162,6 +148,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]
@@ -169,6 +156,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);
         }
       }
 
@@ -178,6 +167,10 @@ 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],
@@ -194,13 +187,40 @@ function reduceAnimatedProps<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()),
+    ...node.__getValueWithStaticProps(props),
     collapsable: false,
   };
 }
 
+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`
@@ -208,7 +228,7 @@ function reduceAnimatedProps<TProps>(
  * nodes. So in order to optimize this, we avoid detaching until the next attach
  * unless we are unmounting.
  */
-function useAnimatedPropsLifecycle_layoutEffects(node: AnimatedProps): void {
+function useAnimatedPropsLifecycle(node: AnimatedProps): void {
   const prevNodeRef = useRef<?AnimatedProps>(null);
   const isUnmountingRef = useRef<boolean>(false);
 
@@ -233,51 +253,6 @@ function useAnimatedPropsLifecycle_layoutEffects(node: AnimatedProps): void {
     };
   });
 
-  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 () => {
@@ -287,17 +262,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).
@@ -312,8 +276,6 @@ function useAnimatedPropsLifecycle_insertionEffects(node: AnimatedProps): void {
       } else {
         prevNodeRef.current = node;
       }
-
-      drivenAnimationEndedListener?.remove();
     };
   }, [node]);
 }

package/Libraries/AppState/AppState.js

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

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;