React-native: Could not connect to development server after updating react-native.

[WasserEsser]

I'm trying to update from react-native 0.55.4 to react-native 0.58.3.

The issue I'm facing is that my app cannot connect to the metro bundler.
Despite adb reverse, the emulator as well as a physical device cannot connect to it.
I can open the URL just fine in the chrome browser of the device, but the app can't connect to it.

I have followed the update notices in the changelogs, resulting in the following package.json:

"dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.3"
  },
  "devDependencies": {
    "babel-jest": "^23.4.2",
    "metro-react-native-babel-preset": "^0.45.0",
    "jest": "^23.5.0",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }

I have left out the unimportant packages.

I have also changed the .babelrc file to:

{
  "presets": ["module:metro-react-native-babel-preset"]
}

Environment info:

React Native Environment Info:
    System:
      OS: Windows 10
      CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
      Memory: 3.21 GB / 15.93 GB
    Binaries:
      Yarn: 1.7.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.1.0 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.3.0.0 AI-182.5107.16.33.5264788

Any help would be much appreciated.

[react-native-bot]

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

👉 Click here if you want to report a reproducible bug or regression in React Native.

[SaraChicaD]

we changed our babel.config per this: https://babeljs.io/docs/en/usage#overview and it worked.

[mttirpan]

I have same issue after that react [email protected] update.

[hackdie]

having same problem +1

[mttirpan]

Hi Hackdie

I was create new project and move all files to new project (Not node modules) and installed and linked packages then solved.

[hackdie]

@mttirpan seems like my problem was on Android 9 and manifest. Andorid 9 blocks the connection by default unless I change it on the manifest

[filipef101]

@hackdie What did you do?

[hackdie]

@hackdie What did you do?

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

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

[luigimannoni]

Also had this problem on Android 9 on a simulator, fixed by adding android:usesCleartextTraffic="true" as @hackdie explained in the comment above and also I had to reroute the application on localhost:8081 by opening the in-app menu (CTRL-M on Linux / CMD-M I guess on iOS) and then Dev Settings > Debug server host & port for device > localhost:8081, close the dialog, fully close the app on the simulator and relaunch it.

[heyman333]

@hackdie YOU SAVED MY LIFE 👏

[fdemir]

@hackdie Thanks.

[palexs]

It seems like there’s no way in RN 0.59.5 to make the app on Android emulator (API 28) connect to the packager. Adding android:usesCleartextTraffic="true" in the manifest also did not help.

[notjulian]

as you can read here maybe it's better to add only a white list

Add/Modify the file res/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="false" />
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">127.0.0.1</domain>
        <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>

in AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:networkSecurityConfig="@xml/network_security_config"
        ...>
        ...
    </application>
</manifest>

[notjulian]

It seems like there’s no way in RN 0.59.5 to make the app on Android emulator (API 28) connect to the packager. Adding android:usesCleartextTraffic="true" in the manifest also did not help.

try

cd android
gradlew clean
cd ..
react-native run-android

[regalstreak]

It seems like there’s no way in RN 0.59.5 to make the app on Android emulator (API 28) connect to the packager. Adding android:usesCleartextTraffic="true" in the manifest also did not help.

try

cd android
gradlew clean
cd ..
react-native run-android

Sadly this didn't work too for me

[regalstreak]

https://stackoverflow.com/a/56744301/6740333 solved it @palexs

[jenskuhrjorgensen]

I already had android:usesCleartextTraffic="true" in the debug manifest and <domain includeSubdomains="true">localhost</domain> in network_security_config.xml, but it didn't help.

What worked for me was to open the dev menu and "change" the bundle location to localhost:8081 (which I thought it was already set to, because it was already there, but in a greyed out font).

EDIT:
But adding the other IP's (besides localhost) as suggested by @notjulian, made it work without having to retype the bundle location on every emulator launch. 😄

[PragyanD33p]

In my case, the error occurred after I installed the app in a different virtual device, and I don't know why the debug server host and port automatically gets blank. But thanks to @hackdie and @luigimannoni. Their solutions helped solving my problem.