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

Answer 1

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;