react-native-windows 0.76.3 → 0.77.0-preview.1

package/.flowconfig

@@ -85,6 +85,9 @@
 ; helloworld
 <PROJECT_ROOT>/packages/helloworld/ios/Pods/
 
+; Ignore rn-tester Pods
+<PROJECT_ROOT>/packages/rn-tester/Pods/
+
 [untyped]
 .*/node_modules/@react-native-community/cli/.*/.*
 
@@ -131,6 +134,7 @@ suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 suppress_type=$FlowFixMeEmpty
 
+ban_spread_key_props=true
 sharedmemory.hash_table_pow=21
 
 [lints]
@@ -154,4 +158,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.245.2
+^0.253.0

package/Libraries/ActionSheetIOS/ActionSheetIOS.d.ts

@@ -22,6 +22,7 @@ export interface ActionSheetIOSOptions {
   anchor?: number | undefined;
   tintColor?: ColorValue | ProcessedColorValue | undefined;
   cancelButtonTintColor?: ColorValue | ProcessedColorValue | undefined;
+  disabledButtonTintColor?: ColorValue | ProcessedColorValue | undefined;
   userInterfaceStyle?: 'light' | 'dark' | undefined;
   disabledButtonIndices?: number[] | undefined;
 }

package/Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -49,6 +49,7 @@ const ActionSheetIOS = {
       +anchor?: ?number,
       +tintColor?: ColorValue | ProcessedColorValue,
       +cancelButtonTintColor?: ColorValue | ProcessedColorValue,
+      +disabledButtonTintColor?: ColorValue | ProcessedColorValue,
       +userInterfaceStyle?: string,
       +disabledButtonIndices?: Array<number>,
     |},
@@ -64,6 +65,7 @@ const ActionSheetIOS = {
     const {
       tintColor,
       cancelButtonTintColor,
+      disabledButtonTintColor,
       destructiveButtonIndex,
       ...remainingOptions
     } = options;
@@ -77,6 +79,10 @@ const ActionSheetIOS = {
 
     const processedTintColor = processColor(tintColor);
     const processedCancelButtonTintColor = processColor(cancelButtonTintColor);
+    const processedDisabledButtonTintColor = processColor(
+      disabledButtonTintColor,
+    );
+
     invariant(
       processedTintColor == null || typeof processedTintColor === 'number',
       'Unexpected color given for ActionSheetIOS.showActionSheetWithOptions tintColor',
@@ -86,6 +92,11 @@ const ActionSheetIOS = {
         typeof processedCancelButtonTintColor === 'number',
       'Unexpected color given for ActionSheetIOS.showActionSheetWithOptions cancelButtonTintColor',
     );
+    invariant(
+      processedDisabledButtonTintColor == null ||
+        typeof processedDisabledButtonTintColor === 'number',
+      'Unexpected color given for ActionSheetIOS.showActionSheetWithOptions disabledButtonTintColor',
+    );
     RCTActionSheetManager.showActionSheetWithOptions(
       {
         ...remainingOptions,
@@ -93,6 +104,8 @@ const ActionSheetIOS = {
         tintColor: processedTintColor,
         // $FlowFixMe[incompatible-call]
         cancelButtonTintColor: processedCancelButtonTintColor,
+        // $FlowFixMe[incompatible-call]
+        disabledButtonTintColor: processedDisabledButtonTintColor,
         destructiveButtonIndices,
       },
       callback,

package/Libraries/Animated/AnimatedEvent.js

@@ -12,8 +12,8 @@
 
 import type {PlatformConfig} from './AnimatedPlatformConfig';
 
-import {findNodeHandle} from '../ReactNative/RendererProxy';
 import NativeAnimatedHelper from '../../src/private/animated/NativeAnimatedHelper';
+import {findNodeHandle} from '../ReactNative/RendererProxy';
 import AnimatedValue from './nodes/AnimatedValue';
 import AnimatedValueXY from './nodes/AnimatedValueXY';
 import invariant from 'invariant';

package/Libraries/Animated/AnimatedImplementation.js

@@ -373,7 +373,7 @@ const parallel = function (
   const stopTogether = !(config && config.stopTogether === false);
 
   const result = {
-    start: function (callback?: ?EndCallback) {
+    start: function (callback?: ?EndCallback, isLooping?: boolean) {
       if (doneCount === animations.length) {
         callback && callback({finished: true});
         return;
@@ -397,7 +397,7 @@ const parallel = function (
         if (!animation) {
           cb({finished: true});
         } else {
-          animation.start(cb);
+          animation.start(cb, isLooping);
         }
       });
     },

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 Object.hasOwn(SUPPORTED_COLOR_STYLES, prop);
 }
 
 export function isSupportedInterpolationParam(param: string): boolean {
-  return SUPPORTED_INTERPOLATION_PARAMS[param] === true;
+  return Object.hasOwn(SUPPORTED_INTERPOLATION_PARAMS, param);
 }
 
 export function isSupportedStyleProp(prop: string): boolean {
-  return SUPPORTED_STYLES[prop] === true;
+  return Object.hasOwn(SUPPORTED_STYLES, prop);
 }
 
 export function isSupportedTransformProp(prop: string): boolean {
-  return SUPPORTED_TRANSFORMS[prop] === true;
+  return Object.hasOwn(SUPPORTED_TRANSFORMS, prop);
 }

package/Libraries/Animated/NativeAnimatedAllowlist.windows.js

@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
+
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
+
+/**
+ * Styles allowed by the native animated implementation.
+ *
+ * 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]: true} = {
+  backgroundColor: true,
+  borderBottomColor: true,
+  borderColor: true,
+  borderEndColor: true,
+  borderLeftColor: true,
+  borderRightColor: true,
+  borderStartColor: true,
+  borderTopColor: true,
+  color: true,
+  tintColor: true,
+};
+
+const SUPPORTED_STYLES: {[string]: true} = {
+  ...SUPPORTED_COLOR_STYLES,
+  borderBottomEndRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderBottomStartRadius: true,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
+  borderRadius: true,
+  borderTopEndRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderTopStartRadius: true,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
+  elevation: true,
+  opacity: true,
+  transform: true,
+  zIndex: true,
+  /* ios styles */
+  shadowOpacity: true,
+  shadowRadius: true,
+  /* legacy android transform properties */
+  scaleX: true,
+  scaleY: true,
+  translateX: true,
+  translateY: true,
+};
+
+const SUPPORTED_TRANSFORMS: {[string]: true} = {
+  translateX: true,
+  translateY: true,
+  scale: true,
+  scaleX: true,
+  scaleY: true,
+  rotate: true,
+  rotateX: true,
+  rotateY: true,
+  rotateZ: true,
+  perspective: true,
+  skewX: true,
+  skewY: true,
+  ...(ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
+    ? {matrix: true}
+    : {}),
+};
+
+const SUPPORTED_INTERPOLATION_PARAMS: {[string]: true} = {
+  inputRange: true,
+  outputRange: true,
+  extrapolate: true,
+  extrapolateRight: true,
+  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;
+}
+
+export function allowStyleProp(prop: string): void {
+  SUPPORTED_STYLES[prop] = true;
+}
+
+export function allowTransformProp(prop: string): void {
+  SUPPORTED_TRANSFORMS[prop] = true;
+}
+
+export function isSupportedColorStyleProp(prop: string): boolean {
+  return SUPPORTED_COLOR_STYLES.hasOwnProperty(prop);
+}
+
+export function isSupportedInterpolationParam(param: string): boolean {
+  return SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(param);
+}
+
+export function isSupportedStyleProp(prop: string): boolean {
+  return SUPPORTED_STYLES.hasOwnProperty(prop);
+}
+
+export function isSupportedTransformProp(prop: string): boolean {
+  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;
+      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});
   }
 }