@office-iss/react-native-win32 0.79.1 → 0.80.0

package/Libraries/Animated/AnimatedImplementation.js

@@ -540,9 +540,9 @@ function unforkEvent(
   }
 }
 
-const event = function (
+const event = function <T>(
   argMapping: $ReadOnlyArray<?Mapping>,
-  config: EventConfig,
+  config: EventConfig<T>,
 ): any {
   const animatedEvent = new AnimatedEvent(argMapping, config);
   if (animatedEvent.__isNative) {
@@ -606,144 +606,23 @@ export default {
    * See https://reactnative.dev/docs/animated#node
    */
   Node: AnimatedNode,
-
-  /**
-   * Animates a value from an initial velocity to zero based on a decay
-   * coefficient.
-   *
-   * See https://reactnative.dev/docs/animated#decay
-   */
   decay,
-  /**
-   * Animates a value along a timed easing curve. The Easing module has tons of
-   * predefined curves, or you can use your own function.
-   *
-   * See https://reactnative.dev/docs/animated#timing
-   */
   timing,
-  /**
-   * Animates a value according to an analytical spring model based on
-   * damped harmonic oscillation.
-   *
-   * See https://reactnative.dev/docs/animated#spring
-   */
   spring,
-
-  /**
-   * Creates a new Animated value composed from two Animated values added
-   * together.
-   *
-   * See https://reactnative.dev/docs/animated#add
-   */
   add,
-
-  /**
-   * Creates a new Animated value composed by subtracting the second Animated
-   * value from the first Animated value.
-   *
-   * See https://reactnative.dev/docs/animated#subtract
-   */
   subtract,
-
-  /**
-   * Creates a new Animated value composed by dividing the first Animated value
-   * by the second Animated value.
-   *
-   * See https://reactnative.dev/docs/animated#divide
-   */
   divide,
-
-  /**
-   * Creates a new Animated value composed from two Animated values multiplied
-   * together.
-   *
-   * See https://reactnative.dev/docs/animated#multiply
-   */
   multiply,
-
-  /**
-   * Creates a new Animated value that is the (non-negative) modulo of the
-   * provided Animated value.
-   *
-   * See https://reactnative.dev/docs/animated#modulo
-   */
   modulo,
-
-  /**
-   * Create a new Animated value that is limited between 2 values. It uses the
-   * difference between the last value so even if the value is far from the
-   * bounds it will start changing when the value starts getting closer again.
-   *
-   * See https://reactnative.dev/docs/animated#diffclamp
-   */
   diffClamp,
-
-  /**
-   * Starts an animation after the given delay.
-   *
-   * See https://reactnative.dev/docs/animated#delay
-   */
   delay,
-  /**
-   * Starts an array of animations in order, waiting for each to complete
-   * before starting the next. If the current running animation is stopped, no
-   * following animations will be started.
-   *
-   * See https://reactnative.dev/docs/animated#sequence
-   */
   sequence,
-  /**
-   * Starts an array of animations all at the same time. By default, if one
-   * of the animations is stopped, they will all be stopped. You can override
-   * this with the `stopTogether` flag.
-   *
-   * See https://reactnative.dev/docs/animated#parallel
-   */
   parallel,
-  /**
-   * Array of animations may run in parallel (overlap), but are started in
-   * sequence with successive delays.  Nice for doing trailing effects.
-   *
-   * See https://reactnative.dev/docs/animated#stagger
-   */
   stagger,
-  /**
-   * Loops a given animation continuously, so that each time it reaches the
-   * end, it resets and begins again from the start.
-   *
-   * See https://reactnative.dev/docs/animated#loop
-   */
   loop,
-
-  /**
-   * Takes an array of mappings and extracts values from each arg accordingly,
-   * then calls `setValue` on the mapped outputs.
-   *
-   * See https://reactnative.dev/docs/animated#event
-   */
   event,
-
-  /**
-   * Make any React component Animatable.  Used to create `Animated.View`, etc.
-   *
-   * See https://reactnative.dev/docs/animated#createanimatedcomponent
-   */
   createAnimatedComponent,
-
-  /**
-   * Imperative API to attach an animated value to an event on a view. Prefer
-   * using `Animated.event` with `useNativeDrive: true` if possible.
-   *
-   * See https://reactnative.dev/docs/animated#attachnativeevent
-   */
   attachNativeEvent,
-
-  /**
-   * Advanced imperative API for snooping on animated events that are passed in
-   * through props. Use values directly where possible.
-   *
-   * See https://reactnative.dev/docs/animated#forkevent
-   */
   forkEvent,
   unforkEvent,
 

package/Libraries/Animated/Easing.js

@@ -12,6 +12,8 @@
 
 let ease;
 
+export type EasingFunction = (t: number) => number;
+
 /**
  * The `Easing` module implements common easing functions. This module is used
  * by [Animate.timing()](docs/animate.html#timing) to convey physically
@@ -57,7 +59,7 @@ let ease;
  * - [`inOut`](docs/easing.html#inout) makes any easing function symmetrical
  * - [`out`](docs/easing.html#out) runs an easing function backwards
  */
-const Easing = {
+const EasingStatic = {
   /**
    * A stepping function, returns 1 for any positive value of `n`.
    */
@@ -90,7 +92,7 @@ const Easing = {
    */
   ease(t: number): number {
     if (!ease) {
-      ease = Easing.bezier(0.42, 0, 1, 1);
+      ease = EasingStatic.bezier(0.42, 0, 1, 1);
     }
     return ease(t);
   },
@@ -121,7 +123,7 @@ const Easing = {
    * n = 4: http://easings.net/#easeInQuart
    * n = 5: http://easings.net/#easeInQuint
    */
-  poly(n: number): (t: number) => number {
+  poly(n: number): EasingFunction {
     return (t: number) => Math.pow(t, n);
   },
 
@@ -162,7 +164,7 @@ const Easing = {
    *
    * http://easings.net/#easeInElastic
    */
-  elastic(bounciness: number = 1): (t: number) => number {
+  elastic(bounciness: number = 1): EasingFunction {
     const p = bounciness * Math.PI;
     return t => 1 - Math.pow(Math.cos((t * Math.PI) / 2), 3) * Math.cos(t * p);
   },
@@ -173,7 +175,7 @@ const Easing = {
    *
    * https://easings.net/#easeInBack
    */
-  back(s: number = 1.70158): (t: number) => number {
+  back(s: number = 1.70158): EasingFunction {
     return t => t * t * ((s + 1) * t - s);
   },
 
@@ -208,12 +210,7 @@ const Easing = {
    * A useful tool to visualize cubic bezier curves can be found at
    * http://cubic-bezier.com/
    */
-  bezier(
-    x1: number,
-    y1: number,
-    x2: number,
-    y2: number,
-  ): (t: number) => number {
+  bezier(x1: number, y1: number, x2: number, y2: number): EasingFunction {
     const _bezier = require('./bezier').default;
     return _bezier(x1, y1, x2, y2);
   },
@@ -221,14 +218,14 @@ const Easing = {
   /**
    * Runs an easing function forwards.
    */
-  in(easing: (t: number) => number): (t: number) => number {
+  in(easing: EasingFunction): EasingFunction {
     return easing;
   },
 
   /**
    * Runs an easing function backwards.
    */
-  out(easing: (t: number) => number): (t: number) => number {
+  out(easing: EasingFunction): EasingFunction {
     return t => 1 - easing(1 - t);
   },
 
@@ -237,7 +234,7 @@ const Easing = {
    * forwards for half of the duration, then backwards for the rest of the
    * duration.
    */
-  inOut(easing: (t: number) => number): (t: number) => number {
+  inOut(easing: EasingFunction): EasingFunction {
     return t => {
       if (t < 0.5) {
         return easing(t * 2) / 2;
@@ -247,4 +244,5 @@ const Easing = {
   },
 };
 
-export default Easing;
+export type Easing = typeof EasingStatic;
+export default EasingStatic;

package/Libraries/Animated/animations/Animation.js

@@ -13,10 +13,14 @@ import type AnimatedNode from '../nodes/AnimatedNode';
 import type AnimatedValue from '../nodes/AnimatedValue';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
-import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import AnimatedProps from '../nodes/AnimatedProps';
 
-export type EndResult = {finished: boolean, value?: number, ...};
+export type EndResult = {
+  finished: boolean,
+  value?: number,
+  offset?: number,
+  ...
+};
 export type EndCallback = (result: EndResult) => void;
 
 export type AnimationConfig = $ReadOnly<{
@@ -141,9 +145,9 @@ export default class Animation {
           // 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;
+          const {value, offset} = result;
           if (value != null) {
-            animatedValue.__onAnimatedValueUpdateReceived(value);
+            animatedValue.__onAnimatedValueUpdateReceived(value, offset);
 
             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

@@ -23,48 +23,51 @@ import useAnimatedProps from '../useAnimatedProps';
 import * as React from 'react';
 import {useMemo} from 'react';
 
-type Props = React.ElementConfig<typeof ScrollView>;
-type Instance = React.ElementRef<typeof ScrollView>;
+type AnimatedScrollViewProps = React.ElementConfig<typeof ScrollView>;
+type AnimatedScrollViewInstance = React.ElementRef<typeof ScrollView>;
 
 /**
  * @see https://github.com/facebook/react-native/commit/b8c8562
  */
-const AnimatedScrollView: AnimatedComponentType<Props, Instance> =
-  React.forwardRef(
-    function AnimatedScrollViewWithOrWithoutInvertedRefreshControl(
-      props,
-      forwardedRef,
+const AnimatedScrollView: AnimatedComponentType<
+  AnimatedScrollViewProps,
+  AnimatedScrollViewInstance,
+> = React.forwardRef(
+  function AnimatedScrollViewWithOrWithoutInvertedRefreshControl(
+    props,
+    forwardedRef,
+  ) {
+    // (Android only) When a ScrollView has a RefreshControl and
+    // any `style` property set with an Animated.Value, the CSS
+    // gets incorrectly applied twice. This is because ScrollView
+    // swaps the parent/child relationship of itself and the
+    // RefreshControl component (see ScrollView.js for more details).
+    if (
+      Platform.OS === 'android' &&
+      props.refreshControl != null &&
+      props.style != null
     ) {
-      // (Android only) When a ScrollView has a RefreshControl and
-      // any `style` property set with an Animated.Value, the CSS
-      // gets incorrectly applied twice. This is because ScrollView
-      // swaps the parent/child relationship of itself and the
-      // RefreshControl component (see ScrollView.js for more details).
-      if (
-        Platform.OS === 'android' &&
-        props.refreshControl != null &&
-        props.style != null
-      ) {
-        return (
-          // $FlowFixMe[prop-missing]
-          <AnimatedScrollViewWithInvertedRefreshControl
-            scrollEventThrottle={0.0001}
-            {...props}
-            ref={forwardedRef}
-            refreshControl={props.refreshControl}
-          />
-        );
-      } else {
-        return (
-          <AnimatedScrollViewWithoutInvertedRefreshControl
-            scrollEventThrottle={0.0001}
-            {...props}
-            ref={forwardedRef}
-          />
-        );
-      }
-    },
-  );
+      return (
+        // $FlowFixMe - It should return an Animated ScrollView but it returns a ScrollView with Animated props applied.
+        <AnimatedScrollViewWithInvertedRefreshControl
+          scrollEventThrottle={0.0001}
+          {...props}
+          ref={forwardedRef}
+          // $FlowFixMe[incompatible-type]
+          refreshControl={props.refreshControl}
+        />
+      );
+    } else {
+      return (
+        <AnimatedScrollViewWithoutInvertedRefreshControl
+          scrollEventThrottle={0.0001}
+          {...props}
+          ref={forwardedRef}
+        />
+      );
+    }
+  },
+);
 
 const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
   // $FlowFixMe[incompatible-call]
@@ -75,8 +78,8 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
       refreshControl: ExactReactElement_DEPRECATED<any>,
     },
     forwardedRef:
-      | {current: Instance | null, ...}
-      | ((Instance | null) => mixed),
+      | {current: AnimatedScrollViewInstance | null, ...}
+      | ((AnimatedScrollViewInstance | null) => mixed),
   ) {
     // Split `props` into the animate-able props for the parent (RefreshControl)
     // and child (ScrollView).
@@ -106,10 +109,13 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
 
     // Handle animated props on `NativeDirectionalScrollView`.
     const [scrollViewAnimatedProps, scrollViewRef] = useAnimatedProps<
-      Props,
-      Instance,
+      AnimatedScrollViewProps,
+      AnimatedScrollViewInstance,
     >(intermediatePropsForScrollView);
-    const ref = useMergeRefs<Instance>(scrollViewRef, forwardedRef);
+    const ref = useMergeRefs<AnimatedScrollViewInstance>(
+      scrollViewRef,
+      forwardedRef,
+    );
 
     return (
       // $FlowFixMe[incompatible-use] Investigate useAnimatedProps return value

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<SectionBase<any>>,
->);
+  ItemT = any,
+  // $FlowExpectedError[unclear-type]
+  SectionT = any,
+>(
+  ref?: React.RefSetter<SectionList<ItemT, SectionT>>,
+  ...props: AnimatedProps<SectionListProps<ItemT, SectionT>>
+));

package/Libraries/Animated/createAnimatedComponent.js

@@ -8,7 +8,16 @@
  * @format
  */
 
+import type AnimatedAddition from './nodes/AnimatedAddition';
+import type AnimatedDiffClamp from './nodes/AnimatedDiffClamp';
+import type AnimatedDivision from './nodes/AnimatedDivision';
+import type AnimatedInterpolation from './nodes/AnimatedInterpolation';
+import type AnimatedModulo from './nodes/AnimatedModulo';
+import type AnimatedMultiplication from './nodes/AnimatedMultiplication';
+import type AnimatedNode from './nodes/AnimatedNode';
 import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
+import type AnimatedSubtraction from './nodes/AnimatedSubtraction';
+import type AnimatedValue from './nodes/AnimatedValue';
 
 import createAnimatedPropsHook from '../../src/private/animated/createAnimatedPropsHook';
 import composeStyles from '../../src/private/styles/composeStyles';
@@ -17,81 +26,120 @@ import useMergeRefs from '../Utilities/useMergeRefs';
 import * as React from 'react';
 import {useMemo} from 'react';
 
-export type AnimatedProps<Props: {...}> = {
-  // eslint-disable-next-line no-unused-vars
-  +[_K in keyof (Props &
-      $ReadOnly<{
-        passthroughAnimatedPropExplicitValues?: React.ElementConfig<
-          typeof View,
-        >,
-      }>)]: any,
-};
+type Nullable = void | null;
+type Primitive = string | number | boolean | symbol | void;
+type Builtin = (...$ReadOnlyArray<empty>) => mixed | Date | Error | RegExp;
+
+export type WithAnimatedValue<+T> = T extends Builtin | Nullable
+  ? T
+  : T extends Primitive
+    ?
+        | T
+        | AnimatedNode
+        | AnimatedAddition
+        | AnimatedSubtraction
+        | AnimatedDivision
+        | AnimatedMultiplication
+        | AnimatedModulo
+        | AnimatedDiffClamp
+        | AnimatedValue
+        | AnimatedInterpolation<number | string>
+        | AnimatedInterpolation<number>
+        | AnimatedInterpolation<string>
+    : T extends $ReadOnlyArray<infer P>
+      ? $ReadOnlyArray<WithAnimatedValue<P>>
+      : T extends {...}
+        ? {+[K in keyof T]: WithAnimatedValue<T[K]>}
+        : T;
 
-// We could use a mapped type here to introduce acceptable Animated variants
-// of properties, instead of doing so in the core StyleSheetTypes
-// Inexact Props are not supported, they'll be made exact here.
-export type StrictAnimatedProps<Props: {...}> = $ReadOnly<{
-  ...$Exact<Props>,
-  passthroughAnimatedPropExplicitValues?: ?Props,
+type NonAnimatedProps =
+  | 'ref'
+  | 'innerViewRef'
+  | 'scrollViewRef'
+  | 'testID'
+  | 'disabled'
+  | 'accessibilityLabel';
+type PassThroughProps = $ReadOnly<{
+  passthroughAnimatedPropExplicitValues?: React.ElementConfig<
+    typeof View,
+  > | null,
 }>;
 
+export type AnimatedProps<Props: {...}> = {
+  [K in keyof Props]: K extends NonAnimatedProps
+    ? Props[K]
+    : WithAnimatedValue<Props[K]>,
+} & PassThroughProps;
+
+export type AnimatedBaseProps<Props: {...}> = {
+  [K in keyof Props]: K extends NonAnimatedProps
+    ? Props[K]
+    : WithAnimatedValue<Props[K]>,
+};
+
 export type AnimatedComponentType<Props: {...}, +Instance = mixed> = component(
-  ref: React.RefSetter<Instance>,
+  ref?: React.RefSetter<Instance>,
   ...AnimatedProps<Props>
 );
 
-export type StrictAnimatedComponentType<
-  Props: {...},
-  +Instance = mixed,
-> = component(ref: React.RefSetter<Instance>, ...StrictAnimatedProps<Props>);
-
-export default function createAnimatedComponent<TProps: {...}, TInstance>(
-  Component: component(ref: React.RefSetter<TInstance>, ...TProps),
-): AnimatedComponentType<TProps, TInstance> {
+export default function createAnimatedComponent<
+  TInstance: React.ComponentType<any>,
+>(
+  Component: TInstance,
+): AnimatedComponentType<
+  $ReadOnly<React.ElementProps<TInstance>>,
+  React.ElementRef<TInstance>,
+> {
   return unstable_createAnimatedComponentWithAllowlist(Component, null);
 }
 
 export function unstable_createAnimatedComponentWithAllowlist<
   TProps: {...},
-  TInstance,
+  TInstance: React.ComponentType<TProps>,
 >(
-  Component: component(ref: React.RefSetter<TInstance>, ...TProps),
+  Component: TInstance,
   allowlist: ?AnimatedPropsAllowlist,
-): StrictAnimatedComponentType<TProps, TInstance> {
+): AnimatedComponentType<TProps, React.ElementRef<TInstance>> {
   const useAnimatedProps = createAnimatedPropsHook(allowlist);
 
-  const AnimatedComponent = React.forwardRef<
-    StrictAnimatedProps<TProps>,
-    TInstance,
-  >((props, forwardedRef) => {
-    const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
-      props,
-    );
-    const ref = useMergeRefs<TInstance>(callbackRef, forwardedRef);
+  const AnimatedComponent: AnimatedComponentType<
+    TProps,
+    React.ElementRef<TInstance>,
+  > = React.forwardRef<AnimatedProps<TProps>, React.ElementRef<TInstance>>(
+    (props, forwardedRef) => {
+      const [reducedProps, callbackRef] = useAnimatedProps<
+        TProps,
+        React.ElementRef<TInstance>,
+      >(props);
+      const ref = useMergeRefs<React.ElementRef<TInstance>>(
+        callbackRef,
+        forwardedRef,
+      );
 
-    // Some components require explicit passthrough values for animation
-    // to work properly. For example, if an animated component is
-    // transformed and Pressable, onPress will not work after transform
-    // without these passthrough values.
-    // $FlowFixMe[prop-missing]
-    const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
-    const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
-    const mergedStyle = useMemo(
-      () => composeStyles(style, passthroughStyle),
-      [passthroughStyle, style],
-    );
+      // Some components require explicit passthrough values for animation
+      // to work properly. For example, if an animated component is
+      // transformed and Pressable, onPress will not work after transform
+      // without these passthrough values.
+      // $FlowFixMe[prop-missing]
+      const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
+      const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
+      const mergedStyle = useMemo(
+        () => composeStyles(style, passthroughStyle),
+        [passthroughStyle, style],
+      );
 
-    // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
-    // spread after `reducedProps` but before `style`.
-    return (
-      <Component
-        {...reducedProps}
-        {...passthroughAnimatedPropExplicitValues}
-        style={mergedStyle}
-        ref={ref}
-      />
-    );
-  });
+      // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
+      // spread after `reducedProps` but before `style`.
+      return (
+        <Component
+          {...reducedProps}
+          {...passthroughAnimatedPropExplicitValues}
+          style={mergedStyle}
+          ref={ref}
+        />
+      );
+    },
+  );
 
   AnimatedComponent.displayName = `Animated(${
     Component.displayName || 'Anonymous'

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -28,7 +28,7 @@ let _assertNativeAnimatedModule: ?() => void = () => {
 };
 
 export default class AnimatedNode {
-  #listeners: Map<string, ValueListenerCallback> = new Map();
+  #listeners: Map<string, ValueListenerCallback>;
 
   _platformConfig: ?PlatformConfig = undefined;
 
@@ -38,6 +38,7 @@ export default class AnimatedNode {
       ...
     }>,
   ) {
+    this.#listeners = new Map();
     if (__DEV__) {
       this.__debugID = config?.debugID;
     }
@@ -111,8 +112,8 @@ export default class AnimatedNode {
     return this.#listeners.size > 0;
   }
 
-  __onAnimatedValueUpdateReceived(value: number): void {
-    this.__callListeners(value);
+  __onAnimatedValueUpdateReceived(value: number, offset: number): void {
+    this.__callListeners(value + offset);
   }
 
   __callListeners(value: number): void {