Make Lists, Networking, and UIManager modules Flow strict-local (#57726)

Summary:

Upgrade the FlatList/SectionList list components, the networking modules (`XMLHttpRequest`, `FormData`, `RCTNetworking`, `convertRequestBody`), and the UIManager modules from `flow` to `flow strict-local`. Their existing public type signatures are preserved exactly, so consumers are unaffected; internal `any`/`Object` usages were replaced with accurate types. One consumer was updated to match.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D113763786

Author: rubennorte

packages/react-native/Libraries/Lists/FlatList.js

@@ -4,7 +4,7 @@
  * 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
  */
 
@@ -78,10 +78,10 @@ type OptionalFlatListProps<ItemT> = {
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
    * `data` prop, stick it here and treat it immutably.
    */
-  extraData?: any,
+  extraData?: unknown,
   /**
    * `getItemLayout` is an optional optimizations that let us skip measurement of dynamic content if
-   * you know the height of items a priori. `getItemLayout` is the most efficient, and is easy to
+   * you know the height of items a priori.
    * use if you have fixed height items, for example:
    *
    *     getItemLayout={(data, index) => (
@@ -305,6 +305,7 @@ export type FlatListProps<ItemT> = Readonly<{
  *
  * Also inherits [ScrollView Props](docs/scrollview.html#props), unless it is nested in another FlatList of same orientation.
  */
+// flowlint-next-line unclear-type:off
 class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
   /**
    * Scrolls to the end of the content. May be janky without `getItemLayout` prop.
@@ -404,6 +405,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
     }
   }
 
+  // flowlint-next-line unclear-type:off
   getScrollableNode(): any {
     if (this._listRef) {
       return this._listRef.getScrollableNode();
@@ -499,7 +501,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
       'FlatList does not support custom data formats.',
     );
     if (numColumns > 1) {
-      invariant(!horizontal, 'numColumns does not support horizontal.');
+      invariant(horizontal !== true, 'numColumns does not support horizontal.');
     } else {
       invariant(
         !columnWrapperStyle,
@@ -611,11 +613,13 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
   }
 
   _renderer = (
-    ListItemComponent: ?(React.ComponentType<any> | React.MixedElement),
+    ListItemComponent: ?(
+      React.ComponentType<ListRenderItemInfo<ItemT>> | React.MixedElement
+    ),
     renderItem: ?ListRenderItem<ItemT>,
     columnWrapperStyle: ?ViewStyleProp,
     numColumns: ?number,
-    extraData: ?any,
+    extraData: ?unknown,
     // $FlowFixMe[missing-local-annot]
   ) => {
     const cols = numColumnsOrDefault(numColumns);

packages/react-native/Libraries/Lists/SectionList.js

@@ -4,7 +4,7 @@
  * 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
  */
 
@@ -26,6 +26,7 @@ import * as React from 'react';
 const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
 
 type DefaultSectionT = {
+  // flowlint-next-line unclear-type:off
   [key: string]: any,
 };
 
@@ -74,7 +75,7 @@ type OptionalSectionListProps<ItemT, SectionT = DefaultSectionT> = {
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
    * `data` prop, stick it here and treat it immutably.
    */
-  extraData?: any,
+  extraData?: unknown,
   /**
    * How many items to render in the initial batch. This should be enough to fill the screen but not
    * much more. Note these items will never be unmounted as part of the windowed rendering in order
@@ -172,6 +173,7 @@ export type SectionListProps<ItemT, SectionT = DefaultSectionT> = {
  * @see https://reactnative.dev/docs/sectionlist
  */
 export default class SectionList<
+  // flowlint-next-line unclear-type:off
   ItemT = any,
   SectionT = DefaultSectionT,
 > extends React.PureComponent<SectionListProps<ItemT, SectionT>> {
@@ -226,13 +228,15 @@ export default class SectionList<
   /**
    * Provides a handle to the underlying scroll node.
    */
+  // flowlint-next-line unclear-type:off
   getScrollableNode(): any {
     const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
     if (listRef) {
       return listRef.getScrollableNode();
     }
   }
 
+  // flowlint-next-line unclear-type:off
   setNativeProps(props: Object) {
     const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
     if (listRef) {

packages/react-native/Libraries/Lists/SectionListModern.js

@@ -4,7 +4,7 @@
  * 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
  */
 
@@ -26,6 +26,7 @@ import {useImperativeHandle, useRef} from 'react';
 const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
 
 type DefaultSectionT = {
+  // flowlint-next-line unclear-type:off
   [key: string]: any,
 };
 
@@ -60,6 +61,7 @@ type OptionalProps<ItemT, SectionT = DefaultSectionT> = {
     separators: {
       highlight: () => void,
       unhighlight: () => void,
+      // flowlint-next-line unclear-type:off
       updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
       ...
     },
@@ -70,6 +72,7 @@ type OptionalProps<ItemT, SectionT = DefaultSectionT> = {
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
    * `data` prop, stick it here and treat it immutably.
    */
+  // flowlint-next-line unclear-type:off
   extraData?: any,
   /**
    * How many items to render in the initial batch. This should be enough to fill the screen but not
@@ -110,6 +113,9 @@ export type Props<ItemT, SectionT = DefaultSectionT> = Readonly<{
   ...OptionalProps<ItemT, SectionT>,
 }>;
 
+// flowlint-next-line unclear-type:off
+type SectionListComponentProps = Props<any, DefaultSectionT>;
+
 /**
  * A performant interface for rendering sectioned lists, supporting the most handy features:
  *
@@ -166,14 +172,16 @@ export type Props<ItemT, SectionT = DefaultSectionT> = Readonly<{
  *
  */
 const SectionList: component(
+  // flowlint-next-line unclear-type:off
   ref?: React.RefSetter<any>,
-  ...Props<any, DefaultSectionT>
+  ...SectionListComponentProps
 ) = ({
   ref,
   ...props
 }: {
+  // flowlint-next-line unclear-type:off
   ref?: React.RefSetter<any>,
-  ...Props<any, DefaultSectionT>,
+  ...SectionListComponentProps,
 }) => {
   const propsWithDefaults = {
     stickySectionHeadersEnabled: Platform.OS === 'ios',
@@ -224,11 +232,12 @@ const SectionList: component(
         wrapperRef.current?.getListRef()?.getScrollResponder();
       },
 
+      // flowlint-next-line unclear-type:off
       getScrollableNode(): any {
         wrapperRef.current?.getListRef()?.getScrollableNode();
       },
 
-      setNativeProps(nativeProps: Object) {
+      setNativeProps(nativeProps: {[string]: unknown}) {
         wrapperRef.current?.getListRef()?.setNativeProps(nativeProps);
       },
     }),

packages/react-native/Libraries/Network/FormData.js

@@ -14,7 +14,7 @@ type FormDataValue = string | {name?: string, type?: string, uri: string};
 type FormDataNameValuePair = [string, FormDataValue];
 
 type Headers = {[name: string]: string, ...};
-type FormDataPart =
+export type FormDataPart =
   | {
       string: string,
       headers: Headers,

packages/react-native/Libraries/Network/RCTNetworking.android.js

@@ -4,7 +4,7 @@
  * 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
  */
 
@@ -21,10 +21,11 @@ import convertRequestBody from './convertRequestBody';
 import NativeNetworkingAndroid from './NativeNetworkingAndroid';
 
 type Header = [string, string];
+type HeadersMap = {[string]: string};
 
 // Convert FormData headers to arrays, which are easier to consume in
 // native on Android.
-function convertHeadersMapToArray(headers: Object): Array<Header> {
+function convertHeadersMapToArray(headers: HeadersMap): Array<Header> {
   const headerArray: Array<Header> = [];
   for (const name in headers) {
     headerArray.push([name, headers[name]]);
@@ -37,7 +38,7 @@ function generateRequestId(): number {
   return _requestId++;
 }
 
-const emitter = new NativeEventEmitter<$FlowFixMe>(
+const emitter = new NativeEventEmitter<RCTNetworkingEventDefinitions>(
   // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
   // If you want to use the native module on other platforms, please remove this condition and test its behavior
   Platform.OS !== 'ios' ? null : NativeNetworkingAndroid,
@@ -53,29 +54,33 @@ const RCTNetworking = {
     listener: (...RCTNetworkingEventDefinitions[K]) => unknown,
     context?: unknown,
   ): EventSubscription {
-    // $FlowFixMe[incompatible-type]
     return emitter.addListener(eventType, listener, context);
   },
 
   sendRequest(
     method: string,
     trackingName: string | void,
     url: string,
-    headers: Object,
-    data: RequestBody,
+    headers: HeadersMap,
+    data: ?RequestBody,
     responseType: NativeResponseType,
     incrementalUpdates: boolean,
     timeout: number,
     callback: (requestId: number) => unknown,
     withCredentials: boolean,
   ) {
     const body = convertRequestBody(data);
-    if (body && body.formData) {
-      body.formData = body.formData.map(part => ({
-        ...part,
-        headers: convertHeadersMapToArray(part.headers),
-      }));
-    }
+    const formData = body?.formData;
+    const nativeRequestBody =
+      formData != null
+        ? {
+            ...body,
+            formData: formData.map(part => ({
+              ...part,
+              headers: convertHeadersMapToArray(part.headers),
+            })),
+          }
+        : body;
     const requestId = generateRequestId();
     const devToolsRequestId =
       global.__NETWORK_REPORTER__?.createDevToolsRequestId();
@@ -84,7 +89,7 @@ const RCTNetworking = {
       url,
       requestId,
       convertHeadersMapToArray(headers),
-      {...body, trackingName, devToolsRequestId},
+      {...nativeRequestBody, trackingName, devToolsRequestId},
       responseType,
       incrementalUpdates,
       timeout,

packages/react-native/Libraries/Network/RCTNetworking.ios.js

@@ -32,7 +32,7 @@ const RCTNetworking = {
     trackingName: string | void,
     url: string,
     headers: {...},
-    data: RequestBody,
+    data: ?RequestBody,
     responseType: NativeResponseType,
     incrementalUpdates: boolean,
     timeout: number,

packages/react-native/Libraries/Network/RCTNetworking.js.flow

@@ -27,8 +27,8 @@ declare const RCTNetworking: interface {
     method: string,
     trackingName: string | void,
     url: string,
-    headers: {...},
-    data: RequestBody,
+    headers: {[string]: string},
+    data: ?RequestBody,
     responseType: NativeResponseType,
     incrementalUpdates: boolean,
     timeout: number,