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

Development issue/problem:

I’ve seen a few borderline cases and a weird development problem.

Shake your device, that’s really awkward, especially on a tablet.

To work in the Android studio, simulate a keystroke.

Is there a consistent way to do this? Can’t we use the internal API to have a debug button in our application to run a menu like Navator.popUpDevMenu()?

If not, how do you shake the tablet to make it work? The question is how to configure the HMR on the actual device. Native Response improves the development experience, but I would say that this particular thing slows it down a bit.

How can I solve this problem?

Solution 1:

If you’re on a Mac, there’s a handy tool called Strike. https://github.com/niftylettuce/frappe

You can use this command from the command line

Main event 82 adb shell input

if the device does not work with Ract-native run-android or if it disengages after starting Ract-native run-android. You need to unlock the development server port again. You can run this command and try again with the previous command.

Reverse advertising tcp: 8081

EDIT: This solution only works for Android devices and is one of the hacks suggested in the question above. So it’s unbelievable. Until that happens, however, it will be chosen as the correct answer.

Solution 2:

That’s what I do:

Android:

Add the script to your .json package:

android cocktail: adb shell entry key 82

You can then rotate and shake the android to get a context menu on Android (assuming the device is connected to a computer).

iOS

Settings -> Access -> AssistiveTouch

  1. Turn it on.
  2. Press Pas Top Level Menu…. at
  3. Remove all but one of the symbols and set it to Jitter.

This allows you to press a button instead of shaking the device.

I hope it helps others.

Solution 3:

I add a simple, perfectly positioned button and this onClick manager

imoprt {Inboard modules } from react-native;

onMenuButtonClick(){
NativeModules.DevMenu.show();
}

Solution 4:

I’ve created a library that allows you to open the development menu in development mode by typing it with 3 fingers instead of shaking it.

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

Just insert the request:

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

The YourRootApp class expands Component {
render() {
return (

);
}
}

This is really useful when you need to debug a real machine and have colleagues sitting next to you.

Solution No 5:

If you have a Xiaomi phone, this answer will not work because there is a security option that prevents the pop-up from opening and you need to authorize it for your application:

Go to Settings > Installed applications > [Application name] > Authorization management
and enable the Display Popup option.
Shake it again. The developer menu should appear as expected with a slight delay of
.

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

Solution No 6:

Shaking the phone in Android is sometimes boring. If you make the changes below, pressing the Volume up/down button will open the Developer menu.

Add the following code to 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 the following code works in MainActivity.java.

@Check
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 application again to run the above code with run-android re-run.

Tested with RN 0.59+.

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

Edit: Include the KeyEvent and other imports in the file.

import android.view.KeyEvent ;

Good luck!

react-native run-android not working,react native build ipa,react native run-android emulator mac,react native build apk,react native reload app,error unrecognized command "run-android".,react native debugger not connecting,react native debugger + expo,error no active ios device found,cmd+d not working react-native,react native debugger download,<script src="http://localhost:8097"></script>,react native developer menu device,react-native developer menu command,expo open developer menu,dev settings react-native ios,ios simulator command d not working,react native open developer menu adb,react-native shake gesture android,react native change shake gesture,react native menu without shake,react-native disable shake debug,react-native shake gesture not working ios,react-native dev menu not showing android,react-native developer menu doesn t work,shake gesture not working react native,react-native developer menu not opening ios,react native dev menu without shake,react native developer menu android device,react-native debug menu not showing,react native run-android emulator,react native debugger,react-native open developer menu android emulator,react native run on device,react-devtools agent got no connection

You May Also Like