@office-iss/react-native-win32 0.72.8 → 0.73.0-preview.2

package/Libraries/Animated/animations/DecayAnimation.js

@@ -85,6 +85,15 @@ export default class DecayAnimation extends Animation {
     this._onUpdate = onUpdate;
     this.__onEnd = onEnd;
     this._startTime = Date.now();
+
+    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/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;