React Native: Unable to download JS bundle from the Dev Server

Question

I am trying to run basic AwesomeProject app that react native have by default, on Windows 7 machine through Genymotion. The Virtual Devices that i have tried is Nexus 7 4.2.2 and Nexus 6 5.1.0.

I am using Nodejs (4.3.0)

I followed below steps to overcome JS bundle issue, but still no success:

• started Virtual device in Genymotion
• react-native run-android //deployed the app on virtual device
  • then red screen appears with an error message
• react-native start //started the server

• Updated Debug server host for device with my machine IP-address:8081

  • Visited back to app screen and clicked Reload JS, but no success

• I have also tried re-installing the watchman, as many people on related post suggested to do so, but still no success.

Moreover, I have seen another solution on React.js official docs, ie executing this command " adb reverse tcp:8081 tcp:8081 " and then starting the server and updating the IP-address and port respectively. But this solution is useful if i test the app on my personal device rather than emulator.

Any suggestion or alternate solution is really appreciated.

Thanks.

Answer 1

OK!!

First of All you need to do react-native start.

When Application deployed on device, you can tap the Menu button or shake your Cell to load the Menu, Most modern phone dont have the menu button. When it Loads Find Dev Settings. In the Debugging below, Click Debug Server host and port for device Put your System Local Network IP assigned to you by DHCP. You can do ifconfig on ubuntu to see your IP.

Put your IP address like this 192.168.xx:8081 Do a reload JS.

You will be all up and set. :)

Important : Make sure that your Phone and System is on Same WIFI.

Answer 2

Start the packager:

react-native start

Go to this url in your browser

http://localhost:8081/index.android.bundle?platform=android

Once that loads it should give a better error response than the one you have.

Answer 3

当我在连接到我的工作 VPN 时运行 react native 打包程序时遇到了这个问题，一旦我断开我的工作 VPN 连接，打包程序就能够为我的应用程序选择正确的 IP 接口。

Answer 4

The problem I encountered was that my port 8081 was already in use by another process and therefor my react native process wouldn't start.

using lsof -n -i4TCP:8081 | grep LISTEN lsof -n -i4TCP:8081 | grep LISTEN pointed me in the correct direction