'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

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?

Solution 1:^[1]

From the Docs: http://facebook.github.io/react-native/docs/running-on-device.html#method-2-connect-via-wi-fi

Method 2: Connect via Wi-Fi

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 /sbin/ifconfig to find your machine's IP address.

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.

Open the in-app Developer menu.

Go to Dev Settings ? Debug server host for device.

Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).

Go back to the Developer menu and select Reload JS.

Solution 2:^[2]

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.

Solution 3:^[3]

Run this and it worked for me

adb reverse tcp:8081 tcp:8081

Solution 4:^[4]

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>

Solution 5:^[5]

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.

Solution 6:^[6]

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/

Solution 7:^[7]

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.

Solution 8:^[8]

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

sudo npm start --- this will pause automatically after saying -- Loading Graphs, done (something like this) ; when this is done -open another terminal
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**

Solution 9:^[9]

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

Solution 10:^[10]

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

Solution 11:^[11]

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.

Open the in-app Developer menu. shake your phone or press CMD/ctrl + M
Click on Settings
click on Debug server host & port for device
On popup Type your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
Go back to the Developer menu and select Reload.

DONE

Solution 12:^[12]

What solved the problem for me was to open up android studio, go into AVD manager, actions > Stop and then Cold Boot Now.

Once the device booted up, run react-native start and react-native run-android as usual.

Solution 13:^[13]

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

Solution 14:^[14]

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.

Solution 15:^[15]

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

open npm server with npm start
run native project with Android Studio
transmission network request with adb reverse tcp:8081 tcp:8081
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

Solution 16:^[16]

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

Solution 17:^[17]

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:

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

Solution 18:^[18]

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

Solution 19:^[19]

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

Solution 20:^[20]

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

Solution 21:^[21]

RESTART YOUR PHONE

That's all I did and the app bundled successfully.

Solution 22:^[22]

I fixed the issue on windows by setting the IP address of my local development server in my android device.

Solution 23:^[23]

This error occurs because your Android Virtual Device is not connected to development server. So, check that your Android Virtual Device is connected to internet or not. You can do that by simply checking WiFi connectivity symbol and Mobile Data symbol.

Solution 24:^[24]

For me, this happened when I build from Android Studio instead of the command line using react-native run-android

Solution 25:^[25]

This issue has happened several times to me already. It's working one minute, and then the next minute it stops working without any change on my part. The 2nd IP in the error is usually 10.0.2.x instead of 192.x.

I've went through all the answers without being able to resolve the issue.

Ultimately, the one thing that has always worked is to go back to Android Studio, open AVD, and then select the Simulator in question. Do a Duplicate to create another copy of the simulator, and then everything will magically work again.

So my guess is that something inside the simulator folder got corrupted.

Solution 26:^[26]

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

Solution 27:^[27]

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!

Solution 28:^[28]

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

Solution 29:^[29]

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

Solution 30:^[30]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	goldylucks
Solution 2	itachi
Solution 3	Yoosaf Abdulla
Solution 4	Rizki Andrianto
Solution 5	Neil Agarwal
Solution 6	Krishna Sailesh
Solution 7	Julia Williams
Solution 8	Bsquare â„¬â„¬
Solution 9
Solution 10	Daniel Le
Solution 11	Harsh Patel
Solution 12	jperl
Solution 13	Nagibaba
Solution 14	agm1984
Solution 15	CÃ phÃª Ä‘en
Solution 16
Solution 17	CÃ phÃª Ä‘en
Solution 18	Abhishek Sengupta
Solution 19	Mudassir Ali
Solution 20	Rajan rek
Solution 21	Gabriel Arghire
Solution 22	Devorein
Solution 23	utsav
Solution 24	zvv
Solution 25	Edward Tan
Solution 26	Mayank Chaurasia
Solution 27	Rishav Kumar
Solution 28	Mahdi Farhani
Solution 29	CÃ phÃª Ä‘en
Solution 30	user8572385

'Could not connect to React Native development server on Android

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]