"Fetching JS Bundle" Monstrously Slow

Question

I've been trying to create basic react-native Android apps on my Windows machine for some time now. Even when deploying the most basic "Welcome to React Native" app, I experience extremely long wait times while my emulator prints: "Fetching JS Bundles". These times are well past 4 minutes.

I've tried a variety of emulators, enabled HAXM, enabled gradle, tried the Intel_x64, Intel_x86, Google APIs for x64 / x86 and still the slow-down.

Any suggestions on what else I can try?

Answer 1

I solved this by NOT using adb to reverse my TCP port 8081.

UPDATE 2: I thought that I solved this by using my public IP/host name, but it turns out that react-native run-android re-creates the adb reverse every time you execute it. See UPDATE 1 at the bottom for relevant links.

ORIGINAL:

When I originally setup my machine for React Native, I ran the following command to let the React app communicate with the React Packager: adb reverse tcp:8081 tcp:8081. I observed that every time I ran react-native run-android, my emulator would stay stuck on "Fetching JS Bundle for a long time".

To fix the problem with the emulator on Windows:

1. Access the Developer Menu (in-app, in the emulator) by simulating a device shake. Open Additional Tools -> Accelerometer and press Play on the bottom of the window, beneath Recorded data: shake.

2. Click Dev Settings (last menu item).

3. Click Debug server host & port for device and set the value to the public IP/Name:Port of my PC on the network. (e.g. devpc.mynet.local:8081 or 192.168.1.99:8081).

4. Close the react app.

5. Run adb reverse --remove-all to undo my previous adb reverse tcp:8081... command.

6. Restart everything from my pc by running react-native run-android. Observe that this time, the Fetching JS Bundle step executes almost immediately.

I just discovered this workaround for my own environment. I have not tried it on any actual devices. Furthermore, I wonder if there is a way to specify this from code so that it works correctly the first time (instead of having to specify the public IP/Name of my computer by running the app on the device and setting it in the Dev Settings there...)

Official Documentation:

• https://facebook.github.io/react-native/docs/running-on-device-android.html

UPDATE 1: Here is some relevant reading with regards to configuring the debug_http_host device preference.

• Issue 2727 with possible workaround - configuring via code
• Issue 1429 with iOS specific workaround
• Pull request 1546 that should have made this configurable but was never accepted
• Product Pains complaint to make this configurable

Answer 2

Spent several days trying to boost the speed of this emulator and finally got everything working very fast and smooth.

You need to have the latest version of node. If it's out of date it will be monstrously slow.

Now, if you find yourself having to close the node server and re-run "react-native run android" after every little change you make, then your "file watcher" is never being instatiated. In order to make the file watcher start up, you should: (1)Edit yourAwesomeApp\node_modules\react-native\packager\react-packager\src\node-haste\FileWatcher\index.js (2) and change MAX_WAIT_TIME to a larger value (like 600000). Node will only wait for filewatcher to start up for this amount of time, so if the value is too low node just skips over it and continues fetching the bundle. With the file watcher going, you can simply double tap R to reload the little changes to code you make.

Now, you will need to be able to see all your console.log(). In order to do that in Genymotion (the emulator that I recommend, even free one) press ctrl M with your app running and click 'Debug JS Remotely'. That will open a tab in your web browser (http://localhost:8081/debugger-ui). Inspect this page to bring up the console!