Could not connect to development server on android emulator and on real device

[CodeWithShipraJain]

Is this a bug report?

Its an issue i am facing while running the normal Awesome Project on my system

Have you read the Contributing Guidelines?

Yes

Environment

1. react-native -v: 0.47.1
2. node -v:8.2.1
3. npm -v:4.1.2
4. yarn --version:

Then, specify:

• Target Platform:
  Android

• Development Operating System:
  Windows 7

• Build tools:26.0.0-rc2

Steps to Reproduce

(Write your steps here:)

1.Open command prompt in Administrator Mode
2.run command: cd
3.run command: react-native init
4.run command: cd
5.run command: react-native run-android
this makes the package server run automatically on port 8081. But I am not able to access the package server from browser on the machine and the mobile.
I tried using http://:port/index.android.js
http://localhost:port
http://127.0.0.1:port

=> I was getting the red screen on both mobile and the emulator with following message:
I tried running the project on real device and on emulator. On Both I got error: "Unable to load script from assets 'index.android.bundle' Make sure your bundle is packaged correctly or you're running a package server'.

reloading i get the error: "Could not connect to development server."

Then i set the host and port number on development setting on both and got the error "Could not connect to development server."

Expected Behavior

The project is expected to run on emulator and phone without any error.

But instead i got the error and i have tried many times and i am getting the same error repeatedly and in same pattern.

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[gelove]

Still an issue with:
react 16.0.0-alpha.6
RN 0.44.3
node 8.2.1
npm 5.3.0
XCode 8.3.3
iOS 10.3 simulator

[CodeWithShipraJain]

So do i need to work on previous version of these?

[yanftch]

I meet this,and can not handle it....

[yanftch]

something wrong with the latest version?

[hramos]

Is the packager running? You should see it come up when you run react-native run-android. You can also start it up by itself using react-native start. I would like to figure out if the issue here is that the packager is not starting up at all.

[CodeWithShipraJain]

Yes the packager is running. When i run the command react-native run-android, node js window is opened stating that the packager is running on 8081 and "Loading Dependency Graph. Done"
But when i try the "localhost:8081/index.android.js" on the system browser i see the error "This site can’t be reached".

But when i create normal nodejs api and test it on the browser it gets opened successfully.

[otoinsa]

I have the same issue. iOS simulator works fine, btw

Whenever I try to make a new project in RN, it is as if I've hit a wall of new bugs each time.
Next try next month again, I guess...

[zhiyingzzhou]

same issue. anyone resolve it?

[ashafizullah]

Try to run:
adb reverse tcp:8081 tcp:8081
on your command prompt and re-run your project after that.

[CodeWithShipraJain]

@ashafizullah: I have tried that too; but still no luck.

[kevinresol]

Happens on my device as well.

I have usb connected, adb reversed and packager running.

When open the following link on the device's browser, it does load the bundle successfully:

http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false

So I suspect there is something wrong within the Java code itself.

[chiragpurohit71085]

is there any solution on this? I am also stuck here. On IOS project works perfectly

[hellomaya]

I am having seen the same issue, and that's all because the android app don't have this permission:

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

So make sure your android code is able to access remote url from your app.

[cxrbon16]

i have same problem cant anybody solve that?

[pushpanathank]

I am also facing the same problem, if any one find the solution, please post it. Thanks.

[SoftwareMark]

i have same problem, i do adb reserve tcp:8081 tcp:8081 and then do ensure same network computer and mobile ,and i do dev setings IP:8081 ,but could not connect to development server ,who is solved this issue ,very thank you

[Dimon70007]

Hi people. I have used console.dir() in react-native and get this behavior. And i think that it is normal because console.dir() is a browser.window function and no browser having in react-native. After removing console.dir() - my app has worked.

[diegoddox]

I'm facing the same issue on a Mac, any news?

[guilhermelirio]

i have same problem in device test.

Android 4.1.2

[Dimon70007]

Hey. Guys, who have android version less then 5.0, have you try to use wifi connection instead usb? My app starts normally on android 4.3 (Huawei mediapad T1 8.0) after it has been connected through wifi

[WillyRamirez]

had this problem, for me it turned out to be port 8081 that was being used by postgresSQL

[ducpt2]

I have same problem today.
Android 4.4.2 and 6.

[ghariharan]

Same issue here as well. Happens everytime I reopen my Mac after a short sleep time. Has anyone solved this?
adb reverse tcp:8081 tcp:8081 - this doesn't seem to work for me

[Nshul]

My error was resolved by changing the inotify limits .
This link helped https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

[tranthangbk55]

the same this problem,help me

[blainemuri]

I'm also having the same issue trying to run it from localhost. It works in browser and on the emulator, but not on the physical device

[callagga]

Same issue here for Android, from both device and emulator. Can't seem to connect to the packager. Doing the "adb reverse ..." for physical device. Also running on custom port so doing "react-native start --port 8088", then setting the IPaddress:8088 in the dev setting in the app.

QUESTION: Is there a way to fault find connectivity between the app (on my android device) and packager running on Windows PC?

That is all I see is the "can't connect" type error indications, and note no log messages in the packager. \

UPDATE: running "adb reverse --list" showed I had two reverse entries. It seems after I corrected this things worked. I've still got a "white page" only, however I guess that's another issue..

[Ilario17]

Same issue with Android, iOS works...

[johnhaup]

This was happening to me because I had the Debugger running and connected to another device. So the iOS simulator connected to the debugger was blocking the Android device from connecting to the packager. Stopping remote debugging on the iOS simulator allowed the Android device to connect, or you could also start debugging remotely on the Android device as well.

[lawsonk1215]

This worked for me on Windows 10: (After setting up the debug server host & port.. )
I checked my firewall settings (Windows Firewall>Allow an app or feature through Windows Firewall) and found out that there are TWO Node.js apps but one of them isn't allowed through the firewall! Checked the box and saved then everything worked as it should!

This was my issue as well, thank you!

[hladf]

I solved with:

https://www.youtube.com/watch?v=XhiE0HEiYd4

https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows

but.... when I reload the app in emulator, crash again and shows the message:
COULD NOT CONNECT TO DEVELOPMENT SERVER

So I tried to add node.js and genymotion player.exe in firewall and restart all (geny, react), and works again...

[769062159]

ctrl+Win cmd 命令行 ipconfig查找ipV4地址 我的是192.168.0.111,之后我将192.168.0.111：8081放在

成功解决!

[Krutarth-Dave]

I added android:usesCleartextTraffic="true" to AndroidManifest.xml at the <application ... tag and rebuilt the app. After that, it started to load from dev server normally.

This fixed it. Thanks a ton.

[RudskikhIvan]

Have the same problem only on real android device.
Solution:

1. Add file android/app/src/main/res/xml/network_security_config.xml

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

2. Add line to android/app/src/main/AndroidManifest.xml

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

[fatalstar]

Find the cure .
This issue helped me resolve the problem in following steps.

1. (in project directory) mkdir android/app/src/main/assets
2. 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
3. react-native run-android

https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows

[vibhuranjan]

It worked for me after running adb reverse tcp:8081 tcp:8081. Earlier it was opening package server window but nothing was happening after Loading dependency graph, done. message.
Now everything works fine after running above mentioned command.

[regalstreak]

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.

[rafidamr]

What I have done: (working on emulator Android Pie 9)

1. Set IP and port on Debug server host & port for device by clicking Ctrl+M and Dev Setting in emulator. Make sure you set the host and port using Bundler's host and port (default: localhost:8081) and make sure your port is not blocked by other process
2. Run adb reverse tcp:8081 tcp:8081 on home project directory
3. Add android:usesCleartextTraffic="true" to <application> node in AndroidManifest.xml
4. After accomplishing three points above, restart your project

[mguay22]

@Eyesonly88 this solved the issue for me - thank you.

[camposbrunocampos]

For you that is facing this issue specifically when setting your targetSdkVersion to API 28.

All you need to do is adding for your network_security_config file the following lines below:

    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>

PS: In my case I have multiple network_security_config files for each flavor, since this is a debugging problem, adding these lines to the network_security_config file in debug flavor was enough.

=========================================================================

More info about the bug below:

If we go to https://developer.android.com/training/articles/security-config.html, we will see that these lines of code above are the default security configuration for android API 24 to API 27. (Android 7.0 to android 8.1).
This means that for Android 9, API 28, which is the one I was facing the error, the default configuration changed.
More specifically, default configuration for Android API 28 is :

    <base-config cleartextTrafficPermitted="false">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
    

.
This is why using default configuration for old APIs worked for me.

Other thing that also worked for me in the beginning was to set targetSdkVersion to api 27. If you don't want to run on API 28, this might work for you too.

[gomdolkim]

If you are running an android 9 emulator, you have to add, as stated by @delj , android:usesCleartextTraffic="true" in you Application tag in manifest.xml

Recommended

you saved my time. thanks a lot.

[mehbur]

Guys ı open the wifi on emulator and it worked for me

[mohammedSlimani]

what solved my problem was to use sudo yarn start instead of yarn start
I have a script in my package.json with

{
...
"scripts":{
"start":"react-native start"
}
....
}

[Sergioamjr]

If you are using an emulator like xCode or Android Studio, you don't need set the dev server address in the settings with your IP. It will set automatically. Just remove it and rerun the app. It works for me.

[vmarimuthu]

If you are running an android 9 emulator, you have to add, as stated by @delj , android:usesCleartextTraffic="true" in you Application tag in manifest.xml

Recommended

You saved my day

[jmnpedrosa]

What I have done: (working on emulator Android Pie 9)

1. Set IP and port on Debug server host & port for device by clicking Ctrl+M and Dev Setting in emulator. Make sure you set the host and port using Bundler's host and port (default: localhost:8081) and make sure your port is not blocked by other process
2. Run adb reverse tcp:8081 tcp:8081 on home project directory
3. Add android:usesCleartextTraffic="true" to <application> node in AndroidManifest.xml
4. After accomplishing three points above, restart your project

I can confirm @rafidamr's solution is the right one. But I was in a corporate environment where I could not use port 8081, so I just switched Metro Bundler to a different port like so:

• adb reverse tcp:8088 tcp:8088
• react-native run-android --port 8088

And of couse, pointed to the new port in the emulator's Dev Settings.

[coderjonny]

Thank you @camposbrunocampos 👏🏼 , I was using target: Android 9.0 with API level 28.
Updated network_security_config.xml and now emulator works fine.

[silkroadnomad]

I had problems both starting it on ios and android (tried on android studio, without android studio, with xcode and without xcode). I tried all the above stated.

So what DIDN'T helped was:

• network_security_config.xml
• adb reverse
• changing the IP address to the IP of the server.
• etc..

The only thing I had to do is doing a: sudo npm start from react native project directory. Seems like a permission problem. (using mac)

[morenoh149]

@inspiraluna that's basic npm installation issue, you should chown your system dir.

[uc-asa]

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

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

It works for me.

[wincod75]

I added android:usesCleartextTraffic="true" to AndroidManifest.xml at the <application ... tag and rebuilt the app. After that, it started to load from dev server normally.

This fixed the issue for me as well, but i will preface this by saying I tried this fix initially and it did not work. I had to start fresh with new emulators, kill and restart abd several times, reinstall android studio, update gradle, etc.

[raman-sidhu]

@Eyesonly88 Thank you..It Works for me
I have added
android:usesCleartextTraffic="true" to AndroidManifest.xml

[anastely]

I Target Android 4.0 sadly and when I run adb reverse tcp:8081 tcp:8081 i got error

warn Failed to connect to development server using "adb reverse": Command failed: adb -s 192.168.66.103:5555 reverse tcp:8081 tcp:8081

[AleksandarSavic95]

Here is how I fixed the issue of not having developer tools on the emulator:
This SO answer suggests to check your MainApplication.java file and remove BuildConfig.Debug from the getUseDeveloperSupport method, so it looks like this:

        @Override
        public boolean getUseDeveloperSupport() {
            // Return true to load JS from the packager.
            // If BuildConfig.DEBUG is false, assets will be loaded from assets folder.
            return true; // BuildConfig.DEBUG;
        }