react-native-windows 0.72.16 → 0.73.0-preview.2

package/Folly/TEMP_UntilFollyUpdate/lang/ToAscii.h

@@ -30,7 +30,7 @@ namespace folly {
 
 //  to_ascii_alphabet
 //
-//  Used implicity by to_ascii_lower and to_ascii_upper below.
+//  Used implicitly by to_ascii_lower and to_ascii_upper below.
 //
 //  This alphabet translates digits to 0-9,a-z or 0-9,A-Z. The largest supported
 //  base is 36; operator() presumes an argument less than that.

package/Folly/cgmanifest.json

@@ -6,7 +6,7 @@
                 "Type": "git",
                 "Git": {
                   "RepositoryUrl": "https://github.com/facebook/folly",
-                  "CommitHash": "6ed36117cdc4831f3a3951e013ae76b405e88e15"
+                  "CommitHash": "ce2b95715de229fcb51bd97410469a3ad4d2bfb2"
                 }
             },
             "DevelopmentDependency": false

package/Folly/packages.lock.json

@@ -0,0 +1,23 @@
+{
+  "version": 1,
+  "dependencies": {
+    "native,Version=v0.0": {
+      "boost": {
+        "type": "Direct",
+        "requested": "[1.76.0, )",
+        "resolved": "1.76.0",
+        "contentHash": "p+w3YvNdXL8Cu9Fzrmexssu0tZbWxuf6ywsQqHjDlKFE5ojXHof1HIyMC3zDLfLnh80dIeFcEUAuR2Asg/XHRA=="
+      },
+      "fmt": {
+        "type": "Project"
+      }
+    },
+    "native,Version=v0.0/win10-arm": {},
+    "native,Version=v0.0/win10-arm-aot": {},
+    "native,Version=v0.0/win10-arm64-aot": {},
+    "native,Version=v0.0/win10-x64": {},
+    "native,Version=v0.0/win10-x64-aot": {},
+    "native,Version=v0.0/win10-x86": {},
+    "native,Version=v0.0/win10-x86-aot": {}
+  }
+}

package/Libraries/Animated/Animated.js

@@ -21,7 +21,7 @@ import Platform from '../Utilities/Platform';
 import AnimatedImplementation from './AnimatedImplementation';
 import AnimatedMock from './AnimatedMock';
 
-const Animated = ((Platform.isTesting
+const Animated = ((Platform.isDisableAnimations
   ? AnimatedMock
   : AnimatedImplementation): typeof AnimatedImplementation);
 

package/Libraries/Animated/AnimatedImplementation.js

@@ -378,7 +378,7 @@ const parallel = function (
       }
 
       animations.forEach((animation, idx) => {
-        const cb = function (endResult: EndResult | {finished: boolean}) {
+        const cb = function (endResult: EndResult) {
           hasEnded[idx] = true;
           doneCount++;
           if (doneCount === animations.length) {

package/Libraries/Animated/NativeAnimatedHelper.js

@@ -28,9 +28,7 @@ import invariant from 'invariant';
 
 // TODO T69437152 @petetheheat - Delete this fork when Fabric ships to 100%.
 const NativeAnimatedModule =
-  Platform.OS === 'ios' && global.RN$Bridgeless === true
-    ? NativeAnimatedTurboModule
-    : NativeAnimatedNonTurboModule;
+  NativeAnimatedNonTurboModule ?? NativeAnimatedTurboModule;
 
 let __nativeAnimatedNodeTagCount = 1; /* used for animated nodes */
 let __nativeAnimationIdCount = 1; /* used for started animations */
@@ -425,6 +423,9 @@ const SUPPORTED_TRANSFORMS = {
   rotateY: true,
   rotateZ: true,
   perspective: true,
+  skewX: true,
+  skewY: true,
+  matrix: ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform(),
 };
 
 const SUPPORTED_INTERPOLATION_PARAMS = {
@@ -451,19 +452,19 @@ function addWhitelistedInterpolationParam(param: string): void {
 }
 
 function isSupportedColorStyleProp(prop: string): boolean {
-  return SUPPORTED_COLOR_STYLES.hasOwnProperty(prop);
+  return SUPPORTED_COLOR_STYLES[prop] === true;
 }
 
 function isSupportedStyleProp(prop: string): boolean {
-  return SUPPORTED_STYLES.hasOwnProperty(prop);
+  return SUPPORTED_STYLES[prop] === true;
 }
 
 function isSupportedTransformProp(prop: string): boolean {
-  return SUPPORTED_TRANSFORMS.hasOwnProperty(prop);
+  return SUPPORTED_TRANSFORMS[prop] === true;
 }
 
 function isSupportedInterpolationParam(param: string): boolean {
-  return SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(param);
+  return SUPPORTED_INTERPOLATION_PARAMS[param] === true;
 }
 
 function validateTransform(
@@ -562,10 +563,13 @@ function transformDataType(value: number | string): number | string {
   if (typeof value !== 'string') {
     return value;
   }
-  if (/deg$/.test(value)) {
+
+  // Normalize degrees and radians to a number expressed in radians
+  if (value.endsWith('deg')) {
     const degrees = parseFloat(value) || 0;
-    const radians = (degrees * Math.PI) / 180.0;
-    return radians;
+    return (degrees * Math.PI) / 180.0;
+  } else if (value.endsWith('rad')) {
+    return parseFloat(value) || 0;
   } else {
     return value;
   }

package/Libraries/Animated/NativeAnimatedModule.js

@@ -11,8 +11,9 @@
 import type {TurboModule} from '../TurboModule/RCTExport';
 
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
+import shouldUseTurboAnimatedModule from './shouldUseTurboAnimatedModule';
 
-type EndResult = {finished: boolean, ...};
+type EndResult = {finished: boolean, value?: number, ...};
 type EndCallback = (result: EndResult) => void;
 type SaveValueCallback = (value: number) => void;
 
@@ -70,4 +71,7 @@ export interface Spec extends TurboModule {
   +queueAndExecuteBatchedOperations?: (operationsAndArgs: Array<any>) => void;
 }
 
-export default (TurboModuleRegistry.get<Spec>('NativeAnimatedModule'): ?Spec);
+const NativeModule: ?Spec = !shouldUseTurboAnimatedModule()
+  ? TurboModuleRegistry.get<Spec>('NativeAnimatedModule')
+  : null;
+export default NativeModule;

package/Libraries/Animated/NativeAnimatedTurboModule.js

@@ -11,8 +11,9 @@
 import type {TurboModule} from '../TurboModule/RCTExport';
 
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
+import shouldUseTurboAnimatedModule from './shouldUseTurboAnimatedModule';
 
-type EndResult = {finished: boolean, ...};
+type EndResult = {finished: boolean, value?: number, ...};
 type EndCallback = (result: EndResult) => void;
 type SaveValueCallback = (value: number) => void;
 
@@ -70,6 +71,8 @@ export interface Spec extends TurboModule {
   +queueAndExecuteBatchedOperations?: (operationsAndArgs: Array<any>) => void;
 }
 
-export default (TurboModuleRegistry.get<Spec>(
-  'NativeAnimatedTurboModule',
-): ?Spec);
+const NativeModule: ?Spec = shouldUseTurboAnimatedModule()
+  ? TurboModuleRegistry.get<Spec>('NativeAnimatedTurboModule')
+  : null;
+
+export default NativeModule;

package/Libraries/Animated/animations/Animation.js

@@ -11,11 +11,16 @@
 'use strict';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type AnimatedNode from '../nodes/AnimatedNode';
 import type AnimatedValue from '../nodes/AnimatedValue';
 
+import Platform from '../../Utilities/Platform';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import AnimatedColor from '../nodes/AnimatedColor';
+import AnimatedProps from '../nodes/AnimatedProps';
+import AnimatedValueXY from '../nodes/AnimatedValueXY';
 
-export type EndResult = {finished: boolean, ...};
+export type EndResult = {finished: boolean, value?: number, ...};
 export type EndCallback = (result: EndResult) => void;
 
 export type AnimationConfig = {
@@ -37,6 +42,7 @@ export default class Animation {
   __nativeId: number;
   __onEnd: ?EndCallback;
   __iterations: number;
+
   start(
     fromValue: number,
     onUpdate: (value: number) => void,
@@ -44,22 +50,55 @@ export default class Animation {
     previousAnimation: ?Animation,
     animatedValue: AnimatedValue,
   ): void {}
+
   stop(): void {
     if (this.__nativeId) {
       NativeAnimatedHelper.API.stopAnimation(this.__nativeId);
     }
   }
+
   __getNativeAnimationConfig(): any {
     // Subclasses that have corresponding animation implementation done in native
     // should override this method
     throw new Error('This animation type cannot be offloaded to native');
   }
+
   // Helper function for subclasses to make sure onEnd is only called once.
   __debouncedOnEnd(result: EndResult): void {
     const onEnd = this.__onEnd;
     this.__onEnd = null;
     onEnd && onEnd(result);
   }
+
+  __findAnimatedPropsNodes(node: AnimatedNode): Array<AnimatedProps> {
+    const result = [];
+
+    if (node instanceof AnimatedProps) {
+      result.push(node);
+      return result;
+    }
+
+    // Vectorized animations (animations on AnimatedValueXY, AnimatedColor nodes)
+    // are split into multiple animations for each component that execute in parallel.
+    // Calling update() on AnimatedProps when each animation completes results in
+    // potential flickering as all animations that are part of the vectorized animation
+    // may not have completed yet. For example, only the animation for the red channel of
+    // an animating color may have been completed, resulting in a temporary red color
+    // being rendered. So, for now, ignore AnimatedProps that use a vectorized animation.
+    if (
+      Platform.OS === 'ios' &&
+      (node instanceof AnimatedValueXY || node instanceof AnimatedColor)
+    ) {
+      return result;
+    }
+
+    for (const child of node.__getChildren()) {
+      result.push(...this.__findAnimatedPropsNodes(child));
+    }
+
+    return result;
+  }
+
   __startNativeAnimation(animatedValue: AnimatedValue): void {
     const startNativeAnimationWaitId = `${startNativeAnimationNextId}:startAnimation`;
     startNativeAnimationNextId += 1;
@@ -74,8 +113,23 @@ export default class Animation {
         this.__nativeId,
         animatedValue.__getNativeTag(),
         config,
-        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-        this.__debouncedOnEnd.bind(this),
+        result => {
+          this.__debouncedOnEnd(result);
+
+          // When using natively driven animations, once the animation completes,
+          // we need to ensure that the JS side nodes are synced with the updated
+          // values.
+          const {value} = result;
+          if (value != null) {
+            animatedValue.__onAnimatedValueUpdateReceived(value);
+
+            // Once the JS side node is synced with the updated values, trigger an
+            // update on the AnimatedProps nodes to call any registered callbacks.
+            this.__findAnimatedPropsNodes(animatedValue).forEach(node =>
+              node.update(),
+            );
+          }
+        },
       );
     } catch (e) {
       throw e;

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;
   }