New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
shipra-jain071704btdd opened this Issue Aug 6, 2017 · 102 comments

Comments

Projects
None yet
@shipra-jain071704btdd
Copy link

shipra-jain071704btdd commented Aug 6, 2017

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

screenshot-1502041340496
screenshot-1502041361543
screenshot-1502041433294

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

This comment has been minimized.

Copy link

gelove commented Aug 7, 2017

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

@shipra-jain071704btdd

This comment has been minimized.

Copy link
Author

shipra-jain071704btdd commented Aug 7, 2017

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

@yanftch

This comment has been minimized.

Copy link

yanftch commented Aug 7, 2017

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

@yanftch

This comment has been minimized.

Copy link

yanftch commented Aug 7, 2017

something wrong with the latest version?

@hramos

This comment has been minimized.

Copy link
Contributor

hramos commented Aug 7, 2017

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.

@shipra-jain071704btdd

This comment has been minimized.

Copy link
Author

shipra-jain071704btdd commented Aug 8, 2017

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

This comment has been minimized.

Copy link

otoinsa commented Aug 8, 2017

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

This comment has been minimized.

Copy link

zhiyingzzhou commented Aug 9, 2017

same issue. anyone resolve it?

@ashafizullah

This comment has been minimized.

Copy link

ashafizullah commented Aug 9, 2017

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

@shipra-jain071704btdd

This comment has been minimized.

Copy link
Author

shipra-jain071704btdd commented Aug 9, 2017

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

@kevinresol

This comment has been minimized.

Copy link
Contributor

kevinresol commented Aug 22, 2017

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

This comment has been minimized.

Copy link

chiragpurohit71085 commented Aug 31, 2017

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

@hellomaya

This comment has been minimized.

Copy link

hellomaya commented Sep 1, 2017

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.

@Chreels

This comment has been minimized.

Copy link

Chreels commented Sep 6, 2017

i have same problem cant anybody solve that?

@pushpanathank

This comment has been minimized.

Copy link

pushpanathank commented Sep 8, 2017

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

@SoftwareMark

This comment has been minimized.

Copy link

SoftwareMark commented Sep 12, 2017

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

This comment has been minimized.

Copy link

Dimon70007 commented Sep 18, 2017

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

This comment has been minimized.

Copy link

diegoddox commented Sep 23, 2017

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

@guilhermelirio

This comment has been minimized.

Copy link

guilhermelirio commented Sep 24, 2017

i have same problem in device test.

Android 4.1.2

@Dimon70007

This comment has been minimized.

Copy link

Dimon70007 commented Sep 24, 2017

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

This comment has been minimized.

Copy link

WillyRamirez commented Sep 24, 2017

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

@ducpt2

This comment has been minimized.

Copy link

ducpt2 commented Sep 28, 2017

I have same problem today.
Android 4.4.2 and 6.

@ghariharan

This comment has been minimized.

Copy link

ghariharan commented Oct 17, 2017

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

screen shot 2017-10-17 at 8 20 03 am

@Nshul

This comment has been minimized.

Copy link

Nshul commented Oct 18, 2017

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

This comment has been minimized.

Copy link

tranthangbk55 commented Oct 20, 2017

the same this problem,help me

@blainemuri

This comment has been minimized.

Copy link

blainemuri commented Oct 31, 2017

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

This comment has been minimized.

Copy link

callagga commented Nov 2, 2017

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

This comment has been minimized.

Copy link

Ilario17 commented Nov 7, 2017

Same issue with Android, iOS works...

@meftunca

This comment has been minimized.

Copy link

meftunca commented Jun 19, 2018

react-native run-android --port=8081 :)

@suganthankumar

This comment has been minimized.

Copy link

suganthankumar commented Jun 21, 2018

The only way I have managed to solve was - searched all reference to port 8081 and changed to 9088 (unused) and start with -- port 9088. Also changed the Dev setting to port 9088. There were few reference to port 8081 as default in node_module/react-native dir. Port 8081 was used by virus guard in my environment.

@pushpendraKh

This comment has been minimized.

Copy link

pushpendraKh commented Jul 3, 2018

For me, Android Platform-tools were not installed. So I installed using the following command.
brew cask install android-platform-tools

After that, running from Android studio or command line with ** react-native run android** worked

@FloPMT

This comment has been minimized.

Copy link

FloPMT commented Jul 3, 2018

Rebooting my Mac solved it for me, no idea why

@limawanfilbert

This comment has been minimized.

Copy link

limawanfilbert commented Jul 13, 2018

firstly, after making sure that you are in your project file, this solution helps me:
react-native start
most likely you will get an error with code ENOSPC
in this case, use this code:
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
after that, you run react-native start again, and you should most likely have your ENOSPC error solved.
next, just run react-native run-android
there you go, it works for me in linux with android emulator from android studio

@HarithKK

This comment has been minimized.

Copy link

HarithKK commented Aug 9, 2018

I was having this error,
I found a solution with doing this.
first I deleted the all node modules.
sudo rm -rf node_modules/
then I installed npm packages angain
npm install

then I run this command for check the react packages are ok.

react-native start

it shows me that packages are ok and then I run the android with root

react-native run-android --root

then I found this is working.

@delj

This comment has been minimized.

Copy link

delj commented Aug 23, 2018

Also note that as of Android 9 cleartext HTTP (non-HTTPS) transfers are prohibited by default. In order to enable connection to the development server from a device running your app, add this attribute to the application element in the AndroidManifest.xml file:

android:usesCleartextTraffic="true"

More information on this Stackoverflow issue

You can test to see if your device can access your development server by typing URLs into the native web browser.

Unfortunately the react native development tools swallow the reason for the error, but it shows up if you attempt to make your own HTTP connection inside the target app where you'll get a helpful stack trace.

@esutton

This comment has been minimized.

Copy link

esutton commented Aug 23, 2018

@delj That's unfortunate the react native development tools swallow the reason for the error.

Tip: Use manifestPlaceholders to prevent making a release with android:usesCleartextTraffic="true"

AndroidManifest.xml

	<application 
        android:name=".MainApplication" 

	android:usesCleartextTraffic="${isDebug}"
        >

android/app/build.gradle

    buildTypes {
        debug {
            manifestPlaceholders = [isDebug:true]
        }
        release {
            manifestPlaceholders = [isDebug:false]

            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            signingConfig signingConfigs.release
        }
    }
@filhoweuler

This comment has been minimized.

Copy link

filhoweuler commented Sep 10, 2018

I had the same issue and what worked for me on Windows 10 is literally just opening the CMD as an Administrator.

@TheFirstJeffreyLee

This comment has been minimized.

Copy link

TheFirstJeffreyLee commented Oct 2, 2018

i still have this issue. Can we open this back up. This is utterly ridiculous, how is it a "Get Started" tutorial if you follow the steps to the letter and it doesn't start up. I have literally spent hours on this bug. Facebook needs to address this. Either their tutorial is just PURE WRONG or well known troubleshoot cases they can link to.

Here are my steps:

  1. terminal 1: adb reverse tcp:8081 tcp:8081
  2. terminal 1: npm start
  3. react-native run-android

Still have this issue. I also tried to add the port value when I do step 3, but that didn't work either. Can anyone please help.

@JofBigHealth

This comment has been minimized.

Copy link

JofBigHealth commented Oct 4, 2018

I completely sympathise - we just spent an hour fixing this too.

This works for the simulator and I think the same approach should work for your device

There's a few issues going on here, the most important of which is the plaintext setting. Before you do anything, update your app to the latest Android SDK or these settings won't work. To test if you have this problem, stick this code in one of your topmost render functions. E.g. <App

fetch('http://jofarnold.com')
  .then(res => res.text())
  .then(d => alert('ok'))
  .catch(e => {
    console.error(String(e));
});

Note the http and not the https. Yes, my site isn't http. But right now I have no regrets!

Now try

fetch('https://httpbin.org')
  .then(res => res.text())
  .then(d => alert('ok'))
  .catch(e => {
    console.error(String(e));
});

Note the https.

Which one fails? If both fail, you've got other problems and I can't help you - but do try to see if those urls work in Chrome in your simulator to rule out the network not working. If the first fails (it'll give a react native redbox) but the second succeeds (it will alert with ok) then you've not set up the Android security settings right. So let's do that.

Firstly enter the following in android/.../AndroidManifest.xml in the <application section

<manifest
....
<application
... other settings
    android:usesCleartextTraffic="true"  <---------- this
    android:networkSecurityConfig="@xml/network_security_config" <------- and this
  >
   ... etc

Then create a file at android/...res/xml/network_security_config.xml (you may need to add the xml directory: the file name isn't anything special - it just has to be the same as the reference above) like this:

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

Recompile making sure you do react-native start --reset-cache in one terminal (noting reset-cache) and react-native run-android in another.

Now you load the app you'll get an ok popup. Good stuff! You've managed to fetch my insecure site.

Now we have to sort out react native. For me the server is at 10.0.2.2 and the debugger at localhost or something like that (I don't remember; I'm writing this from memory partly). Either way they are different and so it doesn't work.

For this, change the jofarnold.com above to localhost and then go into the settings menu in the app (cmd-M on mac) > Dev Settings. Turn off "Use JS Deltas" (it doesn't work well) and under Debugging set the server host and port to localhost:8081

Your security config file should look like this:

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

Recompile, restart react-native start --reset-cache and you'll get the green bar at the top of the app with the loading... or whatever it is. In the terminal you should see it bundling with Delta, Map and so on.

You don't need to do the adb reverse stuff I think. It's done as part of the RN scripts anyway.

Good luck!

@mateoguzmana

This comment has been minimized.

Copy link

mateoguzmana commented Oct 28, 2018

My problem was because I had my android emulator disconnected from Wifi and data. I just switched on those and it runs. Hope It helps if anyone is facing the same problem.

image

@JofBigHealth

This comment has been minimized.

Copy link

JofBigHealth commented Oct 29, 2018

My problem was because I had my android emulator disconnected from Wifi and data. I just switched on those and it runs. Hope It helps if anyone is facing the same problem.

One important thing I should add to Mateo's comment; if you close your MacBook and resume on another wifi network this can cause the simulator's "wifi" to fail. You should restart the simulator. I know this isn't a issue for the simulator specifically but it's got good SEO for this subject so hopefully leaving this comment here will help someone else.

@sahad752

This comment has been minimized.

Copy link

sahad752 commented Nov 7, 2018

solved by using android 5.0 or above,got error in android 4..4

@HoangDinhHoi

This comment has been minimized.

Copy link

HoangDinhHoi commented Nov 10, 2018

solved by using android 5.0 or above,got error in android 4..4

I agree

@apperside

This comment has been minimized.

Copy link

apperside commented Nov 12, 2018

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

@JuanCamilo0809

This comment has been minimized.

Copy link

JuanCamilo0809 commented Nov 24, 2018

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.

Why is happening this problem?? I have a mac with OS 10.13.6 and before the server start automatically

@sheva007

This comment has been minimized.

Copy link

sheva007 commented Dec 1, 2018

Thanks @JofBigHealth I did as you suggested and it works on emulator and the connect real device.
But I am having problems with the app when I download it from the alpha channel. do you have any suggestions to debug it?

@JofBigHealth

This comment has been minimized.

Copy link

JofBigHealth commented Dec 1, 2018

@sheva007 I'm not sure what you mean by "alpha channel". Can you explain and also include more detail about what problems you are having specifically?

@sheva007

This comment has been minimized.

Copy link

sheva007 commented Dec 1, 2018

@JofBigHealth sorry for the missing info.
UPDATE: it works out now, I just had to wait for sometime till the Google Play makes the updated working version available for the testers. Thank you a lot :)
my original problem was that the app is working well < Android 9 but it will not make a network call with Android 9, when I used your solution, the app including network calls works as expected.
but when I submitted it to Google Play Alpha Channel. it does not make the network calls.

@RuthenicEye

This comment has been minimized.

Copy link

RuthenicEye commented Jan 1, 2019

reversing the ports worked for me
as suggested by @ashafizullah

@annelorraineuy

This comment has been minimized.

Copy link

annelorraineuy commented Jan 10, 2019

Closing Android Studio, which I had open, solved the issue for me oddly. Uncertain why...

@JofBigHealth

This comment has been minimized.

Copy link

JofBigHealth commented Jan 10, 2019

UPDATE: for simulator as of upgrading to 0.57.7 I've not found it necessary to do the adb reverse proxy fix, nor changing the port in the developer menu. It defaults to something like 10.0.1.1:8080 (guess from memory) and Just Works. I run react-native start or react-native start --reset-cache (if required) and build from Android Studio and it works just fine. If you have set it to debugging you must have a debugger running and may need to build again from Android Studio as it sometimes doesn't connect first time (due to what I suspect is a race condition) but otherwise fine. Just remember to set the security settings correctly in the app manifest

Device is another matter.

@flashman2

This comment has been minimized.

Copy link

flashman2 commented Jan 10, 2019

Have same issue when tried to launch on device. Is there any solution for device?

@webguru001

This comment has been minimized.

Copy link

webguru001 commented Jan 16, 2019

I have the same issue. Please help me.

@pinko42

This comment has been minimized.

Copy link

pinko42 commented Jan 17, 2019

you should add a path into your environment variables ... "adb" path you can find it location in the C:\Users\user\AppData\Local\Android\Sdk/platformtools

@Nasart

This comment has been minimized.

Copy link

Nasart commented Jan 28, 2019

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment