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?

androidreact-native

cityvoice

Reputation: 2651

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?

Upvotes: 168

Answers (30)

Ajmal Hasan

Reputation: 1569

The usesCleartextTraffic="true" is already set in the AndroidManifest.xml for the debug configuration. This ensures that HTTP (cleartext) traffic is permitted, which is essential for connecting to the React Native Metro Bundler during development.

Since this configuration allows cleartext traffic, the network-security-config is not required for debugging. You can safely remove the network-security-config file and its reference, as the manifest already permits cleartext traffic.

Upvotes: 0

karthik mano

Reputation: 111

Step 1: Run this command - adb reverse tcp:8081 tcp:8081

Step 2: To resolve the issue, press Cmd+M in the emulator, choose Change Bundle Location, enter localhost:8081, and click OK.

Upvotes: 0

Sufiyan Khan

Reputation: 37

Just ran through this problem in my android emulator. After going through many solutions it did not work for me. I just tried the following and it worked.

Close the emulator if its running then Go to android studio -> virtual device manager -> Click on 3 dots / more options for emulator then click on wipe option to wipe the emulator data. Then restart the emulator and build the project. This worked for me. Thank you.

Upvotes: 0

Tukun33

Reputation: 27

Try to go to the developer settings of your device and select debug application, then return to cli and press a to run-android,it is working for me

Upvotes: 0

Shivam Shukla

Reputation: 121

I have 2 solutions for this

First Solution - Use Adb Command :

adb reverse tcp:8081 tcp:8081

And Rebuild Your Project, And Start Your Metro bundler

npx react-native start --reset-cache

Second Solution - Change Bundle Location

Step 1:(MacOS) Command + M(For Android) Command + D(IOS) -Open React-Native Dev menu

Step 2: Change Bundle Location

Step 3: <ip-address:8081>

And Rebuild Your Project, And Start Your Metro bundler

 npx react-native start --reset-cache

Hope This Help You !

Upvotes: 3

Carmine Tambascia

Reputation: 1928

IF YOU ARE USING EXPO and it used to connected and suddenly getting the generic error "Something went wrong" many time, with no further hint, meanwhile tried everything else, and the setting are all good, the reason is that your expo running on device does not match anymore with the one on the project, maybe you are running an old project to bump up or similar(I did finally got this message once I tried to connected the app with the direct connection as from docs.

Hope this would help others avoid waist time.

Upvotes: 0

Vladimir Dimitrov Dimitrov

Reputation: 71

ifconfig

will give you your ip address

copy that Ip address looking something like 192.168.1.100

cmd + M

will show the debug menu for android

(in case it doesn't work you can always use the shell)

adb shell input keyevent 82

Click Choose Bundle Location and paste your IP address followed by the port 8081 is the default one... (should look something like this)

192.168.1.100:8081

Click OK

Upvotes: 6

jperl

Reputation: 5112

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.

Upvotes: 5

Edward Tan

Reputation: 954

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.

Upvotes: 3

NAVNEET CHANDAN

Reputation: 289

Just open cmd/powershell, and inside your project directory run the following command

react-native start

Upvotes: -1

zvv

Reputation: 473

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

Upvotes: 1

Mike Victoria

Reputation: 256

If did not work all of these answer's just delete the node_modules/ and npm i --save

Upvotes: -1

utsav

Reputation: 41

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.

Upvotes: 2

Devorein

Reputation: 1319

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

Upvotes: 1

Gabriel Arghire

Reputation: 2360

RESTART YOUR PHONE

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

Upvotes: 1

Rajan rek

Reputation: 390

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

Upvotes: 3

Mudassir Ali

Reputation: 8041

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

Upvotes: 1

Harsh Patel

Reputation: 6810

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

Upvotes: 5

Amit

Reputation: 2715

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

Upvotes: 5

Julia Williams

Reputation: 113

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.

Upvotes: 9

Jim

Reputation: 2312

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

Upvotes: 0

Gagan Saini

Reputation: 1

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.

Upvotes: 0

Krishna Sailesh

Reputation: 185

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/

Upvotes: 17

Tarun konda

Reputation: 1880

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>

Upvotes: 66

Daniel Le

Reputation: 191

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

Upvotes: 7

yoAlex5

Reputation: 34175

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

Upvotes: 0

Denys Klymenko

Reputation: 413

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

Upvotes: 5

Nagibaba

Reputation: 5338

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

Upvotes: 3

user8572385

Reputation: 605

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

Upvotes: 0

Neil Agarwal

Reputation: 957

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.

Upvotes: 25

Could not connect to React Native development server on Android

Answers (30)

RESTART YOUR PHONE

Related Questions