Keybind Your Way To React Native Dev Menu

This tutorial works only on Android phones

If you're a React Native developer, you already know that opening the dev menu by shaking the phone can be really frustrating. The problem has been tackled by some folks, and solutions exist in the form of components that wrap your whole app to enable 3 finger long press to access the dev menu. This works, but personally I don't like the idea of having dev-only components in my app so it never stuck on me.

That's why I created this little workaround to open the dev menu from inside VSCode, using a keyboard shortcut. The only caveat is that your phone has to be connected via USB cable, but since this has the advantage of faster loading times, I was already used to being connected so the shortcut was a clear improvement. Here's how to do it.

First we'll create a task in VSCode that will run two ADB commands. The first command will redirect the phones traffic to our computer and enable faster loading times. When you run react-native run-android this command, among others, is ran behind the scenes.
The second command sends a key event that will pop the menu open.
We don't technically need the first command, but if you disconnect your phone from the PC and reconnect it, you'll have to run it to be able to fetch the JS code changes anyway, so it's nice to have.

So let's set up the VSCode task. Open up VSCode and hit CTRL+P, then type in "Tasks: Configure Tasks". Press enter and select "Create tasks.json file from template", choose "Others" from the available options.
Now you should see a simple template for running a shell command through a task. Change it so it looks like this:

  {
    "version": "2.0.0",
    "tasks": [
      {
        "label": "reactNativeDevMenu",
        "type": "shell",
        "presentation": {
          "echo": false,
          "reveal": "never",
          "focus": false,
          "panel": "new",
          "showReuseMessage": false,
          "clear": false
        },
        "command": "adb reverse tcp:8081 tcp:8081 && adb shell input keyevent 82"
      }
    ]
  }

The label key serves as an ID that we can later use to run the task.
The type key tells VSCode that the task should run in the shell.
The presentation key is required in order to prevent the terminal popping up after we run the task. This way it runs silently in the background.
The command key is the actuall command that will run once we run the task.

Now let's bind a keyboard shortcut to run the task. I used CTRL+ALT+D but you can use whatever you want. Add this snippet to your keybinding.json file. You can access the file by pressing CTRL+SHIFT+P typing "Preferences: Open Keyboard Shortucs" then pressing the curly brackets in top right.

  {
    "key": "ctrl+alt+d",
    "command": "workbench.action.tasks.runTask",
    "args": "reactNativeDevMenu"
  }

The value under args should match the label we set up in tasks.json.

Now connect your Android phone with an USB cable, open your app and try out the keybinding you set up. Congratulations! You can now open the dev menu without flailing your phone around like a mad man. Happy hacking!