Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shake gesture should not be only way to reach dev menu on physical device #10191

Closed
pekkanikolaus opened this issue Sep 30, 2016 · 41 comments

Comments

@pekkanikolaus
Copy link

@pekkanikolaus pekkanikolaus commented Sep 30, 2016

The react native development process is awesome. The only real annoyance is that I need to shake the device to get hold of the developer menu to hot reload the app’s code.

Shaking is cumbersome the bigger and heavier the device gets, and it doesn’t work very well on my iPad pro: I have to shake repeatedly, sometimes for a while, until I get the menu. The device is resting on my table while I code and there is no reason to pick it up (also because the charger cable is showing strain).

There should be an alternative gesture to shaking to invoke the dev menu. Sadly, I lack the XCode/ObjC chops to make the change right in the code.

@romain337

This comment has been minimized.

Copy link

@romain337 romain337 commented Oct 14, 2016

Hi, I agree with @pekkanikolaus, shaking the device to bring up the dev menu is not efficient. I have a Galaxy S6 here at work and I can't bring the menu. I can shake the device but nothing happen (a chance it didn't slip of my hand yet ;))

If I start the app (not from a previous instance), then the menu is visible, and as soon as I dismiss it, it is back again (infinite loop hide<>show<>hide<>show...), and I have to hit the "recent app" button then come back to the app to make it invisible, but then it is gone forever... until I restart the app by manually killing it's instance (I suspect Samsung modification to be the cause of that behavior).

I have another device, the One+ but with this one, I can't use the dev tools (nuclide inspector) because adb reverse don't work with API 19, and I must keep this device to API level 19.

Using the "normal" chrome dev tools, It seem that I can only see some exceptions (if they raise from my code) and console.log. This make learning difficult, debugging almost impossible on real device.

I think it is a no go but I had to write this somewhere even if maybe I am the only one with this kind of problem (googled about that and got no results so far).

@goldylucks

This comment has been minimized.

Copy link

@goldylucks goldylucks commented Oct 14, 2016

+1

for now I'm using this workaround

$ adb shell am force-stop com.app_name && adb shell am start -n com.app_name/com.app_name.MainActivity
@ohtangza

This comment has been minimized.

Copy link

@ohtangza ohtangza commented Dec 13, 2016

I am developing activity recognition application based on RN, and this shake gesture conflicts with my core logic which makes use of accelerometer signals. This needs to be enhanced for the apps encompassing sensor utilization!

@abhisheksoni27

This comment has been minimized.

Copy link

@abhisheksoni27 abhisheksoni27 commented Dec 18, 2016

Why hasn't this issue been escalated? It's really a tedious job without Live Reloading, which can only be enabled if you can open the Dev Menu, and in a lot of cases, it just doesn't open.

http://stackoverflow.com/questions/41208089/cannot-open-dev-menu-on-xiaomi-devices

@ohtangza

This comment has been minimized.

Copy link

@ohtangza ohtangza commented Dec 18, 2016

I think we can also follow Exponent.js's approach which uses double long tap. This is very responsive and predictable, and does not conflict with most of applications. I think shaking gesture should not be used by defaultz

@abhisheksoni27

This comment has been minimized.

Copy link

@abhisheksoni27 abhisheksoni27 commented Dec 18, 2016

@ohtangza Exactly. That won't be restricting the development workflow and would fit with almost all the apps, without changing their default behavior. How can we add this?

@ohtangza

This comment has been minimized.

Copy link

@ohtangza ohtangza commented Dec 19, 2016

@abhisheksoni27 For android, DevSupportManagerImpl.java should be in charge of this part. The part below is the code where RN triggers the developer menu. I am not sure about iOS part because I am not that knowledgable for iOS. I think I can take care of Android part.

https://github.com/facebook/react-native/blob/9ee815f6b52e0c2417c04e5a05e1e31df26daed2/ReactAndroid/src/main/java/com/facebook/react/common/ShakeDetector.java

// Prepare shake gesture detector (will be started/stopped from #reload)
    mShakeDetector = new ShakeDetector(new ShakeDetector.ShakeListener() {
      @Override
      public void onShake() {
        showDevOptionsDialog();
      }
    });

We also need to discuss the followings as well:

  1. revision on documentation,
  2. any confusion for changing from shake to multiple long-tap (perhaps, there could be someone who still wants the developer menu with shake detection
  3. RN seems to have its own implement for shake detection. Should we keep this code? Since RN is not supporting the sensor by itself, I guess this shake detector would not be necessary if this update is accepted.
@abhisheksoni27

This comment has been minimized.

Copy link

@abhisheksoni27 abhisheksoni27 commented Dec 19, 2016

@ohtangza, We're gonna need someone else to take car of the implementation in iOS.

For the issues you mentioned, I think:

  1. We could tell the developers that the can long-press on the screen to bring up the developer menu, but if they liked the shake gesture option, we still have them covered.

  2. How about we add a SharedPreference key for whether a certain developer wants to use theShakeGesture or not? On the first launch, the dev menu will open after on pressing on the screen, which would have an Enable Shake Gesture, and pressing it would simply change the value of that SharedPreference Key. I think that would do it. What do you think?

  3. I think this will be taken care of if we use what is suggested in the above point.

Let's see what RN thinks of that. Also, do you have a better way of implementing that?

@ohtangza

This comment has been minimized.

Copy link

@ohtangza ohtangza commented Dec 26, 2016

@abhisheksoni27 Sorry for my late reply. I might not be very responsive in this end-year season.

In response to the SharedPreference you suggested, I think that is a good idea because we already have developer's setting in the menu.

I personally think that we can get rid of the shake gesture eventually because the multi-touch long press could be replaced the gesture completely. If we support it with more than long press with more than 3 multi-touch event. It probably may not conflict with others.

Anyways, we might still need to keep them supported for the time being for backward compatibility and little confusion to developers.

By the way, do you have a plan to update the code by yourself? I really need this feature because I am prototyping a gesture-enabled app using the accelerometer for now. I might have some time to do it with iOS developer, but it would be around somewhere middle in January.

@abhisheksoni27

This comment has been minimized.

Copy link

@abhisheksoni27 abhisheksoni27 commented Dec 27, 2016

Haha. Holidays. 😂

We can implement three-points multi-touch event, and support the development workflow. That's a very good point.

I can start updating as soon as we formally decide what we are after. Like, let's finalize the three-points touch event and start hacking.

Gesture-enabled App. Cool. 💯

And I'm afraid you are gonna have to be in charge of the iOS implementation. I have no idea how that stuff is written.

@malithjkmt

This comment has been minimized.

Copy link

@malithjkmt malithjkmt commented Jan 12, 2017

Actually it doesn't.
You can bring the dev tool menu by running following in the terminal
adb shell input keyevent KEYCODE_MENU

@slicejunk

This comment has been minimized.

Copy link

@slicejunk slicejunk commented Feb 3, 2017

what would you think of a "3 touches" trigger?

import React from 'react';
import {
  View,
  PanResponder,
  NativeModules,
}            from 'react-native';


const DevMenuTrigger = ({children}) => {
  const {DevMenu} = NativeModules;
  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => {
      if (gestureState.numberActiveTouches === 3) {
        DevMenu.show();
      }
    },
  });
  return <View style={{flex: 1}} {...panResponder.panHandlers}>{children}</View>;
};


...

AppRegistry.registerComponent('myApp', (): any => <DevMenuTrigger><MyApp></DevMenuTrigger>);```
@ohtangza

This comment has been minimized.

Copy link

@ohtangza ohtangza commented Feb 3, 2017

I personally love your three points long touch implementation!

@wbpmrck

This comment has been minimized.

Copy link

@wbpmrck wbpmrck commented Feb 7, 2017

i have the same problem,in my andoird device(Mi4c android 5.1),the dev menu did not show . I shake my phone.use adb shell input keyevent 82,etc,doesn't work.

so does anybody know the solution?

@chetankotkar

This comment has been minimized.

Copy link

@chetankotkar chetankotkar commented Jun 6, 2017

@malithjkmt when I run the command "adb shell input keyevent KEYCODE_MENU" output on my screen is "Error: TV display id Invalid, will send event to default displayId ".

@hramos

This comment has been minimized.

Copy link
Contributor

@hramos hramos commented Jul 20, 2017

Thanks for opening the issue! As it happens, we're using GitHub to track bugs in React Native. If you'd like to submit this as a feature request, please go ahead and create an entry on Canny. It has a voting system and if the feature gets a good amount of votes, it will have a greater chance of being implemented by the community. Closing this now, thanks for understanding!

@hramos hramos closed this Jul 20, 2017
@brunolemos

This comment has been minimized.

@brunolemos

This comment has been minimized.

Copy link
Contributor

@brunolemos brunolemos commented Jul 22, 2017

Oops, correct link to vote: https://react-native.canny.io/feature-requests/p/shake-gesture-should-not-be-only-way-to-reach-dev-menu-on-physical-device

@hramos the Canny link you posted is wrong, the correct one is react-native instead of reactnative.

@guerjon

This comment has been minimized.

Copy link

@guerjon guerjon commented Sep 1, 2017

I create a reload-device.sh script for mac

#!/bin/bash
echo "Re-Loading Device ... "
adb shell input keyevent 82
adb shell input keyevent 66

and now I just write reload-device.sh and that's is all the 82 is for show the menu like @malithjkmt show us and the 66 it's for Enter.

@Jarrio

This comment has been minimized.

Copy link

@Jarrio Jarrio commented Sep 4, 2017

I still can't believe this is under "consideration". "Shaking" to activate a menu option which is an integral part of the app development cycle. Reinstall app? You have to shake vigorously(I have a DayDream VR capable phone with a more sensitive gyro) 3x just to toggle Debug mode, Hot Reloading and Live reload? Why does this make sense?

Make it simple. A permanent notification/floating button or even a 4 touch hold would all be way more useful and intuitive than the current method.

ADB is a temp way to avoid this, but this only works if you're connected to the debugger via a physical connection. To prevent overcharging a phone you don't want it to be permanently on the wire and shaking to change settings just creates wear and tear on the phone port in this scenario.

expo/expo#517
I have a MotoZ. Shaking the device also triggers the flash and it seems the "intense shaking" isn't a unique case to my phone

@joachimroeleveld

This comment has been minimized.

Copy link

@joachimroeleveld joachimroeleveld commented Sep 12, 2017

I use a workaround by using two Automator services (OSX):

Open RN dev menu

/usr/local/bin/adb shell input keyevent KEYCODE_MENU

Reload RN

/usr/local/bin/adb shell input keyevent 82
/usr/local/bin/adb shell input keyevent 66
/usr/local/bin/adb shell input keyevent 66

(reload was not always working without adding the last line)

schermafbeelding 2017-09-12 om 15 28 29

In Preferences->Keyboard->Keyboard shortcuts you can then map these services to keyboard shortcuts. I added the shortcuts for the context of my editor (Webstorm) and React Native debugger. In these programs I can now press Ctrl+D to show the developer menu and Ctrl+R to reload which works perfectly.

schermafbeelding 2017-09-12 om 15 26 49

@OrDuan

This comment has been minimized.

Copy link

@OrDuan OrDuan commented Oct 2, 2017

Wanted to share my solution because it is a life changer. Same as @joachimroeleveld but for ubuntu 16.04:

  1. Go to settings->keyboard->custom shortcuts
  2. Click the + button, name it "react reload"
  3. In the command field fill this: gnome-terminal -e "bash -c 'adb shell input keyevent KEYCODE_MENU && adb shell input keyevent 66 && adb shell input keyevent 66 '"
  4. Choose a shortcut by clicking on the "disabled" text(I used ALT+S)

Every time you will click ALT+S your app will reload :)
P.S
I added another shortcut with this command:
gnome-terminal -e "bash -c 'adb shell input keyevent KEYCODE_MENU'"

So I can reach the DevMenu easily.

@nonameolsson

This comment has been minimized.

Copy link

@nonameolsson nonameolsson commented Oct 9, 2017

Hey you all!

microsoft/vscode-react-native#481 (comment)

Next version of the React Native extension for VS Code has some awesome updates. It allows open the dev menu and reload app from VS Code. And bind those commands to keyboard shortcuts. This makes it really awesome.

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Oct 9, 2017

I am attempting to add slicejunk's three finger trigger of the dev menu to an existing project and I am getting:

Invariant violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object when using the following:

AppRegistry.registerComponent('osaPOS', (): any => );

I do have: import osaPOSentry from './app/App';
and this works: AppRegistry.registerComponent('osaPOS', () => osaPOSentry);
but of course the wrapper for detecting the three finger debug trigger is not going to work :)

@martsie

This comment has been minimized.

Copy link

@martsie martsie commented Nov 10, 2017

Just to add to this thread, on iOS you can enable assistive touch and have a floating button on the screen at all times that triggers the shake event. Useful if you have a dedicated iOS testing device that you're sick of shaking around.

+1 on having a long press to activate dev menu

@pvinis

This comment has been minimized.

Copy link
Contributor

@pvinis pvinis commented Nov 14, 2017

i have the assistive floating button for just shake for a month now. muuuch nicer than shaking all the time.

@ThaJay

This comment has been minimized.

Copy link

@ThaJay ThaJay commented Nov 16, 2017

Shaking is stupid, I agree.
Luckily my phone for compatibility testing on Android 4 has a menu button.
Thanks for the adb shell input keyevent KEYCODE_MENU suggestion, it's a nice workaround for my modern phone.

@guarani

This comment has been minimized.

Copy link

@guarani guarani commented Nov 18, 2017

I too couldn't get the developer menu to appear by shaking my iPhone.
As @pvinis pointed out, on iOS you can use AssistiveTouch to virtually shake the device.

Settings > Search for "AssistiveTouch" > AssistiveTouch > Switch toggle ON

You'll get a floating button on the screen. When you want to bring up the developer options, click it, then Device, More, Shake.

Works a charm.

@pstanton

This comment has been minimized.

Copy link

@pstanton pstanton commented Nov 23, 2017

adb shell input keyevent KEYCODE_MENU
works on windows :)

@danyim

This comment has been minimized.

Copy link

@danyim danyim commented Jan 22, 2018

@pstanton Confirming that this works on macOS as well. Thanks for the tip!

I found that this works for Android if you want to trigger a reload from the terminal:
adb shell input keyevent KEYCODE_MENU && adb shell input keyevent ENTER && adb shell input keyevent ENTER

@brunolemos

This comment has been minimized.

Copy link
Contributor

@brunolemos brunolemos commented Jan 22, 2018

@xemasiv

This comment has been minimized.

Copy link

@xemasiv xemasiv commented Feb 22, 2018

This sucks. When shaking my device I already destroyed my fcking cord.

@mastersam92

This comment has been minimized.

Copy link

@mastersam92 mastersam92 commented Mar 16, 2018

So.. how about iOS devices ?

-On android, we can use adb shell..
Is there any smth like this, but for iOS.. simple.. with ability open dev menu on device from PC ?

@mkhuda

This comment has been minimized.

Copy link

@mkhuda mkhuda commented Apr 7, 2018

By shaking the device, sometime caused disconnecting my USB cable from debugging and adb shell input keyevent KEYCODE_MENU didn't work for some Xiaomi device.
The solution is by long press the Overview button is worked for me. It's easy :D

@eurobob

This comment has been minimized.

Copy link

@eurobob eurobob commented May 13, 2018

On my Oppo a37, running colorOS 3, based off Android 5.1.1 the adb shell command is not working.

Was never interested in Android. Now all my suspicions of the fragmented landscape are validating themselves.

Fuck android. Fuck Hardware manufacturers with their bullshit versions. Fuck all this shit

@pstanton

This comment has been minimized.

Copy link

@pstanton pstanton commented May 14, 2018

don't feed the trolls. this is a issue tracking system.

@llezcano

This comment has been minimized.

Copy link

@llezcano llezcano commented Jun 27, 2018

On my Moto E I was able to change gesture to open the menu (to a home double tap).
Settings -> Buttons -> home double tap action and select "open/close menu"

@technoplato

This comment has been minimized.

Copy link

@technoplato technoplato commented Jul 14, 2018

One touch shake gesture for iOS: https://www.youtube.com/watch?v=WbUjMlxkfQ8

@technoplato

This comment has been minimized.

Copy link

@technoplato technoplato commented Jul 14, 2018

Here's a GIF of the setup as well: 2018-07-14 19_42_19

@pvinis

This comment has been minimized.

Copy link
Contributor

@pvinis pvinis commented Jul 15, 2018

yep I do the same. it's much nicer until we have a better way.

@facebook facebook locked as resolved and limited conversation to collaborators Jul 20, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.