React Native

Some better ways than shaking your device to show dev-menu in React Native

Save your phone and your hands with simple actions and stop being the strange guy in the open-space that is shaking all day long.

Andréas Hanss
Mar 16 · 2 min read

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

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

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.

JavaScript in Plain English

Learn the web's most important programming language.

Andréas Hanss

Written by

👨🏻‍💻Javascript Tech leads 🇫🇷 — react | react-native | modern js |🔥 Firebase — https://linktr.ee/scr34mz — Passionated about learning.

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

32 funny Code Comments that people actually wrote

10.1K

More from JavaScript in Plain English

More from JavaScript in Plain English

How Single Page Applications Broke Web Design

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade