@office-iss/react-native-win32 0.0.0-canary.297 → 0.0.0-canary.299

package/Libraries/Animated/AnimatedImplementation.js

@@ -20,7 +20,7 @@ import type {DecayAnimationConfig} from './animations/DecayAnimation';
 import type {SpringAnimationConfig} from './animations/SpringAnimation';
 import type {TimingAnimationConfig} from './animations/TimingAnimation';
 
-import {AnimatedEvent, attachNativeEvent} from './AnimatedEvent';
+import {AnimatedEvent, attachNativeEventImpl} from './AnimatedEvent';
 import DecayAnimation from './animations/DecayAnimation';
 import SpringAnimation from './animations/SpringAnimation';
 import TimingAnimation from './animations/TimingAnimation';
@@ -47,39 +47,39 @@ export type CompositeAnimation = {
   ...
 };
 
-const add = function (
+const addImpl = function (
   a: AnimatedNode | number,
   b: AnimatedNode | number,
 ): AnimatedAddition {
   return new AnimatedAddition(a, b);
 };
 
-const subtract = function (
+const subtractImpl = function (
   a: AnimatedNode | number,
   b: AnimatedNode | number,
 ): AnimatedSubtraction {
   return new AnimatedSubtraction(a, b);
 };
 
-const divide = function (
+const divideImpl = function (
   a: AnimatedNode | number,
   b: AnimatedNode | number,
 ): AnimatedDivision {
   return new AnimatedDivision(a, b);
 };
 
-const multiply = function (
+const multiplyImpl = function (
   a: AnimatedNode | number,
   b: AnimatedNode | number,
 ): AnimatedMultiplication {
   return new AnimatedMultiplication(a, b);
 };
 
-const modulo = function (a: AnimatedNode, modulus: number): AnimatedModulo {
+const moduloImpl = function (a: AnimatedNode, modulus: number): AnimatedModulo {
   return new AnimatedModulo(a, modulus);
 };
 
-const diffClamp = function (
+const diffClampImpl = function (
   a: AnimatedNode,
   min: number,
   max: number,
@@ -120,7 +120,7 @@ const maybeVectorAnim = function (
     const aY = anim((value: AnimatedValueXY).y, configY);
     // We use `stopTogether: false` here because otherwise tracking will break
     // because the second animation will get stopped before it can update.
-    return parallel([aX, aY], {stopTogether: false});
+    return parallelImpl([aX, aY], {stopTogether: false});
   } else if (value instanceof AnimatedColor) {
     const configR = {...config};
     const configG = {...config};
@@ -146,12 +146,12 @@ const maybeVectorAnim = function (
     const aA = anim((value: AnimatedColor).a, configA);
     // We use `stopTogether: false` here because otherwise tracking will break
     // because the second animation will get stopped before it can update.
-    return parallel([aR, aG, aB, aA], {stopTogether: false});
+    return parallelImpl([aR, aG, aB, aA], {stopTogether: false});
   }
   return null;
 };
 
-const spring = function (
+const springImpl = function (
   value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: SpringAnimationConfig,
 ): CompositeAnimation {
@@ -179,7 +179,7 @@ const spring = function (
     }
   };
   return (
-    maybeVectorAnim(value, config, spring) || {
+    maybeVectorAnim(value, config, springImpl) || {
       start: function (callback?: ?EndCallback): void {
         start(value, config, callback);
       },
@@ -204,7 +204,7 @@ const spring = function (
   );
 };
 
-const timing = function (
+const timingImpl = function (
   value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: TimingAnimationConfig,
 ): CompositeAnimation {
@@ -233,7 +233,7 @@ const timing = function (
   };
 
   return (
-    maybeVectorAnim(value, config, timing) || {
+    maybeVectorAnim(value, config, timingImpl) || {
       start: function (callback?: ?EndCallback, isLooping?: boolean): void {
         start(value, {...config, isLooping}, callback);
       },
@@ -258,7 +258,7 @@ const timing = function (
   );
 };
 
-const decay = function (
+const decayImpl = function (
   value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: DecayAnimationConfig,
 ): CompositeAnimation {
@@ -275,7 +275,7 @@ const decay = function (
   };
 
   return (
-    maybeVectorAnim(value, config, decay) || {
+    maybeVectorAnim(value, config, decayImpl) || {
       start: function (callback?: ?EndCallback): void {
         start(value, config, callback);
       },
@@ -300,7 +300,7 @@ const decay = function (
   );
 };
 
-const sequence = function (
+const sequenceImpl = function (
   animations: Array<CompositeAnimation>,
 ): CompositeAnimation {
   let current = 0;
@@ -363,7 +363,7 @@ type ParallelConfig = {
   stopTogether?: boolean,
   ...
 };
-const parallel = function (
+const parallelImpl = function (
   animations: Array<CompositeAnimation>,
   config?: ?ParallelConfig,
 ): CompositeAnimation {
@@ -431,9 +431,9 @@ const parallel = function (
   return result;
 };
 
-const delay = function (time: number): CompositeAnimation {
+const delayImpl = function (time: number): CompositeAnimation {
   // Would be nice to make a specialized implementation
-  return timing(new AnimatedValue(0), {
+  return timingImpl(new AnimatedValue(0), {
     toValue: 0,
     delay: time,
     duration: 0,
@@ -441,13 +441,13 @@ const delay = function (time: number): CompositeAnimation {
   });
 };
 
-const stagger = function (
+const staggerImpl = function (
   time: number,
   animations: Array<CompositeAnimation>,
 ): CompositeAnimation {
-  return parallel(
+  return parallelImpl(
     animations.map((animation, i) => {
-      return sequence([delay(time * i), animation]);
+      return sequenceImpl([delayImpl(time * i), animation]);
     }),
   );
 };
@@ -458,7 +458,7 @@ type LoopAnimationConfig = {
   ...
 };
 
-const loop = function (
+const loopImpl = function (
   animation: CompositeAnimation,
   // $FlowFixMe[prop-missing]
   {iterations = -1, resetBeforeIteration = true}: LoopAnimationConfig = {},
@@ -514,7 +514,7 @@ const loop = function (
   };
 };
 
-function forkEvent(
+function forkEventImpl(
   event: ?AnimatedEvent | ?Function,
   listener: Function,
 ): AnimatedEvent | Function {
@@ -531,7 +531,7 @@ function forkEvent(
   }
 }
 
-function unforkEvent(
+function unforkEventImpl(
   event: ?AnimatedEvent | ?Function,
   listener: Function,
 ): void {
@@ -540,7 +540,7 @@ function unforkEvent(
   }
 }
 
-const event = function <T>(
+const eventImpl = function <T>(
   argMapping: $ReadOnlyArray<?Mapping>,
   config: EventConfig<T>,
 ): any {
@@ -606,25 +606,25 @@ export default {
    * See https://reactnative.dev/docs/animated#node
    */
   Node: AnimatedNode,
-  decay,
-  timing,
-  spring,
-  add,
-  subtract,
-  divide,
-  multiply,
-  modulo,
-  diffClamp,
-  delay,
-  sequence,
-  parallel,
-  stagger,
-  loop,
-  event,
+  decay: decayImpl,
+  timing: timingImpl,
+  spring: springImpl,
+  add: addImpl,
+  subtract: subtractImpl,
+  divide: divideImpl,
+  multiply: multiplyImpl,
+  modulo: moduloImpl,
+  diffClamp: diffClampImpl,
+  delay: delayImpl,
+  sequence: sequenceImpl,
+  parallel: parallelImpl,
+  stagger: staggerImpl,
+  loop: loopImpl,
+  event: eventImpl,
   createAnimatedComponent,
-  attachNativeEvent,
-  forkEvent,
-  unforkEvent,
+  attachNativeEvent: attachNativeEventImpl,
+  forkEvent: forkEventImpl,
+  unforkEvent: unforkEventImpl,
 
   /**
    * Expose Event class, so it can be used as a type for type checkers.

package/Libraries/Animated/AnimatedMock.js

@@ -17,7 +17,7 @@ import type {DecayAnimationConfig} from './animations/DecayAnimation';
 import type {SpringAnimationConfig} from './animations/SpringAnimation';
 import type {TimingAnimationConfig} from './animations/TimingAnimation';
 
-import {AnimatedEvent, attachNativeEvent} from './AnimatedEvent';
+import {AnimatedEvent, attachNativeEventImpl} from './AnimatedEvent';
 import AnimatedImplementation from './AnimatedImplementation';
 import createAnimatedComponent from './createAnimatedComponent';
 import AnimatedColor from './nodes/AnimatedColor';
@@ -188,7 +188,7 @@ export default {
   loop,
   event: AnimatedImplementation.event,
   createAnimatedComponent,
-  attachNativeEvent,
+  attachNativeEvent: attachNativeEventImpl,
   forkEvent: AnimatedImplementation.forkEvent,
   unforkEvent: AnimatedImplementation.unforkEvent,
   Event: AnimatedEvent,

package/Libraries/Animated/Easing.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 'use strict';

package/Libraries/Animated/NativeAnimatedModule.js

@@ -10,4 +10,5 @@
 
 export * from '../../src/private/specs_DEPRECATED/modules/NativeAnimatedModule';
 import NativeAnimatedModule from '../../src/private/specs_DEPRECATED/modules/NativeAnimatedModule';
+
 export default NativeAnimatedModule;

package/Libraries/Animated/NativeAnimatedTurboModule.js

@@ -10,4 +10,5 @@
 
 export * from '../../src/private/specs_DEPRECATED/modules/NativeAnimatedTurboModule';
 import NativeAnimatedTurboModule from '../../src/private/specs_DEPRECATED/modules/NativeAnimatedTurboModule';
+
 export default NativeAnimatedTurboModule;

package/Libraries/Animated/SpringConfig.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 'use strict';

package/Libraries/Animated/animations/Animation.js

@@ -150,7 +150,12 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value, offset);
 
-            if (!ReactNativeFeatureFlags.cxxNativeAnimatedEnabled()) {
+            if (
+              !(
+                ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
+                ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync()
+              )
+            ) {
               if (this.__isLooping === true) {
                 return;
               }

package/Libraries/Animated/components/AnimatedFlatList.js

@@ -8,13 +8,14 @@
  * @format
  */
 
-import type {AnimatedComponentType} from '../createAnimatedComponent';
+import type {AnimatedProps} from '../createAnimatedComponent';
 
-import FlatList from '../../Lists/FlatList';
+import FlatList, {type FlatListProps} from '../../Lists/FlatList';
 import createAnimatedComponent from '../createAnimatedComponent';
 import * as React from 'react';
 
-export default (createAnimatedComponent(FlatList): AnimatedComponentType<
-  React.ElementConfig<typeof FlatList>,
-  FlatList<mixed>,
->);
+// $FlowExpectedError[unclear-type]
+export default (createAnimatedComponent(FlatList): component<ItemT = any>(
+  ref?: React.RefSetter<FlatList<ItemT>>,
+  ...props: AnimatedProps<FlatListProps<ItemT>>
+));

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -15,7 +15,9 @@ import type {
 } from '../createAnimatedComponent';
 
 import RefreshControl from '../../Components/RefreshControl/RefreshControl';
-import ScrollView from '../../Components/ScrollView/ScrollView';
+import ScrollView, {
+  type ScrollViewProps,
+} from '../../Components/ScrollView/ScrollView';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import splitLayoutProps from '../../StyleSheet/splitLayoutProps';
 import StyleSheet from '../../StyleSheet/StyleSheet';
@@ -26,21 +28,20 @@ import useAnimatedProps from '../useAnimatedProps';
 import * as React from 'react';
 import {cloneElement, useMemo} from 'react';
 
-type AnimatedScrollViewProps = React.ElementConfig<typeof ScrollView>;
 type AnimatedScrollViewInstance = React.ElementRef<typeof ScrollView>;
 
 /**
  * @see https://github.com/facebook/react-native/commit/b8c8562
  */
 const AnimatedScrollView: AnimatedComponentType<
-  AnimatedScrollViewProps,
+  ScrollViewProps,
   AnimatedScrollViewInstance,
 > = function AnimatedScrollViewWithOrWithoutInvertedRefreshControl({
   ref: forwardedRef,
   ...props
 }: {
   ref?: React.RefSetter<AnimatedScrollViewInstance>,
-  ...AnimatedProps<AnimatedScrollViewProps>,
+  ...AnimatedProps<ScrollViewProps>,
 }) {
   // (Android only) When a ScrollView has a RefreshControl and
   // any `style` property set with an Animated.Value, the CSS
@@ -111,7 +112,7 @@ const AnimatedScrollViewWithInvertedRefreshControl =
 
     // Handle animated props on `NativeDirectionalScrollView`.
     const [scrollViewAnimatedProps, scrollViewRef] = useAnimatedProps<
-      AnimatedScrollViewProps,
+      ScrollViewProps,
       AnimatedScrollViewInstance,
     >(intermediatePropsForScrollView);
     const ref = useMergeRefs<AnimatedScrollViewInstance>(

package/Libraries/Animated/components/AnimatedSectionList.js

@@ -8,15 +8,19 @@
  * @format
  */
 
-import type {SectionBase} from '../../Lists/SectionList';
-import type {AnimatedComponentType} from '../createAnimatedComponent';
+import type {AnimatedProps} from '../createAnimatedComponent';
 
-import SectionList from '../../Lists/SectionList';
+import SectionList, {type SectionListProps} from '../../Lists/SectionList';
 import createAnimatedComponent from '../createAnimatedComponent';
 import * as React from 'react';
 
-export default (createAnimatedComponent(SectionList): AnimatedComponentType<
-  React.ElementConfig<typeof SectionList>,
+// $FlowFixMe
+export default (createAnimatedComponent(SectionList): component<
   // $FlowExpectedError[unclear-type]
-  SectionList<any, SectionBase<any>>,
->);
+  ItemT = any,
+  // $FlowExpectedError[unclear-type]
+  SectionT = any,
+>(
+  ref?: React.RefSetter<SectionList<ItemT, SectionT>>,
+  ...props: AnimatedProps<SectionListProps<ItemT, SectionT>>
+));

package/Libraries/Animated/components/AnimatedText.js

@@ -10,13 +10,10 @@
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-import Text from '../../Text/Text';
+import Text, {type TextProps} from '../../Text/Text';
 import createAnimatedComponent from '../createAnimatedComponent';
 import * as React from 'react';
 
 export default (createAnimatedComponent(
   (Text: $FlowFixMe),
-): AnimatedComponentType<
-  React.ElementConfig<typeof Text>,
-  React.ElementRef<typeof Text>,
->);
+): AnimatedComponentType<TextProps, React.ElementRef<typeof Text>>);

package/Libraries/Animated/components/AnimatedView.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {ViewProps} from '../../Components/View/ViewPropTypes';
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
 import View from '../../Components/View/View';
@@ -15,6 +16,6 @@ import createAnimatedComponent from '../createAnimatedComponent';
 import * as React from 'react';
 
 export default (createAnimatedComponent(View): AnimatedComponentType<
-  React.ElementConfig<typeof View>,
+  ViewProps,
   React.ElementRef<typeof View>,
 >);

package/Libraries/Animated/createAnimatedComponent.js

@@ -21,7 +21,7 @@ import type AnimatedValue from './nodes/AnimatedValue';
 
 import createAnimatedPropsHook from '../../src/private/animated/createAnimatedPropsHook';
 import composeStyles from '../../src/private/styles/composeStyles';
-import View from '../Components/View/View';
+import {type ViewProps} from '../Components/View/ViewPropTypes';
 import useMergeRefs from '../Utilities/useMergeRefs';
 import * as React from 'react';
 import {useMemo} from 'react';
@@ -60,9 +60,7 @@ type NonAnimatedProps =
   | 'disabled'
   | 'accessibilityLabel';
 type PassThroughProps = $ReadOnly<{
-  passthroughAnimatedPropExplicitValues?: React.ElementConfig<
-    typeof View,
-  > | null,
+  passthroughAnimatedPropExplicitValues?: ViewProps | null,
 }>;
 
 export type AnimatedProps<Props: {...}> = {

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -14,6 +14,7 @@ import type {AnimatedStyleAllowlist} from './AnimatedStyle';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
+import flattenStyle from '../../StyleSheet/flattenStyle';
 import {AnimatedEvent} from '../AnimatedEvent';
 import AnimatedNode from './AnimatedNode';
 import AnimatedObject from './AnimatedObject';
@@ -43,18 +44,28 @@ function createAnimatedProps(
   for (let ii = 0, length = keys.length; ii < length; ii++) {
     const key = keys[ii];
     const value = inputProps[key];
+    let staticValue = value;
 
     if (allowlist == null || hasOwn(allowlist, key)) {
       let node;
       if (key === 'style') {
-        node = AnimatedStyle.from(value, allowlist?.style);
+        // Ignore `style` if it is not an object (or array).
+        if (typeof value === 'object' && value != null) {
+          // Even if we do not find any `AnimatedNode` values in `style`, we
+          // still need to use the flattened `style` object because static
+          // values can shadow `AnimatedNode` values. We need to make sure that
+          // we propagate the flattened `style` object to the `props` object.
+          const flatStyle = flattenStyle(value as $FlowFixMe);
+          node = AnimatedStyle.from(flatStyle, allowlist?.style, value);
+          staticValue = flatStyle;
+        }
       } else if (value instanceof AnimatedNode) {
         node = value;
       } else {
         node = AnimatedObject.from(value);
       }
       if (node == null) {
-        props[key] = value;
+        props[key] = staticValue;
       } else {
         nodeKeys.push(key);
         nodes.push(node);
@@ -134,8 +145,24 @@ export default class AnimatedProps extends AnimatedNode {
       const key = keys[ii];
       const maybeNode = this.#props[key];
 
-      if (key === 'style' && maybeNode instanceof AnimatedStyle) {
-        props[key] = maybeNode.__getValueWithStaticStyle(staticProps.style);
+      if (key === 'style') {
+        const staticStyle = staticProps.style;
+        const flatStaticStyle = flattenStyle(staticStyle);
+        if (maybeNode instanceof AnimatedStyle) {
+          const mutableStyle: {[string]: mixed} =
+            flatStaticStyle == null
+              ? {}
+              : flatStaticStyle === staticStyle
+                ? // Copy the input style, since we'll mutate it below.
+                  {...flatStaticStyle}
+                : // Reuse `flatStaticStyle` if it is a newly created object.
+                  flatStaticStyle;
+
+          maybeNode.__replaceAnimatedNodeWithValues(mutableStyle);
+          props[key] = maybeNode.__getValueForStyle(mutableStyle);
+        } else {
+          props[key] = flatStaticStyle;
+        }
       } else if (maybeNode instanceof AnimatedNode) {
         props[key] = maybeNode.__getValue();
       } else if (maybeNode instanceof AnimatedEvent) {