react-native-windows 0.80.1 → 0.81.0-preview.4

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -9,10 +9,15 @@
  */
 
 import type {____ViewStyle_Internal} from '../../StyleSheet/StyleSheetTypes';
-import type {AnimatedComponentType} from '../createAnimatedComponent';
+import type {
+  AnimatedComponentType,
+  AnimatedProps,
+} from '../createAnimatedComponent';
 
 import RefreshControl from '../../Components/RefreshControl/RefreshControl';
-import ScrollView from '../../Components/ScrollView/ScrollView';
+import ScrollView, {
+  type ScrollViewProps,
+} from '../../Components/ScrollView/ScrollView';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import splitLayoutProps from '../../StyleSheet/splitLayoutProps';
 import StyleSheet from '../../StyleSheet/StyleSheet';
@@ -21,66 +26,64 @@ import useMergeRefs from '../../Utilities/useMergeRefs';
 import createAnimatedComponent from '../createAnimatedComponent';
 import useAnimatedProps from '../useAnimatedProps';
 import * as React from 'react';
-import {useMemo} from 'react';
+import {cloneElement, useMemo} from 'react';
 
-type AnimatedScrollViewProps = React.ElementConfig<typeof ScrollView>;
 type AnimatedScrollViewInstance = React.ElementRef<typeof ScrollView>;
 
 /**
  * @see https://github.com/facebook/react-native/commit/b8c8562
  */
 const AnimatedScrollView: AnimatedComponentType<
-  AnimatedScrollViewProps,
+  ScrollViewProps,
   AnimatedScrollViewInstance,
-> = React.forwardRef(
-  function AnimatedScrollViewWithOrWithoutInvertedRefreshControl(
-    props,
-    forwardedRef,
+> = function AnimatedScrollViewWithOrWithoutInvertedRefreshControl({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<AnimatedScrollViewInstance>,
+  ...AnimatedProps<ScrollViewProps>,
+}) {
+  // (Android only) When a ScrollView has a RefreshControl and
+  // any `style` property set with an Animated.Value, the CSS
+  // gets incorrectly applied twice. This is because ScrollView
+  // swaps the parent/child relationship of itself and the
+  // RefreshControl component (see ScrollView.js for more details).
+  if (
+    Platform.OS === 'android' &&
+    props.refreshControl != null &&
+    props.style != null
   ) {
-    // (Android only) When a ScrollView has a RefreshControl and
-    // any `style` property set with an Animated.Value, the CSS
-    // gets incorrectly applied twice. This is because ScrollView
-    // swaps the parent/child relationship of itself and the
-    // RefreshControl component (see ScrollView.js for more details).
-    if (
-      Platform.OS === 'android' &&
-      props.refreshControl != null &&
-      props.style != null
-    ) {
-      return (
-        // $FlowFixMe - It should return an Animated ScrollView but it returns a ScrollView with Animated props applied.
-        <AnimatedScrollViewWithInvertedRefreshControl
-          scrollEventThrottle={0.0001}
-          {...props}
-          ref={forwardedRef}
-          // $FlowFixMe[incompatible-type]
-          refreshControl={props.refreshControl}
-        />
-      );
-    } else {
-      return (
-        <AnimatedScrollViewWithoutInvertedRefreshControl
-          scrollEventThrottle={0.0001}
-          {...props}
-          ref={forwardedRef}
-        />
-      );
-    }
-  },
-);
+    return (
+      // $FlowFixMe - It should return an Animated ScrollView but it returns a ScrollView with Animated props applied.
+      <AnimatedScrollViewWithInvertedRefreshControl
+        scrollEventThrottle={0.0001}
+        {...props}
+        ref={forwardedRef}
+        // $FlowFixMe[incompatible-type]
+        refreshControl={props.refreshControl}
+      />
+    );
+  } else {
+    return (
+      <AnimatedScrollViewWithoutInvertedRefreshControl
+        scrollEventThrottle={0.0001}
+        {...props}
+        ref={forwardedRef}
+      />
+    );
+  }
+};
 
-const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
-  // $FlowFixMe[incompatible-call]
-  function AnimatedScrollViewWithInvertedRefreshControl(
-    props: {
-      ...React.ElementConfig<typeof ScrollView>,
-      // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
-      refreshControl: ExactReactElement_DEPRECATED<any>,
-    },
-    forwardedRef:
-      | {current: AnimatedScrollViewInstance | null, ...}
-      | ((AnimatedScrollViewInstance | null) => mixed),
-  ) {
+const AnimatedScrollViewWithInvertedRefreshControl =
+  function AnimatedScrollViewWithInvertedRefreshControl({
+    ref: forwardedRef,
+    ...props
+  }: {
+    ref?: React.RefSetter<AnimatedScrollViewInstance>,
+    ...React.ElementConfig<typeof ScrollView>,
+    // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
+    refreshControl: ExactReactElement_DEPRECATED<any>,
+  }) {
     // Split `props` into the animate-able props for the parent (RefreshControl)
     // and child (ScrollView).
     const {intermediatePropsForRefreshControl, intermediatePropsForScrollView} =
@@ -102,14 +105,14 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
     // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be
     // safely clobbered.
     const refreshControl: ExactReactElement_DEPRECATED<typeof RefreshControl> =
-      React.cloneElement(props.refreshControl, {
+      cloneElement(props.refreshControl, {
         ...refreshControlAnimatedProps,
         ref: refreshControlRef,
       });
 
     // Handle animated props on `NativeDirectionalScrollView`.
     const [scrollViewAnimatedProps, scrollViewRef] = useAnimatedProps<
-      AnimatedScrollViewProps,
+      ScrollViewProps,
       AnimatedScrollViewInstance,
     >(intermediatePropsForScrollView);
     const ref = useMergeRefs<AnimatedScrollViewInstance>(
@@ -134,8 +137,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
         )}
       />
     );
-  },
-);
+  };
 
 const AnimatedScrollViewWithoutInvertedRefreshControl =
   createAnimatedComponent(ScrollView);

package/Libraries/Animated/components/AnimatedText.js

@@ -10,13 +10,10 @@
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-import Text from '../../Text/Text';
+import Text, {type TextProps} from '../../Text/Text';
 import createAnimatedComponent from '../createAnimatedComponent';
 import * as React from 'react';
 
 export default (createAnimatedComponent(
   (Text: $FlowFixMe),
-): AnimatedComponentType<
-  React.ElementConfig<typeof Text>,
-  React.ElementRef<typeof Text>,
->);
+): AnimatedComponentType<TextProps, React.ElementRef<typeof Text>>);

package/Libraries/Animated/components/AnimatedView.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {ViewProps} from '../../Components/View/ViewPropTypes';
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
 import View from '../../Components/View/View';
@@ -15,6 +16,6 @@ import createAnimatedComponent from '../createAnimatedComponent';
 import * as React from 'react';
 
 export default (createAnimatedComponent(View): AnimatedComponentType<
-  React.ElementConfig<typeof View>,
+  ViewProps,
   React.ElementRef<typeof View>,
 >);

package/Libraries/Animated/createAnimatedComponent.js

@@ -21,7 +21,7 @@ import type AnimatedValue from './nodes/AnimatedValue';
 
 import createAnimatedPropsHook from '../../src/private/animated/createAnimatedPropsHook';
 import composeStyles from '../../src/private/styles/composeStyles';
-import View from '../Components/View/View';
+import {type ViewProps} from '../Components/View/ViewPropTypes';
 import useMergeRefs from '../Utilities/useMergeRefs';
 import * as React from 'react';
 import {useMemo} from 'react';
@@ -60,9 +60,7 @@ type NonAnimatedProps =
   | 'disabled'
   | 'accessibilityLabel';
 type PassThroughProps = $ReadOnly<{
-  passthroughAnimatedPropExplicitValues?: React.ElementConfig<
-    typeof View,
-  > | null,
+  passthroughAnimatedPropExplicitValues?: ViewProps | null,
 }>;
 
 export type AnimatedProps<Props: {...}> = {
@@ -105,41 +103,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

@@ -14,6 +14,7 @@ import type {AnimatedStyleAllowlist} from './AnimatedStyle';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
+import flattenStyle from '../../StyleSheet/flattenStyle';
 import {AnimatedEvent} from '../AnimatedEvent';
 import AnimatedNode from './AnimatedNode';
 import AnimatedObject from './AnimatedObject';
@@ -43,18 +44,28 @@ 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);
+          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 +145,24 @@ 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 {
+          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/NativeAppState.js

@@ -10,4 +10,5 @@
 
 export * from '../../src/private/specs_DEPRECATED/modules/NativeAppState';
 import NativeAppState from '../../src/private/specs_DEPRECATED/modules/NativeAppState';
+
 export default NativeAppState;

package/Libraries/AppTheme/AppTheme.js

@@ -56,7 +56,7 @@ if (NativeAppTheme) {
   );
 }
 
-module.exports = {
+export const AppTheme = {
   // $FlowFixMe[unsafe-getters-setters]
   get isHighContrast(): boolean {
     return _isHighContrast;

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/NativeBlobModule.js

@@ -10,4 +10,5 @@
 
 export * from '../../src/private/specs_DEPRECATED/modules/NativeBlobModule';
 import NativeBlobModule from '../../src/private/specs_DEPRECATED/modules/NativeBlobModule';
+
 export default NativeBlobModule;

package/Libraries/Blob/NativeFileReaderModule.js

@@ -10,4 +10,5 @@
 
 export * from '../../src/private/specs_DEPRECATED/modules/NativeFileReaderModule';
 import NativeFileReaderModule from '../../src/private/specs_DEPRECATED/modules/NativeFileReaderModule';
+
 export default NativeFileReaderModule;

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;