react-native-windows 0.0.0-canary.451 → 0.0.0-canary.455

package/.flowconfig

@@ -20,7 +20,6 @@
 <PROJECT_ROOT>/Libraries/Components/Touchable/TouchableOpacity.js
 <PROJECT_ROOT>/Libraries/Components/Touchable/TouchableWithoutFeedback.js
 <PROJECT_ROOT>/Libraries/Components/View/ReactNativeViewAttributes.js
-<PROJECT_ROOT>/Libraries/Components/View/ReactNativeViewViewConfig.js
 <PROJECT_ROOT>/Libraries/Components/View/ViewAccessibility.js
 <PROJECT_ROOT>/Libraries/Components/View/ViewPropTypes.js
 <PROJECT_ROOT>/Libraries/Components/View/View.js
@@ -118,4 +117,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.170.0
+^0.171.0

package/Libraries/Animated/AnimatedImplementation.js

@@ -38,6 +38,8 @@ import type {DecayAnimationConfig} from './animations/DecayAnimation';
 import type {SpringAnimationConfig} from './animations/SpringAnimation';
 import type {Mapping, EventConfig} from './AnimatedEvent';
 
+import AnimatedColor from './nodes/AnimatedColor';
+
 export type CompositeAnimation = {
   start: (callback?: ?EndCallback) => void,
   stop: () => void,
@@ -102,7 +104,7 @@ const _combineCallbacks = function (
 };
 
 const maybeVectorAnim = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: Object,
   anim: (value: AnimatedValue, config: Object) => CompositeAnimation,
 ): ?CompositeAnimation {
@@ -121,16 +123,42 @@ const maybeVectorAnim = function (
     // 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});
+  } else if (value instanceof AnimatedColor) {
+    const configR = {...config};
+    const configG = {...config};
+    const configB = {...config};
+    const configA = {...config};
+    for (const key in config) {
+      const {r, g, b, a} = config[key];
+      if (
+        r !== undefined &&
+        g !== undefined &&
+        b !== undefined &&
+        a !== undefined
+      ) {
+        configR[key] = r;
+        configG[key] = g;
+        configB[key] = b;
+        configA[key] = a;
+      }
+    }
+    const aR = anim((value: AnimatedColor).r, configR);
+    const aG = anim((value: AnimatedColor).g, configG);
+    const aB = anim((value: AnimatedColor).b, configB);
+    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 null;
 };
 
 const spring = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: SpringAnimationConfig,
 ): CompositeAnimation {
   const start = function (
-    animatedValue: AnimatedValue | AnimatedValueXY,
+    animatedValue: AnimatedValue | AnimatedValueXY | AnimatedColor,
     configuration: SpringAnimationConfig,
     callback?: ?EndCallback,
   ): void {
@@ -179,11 +207,11 @@ const spring = function (
 };
 
 const timing = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: TimingAnimationConfig,
 ): CompositeAnimation {
   const start = function (
-    animatedValue: AnimatedValue | AnimatedValueXY,
+    animatedValue: AnimatedValue | AnimatedValueXY | AnimatedColor,
     configuration: TimingAnimationConfig,
     callback?: ?EndCallback,
   ): void {
@@ -233,11 +261,11 @@ const timing = function (
 };
 
 const decay = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: DecayAnimationConfig,
 ): CompositeAnimation {
   const start = function (
-    animatedValue: AnimatedValue | AnimatedValueXY,
+    animatedValue: AnimatedValue | AnimatedValueXY | AnimatedColor,
     configuration: DecayAnimationConfig,
     callback?: ?EndCallback,
   ): void {
@@ -547,6 +575,10 @@ module.exports = {
    * See https://reactnative.dev/docs/animatedvaluexy
    */
   ValueXY: AnimatedValueXY,
+  /**
+   * Value class for driving color animations.
+   */
+  Color: AnimatedColor,
   /**
    * Exported to use the Interpolation type in flow.
    *

package/Libraries/Animated/AnimatedMock.js

@@ -24,6 +24,8 @@ import type {TimingAnimationConfig} from './animations/TimingAnimation';
 import type {DecayAnimationConfig} from './animations/DecayAnimation';
 import type {SpringAnimationConfig} from './animations/SpringAnimation';
 
+import AnimatedColor from './nodes/AnimatedColor';
+
 /**
  * Animations are a source of flakiness in snapshot testing. This mock replaces
  * animation functions from AnimatedImplementation with empty animations for
@@ -89,7 +91,7 @@ const mockCompositeAnimation = (
 });
 
 const spring = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: SpringAnimationConfig,
 ): CompositeAnimation {
   const anyValue: any = value;
@@ -103,7 +105,7 @@ const spring = function (
 };
 
 const timing = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: TimingAnimationConfig,
 ): CompositeAnimation {
   const anyValue: any = value;
@@ -117,7 +119,7 @@ const timing = function (
 };
 
 const decay = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: DecayAnimationConfig,
 ): CompositeAnimation {
   return emptyAnimation;
@@ -164,6 +166,7 @@ const loop = function (
 module.exports = {
   Value: AnimatedValue,
   ValueXY: AnimatedValueXY,
+  Color: AnimatedColor,
   Interpolation: AnimatedInterpolation,
   Node: AnimatedNode,
   decay,

package/Libraries/Animated/animations/SpringAnimation.js

@@ -23,6 +23,8 @@ const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {AnimationConfig, EndCallback} from './Animation';
 
+import AnimatedColor from '../nodes/AnimatedColor';
+
 export type SpringAnimationConfig = {
   ...AnimationConfig,
   toValue:
@@ -34,6 +36,14 @@ export type SpringAnimationConfig = {
         ...
       }
     | AnimatedValueXY
+    | {
+        r: number,
+        g: number,
+        b: number,
+        a: number,
+        ...
+      }
+    | AnimatedColor
     | AnimatedInterpolation,
   overshootClamping?: boolean,
   restDisplacementThreshold?: number,

package/Libraries/Animated/animations/TimingAnimation.js

@@ -19,6 +19,9 @@ const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {AnimationConfig, EndCallback} from './Animation';
+import type {RgbaValue} from '../nodes/AnimatedColor';
+
+import AnimatedColor from '../nodes/AnimatedColor';
 
 export type TimingAnimationConfig = {
   ...AnimationConfig,
@@ -31,6 +34,8 @@ export type TimingAnimationConfig = {
         ...
       }
     | AnimatedValueXY
+    | RgbaValue
+    | AnimatedColor
     | AnimatedInterpolation,
   easing?: (value: number) => number,
   duration?: number,

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -0,0 +1,316 @@
+/**
+ * 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
+ * @format
+ */
+
+'use strict';
+
+import AnimatedValue from './AnimatedValue';
+import AnimatedWithChildren from './AnimatedWithChildren';
+import normalizeColor from '../../StyleSheet/normalizeColor';
+import {processColorObject} from '../../StyleSheet/PlatformColorValueTypes';
+
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {NativeColorValue} from '../../StyleSheet/PlatformColorValueTypes';
+
+type ColorListenerCallback = (value: string) => mixed;
+export type RgbaValue = {
+  +r: number,
+  +g: number,
+  +b: number,
+  +a: number,
+  ...
+};
+type RgbaAnimatedValue = {
+  +r: AnimatedValue,
+  +g: AnimatedValue,
+  +b: AnimatedValue,
+  +a: AnimatedValue,
+  ...
+};
+
+const defaultColor: RgbaValue = {r: 0, g: 0, b: 0, a: 1.0};
+let _uniqueId = 1;
+
+/* eslint no-bitwise: 0 */
+function processColor(color?: ?ColorValue): ?(RgbaValue | NativeColorValue) {
+  if (color === undefined || color === null) {
+    return null;
+  }
+
+  let normalizedColor = normalizeColor(color);
+  if (normalizedColor === undefined || normalizedColor === null) {
+    return null;
+  }
+
+  if (typeof normalizedColor === 'object') {
+    const processedColorObj = processColorObject(normalizedColor);
+    if (processedColorObj != null) {
+      return processedColorObj;
+    }
+  } else if (typeof normalizedColor === 'number') {
+    const r = (normalizedColor & 0xff000000) >>> 24;
+    const g = (normalizedColor & 0x00ff0000) >>> 16;
+    const b = (normalizedColor & 0x0000ff00) >>> 8;
+    const a = (normalizedColor & 0x000000ff) / 255;
+
+    return {r, g, b, a};
+  }
+
+  return null;
+}
+
+function isRgbaValue(value: any): boolean {
+  return (
+    value &&
+    typeof value.r === 'number' &&
+    typeof value.g === 'number' &&
+    typeof value.b === 'number' &&
+    typeof value.a === 'number'
+  );
+}
+
+function isRgbaAnimatedValue(value: any): boolean {
+  return (
+    value &&
+    value.r instanceof AnimatedValue &&
+    value.g instanceof AnimatedValue &&
+    value.b instanceof AnimatedValue &&
+    value.a instanceof AnimatedValue
+  );
+}
+
+export default class AnimatedColor extends AnimatedWithChildren {
+  r: AnimatedValue;
+  g: AnimatedValue;
+  b: AnimatedValue;
+  a: AnimatedValue;
+  nativeColor: Object;
+  _listeners: {
+    [key: string]: {
+      r: string,
+      g: string,
+      b: string,
+      a: string,
+      ...
+    },
+    ...
+  };
+
+  constructor(valueIn?: ?(RgbaValue | RgbaAnimatedValue | ColorValue)) {
+    super();
+    let value: RgbaValue | RgbaAnimatedValue | ColorValue =
+      valueIn ?? defaultColor;
+    this.setValue(value);
+    this._listeners = {};
+  }
+
+  /**
+   * Directly set the value. This will stop any animations running on the value
+   * and update all the bound properties.
+   */
+  setValue(value: RgbaValue | RgbaAnimatedValue | ColorValue): void {
+    if (isRgbaAnimatedValue(value)) {
+      // $FlowIgnore[incompatible-cast] - Type is verified above
+      const rgbaAnimatedValue: RgbaAnimatedValue = (value: RgbaAnimatedValue);
+      this.r = rgbaAnimatedValue.r;
+      this.g = rgbaAnimatedValue.g;
+      this.b = rgbaAnimatedValue.b;
+      this.a = rgbaAnimatedValue.a;
+    } else {
+      // Handle potential parsable string color or platform color object
+      if (!isRgbaValue(value)) {
+        // $FlowIgnore[incompatible-cast] - Type is verified via conditionals
+        value = processColor((value: ColorValue)) ?? defaultColor;
+      }
+
+      if (!isRgbaValue(value)) {
+        // We are using a platform color
+        this.nativeColor = value;
+        value = defaultColor;
+      }
+
+      if (isRgbaValue(value)) {
+        // $FlowIgnore[incompatible-cast] - Type is verified via conditionals
+        const rgbaValue: RgbaValue = (value: RgbaValue);
+
+        if (this.r) {
+          this.r.setValue(rgbaValue.r);
+        } else {
+          this.r = new AnimatedValue(rgbaValue.r);
+        }
+
+        if (this.g) {
+          this.g.setValue(rgbaValue.g);
+        } else {
+          this.g = new AnimatedValue(rgbaValue.g);
+        }
+
+        if (this.b) {
+          this.b.setValue(rgbaValue.b);
+        } else {
+          this.b = new AnimatedValue(rgbaValue.b);
+        }
+
+        if (this.a) {
+          this.a.setValue(rgbaValue.a);
+        } else {
+          this.a = new AnimatedValue(rgbaValue.a);
+        }
+      }
+
+      if (this.nativeColor) {
+        this.__makeNative();
+        // TODO (T111170195): In order to support setValue() with a platform color, update the
+        // native AnimatedNode (if it exists) with a new config.
+      }
+    }
+  }
+
+  /**
+   * Sets an offset that is applied on top of whatever value is set, whether
+   * via `setValue`, an animation, or `Animated.event`. Useful for compensating
+   * things like the start of a pan gesture.
+   */
+  setOffset(offset: RgbaValue): void {
+    this.r.setOffset(offset.r);
+    this.g.setOffset(offset.g);
+    this.b.setOffset(offset.b);
+    this.a.setOffset(offset.a);
+  }
+
+  /**
+   * Merges the offset value into the base value and resets the offset to zero.
+   * The final output of the value is unchanged.
+   */
+  flattenOffset(): void {
+    this.r.flattenOffset();
+    this.g.flattenOffset();
+    this.b.flattenOffset();
+    this.a.flattenOffset();
+  }
+
+  /**
+   * Sets the offset value to the base value, and resets the base value to
+   * zero. The final output of the value is unchanged.
+   */
+  extractOffset(): void {
+    this.r.extractOffset();
+    this.g.extractOffset();
+    this.b.extractOffset();
+    this.a.extractOffset();
+  }
+
+  /**
+   * Adds an asynchronous listener to the value so you can observe updates from
+   * animations.  This is useful because there is no way to synchronously read
+   * the value because it might be driven natively.
+   *
+   * Returns a string that serves as an identifier for the listener.
+   */
+  addListener(callback: ColorListenerCallback): string {
+    const id = String(_uniqueId++);
+    const jointCallback = ({value: number}) => {
+      callback(this.__getValue());
+    };
+    this._listeners[id] = {
+      r: this.r.addListener(jointCallback),
+      g: this.g.addListener(jointCallback),
+      b: this.b.addListener(jointCallback),
+      a: this.a.addListener(jointCallback),
+    };
+    return id;
+  }
+
+  /**
+   * Unregister a listener. The `id` param shall match the identifier
+   * previously returned by `addListener()`.
+   */
+  removeListener(id: string): void {
+    this.r.removeListener(this._listeners[id].r);
+    this.g.removeListener(this._listeners[id].g);
+    this.b.removeListener(this._listeners[id].b);
+    this.a.removeListener(this._listeners[id].a);
+    delete this._listeners[id];
+  }
+
+  /**
+   * Remove all registered listeners.
+   */
+  removeAllListeners(): void {
+    this.r.removeAllListeners();
+    this.g.removeAllListeners();
+    this.b.removeAllListeners();
+    this.a.removeAllListeners();
+    this._listeners = {};
+  }
+
+  /**
+   * Stops any running animation or tracking. `callback` is invoked with the
+   * final value after stopping the animation, which is useful for updating
+   * state to match the animation position with layout.
+   */
+  stopAnimation(callback?: (value: string) => void): void {
+    this.r.stopAnimation();
+    this.g.stopAnimation();
+    this.b.stopAnimation();
+    this.a.stopAnimation();
+    callback && callback(this.__getValue());
+  }
+
+  /**
+   * Stops any animation and resets the value to its original.
+   */
+  resetAnimation(callback?: (value: string) => void): void {
+    this.r.resetAnimation();
+    this.g.resetAnimation();
+    this.b.resetAnimation();
+    this.a.resetAnimation();
+    callback && callback(this.__getValue());
+  }
+
+  __getValue(): string {
+    return `rgba(${this.r.__getValue()}, ${this.g.__getValue()}, ${this.b.__getValue()}, ${this.a.__getValue()})`;
+  }
+
+  __attach(): void {
+    this.r.__addChild(this);
+    this.g.__addChild(this);
+    this.b.__addChild(this);
+    this.a.__addChild(this);
+    super.__attach();
+  }
+
+  __detach(): void {
+    this.r.__removeChild(this);
+    this.g.__removeChild(this);
+    this.b.__removeChild(this);
+    this.a.__removeChild(this);
+    super.__detach();
+  }
+
+  __makeNative(platformConfig: ?PlatformConfig) {
+    this.r.__makeNative(platformConfig);
+    this.g.__makeNative(platformConfig);
+    this.b.__makeNative(platformConfig);
+    this.a.__makeNative(platformConfig);
+    super.__makeNative(platformConfig);
+  }
+
+  __getNativeConfig(): {...} {
+    return {
+      type: 'color',
+      r: this.r.__getNativeTag(),
+      g: this.g.__getNativeTag(),
+      b: this.b.__getNativeTag(),
+      a: this.a.__getNativeTag(),
+      nativeColor: this.nativeColor,
+    };
+  }
+}

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -23,14 +23,14 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 type ExtrapolateType = 'extend' | 'identity' | 'clamp';
 
-export type InterpolationConfigType = {
+export type InterpolationConfigType = $ReadOnly<{
   inputRange: $ReadOnlyArray<number>,
   outputRange: $ReadOnlyArray<number> | $ReadOnlyArray<string>,
   easing?: (input: number) => number,
   extrapolate?: ExtrapolateType,
   extrapolateLeft?: ExtrapolateType,
   extrapolateRight?: ExtrapolateType,
-};
+}>;
 
 const linear = (t: number) => t;
 

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -130,12 +130,12 @@ class AnimatedNode {
           if (data.tag !== this.__getNativeTag()) {
             return;
           }
-          this._onAnimatedValueUpdateReceived(data.value);
+          this.__onAnimatedValueUpdateReceived(data.value);
         },
       );
   }
 
-  _onAnimatedValueUpdateReceived(value: number) {
+  __onAnimatedValueUpdateReceived(value: number) {
     this.__callListeners(value);
   }
 

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -211,7 +211,7 @@ class AnimatedValue extends AnimatedWithChildren {
     }
   }
 
-  _onAnimatedValueUpdateReceived(value: number): void {
+  __onAnimatedValueUpdateReceived(value: number): void {
     this._updateValue(value, false /*flush*/);
   }
 

package/Libraries/Components/Pressable/Pressable.js

@@ -22,7 +22,7 @@ import type {
 } from '../View/ViewAccessibility';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
-import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
+import {type RectOrSize} from '../../StyleSheet/Rect';
 import type {
   LayoutEvent,
   MouseEvent,
@@ -181,6 +181,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     delayLongPress,
     disabled,
     focusable,
+    hitSlop,
     onHoverIn,
     onHoverOut,
     onLongPress,
@@ -201,8 +202,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
 
   const [pressed, setPressed] = usePressState(testOnly_pressed === true);
 
-  const hitSlop = normalizeRect(props.hitSlop);
-
   const accessibilityState =
     disabled != null
       ? {...props.accessibilityState, disabled}

package/Libraries/Components/Pressable/Pressable.windows.js

@@ -22,7 +22,7 @@ import type {
 } from '../View/ViewAccessibility';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
-import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
+import {type RectOrSize} from '../../StyleSheet/Rect';
 import type {
   LayoutEvent,
   MouseEvent,
@@ -227,6 +227,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     delayLongPress,
     disabled,
     focusable,
+    hitSlop,
     onHoverIn,
     onHoverOut,
     onLongPress,
@@ -269,8 +270,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
 
   const [pressed, setPressed] = usePressState(testOnly_pressed === true);
 
-  const hitSlop = normalizeRect(props.hitSlop);
-
   const accessibilityState =
     disabled != null
       ? {...props.accessibilityState, disabled}

package/Libraries/Components/TextInput/TextInput.js

@@ -1341,13 +1341,6 @@ const ExportedForwardRef: React.AbstractComponent<
   );
 });
 
-/**
- * Switch to `deprecated-react-native-prop-types` for compatibility with future
- * releases. This is deprecated and will be removed in the future.
- */
-ExportedForwardRef.propTypes =
-  require('deprecated-react-native-prop-types').TextInputPropTypes;
-
 // $FlowFixMe[prop-missing]
 ExportedForwardRef.State = {
   currentlyFocusedInput: TextInputState.currentlyFocusedInput,

package/Libraries/Components/TextInput/TextInput.windows.js

@@ -1455,13 +1455,6 @@ const ExportedForwardRef: React.AbstractComponent<
   );
 });
 
-/**
- * Switch to `deprecated-react-native-prop-types` for compatibility with future
- * releases. This is deprecated and will be removed in the future.
- */
-ExportedForwardRef.propTypes =
-  require('deprecated-react-native-prop-types').TextInputPropTypes;
-
 // $FlowFixMe[prop-missing]
 ExportedForwardRef.State = {
   currentlyFocusedInput: TextInputState.currentlyFocusedInput,