@office-iss/react-native-win32 0.72.7 → 0.73.0-preview.1

package/Libraries/Animated/animations/SpringAnimation.js

@@ -221,6 +221,14 @@ export default class SpringAnimation extends Animation {
     }
 
     const start = () => {
+      if (!this._useNativeDriver && animatedValue.__isNative === true) {
+        throw new Error(
+          'Attempting to run JS driven animation on animated node ' +
+            'that has been moved to "native" earlier by starting an ' +
+            'animation with `useNativeDriver: true`',
+        );
+      }
+
       if (this._useNativeDriver) {
         this.__startNativeAnimation(animatedValue);
       } else {

package/Libraries/Animated/animations/TimingAnimation.js

@@ -112,6 +112,14 @@ export default class TimingAnimation extends Animation {
     this.__onEnd = onEnd;
 
     const start = () => {
+      if (!this._useNativeDriver && animatedValue.__isNative === true) {
+        throw new Error(
+          'Attempting to run JS driven animation on animated node ' +
+            'that has been moved to "native" earlier by starting an ' +
+            'animation with `useNativeDriver: true`',
+        );
+      }
+
       // Animations that sometimes have 0 duration and sometimes do not
       // still need to use the native driver when duration is 0 so as to
       // not cause intermixed JS and native animations.

package/Libraries/Animated/components/AnimatedFlatList.js

@@ -18,12 +18,13 @@ import * as React from 'react';
  * @see https://github.com/facebook/react-native/commit/b8c8562
  */
 const FlatListWithEventThrottle = React.forwardRef(
+  // $FlowFixMe[incompatible-call]
   (
     props: React.ElementConfig<typeof FlatList>,
     ref:
       | ((null | FlatList<mixed>) => mixed)
       | {current: null | FlatList<mixed>, ...},
-  ) => <FlatList scrollEventThrottle={0.0001} {...props} ref={ref} />,
+  ) => <FlatList {...props} ref={ref} />,
 );
 
 export default (createAnimatedComponent(

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -61,6 +61,7 @@ const AnimatedScrollView: AnimatedComponentType<Props, Instance> =
   });
 
 const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
+  // $FlowFixMe[incompatible-call]
   (
     props: {
       ...React.ElementConfig<typeof ScrollView>,
@@ -76,6 +77,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
     const {intermediatePropsForRefreshControl, intermediatePropsForScrollView} =
       useMemo(() => {
         // $FlowFixMe[underconstrained-implicit-instantiation]
+        // $FlowFixMe[incompatible-call]
         const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
         return {
           intermediatePropsForRefreshControl: {style: outer},

package/Libraries/Animated/components/AnimatedSectionList.js

@@ -19,6 +19,7 @@ import * as React from 'react';
  * @see https://github.com/facebook/react-native/commit/b8c8562
  */
 const SectionListWithEventThrottle = React.forwardRef(
+  // $FlowFixMe[incompatible-call]
   (
     props: React.ElementConfig<typeof SectionList>,
     ref:
@@ -27,7 +28,7 @@ const SectionListWithEventThrottle = React.forwardRef(
           current: null | SectionList<SectionBase<$FlowFixMe>>,
           ...
         },
-  ) => <SectionList scrollEventThrottle={0.0001} {...props} ref={ref} />,
+  ) => <SectionList {...props} ref={ref} />,
 );
 
 export default (createAnimatedComponent(

package/Libraries/Animated/createAnimatedComponent.js

@@ -37,6 +37,7 @@ export default function createAnimatedComponent<TProps: {...}, TInstance>(
       // $FlowFixMe[incompatible-call]
       props,
     );
+    // $FlowFixMe[incompatible-call]
     const ref = useMergeRefs<TInstance | null>(callbackRef, forwardedRef);
 
     // Some components require explicit passthrough values for animation

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-import type {NativeColorValue} from '../../StyleSheet/PlatformColorValueTypes';
 import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {NativeColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 import normalizeColor from '../../StyleSheet/normalizeColor';

package/Libraries/Animated/nodes/AnimatedObject.js

@@ -0,0 +1,146 @@
+/**
+ * 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.
+ *
+ * @flow
+ * @format
+ * @oncall react_native
+ */
+
+'use strict';
+
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
+
+import AnimatedNode from './AnimatedNode';
+import AnimatedWithChildren from './AnimatedWithChildren';
+import * as React from 'react';
+
+const MAX_DEPTH = 5;
+
+function isPlainObject(value: any): boolean {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    Object.getPrototypeOf(value).isPrototypeOf(Object)
+  );
+}
+
+// Recurse through values, executing fn for any AnimatedNodes
+function visit(value: any, fn: any => void, depth: number = 0): void {
+  if (depth >= MAX_DEPTH) {
+    return;
+  }
+
+  if (value instanceof AnimatedNode) {
+    fn(value);
+  } else if (Array.isArray(value)) {
+    value.forEach(element => {
+      visit(element, fn, depth + 1);
+    });
+  } else if (isPlainObject(value)) {
+    Object.values(value).forEach(element => {
+      visit(element, fn, depth + 1);
+    });
+  }
+}
+
+// Returns a copy of value with a transformation fn applied to any AnimatedNodes
+function mapAnimatedNodes(value: any, fn: any => any, depth: number = 0): any {
+  if (depth >= MAX_DEPTH) {
+    return value;
+  }
+
+  if (value instanceof AnimatedNode) {
+    return fn(value);
+  } else if (Array.isArray(value)) {
+    return value.map(element => mapAnimatedNodes(element, fn, depth + 1));
+  } else if (isPlainObject(value)) {
+    const result: {[string]: any} = {};
+    for (const key in value) {
+      result[key] = mapAnimatedNodes(value[key], fn, depth + 1);
+    }
+    return result;
+  } else {
+    return value;
+  }
+}
+
+export function hasAnimatedNode(value: any, depth: number = 0): boolean {
+  if (depth >= MAX_DEPTH) {
+    return false;
+  }
+
+  if (value instanceof AnimatedNode) {
+    return true;
+  } else if (Array.isArray(value)) {
+    for (const element of value) {
+      if (hasAnimatedNode(element, depth + 1)) {
+        return true;
+      }
+    }
+  } else if (isPlainObject(value)) {
+    // Don't consider React elements
+    if (React.isValidElement(value)) {
+      return false;
+    }
+    for (const key in value) {
+      if (hasAnimatedNode(value[key], depth + 1)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+export default class AnimatedObject extends AnimatedWithChildren {
+  _value: any;
+
+  constructor(value: any) {
+    super();
+    this._value = value;
+  }
+
+  __getValue(): any {
+    return mapAnimatedNodes(this._value, node => {
+      return node.__getValue();
+    });
+  }
+
+  __getAnimatedValue(): any {
+    return mapAnimatedNodes(this._value, node => {
+      return node.__getAnimatedValue();
+    });
+  }
+
+  __attach(): void {
+    super.__attach();
+    visit(this._value, node => {
+      node.__addChild(this);
+    });
+  }
+
+  __detach(): void {
+    visit(this._value, node => {
+      node.__removeChild(this);
+    });
+    super.__detach();
+  }
+
+  __makeNative(platformConfig: ?PlatformConfig): void {
+    visit(this._value, value => {
+      value.__makeNative(platformConfig);
+    });
+    super.__makeNative(platformConfig);
+  }
+
+  __getNativeConfig(): any {
+    return {
+      type: 'object',
+      value: mapAnimatedNodes(this._value, node => {
+        return {nodeTag: node.__getNativeTag()};
+      }),
+    };
+  }
+}

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -16,9 +16,27 @@ import {findNodeHandle} from '../../ReactNative/RendererProxy';
 import {AnimatedEvent} from '../AnimatedEvent';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
+import AnimatedObject, {hasAnimatedNode} from './AnimatedObject';
 import AnimatedStyle from './AnimatedStyle';
 import invariant from 'invariant';
 
+function createAnimatedProps(inputProps: Object): Object {
+  const props: Object = {};
+  for (const key in inputProps) {
+    const value = inputProps[key];
+    if (key === 'style') {
+      props[key] = new AnimatedStyle(value);
+    } else if (value instanceof AnimatedNode) {
+      props[key] = value;
+    } else if (hasAnimatedNode(value)) {
+      props[key] = new AnimatedObject(value);
+    } else {
+      props[key] = value;
+    }
+  }
+  return props;
+}
+
 export default class AnimatedProps extends AnimatedNode {
   _props: Object;
   _animatedView: any;
@@ -26,13 +44,7 @@ export default class AnimatedProps extends AnimatedNode {
 
   constructor(props: Object, callback: () => void) {
     super();
-    if (props.style) {
-      props = {
-        ...props,
-        style: new AnimatedStyle(props.style),
-      };
-    }
-    this._props = props;
+    this._props = createAnimatedProps(props);
     this._callback = callback;
   }
 

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -12,99 +12,73 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
+import ReactNativeFeatureFlags from '../../ReactNative/ReactNativeFeatureFlags';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
+import AnimatedObject, {hasAnimatedNode} from './AnimatedObject';
 import AnimatedTransform from './AnimatedTransform';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
-function createAnimatedStyle(inputStyle: any): Object {
+function createAnimatedStyle(
+  inputStyle: any,
+  keepUnanimatedValues: boolean,
+): Object {
   // $FlowFixMe[underconstrained-implicit-instantiation]
   const style = flattenStyle(inputStyle);
   const animatedStyles: any = {};
   for (const key in style) {
     const value = style[key];
     if (key === 'transform') {
-      animatedStyles[key] = new AnimatedTransform(value);
+      animatedStyles[key] =
+        ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
+          ? new AnimatedObject(value)
+          : new AnimatedTransform(value);
     } else if (value instanceof AnimatedNode) {
       animatedStyles[key] = value;
-    } else if (value && !Array.isArray(value) && typeof value === 'object') {
-      animatedStyles[key] = createAnimatedStyle(value);
+    } else if (hasAnimatedNode(value)) {
+      animatedStyles[key] = new AnimatedObject(value);
+    } else if (keepUnanimatedValues) {
+      animatedStyles[key] = value;
     }
   }
   return animatedStyles;
 }
 
-function createStyleWithAnimatedTransform(inputStyle: any): Object {
-  // $FlowFixMe[underconstrained-implicit-instantiation]
-  let style = flattenStyle(inputStyle) || ({}: {[string]: any});
-
-  if (style.transform) {
-    style = {
-      ...style,
-      transform: new AnimatedTransform(style.transform),
-    };
-  }
-  return style;
-}
-
 export default class AnimatedStyle extends AnimatedWithChildren {
   _inputStyle: any;
   _style: Object;
 
   constructor(style: any) {
     super();
-    if (Platform.OS === 'web') {
-      this._inputStyle = style;
-      this._style = createAnimatedStyle(style);
-    } else {
-      this._style = createStyleWithAnimatedTransform(style);
-    }
+    this._inputStyle = style;
+    this._style = createAnimatedStyle(style, Platform.OS !== 'web');
   }
 
-  // Recursively get values for nested styles (like iOS's shadowOffset)
-  _walkStyleAndGetValues(style: any): {[string]: any | {...}} {
-    const updatedStyle: {[string]: any | {...}} = {};
-    for (const key in style) {
-      const value = style[key];
+  __getValue(): Object | Array<Object> {
+    const result: {[string]: any} = {};
+    for (const key in this._style) {
+      const value = this._style[key];
       if (value instanceof AnimatedNode) {
-        updatedStyle[key] = value.__getValue();
-      } else if (value && !Array.isArray(value) && typeof value === 'object') {
-        // Support animating nested values (for example: shadowOffset.height)
-        updatedStyle[key] = this._walkStyleAndGetValues(value);
+        result[key] = value.__getValue();
       } else {
-        updatedStyle[key] = value;
+        result[key] = value;
       }
     }
-    return updatedStyle;
-  }
 
-  __getValue(): Object | Array<Object> {
-    if (Platform.OS === 'web') {
-      return [this._inputStyle, this._walkStyleAndGetValues(this._style)];
-    }
-
-    return this._walkStyleAndGetValues(this._style);
+    return Platform.OS === 'web' ? [this._inputStyle, result] : result;
   }
 
-  // Recursively get animated values for nested styles (like iOS's shadowOffset)
-  _walkStyleAndGetAnimatedValues(style: any): {[string]: any | {...}} {
-    const updatedStyle: {[string]: any | {...}} = {};
-    for (const key in style) {
-      const value = style[key];
+  __getAnimatedValue(): Object {
+    const result: {[string]: any} = {};
+    for (const key in this._style) {
+      const value = this._style[key];
       if (value instanceof AnimatedNode) {
-        updatedStyle[key] = value.__getAnimatedValue();
-      } else if (value && !Array.isArray(value) && typeof value === 'object') {
-        // Support animating nested values (for example: shadowOffset.height)
-        updatedStyle[key] = this._walkStyleAndGetAnimatedValues(value);
+        result[key] = value.__getAnimatedValue();
       }
     }
-    return updatedStyle;
-  }
-
-  __getAnimatedValue(): Object {
-    return this._walkStyleAndGetAnimatedValues(this._style);
+    return result;
   }
 
   __attach(): void {

package/Libraries/Animated/nodes/AnimatedValueXY.js

@@ -19,11 +19,7 @@ import invariant from 'invariant';
 export type AnimatedValueXYConfig = $ReadOnly<{
   useNativeDriver: boolean,
 }>;
-type ValueXYListenerCallback = (value: {
-  x: number,
-  y: number,
-  ...
-}) => mixed;
+type ValueXYListenerCallback = (value: {x: number, y: number, ...}) => mixed;
 
 let _uniqueId = 1;
 
@@ -135,11 +131,7 @@ export default class AnimatedValueXY extends AnimatedWithChildren {
    * See https://reactnative.dev/docs/animatedvaluexy#resetanimation
    */
   resetAnimation(
-    callback?: (value: {
-      x: number,
-      y: number,
-      ...
-    }) => void,
+    callback?: (value: {x: number, y: number, ...}) => void,
   ): void {
     this.x.resetAnimation();
     this.y.resetAnimation();
@@ -153,13 +145,7 @@ export default class AnimatedValueXY extends AnimatedWithChildren {
    *
    * See https://reactnative.dev/docs/animatedvaluexy#stopanimation
    */
-  stopAnimation(
-    callback?: (value: {
-      x: number,
-      y: number,
-      ...
-    }) => void,
-  ): void {
+  stopAnimation(callback?: (value: {x: number, y: number, ...}) => void): void {
     this.x.stopAnimation();
     this.y.stopAnimation();
     callback && callback(this.__getValue());

package/Libraries/Animated/shouldUseTurboAnimatedModule.js

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ * @flow
+ * @format
+ */
+
+import Platform from '../Utilities/Platform';
+
+function shouldUseTurboAnimatedModule(): boolean {
+  return Platform.OS === 'ios' && global.RN$Bridgeless === true;
+}
+
+export default shouldUseTurboAnimatedModule;

package/Libraries/Animated/useAnimatedProps.js

@@ -10,7 +10,8 @@
 
 'use strict';
 
-import {isPublicInstance as isFabricPublicInstance} from '../Renderer/public/ReactFabricPublicInstanceUtils';
+import {isPublicInstance as isFabricPublicInstance} from '../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
 import useRefEffect from '../Utilities/useRefEffect';
 import {AnimatedEvent} from './AnimatedEvent';
 import NativeAnimatedHelper from './NativeAnimatedHelper';
@@ -45,6 +46,8 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
     () => new AnimatedProps(props, () => onUpdateRef.current?.()),
     [props],
   );
+  const useNativePropsInFabric =
+    ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
   useAnimatedPropsLifecycle(node);
 
   // TODO: This "effect" does three things:
@@ -66,13 +69,15 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
       // changes), but `setNativeView` already optimizes for that.
       node.setNativeView(instance);
 
-      // NOTE: This callback is only used by the JavaScript animation driver.
+      // 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' ||
           typeof instance !== 'object' ||
           typeof instance?.setNativeProps !== 'function' ||
-          isFabricInstance(instance)
+          (isFabricInstance(instance) && !useNativePropsInFabric)
         ) {
           // Schedule an update for this component to update `reducedProps`,
           // but do not compute it immediately. If a parent also updated, we
@@ -82,12 +87,6 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
           // $FlowIgnore[not-a-function] - Assume it's still a function.
           // $FlowFixMe[incompatible-use]
           instance.setNativeProps(node.__getAnimatedValue());
-        } else {
-          throw new Error(
-            'Attempting to run JS driven animation on animated node ' +
-              'that has been moved to "native" earlier by starting an ' +
-              'animation with `useNativeDriver: true`',
-          );
         }
       };
 
@@ -110,7 +109,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
         }
       };
     },
-    [props, node],
+    [props, node, useNativePropsInFabric],
   );
   const callbackRef = useRefEffect<TInstance>(refEffect);
 

package/Libraries/AppState/AppState.d.ts

@@ -24,7 +24,7 @@ import {NativeEventSubscription} from '../EventEmitter/RCTNativeAppEventEmitter'
  * App States
  *      active - The app is running in the foreground
  *      background - The app is running in the background. The user is either in another app or on the home screen
- *      inactive [iOS] - This is a transition state that currently never happens for typical React Native apps.
+ *      inactive [iOS] - This is a transition state that happens when the app launches, is asking for permissions or when a call or SMS message is received.
  *      unknown [iOS] - Initial value until the current app state is determined
  *      extension [iOS] - The app is running as an app extension
  *

package/Libraries/AppState/NativeAppState.js

@@ -12,12 +12,16 @@ import type {TurboModule} from '../TurboModule/RCTExport';
 
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
+export type AppStateConstants = {|
+  initialAppState: string,
+|};
+
+export type AppState = {|app_state: string|};
+
 export interface Spec extends TurboModule {
-  +getConstants: () => {|
-    initialAppState: string,
-  |};
+  +getConstants: () => AppStateConstants;
   +getCurrentAppState: (
-    success: (appState: {|app_state: string|}) => void,
+    success: (appState: AppState) => void,
     error: (error: Object) => void,
   ) => void;
 

package/Libraries/BatchedBridge/MessageQueue.js

@@ -388,10 +388,13 @@ class MessageQueue {
 
   __callReactNativeMicrotasks() {
     Systrace.beginEvent('JSTimers.callReactNativeMicrotasks()');
-    if (this._reactNativeMicrotasksCallback != null) {
-      this._reactNativeMicrotasksCallback();
+    try {
+      if (this._reactNativeMicrotasksCallback != null) {
+        this._reactNativeMicrotasksCallback();
+      }
+    } finally {
+      Systrace.endEvent();
     }
-    Systrace.endEvent();
   }
 
   __callFunction(module: string, method: string, args: mixed[]): void {
@@ -402,31 +405,35 @@ class MessageQueue {
     } else {
       Systrace.beginEvent(`${module}.${method}(...)`);
     }
-    if (this.__spy) {
-      this.__spy({type: TO_JS, module, method, args});
-    }
-    const moduleMethods = this.getCallableModule(module);
-    if (!moduleMethods) {
-      const callableModuleNames = Object.keys(this._lazyCallableModules);
-      const n = callableModuleNames.length;
-      const callableModuleNameList = callableModuleNames.join(', ');
-
-      // TODO(T122225939): Remove after investigation: Why are we getting to this line in bridgeless mode?
-      const isBridgelessMode = global.RN$Bridgeless === true ? 'true' : 'false';
-      invariant(
-        false,
-        `Failed to call into JavaScript module method ${module}.${method}(). Module has not been registered as callable. Bridgeless Mode: ${isBridgelessMode}. Registered callable JavaScript modules (n = ${n}): ${callableModuleNameList}.
-        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`,
-      );
-    }
-    if (!moduleMethods[method]) {
-      invariant(
-        false,
-        `Failed to call into JavaScript module method ${module}.${method}(). Module exists, but the method is undefined.`,
-      );
+    try {
+      if (this.__spy) {
+        this.__spy({type: TO_JS, module, method, args});
+      }
+      const moduleMethods = this.getCallableModule(module);
+      if (!moduleMethods) {
+        const callableModuleNames = Object.keys(this._lazyCallableModules);
+        const n = callableModuleNames.length;
+        const callableModuleNameList = callableModuleNames.join(', ');
+
+        // TODO(T122225939): Remove after investigation: Why are we getting to this line in bridgeless mode?
+        const isBridgelessMode =
+          global.RN$Bridgeless === true ? 'true' : 'false';
+        invariant(
+          false,
+          `Failed to call into JavaScript module method ${module}.${method}(). Module has not been registered as callable. Bridgeless Mode: ${isBridgelessMode}. Registered callable JavaScript modules (n = ${n}): ${callableModuleNameList}.
+          A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`,
+        );
+      }
+      if (!moduleMethods[method]) {
+        invariant(
+          false,
+          `Failed to call into JavaScript module method ${module}.${method}(). Module exists, but the method is undefined.`,
+        );
+      }
+      moduleMethods[method].apply(moduleMethods, args);
+    } finally {
+      Systrace.endEvent();
     }
-    moduleMethods[method].apply(moduleMethods, args);
-    Systrace.endEvent();
   }
 
   __invokeCallback(cbID: number, args: mixed[]): void {
@@ -465,16 +472,18 @@ class MessageQueue {
       );
     }
 
-    if (!callback) {
-      return;
-    }
-
-    this._successCallbacks.delete(callID);
-    this._failureCallbacks.delete(callID);
-    callback(...args);
+    try {
+      if (!callback) {
+        return;
+      }
 
-    if (__DEV__) {
-      Systrace.endEvent();
+      this._successCallbacks.delete(callID);
+      this._failureCallbacks.delete(callID);
+      callback(...args);
+    } finally {
+      if (__DEV__) {
+        Systrace.endEvent();
+      }
     }
   }
 }