reactjs – React-native: "could not connect to development server"- android app-ThrowExceptions

Exception or error:

I am following guide on starting react.js.
http://code.tutsplus.com/tutorials/creating-a-dictionary-app-using-react-native-for-android–cms-24969
I installed node, react, android studio and genymotion emulator. When I get to the part of building app in emulator, I get this error:

error build image

I activated USB debuggin tool. When I try to run adb devices command in command prompt, it gives me nothing.

How to solve:

I would suggest 2 steps (both were required to solve my issue)

  1. Turn off your local firewall. On osx, go to “Security & Privacy” -> “Firewall” -> Click lock icon -> “Turn off Firewall”

  2. The default port 8081 may be in use (even if the lsof command suggests otherwise). Try another port on start:
    react-native start --port=8088

    And on your device, shake it to get the dev menu, tap “Dev Settings” -> “Debug server host & port for device” -> enter “XX.XX.XX.XX:8088” (where x’s are your local IP)

###

On Android 9, you will need to add the follwing in application tag of ./android/app/src/debug/AndroidManifest.xml

android:usesCleartextTraffic="true"

https://github.com/facebook/react-native/issues/15388#issuecomment-505187651

###

It looks like the server is not accessible from the phone.

Possible causes:

  • Server might not be running
  • The IP address might be wrong
  • Phone cannot access the IP address

Solution:

If you are connecting the phone via USB. Reverse TCP the port number 8081 by running the following command

 adb reverse tcp:8081 tcp:8081

###

Depending on where I’m building from, I’m not able to use my local IP to run the a React Native app (typically public networks like coffee shops). The best way I’ve been able to figure it out is to use a tool called ngrok to make a public tunnel to your localhost.

Once you’ve installed it, just run ngrok http 8081 (or whatever port your using for the packager). It will spin up the tunnel and give you a url (like http://123j2h3s.ngrok.io). On the app, shake to open the developer settings, touch Dev Settings, then under Debugging touch Debug server host & port for device and enter the ngrok url there (no need to add http://).

Hope this helps!

###

You need to follow below commands to get the npm start again :

1) sudo lsof -n -i4TCP:8081 | grep LISTEN

2) kill -9 (enter the process id here returned from above command).

###

I was having a similar issue with my emulator in Ubuntu 16.04. In my case the problem was that node packager wasn’t running.

To check is packager is running easily you can open the browser and enter

http://localhost:8081/

You must see “React Native packager is running.”

If you dont, then you can start packager from console running

react-native start

If you get an error like

” ERROR watch /your/project/path/android/app/build/intermediates/incremental/mergeDebugResources/merged.dir/values-ru ENOSPC”

Then run first

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Then run react-native start again and press the letter R twice in the emulator to reload.

###

add android:usesCleartextTraffic=”true” to your application, in the manifest

 <application
       ....
       android:usesCleartextTraffic="true"
       android:theme="@style/AppTheme">

###

To run with local server, run the following commands under your react-native project root directory

  1. react-native start > /dev/null 2>&1 &
    2 .adb reverse tcp:8081 tcp:8081

To run without a server, bundle the jsfile into the apk by running:

1.create an assets folder under android/app/src/main
2. curl “http://localhost:8081/index.android.bundle?platform=android” -o “android/app/src/main/assets/index.android.bundle”

Leave a Reply

Your email address will not be published. Required fields are marked *