React native ERROR Packager can't listen on port 8081

Question

Have set up React native on my Windows box and it continually gives me this message when running react-native start:

ERROR Packager can't listen on port 8081

Ok, so I change it per instructions to:

react-native start --port=8088

This works great and I receive this:

[12/24/2016, 10:03:33 AM]         HMR Server listening on /hot
React packager ready.
[12/24/2016, 10:03:41 AM] <START> Initializing Packager
[12/24/2016, 10:03:41 AM] <START> Building in-memory fs for JavaScript
[12/24/2016, 10:03:41 AM] <END>   Building in-memory fs for JavaScript (103ms)
[12/24/2016, 10:03:41 AM] <START> Building Haste Map
[12/24/2016, 10:03:41 AM] <END>   Building Haste Map (64ms)
[12/24/2016, 10:03:41 AM] <END>   Initializing Packager (221ms)

So as instructed I then run this:

C:\ReactProjects\AwesomeProject>react-native run-android

And get this:

JS server not recognized, continuing with build...
Running C:\Users\<user>\AppData\Local\Android\sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
JS server not recognized, continuing with build...
Running C:\Users\<user>\AppData\Local\Android\sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
.
.
.
BUILD SUCCESSFUL
Total time: 19.304 secs
Starting the app on emulator-5554 (C:\Users\<user>\AppData\Local\Android\sdk/platform-tools/adb -s emulator-5554 shell am start -n com.awesomeproject/.MainActivity)...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }

Sadly the emulator then gives me:

“Could not get BachedBridge, make sure your bundle is packaged correctly”

So there are instructions that state you must change the port on the emulator, but I am using the Nexus 5 running Marshmellow and cannot find that setting:

     You will also need to update your applications to load the JavaScript bundle
     from the new port. Open the in-app Developer menu, then go to Dev Settings → Debug
 server host for device and replace 8081 with your port of choice.

Anyone have an idea of how to set the emulator up to recognize the packager?

Solution

Sadly the Rect native error messages are not that user friendly. :(

The error “Could not get BachedBridge, make sure your bundle is packaged correctly” means your device is not connected to your system.

Basically, when we start the react-native it deploy stuffs into the mobile/emulator, but when the app runs in mobile/emulator it does not know from where it need to pull code stuffs eg, assests, bundle packages etc.

So, we need to tell emulator that, boss please pick all your stuffs from blahblah server at blah blah port. We have to do exactly what you have mentioned in the question.

Open the in-app Developer menu, then go to Dev Settings → Debug server host for device

Ok so we need to achieve 2 things:

1. Open Developer menu in emulator:

   Developer menu is a modal pop up with bunch of options like, Reload, Debug JS Remotely, Enable Live Reload, Enable Hot Reload, Toggle Inspector ... , Dev Setting (this is the one we are interested in). There are number of ways to do that (mentioned below), see what works for you

   • If you are Mac user simply press CMD + M. It will open up a pop up for you
   • If you are a non Mac try CTRL + M
   • For some people pressing F2 worked. "fn + F2"
   • If you are frustrated and nothing is working try running below command in terminal (obviously while the emulator is up) Running on Device:

   adb shell input keyevent 82
   

2. Set up Dev Settings -> Debug to server host and port for device**

   After opening Developer Menu navigate to "Dev Settings -> Debug to server host and port for device".

   This place is the holy grail for solution to your problem.

   Get your machine IP address and port where you have started react-native (i.e. 8088) and enter here. It will look something like "192.168.1.105:8088". Checkout the image link here

   Click OK and reload the app (by pressing R twice or by clicking Reload in Developer Menu) and voila you are up.