@office-iss/react-native-win32 0.0.0-canary.296 → 0.0.0-canary.298

package/Libraries/Animated/createAnimatedComponent.js

@@ -105,41 +105,45 @@ export function unstable_createAnimatedComponentWithAllowlist<
   const AnimatedComponent: AnimatedComponentType<
     TProps,
     React.ElementRef<TInstance>,
-  > = React.forwardRef<AnimatedProps<TProps>, React.ElementRef<TInstance>>(
-    (props, forwardedRef) => {
-      const [reducedProps, callbackRef] = useAnimatedProps<
-        TProps,
-        React.ElementRef<TInstance>,
-      >(props);
-      const ref = useMergeRefs<React.ElementRef<TInstance>>(
-        callbackRef,
-        forwardedRef,
-      );
+  > = ({
+    ref: forwardedRef,
+    ...props
+  }: {
+    ref?: React.RefSetter<React.ElementRef<TInstance>>,
+    ...AnimatedProps<TProps>,
+  }) => {
+    const [reducedProps, callbackRef] = useAnimatedProps<
+      TProps,
+      React.ElementRef<TInstance>,
+    >(props);
+    const ref = useMergeRefs<React.ElementRef<TInstance>>(
+      callbackRef,
+      forwardedRef,
+    );
 
-      // Some components require explicit passthrough values for animation
-      // to work properly. For example, if an animated component is
-      // transformed and Pressable, onPress will not work after transform
-      // without these passthrough values.
-      // $FlowFixMe[prop-missing]
-      const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
-      const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
-      const mergedStyle = useMemo(
-        () => composeStyles(style, passthroughStyle),
-        [passthroughStyle, style],
-      );
+    // Some components require explicit passthrough values for animation
+    // to work properly. For example, if an animated component is
+    // transformed and Pressable, onPress will not work after transform
+    // without these passthrough values.
+    // $FlowFixMe[prop-missing]
+    const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
+    const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
+    const mergedStyle = useMemo(
+      () => composeStyles(style, passthroughStyle),
+      [passthroughStyle, style],
+    );
 
-      // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
-      // spread after `reducedProps` but before `style`.
-      return (
-        <Component
-          {...reducedProps}
-          {...passthroughAnimatedPropExplicitValues}
-          style={mergedStyle}
-          ref={ref}
-        />
-      );
-    },
-  );
+    // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
+    // spread after `reducedProps` but before `style`.
+    return (
+      <Component
+        {...reducedProps}
+        {...passthroughAnimatedPropExplicitValues}
+        style={mergedStyle}
+        ref={ref}
+      />
+    );
+  };
 
   AnimatedComponent.displayName = `Animated(${
     Component.displayName || 'Anonymous'

package/Libraries/Animated/nodes/AnimatedObject.js

@@ -6,7 +6,6 @@
  *
  * @flow
  * @format
- * @oncall react_native
  */
 
 'use strict';
@@ -16,7 +15,7 @@ import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedNode from './AnimatedNode';
 import AnimatedWithChildren from './AnimatedWithChildren';
-import * as React from 'react';
+import {isValidElement} from 'react';
 
 const MAX_DEPTH = 5;
 
@@ -30,7 +29,7 @@ export function isPlainObject(
     value !== null &&
     typeof value === 'object' &&
     Object.getPrototypeOf(value).isPrototypeOf(Object) &&
-    !React.isValidElement(value)
+    !isValidElement(value)
   );
 }
 

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -13,7 +13,9 @@ import type {AnimatedNodeConfig} from './AnimatedNode';
 import type {AnimatedStyleAllowlist} from './AnimatedStyle';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
+import flattenStyle from '../../StyleSheet/flattenStyle';
 import {AnimatedEvent} from '../AnimatedEvent';
 import AnimatedNode from './AnimatedNode';
 import AnimatedObject from './AnimatedObject';
@@ -22,7 +24,7 @@ import invariant from 'invariant';
 
 export type AnimatedPropsAllowlist = $ReadOnly<{
   style?: ?AnimatedStyleAllowlist,
-  [string]: true,
+  [key: string]: true | AnimatedStyleAllowlist,
 }>;
 
 type TargetView = {
@@ -43,18 +45,30 @@ function createAnimatedProps(
   for (let ii = 0, length = keys.length; ii < length; ii++) {
     const key = keys[ii];
     const value = inputProps[key];
+    let staticValue = value;
 
     if (allowlist == null || hasOwn(allowlist, key)) {
       let node;
       if (key === 'style') {
-        node = AnimatedStyle.from(value, allowlist?.style);
+        // Ignore `style` if it is not an object (or array).
+        if (typeof value === 'object' && value != null) {
+          // Even if we do not find any `AnimatedNode` values in `style`, we
+          // still need to use the flattened `style` object because static
+          // values can shadow `AnimatedNode` values. We need to make sure that
+          // we propagate the flattened `style` object to the `props` object.
+          const flatStyle = flattenStyle(value as $FlowFixMe);
+          node = AnimatedStyle.from(flatStyle, allowlist?.style, value);
+          if (ReactNativeFeatureFlags.alwaysFlattenAnimatedStyles()) {
+            staticValue = flatStyle;
+          }
+        }
       } else if (value instanceof AnimatedNode) {
         node = value;
       } else {
         node = AnimatedObject.from(value);
       }
       if (node == null) {
-        props[key] = value;
+        props[key] = staticValue;
       } else {
         nodeKeys.push(key);
         nodes.push(node);
@@ -134,8 +148,26 @@ export default class AnimatedProps extends AnimatedNode {
       const key = keys[ii];
       const maybeNode = this.#props[key];
 
-      if (key === 'style' && maybeNode instanceof AnimatedStyle) {
-        props[key] = maybeNode.__getValueWithStaticStyle(staticProps.style);
+      if (key === 'style') {
+        const staticStyle = staticProps.style;
+        const flatStaticStyle = flattenStyle(staticStyle);
+        if (maybeNode instanceof AnimatedStyle) {
+          const mutableStyle: {[string]: mixed} =
+            flatStaticStyle == null
+              ? {}
+              : flatStaticStyle === staticStyle
+                ? // Copy the input style, since we'll mutate it below.
+                  {...flatStaticStyle}
+                : // Reuse `flatStaticStyle` if it is a newly created object.
+                  flatStaticStyle;
+
+          maybeNode.__replaceAnimatedNodeWithValues(mutableStyle);
+          props[key] = maybeNode.__getValueForStyle(mutableStyle);
+        } else {
+          if (ReactNativeFeatureFlags.alwaysFlattenAnimatedStyles()) {
+            props[key] = flatStaticStyle;
+          }
+        }
       } else if (maybeNode instanceof AnimatedNode) {
         props[key] = maybeNode.__getValue();
       } else if (maybeNode instanceof AnimatedEvent) {

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -13,7 +13,6 @@ import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import {validateStyles} from '../../../src/private/animated/NativeAnimatedValidation';
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
-import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
 import AnimatedNode from './AnimatedNode';
 import AnimatedObject from './AnimatedObject';
@@ -22,8 +21,11 @@ import AnimatedWithChildren from './AnimatedWithChildren';
 
 export type AnimatedStyleAllowlist = $ReadOnly<{[string]: true}>;
 
+type FlatStyle = {[string]: mixed};
+type FlatStyleForWeb<TStyle: FlatStyle> = [mixed, TStyle];
+
 function createAnimatedStyle(
-  inputStyle: {[string]: mixed},
+  flatStyle: FlatStyle,
   allowlist: ?AnimatedStyleAllowlist,
   keepUnanimatedValues: boolean,
 ): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, {[string]: mixed}] {
@@ -31,10 +33,10 @@ function createAnimatedStyle(
   const nodes: Array<AnimatedNode> = [];
   const style: {[string]: mixed} = {};
 
-  const keys = Object.keys(inputStyle);
+  const keys = Object.keys(flatStyle);
   for (let ii = 0, length = keys.length; ii < length; ii++) {
     const key = keys[ii];
-    const value = inputStyle[key];
+    const value = flatStyle[key];
 
     if (allowlist == null || hasOwn(allowlist, key)) {
       let node;
@@ -62,10 +64,10 @@ function createAnimatedStyle(
         // WARNING: This is a potentially expensive check that we should only
         // do in development. Without this check in development, it might be
         // difficult to identify which styles need to be allowlisted.
-        if (AnimatedObject.from(inputStyle[key]) != null) {
+        if (AnimatedObject.from(flatStyle[key]) != null) {
           console.error(
-            `AnimatedStyle: ${key} is not allowlisted for animation, but it ` +
-              'contains AnimatedNode values; styles allowing animation: ',
+            `AnimatedStyle: ${key} is not allowlisted for animation, but ` +
+              'it contains AnimatedNode values; styles allowing animation: ',
             allowlist,
           );
         }
@@ -80,7 +82,7 @@ function createAnimatedStyle(
 }
 
 export default class AnimatedStyle extends AnimatedWithChildren {
-  #inputStyle: any;
+  #originalStyleForWeb: ?mixed;
   #nodeKeys: $ReadOnlyArray<string>;
   #nodes: $ReadOnlyArray<AnimatedNode>;
   #style: {[string]: mixed};
@@ -90,10 +92,10 @@ export default class AnimatedStyle extends AnimatedWithChildren {
    * Otherwise, returns `null`.
    */
   static from(
-    inputStyle: any,
+    flatStyle: ?FlatStyle,
     allowlist: ?AnimatedStyleAllowlist,
+    originalStyleForWeb: ?mixed,
   ): ?AnimatedStyle {
-    const flatStyle = flattenStyle(inputStyle);
     if (flatStyle == null) {
       return null;
     }
@@ -105,24 +107,31 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     if (nodes.length === 0) {
       return null;
     }
-    return new AnimatedStyle(nodeKeys, nodes, style, inputStyle);
+    return new AnimatedStyle(nodeKeys, nodes, style, originalStyleForWeb);
   }
 
   constructor(
     nodeKeys: $ReadOnlyArray<string>,
     nodes: $ReadOnlyArray<AnimatedNode>,
     style: {[string]: mixed},
-    inputStyle: any,
+    originalStyleForWeb: ?mixed,
     config?: ?AnimatedNodeConfig,
   ) {
     super(config);
     this.#nodeKeys = nodeKeys;
     this.#nodes = nodes;
     this.#style = style;
-    this.#inputStyle = inputStyle;
+
+    if ((Platform.OS as string) === 'web') {
+      // $FlowIgnore[cannot-write] - Intentional shadowing.
+      this.__getValueForStyle = resultStyle => [
+        originalStyleForWeb,
+        resultStyle,
+      ];
+    }
   }
 
-  __getValue(): Object | Array<Object> {
+  __getValue(): FlatStyleForWeb<FlatStyle> | FlatStyle {
     const style: {[string]: mixed} = {};
 
     const keys = Object.keys(this.#style);
@@ -137,27 +146,23 @@ export default class AnimatedStyle extends AnimatedWithChildren {
       }
     }
 
-    /* $FlowFixMe[incompatible-type] Error found due to incomplete typing of
-     * Platform.flow.js */
-    return Platform.OS === 'web' ? [this.#inputStyle, style] : style;
+    return this.__getValueForStyle(style);
   }
 
   /**
-   * Creates a new `style` object that contains the same style properties as
-   * the supplied `staticStyle` object, except with animated nodes for any
-   * style properties that were created by this `AnimatedStyle` instance.
+   * See the constructor, where this is shadowed on web platforms.
    */
-  __getValueWithStaticStyle(staticStyle: Object): Object | Array<Object> {
-    const flatStaticStyle = flattenStyle(staticStyle);
-    const style: {[string]: mixed} =
-      flatStaticStyle == null
-        ? {}
-        : flatStaticStyle === staticStyle
-          ? // Copy the input style, since we'll mutate it below.
-            {...flatStaticStyle}
-          : // Reuse `flatStaticStyle` if it is a newly created object.
-            flatStaticStyle;
+  __getValueForStyle<TStyle: FlatStyle>(
+    style: TStyle,
+  ): FlatStyleForWeb<TStyle> | TStyle {
+    return style;
+  }
 
+  /**
+   * Mutates the supplied `style` object such that animated nodes are replaced
+   * with rasterized values.
+   */
+  __replaceAnimatedNodeWithValues(style: {[string]: mixed}): void {
     const keys = Object.keys(style);
     for (let ii = 0, length = keys.length; ii < length; ii++) {
       const key = keys[ii];
@@ -175,10 +180,6 @@ export default class AnimatedStyle extends AnimatedWithChildren {
         style[key] = maybeNode.__getValue();
       }
     }
-
-    /* $FlowFixMe[incompatible-type] Error found due to incomplete typing of
-     * Platform.flow.js */
-    return Platform.OS === 'web' ? [this.#inputStyle, style] : style;
   }
 
   __getAnimatedValue(): Object {

package/Libraries/Animated/shouldUseTurboAnimatedModule.js

@@ -8,10 +8,15 @@
  * @format
  */
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import Platform from '../Utilities/Platform';
 
 function shouldUseTurboAnimatedModule(): boolean {
-  return Platform.OS === 'ios' && global.RN$Bridgeless === true;
+  if (ReactNativeFeatureFlags.cxxNativeAnimatedEnabled()) {
+    return false;
+  } else {
+    return Platform.OS === 'ios' && global.RN$Bridgeless === true;
+  }
 }
 
 export default shouldUseTurboAnimatedModule;

package/Libraries/AppState/AppState.js

@@ -22,7 +22,12 @@ import NativeAppState from './NativeAppState';
  *   - @platform android - on another Activity (even if it was launched by your app)
  * @platform ios - inactive - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
  */
-export type AppStateStatus = 'inactive' | 'background' | 'active';
+export type AppStateStatus =
+  | 'inactive'
+  | 'background'
+  | 'active'
+  | 'extension'
+  | 'unknown';
 
 /**
  * change - This even is received when the app state has changed.

package/Libraries/BatchedBridge/BatchedBridge.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/BatchedBridge/NativeModules.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/Blob/BlobManager.js

@@ -86,8 +86,12 @@ class BlobManager {
     });
     const size = items.reduce((acc, curr) => {
       if (curr.type === 'string') {
+        /* $FlowFixMe[incompatible-call] Natural Inference rollout. See
+         * https://fburl.com/workplace/6291gfvu */
         return acc + global.unescape(encodeURI(curr.data)).length;
       } else {
+        /* $FlowFixMe[prop-missing] Natural Inference rollout. See
+         * https://fburl.com/workplace/6291gfvu */
         return acc + curr.data.size;
       }
     }, 0);

package/Libraries/Blob/URL.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
+ * @format
  */
 
 import type Blob from './Blob';

package/Libraries/Blob/URLSearchParams.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
+ * @format
  */
 
 // Small subset from whatwg-url: https://github.com/jsdom/whatwg-url/tree/master/src
@@ -13,6 +13,10 @@
 export class URLSearchParams {
   _searchParams: Map<string, string[]> = new Map();
 
+  get size(): number {
+    return this._searchParams.size;
+  }
+
   constructor(params?: Record<string, string> | string | [string, string][]) {
     if (params === null) {
       return;

package/Libraries/Blob/URLSearchParams.js.flow

@@ -4,12 +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
+ * @format
  */
 
 declare export class URLSearchParams {
   _searchParams: Array<[string, string]>;
+  +size: number;
   constructor(
     params?: Record<string, string> | string | Array<[string, string]>,
   ): void;

package/Libraries/BugReporting/BugReporting.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-local
+ * @format
  */
 
 import RCTDeviceEventEmitter from '../EventEmitter/RCTDeviceEventEmitter';

package/Libraries/BugReporting/dumpReactTree.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/BugReporting/getReactData.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
+ * @format
  */
 
 'use strict';

package/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.android.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-local
+ * @format
  */
 
 import UIManager from '../../ReactNative/UIManager';

package/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.ios.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-local
+ * @format
  */
 
 import NativeAccessibilityManager from './NativeAccessibilityManager';

package/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.js.flow

@@ -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-local
+ * @format
  */
 
 /**

package/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.win32.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-local
+ * @format
  */
 
 import UIManager from '../../ReactNative/UIManager';

package/Libraries/Components/ActivityIndicator/ActivityIndicator.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
+ * @format
  */
 
 'use strict';
@@ -60,18 +60,22 @@ export type ActivityIndicatorProps = $ReadOnly<{
   size?: ?IndicatorSize,
 }>;
 
-const ActivityIndicator = (
-  {
-    animating = true,
-    color = Platform.OS === 'ios' ? GRAY : null,
-    hidesWhenStopped = true,
-    onLayout,
-    size = 'small',
-    style,
-    ...restProps
-  }: ActivityIndicatorProps,
-  forwardedRef?: any,
-) => {
+const ActivityIndicator: component(
+  ref?: React.RefSetter<HostComponent<empty>>,
+  ...props: ActivityIndicatorProps
+) = ({
+  ref: forwardedRef,
+  animating = true,
+  color = Platform.OS === 'ios' ? GRAY : null,
+  hidesWhenStopped = true,
+  onLayout,
+  size = 'small',
+  style,
+  ...restProps
+}: {
+  ref?: any,
+  ...ActivityIndicatorProps,
+}) => {
   let sizeStyle;
   let sizeProp;
 
@@ -110,6 +114,7 @@ const ActivityIndicator = (
       style={StyleSheet.compose(styles.container, style)}>
       {Platform.OS === 'android' ? (
         // $FlowFixMe[prop-missing] Flow doesn't know when this is the android component
+        // $FlowFixMe[incompatible-type]
         <PlatformActivityIndicator {...nativeProps} {...androidProps} />
       ) : (
         /* $FlowFixMe[incompatible-type] (>=0.106.0 site=react_native_android_fb) This comment
@@ -153,11 +158,7 @@ const ActivityIndicator = (
 ```
 */
 
-const ActivityIndicatorWithRef: component(
-  ref?: React.RefSetter<HostComponent<empty>>,
-  ...props: ActivityIndicatorProps
-) = React.forwardRef(ActivityIndicator);
-ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
+ActivityIndicator.displayName = 'ActivityIndicator';
 
 const styles = StyleSheet.create({
   container: {
@@ -174,4 +175,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ActivityIndicatorWithRef;
+export default ActivityIndicator;

package/Libraries/Components/ActivityIndicator/ActivityIndicatorViewNativeComponent.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-local
+ * @format
  */
 
 export * from '../../../src/private/specs_DEPRECATED/components/ActivityIndicatorViewNativeComponent';

package/Libraries/Components/Button.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
+ * @format
  */
 
 'use strict';
@@ -288,7 +288,7 @@ type ButtonRef = React.ElementRef<typeof Touchable>;
 const Button: component(
   ref?: React.RefSetter<ButtonRef>,
   ...props: ButtonProps
-) = React.forwardRef((props: ButtonProps, ref: React.RefSetter<ButtonRef>) => {
+) = ({ref, ...props}: {ref?: React.RefSetter<ButtonRef>, ...ButtonProps}) => {
   const {
     accessibilityLabel,
     accessibilityState,
@@ -392,7 +392,7 @@ const Button: component(
       </View>
     </Touchable>
   );
-});
+};
 
 Button.displayName = 'Button';