How to reload in the Android emulator window when developing React Native Apps?

13
votes

When developing React Native Apps, I'm following the Getting Started steps at https://facebook.github.io/react-native/docs/getting-started.html#content and have reached the point of modifying the source file and reloading.

"Double tap R on your keyboard to reload, Shake or press menu button for dev menu".

Double tap R - where? The only reasonable place seems to be in the Android emulator window. When I do it there, nothing at all happens. I also tried it in the cmd window which is running the packager - nothing happened.

I see no way to "shake" the emulator.

Press menu button for dev menu - the only thing which looks like a menu button, on a toolbox looking sidebar beside the emulator (three dots), opens an Extended Controls window, which has no Reload button.

Feeling really stupid since I can't make it through Getting Started without getting stuck.

Host is Windows 7.

How to reload in the default Android emulator for react native app says ctrl-R, but that didn't work for me either.

6
androidreact-nativeemulation
Double Tapping R on your Laptop Keyboard Does indeed work. Please see my answer below. – Alan C. S.

6 Answers

26
votes

I think when they say double tap R, they mean on the keyboard within the emulator (i.e., the keyboard for the phone). But I usually reload using the dev menu. I think it would be Ctrl + M for Windows to access that.

7
votes

You can add keyboard for the emulator by doing these steps:

 * On Windows
 - Go to "C:\Users\<your name>\.android\avd\<your emulator name>.avd" folder
 - Edit file config.ini
 - Change hw.keyboard=yes (default is no)
 * On Ubuntu
 - ${HOME}/.android/avd/<avd name>/config.ini

Regards, LCD

2
votes

FOR WINDOWS USERS:-

  1. Go to AVD manager and click edit on the action column to your emulator Click the Edit Pencil to open configuration settings

  2. Click on "Show Advanced Settings" Button Show Advanced Settings

  3. Scroll to the bottom then check on the checkbox that says "enable keyboard Input" enter image description here
  4. Click the finish button at the bottom right corner then restart your Emulator.
2
votes

When developing React Native Apps, Double Tapping R on your Laptop Keyboard DOES infact work (after you have selected the Android emulator window).

However, you have to double tap R very quickly. If you don't double tap R quickly enough, the App will not reload and nothing will happen.

Steps to reload the App by double tapping R quickly in rapid succession

  1. Select the emulator window (e.g., by clicking on it with your laptop mouse).
  2. Now, on your Laptop Keyboard, Double tap R very quickly. (Basically press the R key two times very quickly).
  3. Low and behold, the App will reload.

NOTE: The above procedure can be used if you have not enabled Live Reloading. You can enable Live reloading as follows (In which case you don't need to do the above to reload the app):

Procedure to enable Live Reloading

  1. Click on the emulator window.
  2. Type Control M (Or Command M on MAC) and select "Enable Live Reload"
  3. Now, whenever you make code changes, the App will be rebuilt and will refresh automatically in the emulator window.

NOTE: Similarly, you can also enable Hot Reloading

1
votes

None of the answers posted here were working for me, so based on this answer I added this to package.json:

"scripts": {
  // ...
  "dev-menu": "adb shell input keyevent KEYCODE_MENU"
}

Then you just need to run in console:

npm run dev-menu
# or
yarn dev-menu
0
votes

on Ubuntu/Linux, Keep the app open in Emulator, and press CTRL+M. It will prompt you a menu with options like Reload, Hot reloading, etc. Choose reload and it will reload the page.enter image description here