react-native 0.84.0-nightly-20251212-dd390dbbe → 0.84.0-nightly-20251213-07bd24ed0

package/Libraries/Core/ReactNativeVersion.js

@@ -29,7 +29,7 @@ export default class ReactNativeVersion {
   static major: number = 0;
   static minor: number = 84;
   static patch: number = 0;
-  static prerelease: string | null = 'nightly-20251212-dd390dbbe';
+  static prerelease: string | null = 'nightly-20251213-07bd24ed0';
 
   static getVersionString(): string {
     return `${this.major}.${this.minor}.${this.patch}${this.prerelease != null ? `-${this.prerelease}` : ''}`;

package/Libraries/WebSocket/WebSocketInterceptor.js

@@ -33,10 +33,10 @@ let isInterceptorEnabled = false;
 
 /**
  * A network interceptor which monkey-patches RCTWebSocketModule methods
- * to gather all websocket network requests/responses, in order to show
- * their information in the React Native inspector development tool.
+ * to gather all websocket network events.
+ *
+ * @deprecated Since React Native 0.84
  */
-
 const WebSocketInterceptor = {
   /**
    * Invoked when RCTWebSocketModule.close(...) is called.

package/React/Base/RCTVersion.m

@@ -24,7 +24,7 @@ NSDictionary* RCTGetReactNativeVersion(void)
                   RCTVersionMajor: @(0),
                   RCTVersionMinor: @(84),
                   RCTVersionPatch: @(0),
-                  RCTVersionPrerelease: @"nightly-20251212-dd390dbbe",
+                  RCTVersionPrerelease: @"nightly-20251213-07bd24ed0",
                   };
   });
   return __rnVersion;

package/ReactAndroid/gradle.properties

@@ -1,4 +1,4 @@
-VERSION_NAME=0.84.0-nightly-20251212-dd390dbbe
+VERSION_NAME=0.84.0-nightly-20251213-07bd24ed0
 react.internal.publishingGroup=com.facebook.react
 react.internal.hermesPublishingGroup=com.facebook.hermes
 

package/ReactAndroid/src/main/java/com/facebook/react/devsupport/ChangeBundleLocationDialog.kt

@@ -33,9 +33,6 @@ internal object ChangeBundleLocationDialog {
   ) {
     val settings = devSettings.packagerConnectionSettings
     val currentHost = settings.debugServerHost
-    settings.debugServerHost = ""
-    val defaultHost = settings.debugServerHost
-    settings.debugServerHost = currentHost
 
     val layout = LinearLayout(context)
     layout.orientation = LinearLayout.VERTICAL
@@ -60,11 +57,11 @@ internal object ChangeBundleLocationDialog {
     input.setTextColor(-0x1000000)
     input.setText(currentHost)
 
-    val defaultHostSuggestion = Button(context)
-    defaultHostSuggestion.text = defaultHost
-    defaultHostSuggestion.textSize = 12f
-    defaultHostSuggestion.isAllCaps = false
-    defaultHostSuggestion.setOnClickListener { input.setText(defaultHost) }
+    val currentHostSuggestion = Button(context)
+    currentHostSuggestion.text = currentHost
+    currentHostSuggestion.textSize = 12f
+    currentHostSuggestion.isAllCaps = false
+    currentHostSuggestion.setOnClickListener { input.setText(currentHost) }
 
     val networkHost = getDevServerNetworkIpAndPort(context)
     val networkHostSuggestion = Button(context)
@@ -80,8 +77,12 @@ internal object ChangeBundleLocationDialog {
             LinearLayout.LayoutParams.MATCH_PARENT,
             LinearLayout.LayoutParams.WRAP_CONTENT,
         )
-    suggestionRow.addView(defaultHostSuggestion)
-    suggestionRow.addView(networkHostSuggestion)
+    suggestionRow.addView(currentHostSuggestion)
+
+    if (currentHost != networkHost) {
+      // We don't want to display two buttons with the same host suggestion.
+      suggestionRow.addView(networkHostSuggestion)
+    }
 
     val instructions = TextView(context)
     instructions.text =

package/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/ReactNativeVersion.kt

@@ -15,6 +15,6 @@ public object ReactNativeVersion {
     "major" to 0,
     "minor" to 84,
     "patch" to 0,
-    "prerelease" to "nightly-20251212-dd390dbbe"
+    "prerelease" to "nightly-20251213-07bd24ed0"
   )
 }

package/ReactCommon/cxxreact/ReactNativeVersion.h

@@ -22,7 +22,7 @@ constexpr struct {
   int32_t Major = 0;
   int32_t Minor = 84;
   int32_t Patch = 0;
-  std::string_view Prerelease = "nightly-20251212-dd390dbbe";
+  std::string_view Prerelease = "nightly-20251213-07bd24ed0";
 } ReactNativeVersion;
 
 } // namespace facebook::react

package/ReactCommon/react/renderer/imagemanager/platform/android/react/renderer/imagemanager/ImageFetcher.cpp

@@ -24,11 +24,14 @@ ImageRequest ImageFetcher::requestImage(
     SurfaceId surfaceId,
     const ImageRequestParams& imageRequestParams,
     Tag tag) {
-  items_[surfaceId].emplace_back(
-      ImageRequestItem{
-          .imageSource = imageSource,
-          .imageRequestParams = imageRequestParams,
-          .tag = tag});
+  {
+    std::lock_guard<std::mutex> lock(mutex_);
+    items_[surfaceId].emplace_back(
+        ImageRequestItem{
+            .imageSource = imageSource,
+            .imageRequestParams = imageRequestParams,
+            .tag = tag});
+  }
 
   auto telemetry = std::make_shared<ImageTelemetry>(surfaceId);
 
@@ -40,8 +43,13 @@ ImageRequest ImageFetcher::requestImage(
 }
 
 void ImageFetcher::flushImageRequests() {
-  if (items_.empty()) {
-    return;
+  std::unordered_map<SurfaceId, std::vector<ImageRequestItem>> items;
+  {
+    std::lock_guard<std::mutex> lock(mutex_);
+    if (items_.empty()) {
+      return;
+    }
+    items.swap(items_);
   }
 
   auto fabricUIManager_ =
@@ -52,14 +60,12 @@ void ImageFetcher::flushImageRequests() {
               SurfaceId, std::string, JReadableMapBuffer::javaobject)>(
               "experimental_prefetchResources");
 
-  for (auto& [surfaceId, surfaceImageRequests] : items_) {
+  for (auto& [surfaceId, surfaceImageRequests] : items) {
     auto readableMapBuffer = JReadableMapBuffer::createWithContents(
         serializeImageRequests(surfaceImageRequests));
     prefetchResources(
         fabricUIManager_, surfaceId, "RCTImageView", readableMapBuffer.get());
   }
-
-  items_.clear();
 }
 
 } // namespace facebook::react

package/ReactCommon/react/renderer/imagemanager/platform/android/react/renderer/imagemanager/ImageFetcher.h

@@ -11,6 +11,7 @@
 #include <react/renderer/imagemanager/ImageRequestParams.h>
 #include <react/utils/ContextContainer.h>
 #include <memory>
+#include <mutex>
 #include <unordered_map>
 #include <vector>
 
@@ -38,6 +39,7 @@ class ImageFetcher {
       Tag tag);
 
   std::unordered_map<SurfaceId, std::vector<ImageRequestItem>> items_;
+  std::mutex mutex_;
   std::shared_ptr<const ContextContainer> contextContainer_;
 };
 } // namespace facebook::react

package/jest/mockComponent.js

@@ -39,7 +39,7 @@ export default function mockComponent<
 
   const SuperClass: typeof React.Component<{...}> =
     typeof RealComponent === 'function' &&
-    RealComponent.prototype.constructor instanceof React.Component
+    RealComponent.prototype?.constructor instanceof React.Component
       ? RealComponent
       : React.Component;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native",
-  "version": "0.84.0-nightly-20251212-dd390dbbe",
+  "version": "0.84.0-nightly-20251213-07bd24ed0",
   "description": "A framework for building native apps using React",
   "license": "MIT",
   "repository": {
@@ -160,13 +160,13 @@
   },
   "dependencies": {
     "@jest/create-cache-key-function": "^29.7.0",
-    "@react-native/assets-registry": "0.84.0-nightly-20251212-dd390dbbe",
-    "@react-native/codegen": "0.84.0-nightly-20251212-dd390dbbe",
-    "@react-native/community-cli-plugin": "0.84.0-nightly-20251212-dd390dbbe",
-    "@react-native/gradle-plugin": "0.84.0-nightly-20251212-dd390dbbe",
-    "@react-native/js-polyfills": "0.84.0-nightly-20251212-dd390dbbe",
-    "@react-native/normalize-colors": "0.84.0-nightly-20251212-dd390dbbe",
-    "@react-native/virtualized-lists": "0.84.0-nightly-20251212-dd390dbbe",
+    "@react-native/assets-registry": "0.84.0-nightly-20251213-07bd24ed0",
+    "@react-native/codegen": "0.84.0-nightly-20251213-07bd24ed0",
+    "@react-native/community-cli-plugin": "0.84.0-nightly-20251213-07bd24ed0",
+    "@react-native/gradle-plugin": "0.84.0-nightly-20251213-07bd24ed0",
+    "@react-native/js-polyfills": "0.84.0-nightly-20251213-07bd24ed0",
+    "@react-native/normalize-colors": "0.84.0-nightly-20251213-07bd24ed0",
+    "@react-native/virtualized-lists": "0.84.0-nightly-20251213-07bd24ed0",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
@@ -175,7 +175,7 @@
     "base64-js": "^1.5.1",
     "commander": "^12.0.0",
     "flow-enums-runtime": "^0.0.6",
-    "hermes-compiler": "0.14.0-commitly-202512102158-39fca9fda",
+    "hermes-compiler": "0.15.0-commitly-202512121350-fd0e1d3ed",
     "invariant": "^2.2.4",
     "jest-environment-node": "^29.7.0",
     "memoize-one": "^5.0.0",

package/sdks/hermes-engine/version.properties

@@ -1,2 +1,2 @@
-HERMES_VERSION_NAME=0.14.0-commitly-202512102158-39fca9fda
+HERMES_VERSION_NAME=0.15.0-commitly-202512121350-fd0e1d3ed
 HERMES_V1_VERSION_NAME=250829098.0.4

package/src/private/devsupport/devmenu/elementinspector/Inspector.js

@@ -39,10 +39,6 @@ const InspectorPanel = require('./InspectorPanel').default;
 const {useState} = React;
 
 type PanelPosition = 'top' | 'bottom';
-type SelectedTab =
-  | 'elements-inspector'
-  | 'network-profiling'
-  | 'performance-profiling';
 
 export type InspectedElementFrame = TouchedViewDataAtPoint['frame'];
 export type InspectedElement = $ReadOnly<{
@@ -62,8 +58,7 @@ function Inspector({
   onRequestRerenderApp,
   reactDevToolsAgent,
 }: Props): React.Node {
-  const [selectedTab, setSelectedTab] =
-    useState<?SelectedTab>('elements-inspector');
+  const [inspecting, setInspecting] = useState<boolean>(true);
 
   const [panelPosition, setPanelPosition] = useState<PanelPosition>('bottom');
   const [inspectedElement, setInspectedElement] =
@@ -137,18 +132,8 @@ function Inspector({
     );
   };
 
-  const setInspecting = (enabled: boolean) => {
-    setSelectedTab(enabled ? 'elements-inspector' : null);
-    setInspectedElement(null);
-  };
-
-  const setPerfing = (enabled: boolean) => {
-    setSelectedTab(enabled ? 'performance-profiling' : null);
-    setInspectedElement(null);
-  };
-
-  const setNetworking = (enabled: boolean) => {
-    setSelectedTab(enabled ? 'network-profiling' : null);
+  const handleSetInspecting = (enabled: boolean) => {
+    setInspecting(enabled);
     setInspectedElement(null);
   };
 
@@ -164,7 +149,7 @@ function Inspector({
 
   return (
     <View style={styles.container} pointerEvents="box-none">
-      {selectedTab === 'elements-inspector' && (
+      {inspecting && (
         <InspectorOverlay
           inspected={inspectedElement}
           onTouchPoint={onTouchPoint}
@@ -174,18 +159,14 @@ function Inspector({
       <SafeAreaView style={[styles.panelContainer, panelContainerStyle]}>
         <InspectorPanel
           devtoolsIsOpen={!!reactDevToolsAgent}
-          inspecting={selectedTab === 'elements-inspector'}
-          perfing={selectedTab === 'performance-profiling'}
-          setPerfing={setPerfing}
-          setInspecting={setInspecting}
+          inspecting={inspecting}
+          setInspecting={handleSetInspecting}
           inspected={inspectedElement}
           hierarchy={elementsHierarchy}
           selection={selectionIndex}
           setSelection={setSelection}
           touchTargeting={PressabilityDebug.isEnabled()}
           setTouchTargeting={setTouchTargeting}
-          networking={selectedTab === 'network-profiling'}
-          setNetworking={setNetworking}
         />
       </SafeAreaView>
     </View>

package/src/private/devsupport/devmenu/elementinspector/InspectorPanel.js

@@ -23,20 +23,14 @@ const View = require('../../../../../Libraries/Components/View/View').default;
 const StyleSheet =
   require('../../../../../Libraries/StyleSheet/StyleSheet').default;
 const Text = require('../../../../../Libraries/Text/Text').default;
-const PerformanceOverlay = require('../perfmonitor/PerformanceOverlay').default;
 const ElementProperties = require('./ElementProperties').default;
-const NetworkOverlay = require('./NetworkOverlay').default;
 
 type Props = $ReadOnly<{
   devtoolsIsOpen: boolean,
   inspecting: boolean,
   setInspecting: (val: boolean) => void,
-  perfing: boolean,
-  setPerfing: (val: boolean) => void,
   touchTargeting: boolean,
   setTouchTargeting: (val: boolean) => void,
-  networking: boolean,
-  setNetworking: (val: boolean) => void,
   hierarchy?: ?ElementsHierarchy,
   selection?: ?number,
   setSelection: number => mixed,
@@ -67,10 +61,6 @@ class InspectorPanel extends React.Component<Props> {
           />
         </ScrollView>
       );
-    } else if (this.props.perfing) {
-      contents = <PerformanceOverlay />;
-    } else if (this.props.networking) {
-      contents = <NetworkOverlay />;
     } else {
       contents = <View style={styles.waiting}>{this.renderWaiting()}</View>;
     }
@@ -83,22 +73,6 @@ class InspectorPanel extends React.Component<Props> {
             pressed={this.props.inspecting}
             onClick={this.props.setInspecting}
           />
-          {global.RN$Bridgeless === true ? null : (
-            // These Inspector Panel sub-features are removed under the New Arch.
-            // See https://github.com/react-native-community/discussions-and-proposals/pull/777
-            <>
-              <InspectorPanelButton
-                title={'Perf'}
-                pressed={this.props.perfing}
-                onClick={this.props.setPerfing}
-              />
-              <InspectorPanelButton
-                title={'Network'}
-                pressed={this.props.networking}
-                onClick={this.props.setNetworking}
-              />
-            </>
-          )}
           <InspectorPanelButton
             title={'Touchables'}
             pressed={this.props.touchTargeting}

package/src/private/devsupport/devmenu/elementinspector/XHRInterceptor.js

@@ -64,10 +64,11 @@ let isInterceptorEnabled = false;
 
 /**
  * A network interceptor which monkey-patches XMLHttpRequest methods
- * to gather all network requests/responses, in order to show their
- * information in the React Native inspector development tool.
+ * to gather all network requests/responses.
  * This supports interception with XMLHttpRequest API, including Fetch API
  * and any other third party libraries that depend on XMLHttpRequest.
+ *
+ * @deprecated Since React Native 0.84
  */
 const XHRInterceptor = {
   /**

package/src/private/devsupport/devmenu/elementinspector/NetworkOverlay.js

@@ -1,628 +0,0 @@
-/**
- * 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 type XMLHttpRequest from '../../../../../Libraries/Network/XMLHttpRequest';
-import type {ListRenderItemInfo} from '@react-native/virtualized-lists';
-
-import ScrollView from '../../../../../Libraries/Components/ScrollView/ScrollView';
-import * as React from 'react';
-
-const TouchableHighlight =
-  require('../../../../../Libraries/Components/Touchable/TouchableHighlight').default;
-const View = require('../../../../../Libraries/Components/View/View').default;
-const FlatList = require('../../../../../Libraries/Lists/FlatList').default;
-const StyleSheet =
-  require('../../../../../Libraries/StyleSheet/StyleSheet').default;
-const Text = require('../../../../../Libraries/Text/Text').default;
-const WebSocketInterceptor =
-  require('../../../../../Libraries/WebSocket/WebSocketInterceptor').default;
-const XHRInterceptor = require('./XHRInterceptor').default;
-
-const LISTVIEW_CELL_HEIGHT = 15;
-
-// Global id for the intercepted XMLHttpRequest objects.
-let nextXHRId = 0;
-
-type NetworkRequestInfo = {
-  id: number,
-  type?: string,
-  url?: string,
-  method?: string,
-  status?: number,
-  dataSent?: any,
-  responseContentType?: string,
-  responseSize?: number,
-  requestHeaders?: Object,
-  responseHeaders?: string,
-  response?: Object | string,
-  responseURL?: string,
-  responseType?: string,
-  timeout?: number,
-  closeReason?: string,
-  messages?: string,
-  serverClose?: Object,
-  serverError?: Object,
-  ...
-};
-
-type Props = $ReadOnly<{}>;
-type State = {
-  detailRowId: ?number,
-  requests: Array<NetworkRequestInfo>,
-};
-
-function getStringByValue(value: any): string {
-  if (value === undefined) {
-    return 'undefined';
-  }
-  if (typeof value === 'object') {
-    return JSON.stringify(value);
-  }
-  if (typeof value === 'string' && value.length > 500) {
-    return String(value)
-      .slice(0, 500)
-      .concat('\n***TRUNCATED TO 500 CHARACTERS***');
-  }
-  return value;
-}
-
-function getTypeShortName(type: any): string {
-  if (type === 'XMLHttpRequest') {
-    return 'XHR';
-  } else if (type === 'WebSocket') {
-    return 'WS';
-  }
-
-  return '';
-}
-
-function keyExtractor(request: NetworkRequestInfo): string {
-  return String(request.id);
-}
-
-const XHR_ID_KEY = Symbol('XHR_ID');
-
-function getXHRId(xhr: XMLHttpRequest): number {
-  // $FlowExpectedError[prop-missing]
-  return xhr[XHR_ID_KEY];
-}
-
-function setXHRId(xhr: XMLHttpRequest, id: number) {
-  // $FlowExpectedError[prop-missing]
-  xhr[XHR_ID_KEY] = id;
-}
-
-/**
- * Show all the intercepted network requests over the InspectorPanel.
- */
-class NetworkOverlay extends React.Component<Props, State> {
-  _requestsListView: ?React.ElementRef<Class<FlatList<NetworkRequestInfo>>>;
-  _detailScrollView: ?React.ElementRef<typeof ScrollView>;
-
-  // Metrics are used to decide when if the request list should be sticky, and
-  // scroll to the bottom as new network requests come in, or if the user has
-  // intentionally scrolled away from the bottom - to instead flash the scroll bar
-  // and keep the current position
-  _requestsListViewScrollMetrics: {
-    contentLength: number,
-    offset: number,
-    visibleLength: number,
-  } = {
-    offset: 0,
-    visibleLength: 0,
-    contentLength: 0,
-  };
-
-  // Map of `socketId` -> `index in `this.state.requests`.
-  _socketIdMap: {[number]: number} = {};
-  // Map of `xhr[XHR_ID_KEY]` -> `index in `this.state.requests`.
-  _xhrIdMap: {[key: number]: number, ...} = {};
-
-  state: State = {
-    detailRowId: null,
-    requests: [],
-  };
-
-  _enableXHRInterception(): void {
-    if (XHRInterceptor.isInterceptorEnabled()) {
-      return;
-    }
-    // Show the XHR request item in listView as soon as it was opened.
-    XHRInterceptor.setOpenCallback((method, url, xhr) => {
-      // Generate a global id for each intercepted xhr object, add this id
-      // to the xhr object as a private `_index` property to identify it,
-      // so that we can distinguish different xhr objects in callbacks.
-      setXHRId(xhr, nextXHRId++);
-      const xhrIndex = this.state.requests.length;
-      this._xhrIdMap[getXHRId(xhr)] = xhrIndex;
-
-      const _xhr: NetworkRequestInfo = {
-        id: xhrIndex,
-        type: 'XMLHttpRequest',
-        method: method,
-        url: url,
-      };
-      this.setState(
-        {
-          requests: this.state.requests.concat(_xhr),
-        },
-        this._indicateAdditionalRequests,
-      );
-    });
-
-    XHRInterceptor.setRequestHeaderCallback((header, value, xhr) => {
-      // $FlowFixMe[prop-missing]
-      const xhrIndex = this._getRequestIndexByXHRID(getXHRId(xhr));
-      if (xhrIndex === -1) {
-        return;
-      }
-
-      this.setState(({requests}) => {
-        const networkRequestInfo = requests[xhrIndex];
-        if (!networkRequestInfo.requestHeaders) {
-          networkRequestInfo.requestHeaders = ({}: {[any]: any});
-        }
-        networkRequestInfo.requestHeaders[header] = value;
-        return {requests};
-      });
-    });
-
-    XHRInterceptor.setSendCallback((data, xhr) => {
-      // $FlowFixMe[prop-missing]
-      const xhrIndex = this._getRequestIndexByXHRID(getXHRId(xhr));
-      if (xhrIndex === -1) {
-        return;
-      }
-
-      this.setState(({requests}) => {
-        const networkRequestInfo = requests[xhrIndex];
-        networkRequestInfo.dataSent = data;
-        return {requests};
-      });
-    });
-
-    XHRInterceptor.setHeaderReceivedCallback(
-      (type, size, responseHeaders, xhr) => {
-        // $FlowFixMe[prop-missing]
-        const xhrIndex = this._getRequestIndexByXHRID(getXHRId(xhr));
-        if (xhrIndex === -1) {
-          return;
-        }
-
-        this.setState(({requests}) => {
-          const networkRequestInfo = requests[xhrIndex];
-          networkRequestInfo.responseContentType = type;
-          networkRequestInfo.responseSize = size;
-          networkRequestInfo.responseHeaders = responseHeaders;
-          return {requests};
-        });
-      },
-    );
-
-    XHRInterceptor.setResponseCallback(
-      (status, timeout, response, responseURL, responseType, xhr) => {
-        // $FlowFixMe[prop-missing]
-        const xhrIndex = this._getRequestIndexByXHRID(getXHRId(xhr));
-        if (xhrIndex === -1) {
-          return;
-        }
-
-        this.setState(({requests}) => {
-          const networkRequestInfo = requests[xhrIndex];
-          networkRequestInfo.status = status;
-          networkRequestInfo.timeout = timeout;
-          networkRequestInfo.response = response;
-          networkRequestInfo.responseURL = responseURL;
-          networkRequestInfo.responseType = responseType;
-
-          return {requests};
-        });
-      },
-    );
-
-    // Fire above callbacks.
-    XHRInterceptor.enableInterception();
-  }
-
-  _enableWebSocketInterception(): void {
-    if (WebSocketInterceptor.isInterceptorEnabled()) {
-      return;
-    }
-    // Show the WebSocket request item in listView when 'connect' is called.
-    WebSocketInterceptor.setConnectCallback(
-      (url, protocols, options, socketId) => {
-        const socketIndex = this.state.requests.length;
-        this._socketIdMap[socketId] = socketIndex;
-        const _webSocket: NetworkRequestInfo = {
-          id: socketIndex,
-          type: 'WebSocket',
-          url: url,
-          protocols: protocols,
-        };
-        this.setState(
-          {
-            requests: this.state.requests.concat(_webSocket),
-          },
-          this._indicateAdditionalRequests,
-        );
-      },
-    );
-
-    WebSocketInterceptor.setCloseCallback(
-      (statusCode, closeReason, socketId) => {
-        const socketIndex = this._socketIdMap[socketId];
-        if (socketIndex === undefined) {
-          return;
-        }
-        if (statusCode !== null && closeReason !== null) {
-          this.setState(({requests}) => {
-            const networkRequestInfo = requests[socketIndex];
-            networkRequestInfo.status = statusCode;
-            networkRequestInfo.closeReason = closeReason;
-            return {requests};
-          });
-        }
-      },
-    );
-
-    WebSocketInterceptor.setSendCallback((data, socketId) => {
-      const socketIndex = this._socketIdMap[socketId];
-      if (socketIndex === undefined) {
-        return;
-      }
-
-      this.setState(({requests}) => {
-        const networkRequestInfo = requests[socketIndex];
-
-        if (!networkRequestInfo.messages) {
-          networkRequestInfo.messages = '';
-        }
-        networkRequestInfo.messages += 'Sent: ' + JSON.stringify(data) + '\n';
-
-        return {requests};
-      });
-    });
-
-    WebSocketInterceptor.setOnMessageCallback((message, socketId) => {
-      const socketIndex = this._socketIdMap[socketId];
-      if (socketIndex === undefined) {
-        return;
-      }
-
-      this.setState(({requests}) => {
-        const networkRequestInfo = requests[socketIndex];
-
-        if (!networkRequestInfo.messages) {
-          networkRequestInfo.messages = '';
-        }
-        networkRequestInfo.messages +=
-          'Received: ' + JSON.stringify(message) + '\n';
-
-        return {requests};
-      });
-    });
-
-    WebSocketInterceptor.setOnCloseCallback((message, socketId) => {
-      const socketIndex = this._socketIdMap[socketId];
-      if (socketIndex === undefined) {
-        return;
-      }
-
-      this.setState(({requests}) => {
-        const networkRequestInfo = requests[socketIndex];
-        networkRequestInfo.serverClose = message;
-
-        return {requests};
-      });
-    });
-
-    WebSocketInterceptor.setOnErrorCallback((message, socketId) => {
-      const socketIndex = this._socketIdMap[socketId];
-      if (socketIndex === undefined) {
-        return;
-      }
-
-      this.setState(({requests}) => {
-        const networkRequestInfo = requests[socketIndex];
-        networkRequestInfo.serverError = message;
-
-        return {requests};
-      });
-    });
-
-    // Fire above callbacks.
-    WebSocketInterceptor.enableInterception();
-  }
-
-  componentDidMount() {
-    this._enableXHRInterception();
-    this._enableWebSocketInterception();
-  }
-
-  componentWillUnmount() {
-    XHRInterceptor.disableInterception();
-    WebSocketInterceptor.disableInterception();
-  }
-
-  _renderItem = ({
-    item,
-    index,
-  }: ListRenderItemInfo<NetworkRequestInfo>): React.MixedElement => {
-    const tableRowViewStyle = [
-      styles.tableRow,
-      index % 2 === 1 ? styles.tableRowOdd : styles.tableRowEven,
-      index === this.state.detailRowId && styles.tableRowPressed,
-    ];
-    const urlCellViewStyle = styles.urlCellView;
-    const methodCellViewStyle = styles.methodCellView;
-
-    return (
-      <TouchableHighlight
-        onPress={() => {
-          this._pressRow(index);
-        }}>
-        <View>
-          <View style={tableRowViewStyle}>
-            <View style={urlCellViewStyle}>
-              <Text style={styles.cellText} numberOfLines={1}>
-                {item.url}
-              </Text>
-            </View>
-            <View style={methodCellViewStyle}>
-              <Text style={styles.cellText} numberOfLines={1}>
-                {getTypeShortName(item.type)}
-              </Text>
-            </View>
-          </View>
-        </View>
-      </TouchableHighlight>
-    );
-  };
-
-  _renderItemDetail(id: number): React.Node {
-    const requestItem = this.state.requests[id];
-    const details = Object.keys(requestItem).map(key => {
-      if (key === 'id') {
-        return;
-      }
-      return (
-        <View style={styles.detailViewRow} key={key}>
-          <Text style={[styles.detailViewText, styles.detailKeyCellView]}>
-            {key}
-          </Text>
-          <Text style={[styles.detailViewText, styles.detailValueCellView]}>
-            {getStringByValue(requestItem[key])}
-          </Text>
-        </View>
-      );
-    });
-
-    return (
-      <View>
-        <TouchableHighlight
-          style={styles.closeButton}
-          onPress={this._closeButtonClicked}>
-          <View>
-            <Text style={styles.closeButtonText}>v</Text>
-          </View>
-        </TouchableHighlight>
-        <ScrollView
-          style={styles.detailScrollView}
-          ref={scrollRef => (this._detailScrollView = scrollRef)}>
-          {details}
-        </ScrollView>
-      </View>
-    );
-  }
-
-  _indicateAdditionalRequests = (): void => {
-    if (this._requestsListView) {
-      const distanceFromEndThreshold = LISTVIEW_CELL_HEIGHT * 2;
-      const {offset, visibleLength, contentLength} =
-        this._requestsListViewScrollMetrics;
-      const distanceFromEnd = contentLength - visibleLength - offset;
-      const isCloseToEnd = distanceFromEnd <= distanceFromEndThreshold;
-      if (isCloseToEnd) {
-        this._requestsListView.scrollToEnd();
-      } else {
-        this._requestsListView.flashScrollIndicators();
-      }
-    }
-  };
-
-  _captureRequestsListView = (listRef: ?FlatList<NetworkRequestInfo>): void => {
-    this._requestsListView = listRef;
-  };
-
-  _requestsListViewOnScroll = (e: Object): void => {
-    this._requestsListViewScrollMetrics.offset = e.nativeEvent.contentOffset.y;
-    this._requestsListViewScrollMetrics.visibleLength =
-      e.nativeEvent.layoutMeasurement.height;
-    this._requestsListViewScrollMetrics.contentLength =
-      e.nativeEvent.contentSize.height;
-  };
-
-  /**
-   * Popup a scrollView to dynamically show detailed information of
-   * the request, when pressing a row in the network flow listView.
-   */
-  _pressRow(rowId: number): void {
-    this.setState({detailRowId: rowId}, this._scrollDetailToTop);
-  }
-
-  _scrollDetailToTop = (): void => {
-    if (this._detailScrollView) {
-      this._detailScrollView.scrollTo({
-        y: 0,
-        animated: false,
-      });
-    }
-  };
-
-  _closeButtonClicked = () => {
-    this.setState({detailRowId: null});
-  };
-
-  _getRequestIndexByXHRID(index: number): number {
-    if (index === undefined) {
-      return -1;
-    }
-    const xhrIndex = this._xhrIdMap[index];
-    if (xhrIndex === undefined) {
-      return -1;
-    } else {
-      return xhrIndex;
-    }
-  }
-
-  render(): React.Node {
-    const {requests, detailRowId} = this.state;
-
-    return (
-      <View style={styles.container}>
-        {detailRowId != null && this._renderItemDetail(detailRowId)}
-        <View style={styles.listViewTitle}>
-          {requests.length > 0 && (
-            <View style={styles.tableRow}>
-              <View style={styles.urlTitleCellView}>
-                <Text style={styles.cellText} numberOfLines={1}>
-                  URL
-                </Text>
-              </View>
-              <View style={styles.methodTitleCellView}>
-                <Text style={styles.cellText} numberOfLines={1}>
-                  Type
-                </Text>
-              </View>
-            </View>
-          )}
-        </View>
-
-        <FlatList
-          ref={this._captureRequestsListView}
-          onScroll={this._requestsListViewOnScroll}
-          style={styles.listView}
-          data={requests}
-          renderItem={this._renderItem}
-          keyExtractor={keyExtractor}
-          extraData={this.state}
-        />
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    paddingTop: 10,
-    paddingBottom: 10,
-    paddingLeft: 5,
-    paddingRight: 5,
-  },
-  listViewTitle: {
-    height: 20,
-  },
-  listView: {
-    flex: 1,
-    height: 60,
-  },
-  tableRow: {
-    flexDirection: 'row',
-    flex: 1,
-    height: LISTVIEW_CELL_HEIGHT,
-  },
-  tableRowEven: {
-    backgroundColor: '#555',
-  },
-  tableRowOdd: {
-    backgroundColor: '#000',
-  },
-  tableRowPressed: {
-    backgroundColor: '#3B5998',
-  },
-  cellText: {
-    color: 'white',
-    fontSize: 12,
-  },
-  methodTitleCellView: {
-    height: 18,
-    borderColor: '#DCD7CD',
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    borderRightWidth: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#444',
-    flex: 1,
-  },
-  urlTitleCellView: {
-    height: 18,
-    borderColor: '#DCD7CD',
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    justifyContent: 'center',
-    backgroundColor: '#444',
-    flex: 5,
-    paddingLeft: 3,
-  },
-  methodCellView: {
-    height: 15,
-    borderColor: '#DCD7CD',
-    borderRightWidth: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 1,
-  },
-  urlCellView: {
-    height: 15,
-    borderColor: '#DCD7CD',
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    justifyContent: 'center',
-    flex: 5,
-    paddingLeft: 3,
-  },
-  detailScrollView: {
-    flex: 1,
-    height: 180,
-    marginTop: 5,
-    marginBottom: 5,
-  },
-  detailKeyCellView: {
-    flex: 1.3,
-  },
-  detailValueCellView: {
-    flex: 2,
-  },
-  detailViewRow: {
-    flexDirection: 'row',
-    paddingHorizontal: 3,
-  },
-  detailViewText: {
-    color: 'white',
-    fontSize: 11,
-  },
-  closeButtonText: {
-    color: 'white',
-    fontSize: 10,
-  },
-  closeButton: {
-    marginTop: 5,
-    backgroundColor: '#888',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default NetworkOverlay;

package/src/private/devsupport/devmenu/perfmonitor/PerformanceOverlay.js

@@ -1,66 +0,0 @@
-/**
- * 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 * as React from 'react';
-
-const View = require('../../../../../Libraries/Components/View/View').default;
-const StyleSheet =
-  require('../../../../../Libraries/StyleSheet/StyleSheet').default;
-const Text = require('../../../../../Libraries/Text/Text').default;
-const PerformanceLogger =
-  require('../../../../../Libraries/Utilities/GlobalPerformanceLogger').default;
-
-class PerformanceOverlay extends React.Component<{...}> {
-  render(): React.Node {
-    const perfLogs = PerformanceLogger.getTimespans();
-    const items = [];
-
-    for (const key in perfLogs) {
-      if (perfLogs[key]?.totalTime) {
-        const unit = key === 'BundleSize' ? 'b' : 'ms';
-        items.push(
-          <View style={styles.row} key={key}>
-            <Text style={[styles.text, styles.label]}>{key}</Text>
-            <Text style={[styles.text, styles.totalTime]}>
-              {perfLogs[key].totalTime + unit}
-            </Text>
-          </View>,
-        );
-      }
-    }
-
-    return <View style={styles.container}>{items}</View>;
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    height: 100,
-    paddingTop: 10,
-  },
-  label: {
-    flex: 1,
-  },
-  row: {
-    flexDirection: 'row',
-    paddingHorizontal: 10,
-  },
-  text: {
-    color: 'white',
-    fontSize: 12,
-  },
-  totalTime: {
-    paddingRight: 100,
-  },
-});
-
-export default PerformanceOverlay;