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

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.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 18

Links to this issue

Metro server does not run and not connect to the app in React Native - Stack Overflow

Most upvoted comments

@hackdie What did you do?

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

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

+242

hackdie on Mar 18, 2019

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.

+35

luigimannoni on May 24, 2019

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>

+21

notjulian on Jun 20, 2019

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.

+19

react-native-bot on Feb 11, 2019

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

regalstreak on Jun 24, 2019