How do I open react-native's dev menu on real device

Question

I have seen already a number of border cases and strange developer interface.

From the "shake your device", which is really impractical, specially with a tablet

To working around Android studio to simulate a button press.

Is there a consistent way to do it? Can't we use a intern API to have a debug button within our app to launch such menu as navigator.popUpDevMenu()?

And if not, how do you shake your tablet to get it working. This is intended to solve How To configure HMR on a real device, too. React native does improve the development experience, but I'd say that particular thing slows it a little bit.

agenthunt · Accepted Answer · 2018-06-26T10:39:40.467

118

If you are on a mac, there is a handy tool called Frappe. https://github.com/niftylettuce/frappe

You can use this command from the shell

adb shell input keyevent 82

if haven't run react-native run-android or if the device gets disconnected after you have run the react-native run-android. You need to re-enable the development server port. You can run this command and try again with the previous command

adb reverse tcp:8081 tcp:8081

EDIT: this solution only works for android devices and is among the hacks proposed in the question above. So it is improvable. However It is selected as valid answer until this happens.

edited Jun 26 '18 at 10:39

answered Jun 15 '16 at 18:09

agenthunt

8,450
3
30
26

These are the kind of workarounds, I mention. They are more refined than those I portrayed, though. – jsdario Jun 15 '16 at 23:06
Frappe does not work on mac devices (ipads, iphones) – jsdario Jun 16 '16 at 15:14
This command also works on Windows 10 and Android 6 Marshmallow. – SoundStage Apr 20 '17 at 05:22
" adb shell input keyevent 82 " This helped me . Thanks alot !! – SUNIL GOWROJI Jun 01 '17 at 06:40
7

This doesn't work for me. I'm using Xiaomi Redmi pro 3 with 5.1.1. The keyevent only bringing up the list of running applications. Any help ? – Ferry Oct 13 '17 at 19:24
1

Have you tried this ? https://github.com/facebook/react-native/issues/2754#issuecomment-140815500 – agenthunt Oct 14 '17 at 19:15
1

Same for me, my Xiaomi doesn't do anything with `adb shell input keyevent 82` :( – ZedTuX Jun 26 '18 at 06:25
this no longer works on newer Android versions (not sure from which starts not working) the most solid solution for this is the answer by @Yogesh Agrawal – Blue Bot Aug 03 '21 at 08:22
shake the device, the menu should appear – Maria Feb 25 '22 at 15:50

Francois Nadeau · Answer 2 · 2020-01-28T15:16:28.293

Here is what I do:

Android:

Add a script to your package.json:

"android-shake": "adb shell input keyevent 82"

You will then be able to call yarn android-shake to have the menu popup on Android (as long as the device is connected to the computer that is).

iOS

Settings -> Accessibility -> AssistiveTouch

Turn it on.
Tap on Customize Top Level Menu...
Remove all icons but one, and set it to shake.

That will give you a button that you can tap instead of shaking the device.

I hope this can help others.

score 9 · Answer 3 · answered Apr 26 '19 at 12:30

9

I add a simple absolutely positioned button and this onClick handler to it

imoprt { NativeModules } from 'react-native';
...
onMenuButtonClick(){
 NativeModules.DevMenu.show();
}

answered Apr 26 '19 at 12:30

Sajjad Ashraf

3,754
1
34
35

That is actually a good idea. You can also add the button only on __DEV__ so that it is usable only then. – Francois Nadeau Jul 31 '19 at 13:03
In RN **0.66**, this module is removed. There are only several available APIs provided by `NativeModules.DevSettings`. – LitileXueZha Nov 04 '21 at 11:22

score 8 · Answer 4 · answered Jan 21 '19 at 11:12

I've created a lib that allows you to use 3 fingers touch instead of shake to open dev menu, when in development mode

https://github.com/pie6k/react-native-dev-menu-on-touch

You only have to wrap your app inside:

import DevMenuOnTouch from 'react-native-dev-menu-on-touch';
// or:  import { DevMenuOnTouch } from 'react-native-dev-menu-on-touch'

class YourRootApp extends Component {
  render() {
    return (
      <DevMenuOnTouch>
        <YourApp />
      </DevMenuOnTouch>
    );
  }
}

It's really useful when you have to debug on real device and you have co-workers sitting next to you.

score 6 · Answer 5 · answered Jul 19 '21 at 01:51

6

On windows Just click on metro bundler and press 'D' for developer menu, 'R' to reload

answered Jul 19 '21 at 01:51

Kunal Phaltankar

69
3
5

2

By far the easiest and simplest solution! This should be on top. – Noah Kanyo Aug 30 '22 at 08:14

score 3 · Answer 6 · answered Jun 26 '18 at 06:29

3

In the case you have a Xiaomi phone, the given answer will not work, because there is a security option prevented popup window to open and you need to allow it for your app :

Go to Settings > Installed apps > [Your App Name] > Permission manager, and enable “Display pop-up window”.

Shake again. The developer menu should pop up as expected with just a little shaking.

Source: https://matthewphiong.com/debugging-react-native-app-on-a-xiaomi-phone

answered Jun 26 '18 at 06:29

ZedTuX

2,859
3
28
58

https://stackoverflow.com/questions/51036405/npm-start-not-working-in-reactjs-if-public-folder-is-inside-another-folder please answer my question in that link – Mr_Perfect Jun 26 '18 at 07:03
@Mr_Perfect your question is not related to react-native but reactjs. – ZedTuX Jun 26 '18 at 07:07
I want some response. No one is replying. I got stuck :( – Mr_Perfect Jun 26 '18 at 07:08
Come one @Mr_Perfect, it's just about an hour you opened your question :). Actually you have already comments and an answer. – ZedTuX Jun 26 '18 at 07:46

Yogesh Agrawal · Answer 7 · 2020-01-16T06:59:24.090

Shaking phone in Android is annoying sometimes. Making below changes will open the Developer Menu by pressing the Volume down / Up key.

Insert the following code in android/../MainActivity.java

  @Override
  public boolean onKeyUp(int keyCode, KeyEvent event) {
      if (keyCode == KeyEvent.KEYCODE_VOLUME_DOWN && this.getReactInstanceManager() != null) {
          this.getReactInstanceManager().showDevOptionsDialog();
          return true;
      }
      return super.onKeyUp(keyCode, event);
  }

With React Native Navigation V3 following code will work in MainActivity.java.

  @Override
  public boolean onKeyUp(int keyCode, KeyEvent event) {
      if (keyCode == KeyEvent.KEYCODE_VOLUME_DOWN && this.getReactGateway().getReactNativeHost().getReactInstanceManager() != null) {
          this.getReactGateway().getReactNativeHost().getReactInstanceManager().showDevOptionsDialog();
          return true;
      }
      return super.onKeyUp(keyCode, event);
  }

After this change, run the app again to deploy the above code by react-native run-android.

Tested with RN 0.59+.

Reference: https://facebook.github.io/react-native/docs/integration-with-existing-apps

Edit: Include KeyEvent import as well with other imports in the file.

import android.view.KeyEvent;

`adb shell input keyevent 82` not working on newer Android versions (not sure which one) so this is the best solution for android, not loving to add code only for development purpose but its not so bad and seems as the only solid solution. Should be the selected answer — Blue Bot, Aug 03 '21 at 08:21

score 0 · Answer 8 · answered Apr 13 '23 at 10:29

0

If it not works with all solutions look in to MainActivity.java and remove or comment out import com.facebook.react.buildconfig

answered Apr 13 '23 at 10:29

om_dev

1

How do I open react-native's dev menu on real device

8 Answers8

Linked