For about 3 years, I use to develop react native applications on mobile devices instead of emulators. I’m often in a Coffee and inevitably I need to show the developer menu of my react application.

To show that menu, you need to use some physical gesture: shaking.

Despite the fact that people are looking me strangely about what kind of alien I am, this can get really cumbersome at the end of the day. And it might even be dangerous for the phone himself, that can be thrown away on the floor…

After that, I asked myself: “What the hell can I do to prevent that?”

After some research, there are many tips some from the computer side and some others from the device side, let’s see together what we can do.

💻 From your computer

On an emulator

Press ctrl+m (for Linux/Windows) and ⌘+m for Mac OS X, while having keyboard focus on the emulator.

On Android, using the shell:

The shaking gesture is an action that is producing a keypress event identified by code 82 . So basically as long as your device is connected you can just run this shell script to display the dev menu.

adb shell input keyevent 82

Feel free to bind that script to some shortcut or key on your keyboard/mouse or somewhere else.

Using the CLI or Flipper

I’m currently writing a new article about it :) Subscribe to the newsletter to get alerted when it gonna be published or just subscribe to my Medium channel. :) Thanks

📱From the device himself

React native exposes a JS bridge to interact with the Dev menu. You can trigger it using any event of your choice.

For that, you just need to import NativesModules .

import { NativeModules } from "react-native"; // Somewhere in code

NativeModules.DevMenu.show();

Some commons pattern are to use 3 fingers touch, to trigger the menu. Or in dev mode, to have to kind of debug button absolutely positioned in a corner of the application.

For the first pattern, some people already made a library that you can use

But it might now be adapted to your need, so feel free to program any overlay button.