[android] Could not connect to React Native development server on Android

When I run react-native run-android, it gives me the following error:

Could not connect to development server

Error screen

  • Package server is running and I can access it directly from browser on my mobile device.
  • My Android device is connected to computer and has debugging enabled (I checked using adb devices command).
  • My Android version is 4.4.4 so I cannot use adb reverse command.
  • I have set the ID address and port in Dev setting.
  • USB debug is on.
  • I use Windows 7.

How to fix this error?

This question is related to android react-native

The answer is


I met this question too in native and react-native pro, my solution was:

  1. open npm server with npm start
  2. run native project with Android Studio
  3. transmission network request with adb reverse tcp:8081 tcp:8081
  4. when you need to reload the page, just input: adb shell input keyevent 82

just keep it in order.

P.S. if you ran a fail project, just run adb kill-server


In my case, running on a Macbook, i had to turn off my firewall, thus allowing incoming connections from my android. RN v0.61.5


I got the same problem and resolve it by deleting node module package and then again install yarn. Simply on some changes we need to clear our.


Starting with Android 9.0 (API level 28), cleartext support is disabled by default. we can use android:usesCleartextTraffic="true" this will work but this is not recommended solution. For Permanent and recommended Solution is below:

Step 1 : create a file in android folder app/src/debug/res/xml/network_security_config.xml

Step 2 : add this to network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <!-- deny cleartext traffic for React Native packager ips in release -->
  <domain-config cleartextTrafficPermitted="true">
   <domain includeSubdomains="true">localhost</domain>
   <domain includeSubdomains="true">10.0.2.2</domain>
   <domain includeSubdomains="true">10.0.3.2</domain>
  </domain-config>
</network-security-config>

Step 3 : Apply the config to your AndroidManifest.xml

<application
 android:networkSecurityConfig="@xml/network_security_config">
</application>

Run this and it worked for me

adb reverse tcp:8081 tcp:8081

Basically this error comes when npm server is not started.

So at first check the npm server status, if it's not running then start npm with command npm start and you can see in terminal:

Loading dependency graph done.

Now npm is started and run your app in another terminal with command

react-native run-android

If you are trying to debug app in your physical android device over wifi using a windows machine, then the device may not be able to access the port of your pc or laptop, you have to make the port accessible. this involves two steps:

  1. First create a rule in firewall. for doing this follow the following steps:

    • open run dialog
    • type wf.msc
    • click on inbound rules
    • click new rule on right hand side
    • select port from pop up menu and click next
    • select tcp port and specific local ports and enter the port number like 8081 (default)
    • allow the connection
    • select all in profile section
    • give some appropriate name and description
    • click finish
  2. you have to make your pc accessible to outside, for doing this follow the following steps:

    • open network and sharing centre from control panel
    • change adapter settings
    • select your wifi network
    • right click, properties
    • click on sharing tab
    • check all the checkboxes

You are good to go, now try running react-native run-android.


Easiest for MAC. Get ip address of your wifi network via ipconfig getifaddr en0. Then write that ip to your DEV settings -> Debug server host & port for device adding :8081 example. 192.21.22.143:8081. Then reload. That's it


In my case the problem was with Android security policies. According to the documentation:

Starting with Android 9.0 (API level 28), cleartext support is disabled by default.

But the application tries to access Metro Bundler through HTTP, right? And that's why it can't. In order to enable cleartext traffic, open your AndroidManifest.xml and add android:usesCleartextTraffic="true" to <application> node.

For example:

<application
    android:name="com.example.app"
    android:allowBackup="false"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:usesCleartextTraffic="true">

You can find more solutions in this SO: https://stackoverflow.com/a/50834600/1673320. OP's problem is different, but similar.


if adb reverse tcp:8081 tcp:8081 this dosent work , You can restart you computer it'll work , because your serve is still running that's wrok form me


This is applicable to Android 9.0+ according to the Network Security Configuration. Well, so after trying all possible solutions I found on the web, I decided to investigate the native Android logcat manually. Even after adding android:usesCleartextTraffic="true", I found this in the logcat:

06-25 02:32:34.561 32001 32001 E unknown:ReactNative: Caused by: java.net.UnknownServiceException: CLEARTEXT communication to 192.168.29.96 not permitted by network security policy

So, I tried to inspect my react-native app's source. I found that in debug variant, there is already a network-security-config which is defined by react-native guys, that conflicts with the main variant.

There's an easy solution to this. Go to <app-src>/android/app/src/debug/res/xml/react_native_config.xml Add a new line with your own IP address in the like:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
    ***<domain includeSubdomains="false">192.168.29.96</domain>***
  </domain-config>
</network-security-config>

As my computer's local IP (check from ifconfig for linux) is 192.168.29.96, I added the above line in ***

Then, you need to clean and rebuild for Android!

cd <app-src>/android
./gradlew clean
cd <app-src>
react-native run-android

I hope this works for you.


For me i have uninstalled a package that i recently installed and the project ran again on my physical device using the following command "npm uninstall recentPackageName" hope this helps :)


For me all done as mentioned above still it was not working then I followed below steps and working like charm

Go Window security => Select Firewall and network protection => Turn off private networkenter image description here


Default metro builder runs on port 8081. But in my PC, this port is already occupied by some other process (McAfee Antivirus) So I changed the default running port of metro builder to port number 8088 using the following command

react-native run-android start --port=8088

This resolved my issue and the app works fine now.

PS: You can check whether a port is occupied or not in windows using "Resource Monitor" app. (Under "Listening Ports" in "Network" tab). Check out this link for detailed explanation: https://www.paddingleft.com/2018/05/03/Find-process-listening-port-on-Windows/


and first of all I appreciate you for posting your doubt. It's mainly because maybe your expo or the app in which you run your react native project may not be in the same local connected wifi or LAN. Also, there is a chance that there is disturbance in your connection frequently due to which it loses its connectivity.

I too face this problem and I personally clear the cache and then restart again and boom it restarts perfectly. I hope this works for you too!


My solution is modify or make new AndroidManifest.xml in android/app/src/debug:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>

I am using React Native version: 0.61.5


In my case, my emulator has a proxy setting, after turning it off everything works fine.


This is most probably a firewall issue. If someone using ubuntu faces this issue , then you can use

sudo service iptables stop

to disable the firewall for the port to be accessible


To add to goldylucks's answer, you can use IP 192.168.0.10 if that is the IP of your PC running the React Native packager.

You may need to open your firewall as well.

In Ubuntu 18.04, you can get your IP by:

ip -c addr show

You will see your IP in there, something like: inet 192.168.0.10/24 brd 192.168.0.255 scope global dynamic noprefixroute enp0s25 (notice the 192.168.0.10 in my sample).

Then, you could open port 8081 in your firewall, something like:

sudo ufw allow 8081

It will be using TCP, so make sure TCP is open on port 8081.

Then you can follow goldylucks's answer and goto Dev settings and enter 192.168.0.10:8081 or whatever IP you need.

You can test it from the browser on your device. While the packager is running from your PC, navigate to http://192.168.0.10:8081 from your mobile device and make sure it works. It will show something like "Packager running". It will be clearly working or failing.

Goldylock's answer excites me because it solves the issue very nicely if you are having problems with that error messages. It sucks to have to rebuild the app all the time or worse yet, delete the APK off your device and then build again.

As such, you should probably be using wifi as part of your dev strategy.


** Ubuntu Try running these commands both in your root folder only:

  1. sudo npm start --- this will pause automatically after saying -- Loading Graphs, done (something like this) ; when this is done -open another terminal

  2. react-native run-android


If still the issue prevails, delete your build folder in android / ios execute this command and then execute the above mentioned commands in the same order

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android**

Make sure NPM server is running. Else run it again. It will solve the issue.


Solution for React-native >V0.60

You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding.

Open a terminal and type ipconfig getifaddr en0 For MAC

Make sure your laptop and your phone are on the same Wi-Fi network. Open your React Native app on your device.

You'll see a red screen with an error. This is OK. The following steps will fix that.

  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. On popup Type your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
  5. Go back to the Developer menu and select Reload.

DONE


None of the above solutions worked for me.

I just opened Dev menu by clicking Ctrl+M and then clicked on change bundle location and added my machine IP followed by port.


After trying all the most upvoted answers and failing to make it work, I figured that my Android Simulator was on Airplane mode. Quite silly but posting this so it could save some time.

P.S. I had a safe reboot on my Simulator before this, which is probably the cause why my simulator booted in Airplane mode


Found the issue with Android X device.

For Android API 28 and above

In network_security_config.xml with cleartextTrafficPermitted="true"

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    ....
  </domain-config>
</network-security-config>

Then, reload JS


We faced this issue, In order to fix this, solution is dead simple is below.

  1. Cancel the current process of“react-native run-android” by CTRL + C or CMD + C
  2. Close metro bundler window command line which opened automatically.
  3. Run the command again, “react-native run-android”.

Basically this error tells that your current build got failed due to reasons like Code issue or dependency issue.

Click here for more details


When I started a new project

react-native init MyPrroject

I got could not connect to development server on both platforms iOS and Android.

My solution is to

sudo lsof -i :8081
//find a PID of node
kill -9 <node_PID>

Also make sure that you use your local IP address

ipconfig getifaddr en0

I've added <uses-permission android:name="android.permission.INTERNET" /> to debug/AndroidManifest.xml and it started working! I've removed it from main/AndroidManifest.xml and forgot to add in debug.

ReactNative version is 0.61.2


n my case with Android 4.4.2 had to do some additional steps: (Make sure rn server is running npm start, delete app-debug.apk from android/app/build/outputs/apk , uninstall from android if previously installed and run following commands from root folder)

1_ create dir mkdir android/app/src/main/assets
2_ create file index.android.js which is a clone of index.js cp index.js index.android.js
3_ react-native link
4_ curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
5_ react-native run-android