Search code examples
androidiosreactjsreact-nativewebpack-hmr

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


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.


Solution

  • 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.