CODEWITHSUNDEEP
androidreactjsreact-native
iceQ
iceQ

Reputation: 71

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

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.

Upvotes: 7

Views: 37739

Answers (12)

Collins Olix
Collins Olix

Reputation: 91

If this issue is something that happens after it's been working fine previously, you can consider connecting both devices to a different wifi router and running the build again. I have a small extender that brings up this issue whenever I connect my devices to it.

Upvotes: 1

Sahil bakoru
Sahil bakoru

Reputation: 662

If you are in ios device or simulator .

  1. Shake the device.(or click on simulator ->Device -> shake.)

  2. click configure bundler.

  3. Reset to default.

  4. run the app again.

Upvotes: 0

Bivin Vinod
Bivin Vinod

Reputation: 2710

This might help

adb kill-server
adb start-server
adb reverse tcp:8081 tcp:8081

Upvotes: 2

Barak
Barak

Reputation: 734

I used a usb cable with wifi and for me the solution was to use: 'localhost:8081'

  1. open the in-app Developer menu. shake your phone or press CMD/ctrl + M
  2. click on Settings
  3. click on Debug server host & port for device
  4. write 'localhost:8081'
  5. in terminal write 'adb reverse tcp:8081 tcp:8081'

Go back to the Developer menu and select Reload.

Upvotes: 7

kamalesh biswas
kamalesh biswas

Reputation: 1013

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

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

Upvotes: 0

andho
andho

Reputation: 1172

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

Upvotes: 8

Martinez Mariano
Martinez Mariano

Reputation: 540

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.

Upvotes: 1

HpDev
HpDev

Reputation: 2927

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"

Upvotes: -2

niltoid
niltoid

Reputation: 839

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)

Upvotes: 13

BradByte
BradByte

Reputation: 11093

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!

Upvotes: 4

Rajesh
Rajesh

Reputation: 556

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).

Upvotes: 1

Sriraman
Sriraman

Reputation: 7937

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

Upvotes: 8

Related Questions