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

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;

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;

package/Libraries/Blob/BlobRegistry.js

@@ -10,7 +10,7 @@
 
 const registry: Map<string, number> = new Map();
 
-const register = (id: string) => {
+export const register = (id: string) => {
   const used = registry.get(id);
 
   if (used != null) {
@@ -20,7 +20,7 @@ const register = (id: string) => {
   }
 };
 
-const unregister = (id: string) => {
+export const unregister = (id: string) => {
   const used = registry.get(id);
 
   if (used != null) {
@@ -32,12 +32,6 @@ const unregister = (id: string) => {
   }
 };
 
-const has = (id: string): number | boolean => {
+export const has = (id: string): number | boolean => {
   return registry.get(id) || false;
 };
-
-module.exports = {
-  register,
-  unregister,
-  has,
-};

package/Libraries/Blob/File.js

@@ -12,7 +12,8 @@
 
 import type {BlobOptions} from './BlobTypes';
 
-const Blob = require('./Blob');
+import Blob from './Blob';
+
 const invariant = require('invariant');
 
 /**
@@ -52,4 +53,4 @@ class File extends Blob {
   }
 }
 
-module.exports = File;
+export default File;

package/Libraries/Blob/FileReader.js

@@ -183,4 +183,4 @@ class FileReader extends (EventTarget(...READER_EVENTS): typeof EventTarget) {
   }
 }
 
-module.exports = FileReader;
+export default FileReader;

package/Libraries/BugReporting/BugReporting.js

@@ -23,7 +23,7 @@ type DebugData = {
 
 function defaultExtras() {
   BugReporting.addFileSource('react_hierarchy.txt', () =>
-    require('./dumpReactTree')(),
+    require('./dumpReactTree').default(),
   );
 }
 
@@ -137,4 +137,4 @@ class BugReporting {
   }
 }
 
-module.exports = BugReporting;
+export default BugReporting;

package/Libraries/BugReporting/dumpReactTree.js

@@ -11,7 +11,7 @@
 'use strict';
 
 /*
-const getReactData = require('getReactData');
+const getReactData = require('getReactData').default;
 
 const INDENTATION_SIZE = 2;
 const MAX_DEPTH = 2;
@@ -148,4 +148,4 @@ function indent(size: number) {
 }
 */
 
-module.exports = dumpReactTree;
+export default dumpReactTree;

package/Libraries/BugReporting/getReactData.js

@@ -184,4 +184,4 @@ function copyWithSet(
   return copyWithSetImpl(obj, path, 0, value);
 }
 
-module.exports = getData;
+export default getData;

package/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.android.js

@@ -33,4 +33,4 @@ function legacySendAccessibilityEvent(
   }
 }
 
-module.exports = legacySendAccessibilityEvent;
+export default legacySendAccessibilityEvent;

package/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.ios.js

@@ -23,4 +23,4 @@ function legacySendAccessibilityEvent(
   }
 }
 
-module.exports = legacySendAccessibilityEvent;
+export default legacySendAccessibilityEvent;

package/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.win32.js

@@ -33,4 +33,4 @@ function legacySendAccessibilityEvent(
   }
 }
 
-module.exports = legacySendAccessibilityEvent;
+export default legacySendAccessibilityEvent;

package/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -19,22 +19,22 @@ import * as React from 'react';
 
 const PlatformActivityIndicator =
   Platform.OS === 'android'
-    ? require('../ProgressBarAndroid/ProgressBarAndroid')
+    ? require('../ProgressBarAndroid/ProgressBarAndroid').default
     : require('./ActivityIndicatorViewNativeComponent').default;
 
 const GRAY = '#999999';
 
 type IndicatorSize = number | 'small' | 'large';
 
-type IOSProps = $ReadOnly<{|
+type IOSProps = $ReadOnly<{
   /**
     Whether the indicator should hide when not animating.
 
     @platform ios
   */
   hidesWhenStopped?: ?boolean,
-|}>;
-type Props = $ReadOnly<{|
+}>;
+type Props = $ReadOnly<{
   ...ViewProps,
   ...IOSProps,
 
@@ -58,7 +58,7 @@ type Props = $ReadOnly<{|
     @type {@platform android} number
   */
   size?: ?IndicatorSize,
-|}>;
+}>;
 
 const ActivityIndicator = (
   {

package/Libraries/Components/Button.js

@@ -27,7 +27,7 @@ import View from './View/View';
 import invariant from 'invariant';
 import * as React from 'react';
 
-type ButtonProps = $ReadOnly<{|
+type ButtonProps = $ReadOnly<{
   /**
     Text to display inside the button. On Android the given title will be
     converted to the uppercased form.
@@ -167,7 +167,7 @@ type ButtonProps = $ReadOnly<{|
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
-|}>;
+}>;
 
 /**
   A basic button component that should render nicely on any platform. Supports a

package/Libraries/Components/Button.win32.js

@@ -28,7 +28,7 @@ import View from './View/View';
 import invariant from 'invariant';
 import * as React from 'react';
 
-type ButtonProps = $ReadOnly<{|
+type ButtonProps = $ReadOnly<{
   /**
     Text to display inside the button. On Android the given title will be
     converted to the uppercased form.
@@ -170,7 +170,7 @@ type ButtonProps = $ReadOnly<{|
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
-|}>;
+}>;
 
 /**
   A basic button component that should render nicely on any platform. Supports a

package/Libraries/Components/Clipboard/Clipboard.js

@@ -13,7 +13,7 @@ import NativeClipboard from './NativeClipboard';
 /**
  * `Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android
  */
-module.exports = {
+export default {
   /**
    * Get content of string type, this method returns a `Promise`, so you can use following code to get clipboard content
    * ```javascript

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

@@ -31,11 +31,11 @@ const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'];
 
 type DrawerStates = 'Idle' | 'Dragging' | 'Settling';
 
-type DrawerSlideEvent = $ReadOnly<{|
+type DrawerSlideEvent = $ReadOnly<{
   offset: number,
-|}>;
+}>;
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   accessibilityRole?: ?AccessibilityRole,
 
   /**
@@ -116,11 +116,11 @@ type Props = $ReadOnly<{|
 
   children?: React.Node,
   style?: ?ViewStyleProp,
-|}>;
+}>;
 
-type State = {|
+type State = {
   drawerOpened: boolean,
-|};
+};
 
 /**
  * React component that wraps the platform `DrawerLayout` (Android only). The
@@ -391,4 +391,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = DrawerLayoutAndroid;
+export default DrawerLayoutAndroid;

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js

@@ -13,5 +13,4 @@
 // $FlowFixMe[cannot-resolve-module]
 import typeof DrawerLayoutAndroid from './DrawerLayoutAndroid.android';
 
-module.exports =
-  require('../UnimplementedViews/UnimplementedView') as $FlowFixMe as DrawerLayoutAndroid;
+export default require('../UnimplementedViews/UnimplementedView') as $FlowFixMe as DrawerLayoutAndroid;

package/Libraries/Components/Keyboard/Keyboard.js

@@ -25,32 +25,32 @@ export type KeyboardEventEasing =
   | 'linear'
   | 'keyboard';
 
-export type KeyboardMetrics = $ReadOnly<{|
+export type KeyboardMetrics = $ReadOnly<{
   screenX: number,
   screenY: number,
   width: number,
   height: number,
-|}>;
+}>;
 
 export type KeyboardEvent = AndroidKeyboardEvent | IOSKeyboardEvent;
 
-type BaseKeyboardEvent = {|
+type BaseKeyboardEvent = {
   duration: number,
   easing: KeyboardEventEasing,
   endCoordinates: KeyboardMetrics,
-|};
+};
 
-export type AndroidKeyboardEvent = $ReadOnly<{|
+export type AndroidKeyboardEvent = $ReadOnly<{
   ...BaseKeyboardEvent,
   duration: 0,
   easing: 'keyboard',
-|}>;
+}>;
 
-export type IOSKeyboardEvent = $ReadOnly<{|
+export type IOSKeyboardEvent = $ReadOnly<{
   ...BaseKeyboardEvent,
   startCoordinates: KeyboardMetrics,
   isEventFromThisApp: boolean,
-|}>;
+}>;
 
 type KeyboardEventDefinitions = {
   keyboardWillShow: [KeyboardEvent],
@@ -202,4 +202,4 @@ class Keyboard {
   }
 }
 
-module.exports = (new Keyboard(): Keyboard);
+export default (new Keyboard(): Keyboard);

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -27,7 +27,7 @@ import View from '../View/View';
 import Keyboard from './Keyboard';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   ...ViewProps,
 
   /**
@@ -51,11 +51,11 @@ type Props = $ReadOnly<{|
    * may be non-zero in some cases. Defaults to 0.
    */
   keyboardVerticalOffset?: number,
-|}>;
+}>;
 
-type State = {|
+type State = {
   bottom: number,
-|};
+};
 
 /**
  * View that moves out of the way when the keyboard appears by automatically