@office-iss/react-native-win32 0.76.2 → 0.77.0-preview.1

package/Libraries/Animated/animations/Animation.js

@@ -4,31 +4,30 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
-'use strict';
-
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedNode from '../nodes/AnimatedNode';
 import type AnimatedValue from '../nodes/AnimatedValue';
 
-import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 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 EndCallback = (result: EndResult) => void;
 
-export type AnimationConfig = {
+export type AnimationConfig = $ReadOnly<{
   isInteraction?: boolean,
   useNativeDriver: boolean,
   platformConfig?: PlatformConfig,
   onComplete?: ?EndCallback,
   iterations?: number,
   isLooping?: boolean,
-};
+  ...
+}>;
 
 let startNativeAnimationNextId = 1;
 
@@ -36,13 +35,23 @@ let startNativeAnimationNextId = 1;
 // Once an animation has been stopped or finished its course, it will
 // not be reused.
 export default class Animation {
+  #nativeID: ?number;
+  #onEnd: ?EndCallback;
+  #useNativeDriver: boolean;
+
   __active: boolean;
   __isInteraction: boolean;
-  __onEnd: ?EndCallback;
-  __iterations: number;
   __isLooping: ?boolean;
+  __iterations: number;
+
+  constructor(config: AnimationConfig) {
+    this.#useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
 
-  _nativeId: number;
+    this.__active = false;
+    this.__isInteraction = config.isInteraction ?? !this.#useNativeDriver;
+    this.__isLooping = config.isLooping;
+    this.__iterations = config.iterations ?? 1;
+  }
 
   start(
     fromValue: number,
@@ -50,27 +59,35 @@ export default class Animation {
     onEnd: ?EndCallback,
     previousAnimation: ?Animation,
     animatedValue: AnimatedValue,
-  ): void {}
+  ): void {
+    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`',
+      );
+    }
+
+    this.#onEnd = onEnd;
+    this.__active = true;
+  }
 
   stop(): void {
-    if (this._nativeId) {
-      NativeAnimatedHelper.API.stopAnimation(this._nativeId);
+    if (this.#nativeID != null) {
+      NativeAnimatedHelper.API.stopAnimation(this.#nativeID);
     }
+    this.__active = false;
   }
 
-  __getNativeAnimationConfig(): any {
+  __getNativeAnimationConfig(): $ReadOnly<{
+    platformConfig: ?PlatformConfig,
+    ...
+  }> {
     // 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 = [];
 
@@ -86,7 +103,11 @@ export default class Animation {
     return result;
   }
 
-  __startNativeAnimation(animatedValue: AnimatedValue): void {
+  __startAnimationIfNative(animatedValue: AnimatedValue): boolean {
+    if (!this.#useNativeDriver) {
+      return false;
+    }
+
     const startNativeAnimationWaitId = `${startNativeAnimationNextId}:startAnimation`;
     startNativeAnimationNextId += 1;
     NativeAnimatedHelper.API.setWaitingForIdentifier(
@@ -95,13 +116,13 @@ export default class Animation {
     try {
       const config = this.__getNativeAnimationConfig();
       animatedValue.__makeNative(config.platformConfig);
-      this._nativeId = NativeAnimatedHelper.generateNewAnimationId();
+      this.#nativeID = NativeAnimatedHelper.generateNewAnimationId();
       NativeAnimatedHelper.API.startAnimatingNode(
-        this._nativeId,
+        this.#nativeID,
         animatedValue.__getNativeTag(),
         config,
         result => {
-          this.__debouncedOnEnd(result);
+          this.__notifyAnimationEnd(result);
 
           // When using natively driven animations, once the animation completes,
           // we need to ensure that the JS side nodes are synced with the updated
@@ -112,7 +133,7 @@ export default class Animation {
 
             if (
               ReactNativeFeatureFlags.shouldSkipStateUpdatesForLoopingAnimations() &&
-              this.__isLooping
+              this.__isLooping === true
             ) {
               return;
             }
@@ -125,6 +146,8 @@ export default class Animation {
           }
         },
       );
+
+      return true;
     } catch (e) {
       throw e;
     } finally {
@@ -133,4 +156,16 @@ export default class Animation {
       );
     }
   }
+
+  /**
+   * Notify the completion callback that the animation has ended. The completion
+   * callback will never be called more than once.
+   */
+  __notifyAnimationEnd(result: EndResult): void {
+    const callback = this.#onEnd;
+    if (callback != null) {
+      this.#onEnd = null;
+      queueMicrotask(() => callback(result));
+    }
+  }
 }

package/Libraries/Animated/animations/DecayAnimation.js

@@ -4,36 +4,35 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
-'use strict';
-
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedValue from '../nodes/AnimatedValue';
 import type {AnimationConfig, EndCallback} from './Animation';
 
-import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import Animation from './Animation';
 
-export type DecayAnimationConfig = {
+export type DecayAnimationConfig = $ReadOnly<{
   ...AnimationConfig,
   velocity:
     | number
-    | {
+    | $ReadOnly<{
         x: number,
         y: number,
         ...
-      },
+      }>,
   deceleration?: number,
-};
+  ...
+}>;
 
-export type DecayAnimationConfigSingle = {
+export type DecayAnimationConfigSingle = $ReadOnly<{
   ...AnimationConfig,
   velocity: number,
   deceleration?: number,
-};
+  ...
+}>;
 
 export default class DecayAnimation extends Animation {
   _startTime: number;
@@ -42,27 +41,25 @@ export default class DecayAnimation extends Animation {
   _deceleration: number;
   _velocity: number;
   _onUpdate: (value: number) => void;
-  _animationFrame: any;
-  _useNativeDriver: boolean;
+  _animationFrame: ?AnimationFrameID;
   _platformConfig: ?PlatformConfig;
 
   constructor(config: DecayAnimationConfigSingle) {
-    super();
+    super(config);
+
     this._deceleration = config.deceleration ?? 0.998;
     this._velocity = config.velocity;
-    this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this._platformConfig = config.platformConfig;
-    this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
-    this.__iterations = config.iterations ?? 1;
   }
 
-  __getNativeAnimationConfig(): {|
+  __getNativeAnimationConfig(): $ReadOnly<{
     deceleration: number,
     iterations: number,
     platformConfig: ?PlatformConfig,
-    type: $TEMPORARY$string<'decay'>,
+    type: 'decay',
     velocity: number,
-  |} {
+    ...
+  }> {
     return {
       type: 'decay',
       deceleration: this._deceleration,
@@ -79,26 +76,16 @@ export default class DecayAnimation extends Animation {
     previousAnimation: ?Animation,
     animatedValue: AnimatedValue,
   ): void {
-    this.__active = true;
+    super.start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue);
+
     this._lastValue = fromValue;
     this._fromValue = fromValue;
     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 {
-      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-      this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
+    const useNativeDriver = this.__startAnimationIfNative(animatedValue);
+    if (!useNativeDriver) {
+      this._animationFrame = requestAnimationFrame(() => this.onUpdate());
     }
   }
 
@@ -113,7 +100,7 @@ export default class DecayAnimation extends Animation {
     this._onUpdate(value);
 
     if (Math.abs(this._lastValue - value) < 0.1) {
-      this.__debouncedOnEnd({finished: true});
+      this.__notifyAnimationEnd({finished: true});
       return;
     }
 
@@ -126,8 +113,9 @@ export default class DecayAnimation extends Animation {
 
   stop(): void {
     super.stop();
-    this.__active = false;
-    global.cancelAnimationFrame(this._animationFrame);
-    this.__debouncedOnEnd({finished: false});
+    if (this._animationFrame != null) {
+      global.cancelAnimationFrame(this._animationFrame);
+    }
+    this.__notifyAnimationEnd({finished: false});
   }
 }

package/Libraries/Animated/animations/SpringAnimation.js

@@ -4,25 +4,22 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
-'use strict';
-
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedInterpolation from '../nodes/AnimatedInterpolation';
 import type AnimatedValue from '../nodes/AnimatedValue';
 import type AnimatedValueXY from '../nodes/AnimatedValueXY';
 import type {AnimationConfig, EndCallback} from './Animation';
 
-import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedColor from '../nodes/AnimatedColor';
 import * as SpringConfig from '../SpringConfig';
 import Animation from './Animation';
 import invariant from 'invariant';
 
-export type SpringAnimationConfig = {
+export type SpringAnimationConfig = $ReadOnly<{
   ...AnimationConfig,
   toValue:
     | number
@@ -47,11 +44,11 @@ export type SpringAnimationConfig = {
   restSpeedThreshold?: number,
   velocity?:
     | number
-    | {
+    | $ReadOnly<{
         x: number,
         y: number,
         ...
-      },
+      }>,
   bounciness?: number,
   speed?: number,
   tension?: number,
@@ -60,9 +57,10 @@ export type SpringAnimationConfig = {
   damping?: number,
   mass?: number,
   delay?: number,
-};
+  ...
+}>;
 
-export type SpringAnimationConfigSingle = {
+export type SpringAnimationConfigSingle = $ReadOnly<{
   ...AnimationConfig,
   toValue: number,
   overshootClamping?: boolean,
@@ -77,7 +75,14 @@ export type SpringAnimationConfigSingle = {
   damping?: number,
   mass?: number,
   delay?: number,
-};
+  ...
+}>;
+
+opaque type SpringAnimationInternalState = $ReadOnly<{
+  lastPosition: number,
+  lastVelocity: number,
+  lastTime: number,
+}>;
 
 export default class SpringAnimation extends Animation {
   _overshootClamping: boolean;
@@ -93,17 +98,16 @@ export default class SpringAnimation extends Animation {
   _mass: number;
   _initialVelocity: number;
   _delay: number;
-  _timeout: any;
+  _timeout: ?TimeoutID;
   _startTime: number;
   _lastTime: number;
   _frameTime: number;
   _onUpdate: (value: number) => void;
-  _animationFrame: any;
-  _useNativeDriver: boolean;
+  _animationFrame: ?AnimationFrameID;
   _platformConfig: ?PlatformConfig;
 
   constructor(config: SpringAnimationConfigSingle) {
-    super();
+    super(config);
 
     this._overshootClamping = config.overshootClamping ?? false;
     this._restDisplacementThreshold = config.restDisplacementThreshold ?? 0.001;
@@ -112,10 +116,7 @@ export default class SpringAnimation extends Animation {
     this._lastVelocity = config.velocity ?? 0;
     this._toValue = config.toValue;
     this._delay = config.delay ?? 0;
-    this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this._platformConfig = config.platformConfig;
-    this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
-    this.__iterations = config.iterations ?? 1;
 
     if (
       config.stiffness !== undefined ||
@@ -167,7 +168,7 @@ export default class SpringAnimation extends Animation {
     invariant(this._mass > 0, 'Mass value must be greater than 0');
   }
 
-  __getNativeAnimationConfig(): {|
+  __getNativeAnimationConfig(): $ReadOnly<{
     damping: number,
     initialVelocity: number,
     iterations: number,
@@ -177,9 +178,10 @@ export default class SpringAnimation extends Animation {
     restDisplacementThreshold: number,
     restSpeedThreshold: number,
     stiffness: number,
-    toValue: any,
-    type: $TEMPORARY$string<'spring'>,
-  |} {
+    toValue: number,
+    type: 'spring',
+    ...
+  }> {
     return {
       type: 'spring',
       overshootClamping: this._overshootClamping,
@@ -202,12 +204,12 @@ export default class SpringAnimation extends Animation {
     previousAnimation: ?Animation,
     animatedValue: AnimatedValue,
   ): void {
-    this.__active = true;
+    super.start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue);
+
     this._startPosition = fromValue;
     this._lastPosition = this._startPosition;
 
     this._onUpdate = onUpdate;
-    this.__onEnd = onEnd;
     this._lastTime = Date.now();
     this._frameTime = 0.0;
 
@@ -221,17 +223,8 @@ 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 {
+      const useNativeDriver = this.__startAnimationIfNative(animatedValue);
+      if (!useNativeDriver) {
         this.onUpdate();
       }
     };
@@ -244,7 +237,7 @@ export default class SpringAnimation extends Animation {
     }
   }
 
-  getInternalState(): Object {
+  getInternalState(): SpringAnimationInternalState {
     return {
       lastPosition: this._lastPosition,
       lastVelocity: this._lastVelocity,
@@ -361,7 +354,7 @@ export default class SpringAnimation extends Animation {
         this._onUpdate(this._toValue);
       }
 
-      this.__debouncedOnEnd({finished: true});
+      this.__notifyAnimationEnd({finished: true});
       return;
     }
     // $FlowFixMe[method-unbinding] added when improving typing for this parameters
@@ -370,9 +363,10 @@ export default class SpringAnimation extends Animation {
 
   stop(): void {
     super.stop();
-    this.__active = false;
     clearTimeout(this._timeout);
-    global.cancelAnimationFrame(this._animationFrame);
-    this.__debouncedOnEnd({finished: false});
+    if (this._animationFrame != null) {
+      global.cancelAnimationFrame(this._animationFrame);
+    }
+    this.__notifyAnimationEnd({finished: false});
   }
 }

package/Libraries/Animated/animations/TimingAnimation.js

@@ -4,12 +4,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
-'use strict';
-
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {RgbaValue} from '../nodes/AnimatedColor';
 import type AnimatedInterpolation from '../nodes/AnimatedInterpolation';
@@ -17,7 +15,6 @@ import type AnimatedValue from '../nodes/AnimatedValue';
 import type AnimatedValueXY from '../nodes/AnimatedValueXY';
 import type {AnimationConfig, EndCallback} from './Animation';
 
-import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedColor from '../nodes/AnimatedColor';
 import Animation from './Animation';
 
@@ -26,11 +23,11 @@ export type TimingAnimationConfig = $ReadOnly<{
   toValue:
     | number
     | AnimatedValue
-    | {
+    | $ReadOnly<{
         x: number,
         y: number,
         ...
-      }
+      }>
     | AnimatedValueXY
     | RgbaValue
     | AnimatedColor
@@ -38,6 +35,7 @@ export type TimingAnimationConfig = $ReadOnly<{
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
+  ...
 }>;
 
 export type TimingAnimationConfigSingle = $ReadOnly<{
@@ -46,6 +44,7 @@ export type TimingAnimationConfigSingle = $ReadOnly<{
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
+  ...
 }>;
 
 let _easeInOut;
@@ -65,25 +64,28 @@ export default class TimingAnimation extends Animation {
   _delay: number;
   _easing: (value: number) => number;
   _onUpdate: (value: number) => void;
-  _animationFrame: any;
-  _timeout: any;
-  _useNativeDriver: boolean;
+  _animationFrame: ?AnimationFrameID;
+  _timeout: ?TimeoutID;
   _platformConfig: ?PlatformConfig;
 
   constructor(config: TimingAnimationConfigSingle) {
-    super();
+    super(config);
+
     this._toValue = config.toValue;
     this._easing = config.easing ?? easeInOut();
     this._duration = config.duration ?? 500;
     this._delay = config.delay ?? 0;
-    this.__iterations = config.iterations ?? 1;
-    this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this._platformConfig = config.platformConfig;
-    this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
-    this.__isLooping = config.isLooping;
   }
 
-  __getNativeAnimationConfig(): any {
+  __getNativeAnimationConfig(): $ReadOnly<{
+    type: 'frames',
+    frames: $ReadOnlyArray<number>,
+    toValue: number,
+    iterations: number,
+    platformConfig: ?PlatformConfig,
+    ...
+  }> {
     const frameDuration = 1000.0 / 60.0;
     const frames = [];
     const numFrames = Math.round(this._duration / frameDuration);
@@ -107,35 +109,24 @@ export default class TimingAnimation extends Animation {
     previousAnimation: ?Animation,
     animatedValue: AnimatedValue,
   ): void {
-    this.__active = true;
+    super.start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue);
+
     this._fromValue = fromValue;
     this._onUpdate = onUpdate;
-    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`',
-        );
-      }
+      this._startTime = Date.now();
 
-      // 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.
-      if (this._duration === 0 && !this._useNativeDriver) {
-        this._onUpdate(this._toValue);
-        this.__debouncedOnEnd({finished: true});
-      } else {
-        this._startTime = Date.now();
-        if (this._useNativeDriver) {
-          this.__startNativeAnimation(animatedValue);
+      const useNativeDriver = this.__startAnimationIfNative(animatedValue);
+      if (!useNativeDriver) {
+        // 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.
+        if (this._duration === 0) {
+          this._onUpdate(this._toValue);
+          this.__notifyAnimationEnd({finished: true});
         } else {
-          this._animationFrame = requestAnimationFrame(
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            this.onUpdate.bind(this),
-          );
+          this._animationFrame = requestAnimationFrame(() => this.onUpdate());
         }
       }
     };
@@ -156,7 +147,7 @@ export default class TimingAnimation extends Animation {
           this._fromValue + this._easing(1) * (this._toValue - this._fromValue),
         );
       }
-      this.__debouncedOnEnd({finished: true});
+      this.__notifyAnimationEnd({finished: true});
       return;
     }
 
@@ -173,9 +164,10 @@ export default class TimingAnimation extends Animation {
 
   stop(): void {
     super.stop();
-    this.__active = false;
     clearTimeout(this._timeout);
-    global.cancelAnimationFrame(this._animationFrame);
-    this.__debouncedOnEnd({finished: false});
+    if (this._animationFrame != null) {
+      global.cancelAnimationFrame(this._animationFrame);
+    }
+    this.__notifyAnimationEnd({finished: false});
   }
 }

package/Libraries/Animated/components/AnimatedFlatList.js

@@ -16,5 +16,5 @@ import * as React from 'react';
 
 export default (createAnimatedComponent(FlatList): AnimatedComponentType<
   React.ElementConfig<typeof FlatList>,
-  React.ElementRef<typeof FlatList>,
+  FlatList<mixed>,
 >);

package/Libraries/Animated/components/AnimatedSectionList.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {SectionBase} from '../../Lists/SectionList';
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
 import SectionList from '../../Lists/SectionList';
@@ -16,5 +17,6 @@ import * as React from 'react';
 
 export default (createAnimatedComponent(SectionList): AnimatedComponentType<
   React.ElementConfig<typeof SectionList>,
-  React.ElementRef<typeof SectionList>,
+  // $FlowExpectedError[unclear-type]
+  SectionList<SectionBase<any>>,
 >);