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

package/Libraries/Animated/NativeAnimatedAllowlist.js

@@ -8,6 +8,8 @@
  * @format
  */
 
+import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
+
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 
 /**
@@ -16,7 +18,7 @@ import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNa
  * In general native animated implementation should support any numeric or color property that
  * doesn't need to be updated through the shadow view hierarchy (all non-layout properties).
  */
-const SUPPORTED_COLOR_STYLES: {[string]: boolean} = {
+const SUPPORTED_COLOR_STYLES: {[string]: true} = {
   backgroundColor: true,
   borderBottomColor: true,
   borderColor: true,
@@ -29,7 +31,7 @@ const SUPPORTED_COLOR_STYLES: {[string]: boolean} = {
   tintColor: true,
 };
 
-const SUPPORTED_STYLES: {[string]: boolean} = {
+const SUPPORTED_STYLES: {[string]: true} = {
   ...SUPPORTED_COLOR_STYLES,
   borderBottomEndRadius: true,
   borderBottomLeftRadius: true,
@@ -58,7 +60,7 @@ const SUPPORTED_STYLES: {[string]: boolean} = {
   translateY: true,
 };
 
-const SUPPORTED_TRANSFORMS: {[string]: boolean} = {
+const SUPPORTED_TRANSFORMS: {[string]: true} = {
   translateX: true,
   translateY: true,
   scale: true,
@@ -71,10 +73,12 @@ const SUPPORTED_TRANSFORMS: {[string]: boolean} = {
   perspective: true,
   skewX: true,
   skewY: true,
-  matrix: ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform(),
+  ...(ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
+    ? {matrix: true}
+    : {}),
 };
 
-const SUPPORTED_INTERPOLATION_PARAMS: {[string]: boolean} = {
+const SUPPORTED_INTERPOLATION_PARAMS: {[string]: true} = {
   inputRange: true,
   outputRange: true,
   extrapolate: true,
@@ -82,6 +86,13 @@ const SUPPORTED_INTERPOLATION_PARAMS: {[string]: boolean} = {
   extrapolateLeft: true,
 };
 
+/**
+ * Default allowlist for component props that support native animated values.
+ */
+export default {
+  style: SUPPORTED_STYLES,
+} as AnimatedPropsAllowlist;
+
 export function allowInterpolationParam(param: string): void {
   SUPPORTED_INTERPOLATION_PARAMS[param] = true;
 }
@@ -95,17 +106,17 @@ export function allowTransformProp(prop: string): void {
 }
 
 export function isSupportedColorStyleProp(prop: string): boolean {
-  return SUPPORTED_COLOR_STYLES[prop] === true;
+  return SUPPORTED_COLOR_STYLES.hasOwnProperty(prop);
 }
 
 export function isSupportedInterpolationParam(param: string): boolean {
-  return SUPPORTED_INTERPOLATION_PARAMS[param] === true;
+  return SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(param);
 }
 
 export function isSupportedStyleProp(prop: string): boolean {
-  return SUPPORTED_STYLES[prop] === true;
+  return SUPPORTED_STYLES.hasOwnProperty(prop);
 }
 
 export function isSupportedTransformProp(prop: string): boolean {
-  return SUPPORTED_TRANSFORMS[prop] === true;
+  return SUPPORTED_TRANSFORMS.hasOwnProperty(prop);
 }

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