@office-iss/react-native-win32 0.80.0 → 0.81.0-preview.1

package/Libraries/Alert/RCTAlertManager.js.flow

@@ -4,15 +4,13 @@
  * 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-local
+ * @format
  */
 
 import type {Args} from './NativeAlertManager';
 
-declare export default {
-  alertWithArgs(
-    args: Args,
-    callback: (id: number, value: string) => void,
-  ): void,
-};
+declare export function alertWithArgs(
+  args: Args,
+  callback: (id: number, value: string) => void,
+): void;

package/Libraries/Animated/Animated.js

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 
 import typeof * as AnimatedExports from './AnimatedExports';

package/Libraries/Animated/Animated.js.flow

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 
 export * as default from './AnimatedExports';

package/Libraries/Animated/AnimatedEvent.js

@@ -12,6 +12,7 @@
 
 import type {NativeSyntheticEvent} from '../Types/CoreEventTypes';
 import type {PlatformConfig} from './AnimatedPlatformConfig';
+import type {EventMapping} from './NativeAnimatedModule';
 
 import NativeAnimatedHelper from '../../src/private/animated/NativeAnimatedHelper';
 import {findNodeHandle} from '../ReactNative/RendererProxy';
@@ -29,7 +30,7 @@ export type EventConfig<T> = {
   platformConfig?: PlatformConfig,
 };
 
-export function attachNativeEvent(
+export function attachNativeEventImpl(
   viewRef: any,
   eventName: string,
   argMapping: $ReadOnlyArray<?Mapping>,
@@ -37,7 +38,7 @@ export function attachNativeEvent(
 ): {detach: () => void} {
   // Find animated values in `argMapping` and create an array representing their
   // key path inside the `nativeEvent` object. Ex.: ['contentOffset', 'x'].
-  const eventMappings = [];
+  const eventMappings: Array<EventMapping> = [];
 
   const traverse = (value: mixed, path: Array<string>) => {
     if (value instanceof AnimatedValue) {
@@ -181,7 +182,7 @@ export class AnimatedEvent {
       'Only native driven events need to be attached.',
     );
 
-    this._attachedEvent = attachNativeEvent(
+    this._attachedEvent = attachNativeEventImpl(
       viewRef,
       eventName,
       this._argMapping,

package/Libraries/Animated/AnimatedExports.js

@@ -6,7 +6,6 @@
  *
  * @flow
  * @format
- * @oncall react_native
  */
 
 import typeof AnimatedFlatList from './components/AnimatedFlatList';

package/Libraries/Animated/AnimatedExports.js.flow

@@ -6,11 +6,14 @@
  *
  * @flow
  * @format
- * @oncall react_native
  */
 
 import AnimatedImplementation from './AnimatedImplementation';
 
+export type {DecayAnimationConfig} from './animations/DecayAnimation';
+export type {SpringAnimationConfig} from './animations/SpringAnimation';
+export type {TimingAnimationConfig} from './animations/TimingAnimation';
+
 export {default as FlatList} from './components/AnimatedFlatList';
 export {default as Image} from './components/AnimatedImage';
 export {default as ScrollView} from './components/AnimatedScrollView';
@@ -34,6 +37,7 @@ export type {default as AnimatedNode} from './nodes/AnimatedNode';
 export type {default as AnimatedAddition} from './nodes/AnimatedAddition';
 export type {default as AnimatedDiffClamp} from './nodes/AnimatedDiffClamp';
 export type {default as AnimatedDivision} from './nodes/AnimatedDivision';
+export type {InterpolationConfigType as InterpolationConfig} from './nodes/AnimatedInterpolation';
 export type {default as AnimatedModulo} from './nodes/AnimatedModulo';
 export type {default as AnimatedMultiplication} from './nodes/AnimatedMultiplication';
 export type {default as AnimatedSubtraction} from './nodes/AnimatedSubtraction';

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

@@ -13,6 +13,7 @@ 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 = {
@@ -149,8 +150,15 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value, offset);
 
-            if (this.__isLooping === true) {
-              return;
+            if (
+              !(
+                ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
+                ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync()
+              )
+            ) {
+              if (this.__isLooping === true) {
+                return;
+              }
             }
 
             // Once the JS side node is synced with the updated values, trigger an

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -9,10 +9,15 @@
  */
 
 import type {____ViewStyle_Internal} from '../../StyleSheet/StyleSheetTypes';
-import type {AnimatedComponentType} from '../createAnimatedComponent';
+import type {
+  AnimatedComponentType,
+  AnimatedProps,
+} 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';
@@ -21,66 +26,64 @@ import useMergeRefs from '../../Utilities/useMergeRefs';
 import createAnimatedComponent from '../createAnimatedComponent';
 import useAnimatedProps from '../useAnimatedProps';
 import * as React from 'react';
-import {useMemo} 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,
-> = React.forwardRef(
-  function AnimatedScrollViewWithOrWithoutInvertedRefreshControl(
-    props,
-    forwardedRef,
+> = function AnimatedScrollViewWithOrWithoutInvertedRefreshControl({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<AnimatedScrollViewInstance>,
+  ...AnimatedProps<ScrollViewProps>,
+}) {
+  // (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 - 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}
-        />
-      );
-    }
-  },
-);
+    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]
-  function AnimatedScrollViewWithInvertedRefreshControl(
-    props: {
-      ...React.ElementConfig<typeof ScrollView>,
-      // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
-      refreshControl: ExactReactElement_DEPRECATED<any>,
-    },
-    forwardedRef:
-      | {current: AnimatedScrollViewInstance | null, ...}
-      | ((AnimatedScrollViewInstance | null) => mixed),
-  ) {
+const AnimatedScrollViewWithInvertedRefreshControl =
+  function AnimatedScrollViewWithInvertedRefreshControl({
+    ref: forwardedRef,
+    ...props
+  }: {
+    ref?: React.RefSetter<AnimatedScrollViewInstance>,
+    ...React.ElementConfig<typeof ScrollView>,
+    // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
+    refreshControl: ExactReactElement_DEPRECATED<any>,
+  }) {
     // Split `props` into the animate-able props for the parent (RefreshControl)
     // and child (ScrollView).
     const {intermediatePropsForRefreshControl, intermediatePropsForScrollView} =
@@ -102,14 +105,14 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
     // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be
     // safely clobbered.
     const refreshControl: ExactReactElement_DEPRECATED<typeof RefreshControl> =
-      React.cloneElement(props.refreshControl, {
+      cloneElement(props.refreshControl, {
         ...refreshControlAnimatedProps,
         ref: refreshControlRef,
       });
 
     // Handle animated props on `NativeDirectionalScrollView`.
     const [scrollViewAnimatedProps, scrollViewRef] = useAnimatedProps<
-      AnimatedScrollViewProps,
+      ScrollViewProps,
       AnimatedScrollViewInstance,
     >(intermediatePropsForScrollView);
     const ref = useMergeRefs<AnimatedScrollViewInstance>(
@@ -134,8 +137,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
         )}
       />
     );
-  },
-);
+  };
 
 const AnimatedScrollViewWithoutInvertedRefreshControl =
   createAnimatedComponent(ScrollView);

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>,
 >);