Use metro message endpoint to dispatch dev menu request

packages/vscode-extension/lib/wrapper.js

@@ -43,9 +43,6 @@ const RNInternals = {
     } catch (e) {}
     throw new Error("Couldn't locate LoadingView module");
   },
-  get DevMenu() {
-    return require("react-native/Libraries/NativeModules/specs/NativeDevMenu").default;
-  },
 };
 
 function getCurrentScene() {
@@ -246,12 +243,6 @@ export function PreviewAppWrapper({ children, initialProps, ..._rest }) {
     [mainContainerRef]
   );
 
-  useAgentListener(devtoolsAgent, "RNIDE_iosDevMenu", (_payload) => {
-    // this native module is present only on iOS and will crash if called
-    // on Android
-    RNInternals.DevMenu.show();
-  });
-
   useAgentListener(
     devtoolsAgent,
     "RNIDE_showStorybookStory",

packages/vscode-extension/src/devices/AndroidEmulatorDevice.ts

@@ -175,10 +175,6 @@ export class AndroidEmulatorDevice extends DeviceBase {
     await this.changeSettings(settings);
   }
 
-  async openDevMenu() {
-    await exec(ADB_PATH, ["-s", this.serial!, "shell", "input", "keyevent", "82"]);
-  }
-
   async configureExpoDevMenu(packageName: string) {
     if (packageName === "host.exp.exponent") {
       // For expo go we are unable to change this setting as the APK is not debuggable

packages/vscode-extension/src/project/deviceSession.ts

@@ -269,17 +269,7 @@ export class DeviceSession implements Disposable {
   }
 
   public async openDevMenu() {
-    // on iOS, we can load native module and dispatch dev menu show method. On
-    // Android, this native module isn't available and we need to fallback to
-    // adb to send "menu key" (code 82) to trigger code path showing the menu.
-    //
-    // We could probably unify it in the future by running metro in interactive
-    // mode and sending keys to stdin.
-    if (this.device.platform === DevicePlatform.IOS) {
-      this.devtools.send("RNIDE_iosDevMenu");
-    } else {
-      await (this.device as AndroidEmulatorDevice).openDevMenu();
-    }
+    this.metro.openDevMenu();
   }
 
   public startPreview(previewId: string) {

packages/vscode-extension/src/project/metro.ts

@@ -8,6 +8,7 @@
 import { shouldUseExpoCLI } from "../utilities/expoCli";
 import { Devtools } from "./devtools";
 import { getLaunchConfiguration } from "../utilities/launchConfiguration";
+import WebSocket from "ws";
 
 export interface MetroDelegate {
   onBundleError(): void;
@@ -234,6 +235,22 @@
     await appReady;
   }
 
+  public async openDevMenu() {
+    // to send request to open dev menu, we route it through metro process
+    // that maintains a websocket connection with the device. Specifically,
+    // /message endpoint is used to send messages to the device, and metro proxies
+    // messages between different clients connected to that endpoint.
+    // Therefore, to send the message to the device we:
+    // 1. connect to the /message endpoint over websocket
+    // 2. send specifically formatted message to open dev menu
+    const ws = new WebSocket(`ws://localhost:${this._port}/message`);
+    await new Promise((resolve) => ws.addEventListener("open", resolve));
+    ws.send(
+      JSON.stringify({ version: 2 /* protocol version, needs to be set to 2 */, method: "devMenu" })
+    );
+    ws.close();
+  }
+
   public async getDebuggerURL() {
     const WAIT_FOR_DEBUGGER_TIMEOUT_MS = 15_000;