Making RCTNetworking js exports consistent (#48166)

Summary: Fixes #39260 Right now, there is a small issue when you try debugging the Networking library methods as it seems like they are empty in Android. This is not an actual functional issue as everything in code works fine, but rather an inconsistency in how the iOS and Android methods are being exported. In iOS it was exported as an object, in Android it was a class. ## Changelog: [INTERNAL] - Making `RCTNetworking` js exports consistent Pull Request resolved: #48166 Test Plan: I've checked that `XMLHttpRequest` is still working as expected, as this is used mostly there. And below there are screenshots of how the module methods are logged after the refactor. Which addresses what was reported in the linked issue. ```js import {Networking} from 'react-native'; import AndroidNetworking from 'react-native/Libraries/Network/RCTNetworking.android.js'; import IOSNetworking from 'react-native/Libraries/Network/RCTNetworking.ios.js'; console.log({Networking, AndroidNetworking, IOSNetworking}); ``` Before | After -- | -- <img width="1196" alt="image" src="https://github.com/user-attachments/assets/b7ab1dcd-9dd1-4ed9-ade5-d90251a77d5e"> | <img width="1196" alt="image" src="https://github.com/user-attachments/assets/5ae17c6a-b068-462a-b228-576dcf08ef12"> Reviewed By: fabriziocucci Differential Revision: D67022711 Pulled By: javache fbshipit-source-id: 81f9988295fb3f559a795077f09ee0f14827dc86
facebook · Dec 10, 2024 · 9a21b99 · 9a21b99
1 parent 6ba8b65
commit 9a21b99
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 117 deletions.
diff --git a/packages/react-native/Libraries/Network/RCTNetworking.android.js b/packages/react-native/Libraries/Network/RCTNetworking.android.js
@@ -8,7 +8,9 @@
  * @flow
  */
 
+import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 import type {RequestBody} from './convertRequestBody';
+import type {RCTNetworkingEventDefinitions} from './RCTNetworkingEventDefinitions.flow';
 import type {NativeResponseType} from './XMLHttpRequest';
 
 // Do not require the native RCTNetworking module directly! Use this wrapper module instead.
@@ -35,19 +37,25 @@ function generateRequestId(): number {
   return _requestId++;
 }
 
+const emitter = new NativeEventEmitter<$FlowFixMe>(
+  // 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,
+);
+
 /**
- * This class is a wrapper around the native RCTNetworking module. It adds a necessary unique
+ * This object is a wrapper around the native RCTNetworking module. It adds a necessary unique
  * requestId to each network request that can be used to abort that request later on.
  */
-// FIXME: use typed events
-class RCTNetworking extends NativeEventEmitter<$FlowFixMe> {
-  constructor() {
-    super(
-      // 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,
-    );
-  }
+const RCTNetworking = {
+  addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
+    eventType: K,
+    listener: (...$ElementType<RCTNetworkingEventDefinitions, K>) => mixed,
+    context?: mixed,
+  ): EventSubscription {
+    // $FlowFixMe[incompatible-call]
+    return emitter.addListener(eventType, listener, context);
+  },
 
   sendRequest(
     method: string,
@@ -81,15 +89,15 @@ class RCTNetworking extends NativeEventEmitter<$FlowFixMe> {
       withCredentials,
     );
     callback(requestId);
-  }
+  },
 
   abortRequest(requestId: number) {
     NativeNetworkingAndroid.abortRequest(requestId);
-  }
+  },
 
-  clearCookies(callback: (result: boolean) => any) {
+  clearCookies(callback: (result: boolean) => void) {
     NativeNetworkingAndroid.clearCookies(callback);
-  }
-}
+  },
+};
 
-export default (new RCTNetworking(): RCTNetworking);
+export default RCTNetworking;
diff --git a/packages/react-native/Libraries/Network/RCTNetworking.ios.js b/packages/react-native/Libraries/Network/RCTNetworking.ios.js
@@ -14,54 +14,9 @@ import RCTDeviceEventEmitter from '../EventEmitter/RCTDeviceEventEmitter';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import convertRequestBody, {type RequestBody} from './convertRequestBody';
 import NativeNetworkingIOS from './NativeNetworkingIOS';
+import {type RCTNetworkingEventDefinitions} from './RCTNetworkingEventDefinitions.flow';
 import {type NativeResponseType} from './XMLHttpRequest';
 
-type RCTNetworkingEventDefinitions = $ReadOnly<{
-  didSendNetworkData: [
-    [
-      number, // requestId
-      number, // progress
-      number, // total
-    ],
-  ],
-  didReceiveNetworkResponse: [
-    [
-      number, // requestId
-      number, // status
-      ?{[string]: string}, // responseHeaders
-      ?string, // responseURL
-    ],
-  ],
-  didReceiveNetworkData: [
-    [
-      number, // requestId
-      string, // response
-    ],
-  ],
-  didReceiveNetworkIncrementalData: [
-    [
-      number, // requestId
-      string, // responseText
-      number, // progress
-      number, // total
-    ],
-  ],
-  didReceiveNetworkDataProgress: [
-    [
-      number, // requestId
-      number, // loaded
-      number, // total
-    ],
-  ],
-  didCompleteNetworkResponse: [
-    [
-      number, // requestId
-      string, // error
-      boolean, // timeOutError
-    ],
-  ],
-}>;
-
 const RCTNetworking = {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,

diff --git a/packages/react-native/Libraries/Network/RCTNetworking.js.flow b/packages/react-native/Libraries/Network/RCTNetworking.js.flow
@@ -13,52 +13,7 @@
 import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 import type {RequestBody} from './convertRequestBody';
 import type {NativeResponseType} from './XMLHttpRequest';
-
-type RCTNetworkingEventDefinitions = $ReadOnly<{
-  didSendNetworkData: [
-    [
-      number, // requestId
-      number, // progress
-      number, // total
-    ],
-  ],
-  didReceiveNetworkResponse: [
-    [
-      number, // requestId
-      number, // status
-      ?{[string]: string}, // responseHeaders
-      ?string, // responseURL
-    ],
-  ],
-  didReceiveNetworkData: [
-    [
-      number, // requestId
-      string, // response
-    ],
-  ],
-  didReceiveNetworkIncrementalData: [
-    [
-      number, // requestId
-      string, // responseText
-      number, // progress
-      number, // total
-    ],
-  ],
-  didReceiveNetworkDataProgress: [
-    [
-      number, // requestId
-      number, // loaded
-      number, // total
-    ],
-  ],
-  didCompleteNetworkResponse: [
-    [
-      number, // requestId
-      string, // error
-      boolean, // timeOutError
-    ],
-  ],
-}>;
+import type {RCTNetworkingEventDefinitions} from './RCTNetworkingEventDefinitions.flow';
 
 declare const RCTNetworking: interface {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(

diff --git a/packages/react-native/Libraries/Network/RCTNetworkingEventDefinitions.flow.js b/packages/react-native/Libraries/Network/RCTNetworkingEventDefinitions.flow.js
@@ -0,0 +1,57 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+export type RCTNetworkingEventDefinitions = $ReadOnly<{
+  didSendNetworkData: [
+    [
+      number, // requestId
+      number, // progress
+      number, // total
+    ],
+  ],
+  didReceiveNetworkResponse: [
+    [
+      number, // requestId
+      number, // status
+      ?{[string]: string}, // responseHeaders
+      ?string, // responseURL
+    ],
+  ],
+  didReceiveNetworkData: [
+    [
+      number, // requestId
+      string, // response
+    ],
+  ],
+  didReceiveNetworkIncrementalData: [
+    [
+      number, // requestId
+      string, // responseText
+      number, // progress
+      number, // total
+    ],
+  ],
+  didReceiveNetworkDataProgress: [
+    [
+      number, // requestId
+      number, // loaded
+      number, // total
+    ],
+  ],
+  didCompleteNetworkResponse: [
+    [
+      number, // requestId
+      string, // error
+      boolean, // timeOutError
+    ],
+  ],
+}>;
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -6720,15 +6720,7 @@ declare export default typeof NativeNetworkingIOS;
 `;
 
 exports[`public API should not change unintentionally Libraries/Network/RCTNetworking.js.flow 1`] = `
-"type RCTNetworkingEventDefinitions = $ReadOnly<{
-  didSendNetworkData: [[number, number, number]],
-  didReceiveNetworkResponse: [[number, number, ?{ [string]: string }, ?string]],
-  didReceiveNetworkData: [[number, string]],
-  didReceiveNetworkIncrementalData: [[number, string, number, number]],
-  didReceiveNetworkDataProgress: [[number, number, number]],
-  didCompleteNetworkResponse: [[number, string, boolean]],
-}>;
-declare const RCTNetworking: interface {
+"declare const RCTNetworking: interface {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,
     listener: (...$ElementType<RCTNetworkingEventDefinitions, K>) => mixed,
@@ -6753,6 +6745,18 @@ declare export default typeof RCTNetworking;
 "
 `;
 
+exports[`public API should not change unintentionally Libraries/Network/RCTNetworkingEventDefinitions.flow.js 1`] = `
+"export type RCTNetworkingEventDefinitions = $ReadOnly<{
+  didSendNetworkData: [[number, number, number]],
+  didReceiveNetworkResponse: [[number, number, ?{ [string]: string }, ?string]],
+  didReceiveNetworkData: [[number, string]],
+  didReceiveNetworkIncrementalData: [[number, string, number, number]],
+  didReceiveNetworkDataProgress: [[number, number, number]],
+  didCompleteNetworkResponse: [[number, string, boolean]],
+}>;
+"
+`;
+
 exports[`public API should not change unintentionally Libraries/Network/XHRInterceptor.js 1`] = `
 "type XHRInterceptorOpenCallback = (
   method: string,