[Android] Android 9 can not access bundler via cleartext request without additional config

Environment

  React Native Environment Info:
    System:
      OS: Linux 4.18 Arch Linux undefined
      CPU: x64 AMD Ryzen 7 1700X Eight-Core Processor
      Memory: 682.77 MB / 7.79 GB
      Shell: 5.6.2 - /bin/zsh
    Binaries:
      Node: 10.7.0 - /usr/local/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.2, 27.0.3, 28.0.1, 28.0.3
        API Levels: 23, 24, 26, 27, 28
    npmPackages:
      react-native: 0.57.x => 0.57.4 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-git-upgrade: 0.2.7

Description

As of Android 9 (API Level 28), the default behavior is to now block all clear text requests, unless a domain is specifically configured to allow this behavior. As a result the bundler URL is not reachable in development mode, with a generic error that offers no context to what the problem could be, or what solutions are available.

The issue is fairly trivial to resolve once the root cause is apparent, but getting to that root cause can take a bit of searching.

Reproducible Demo

Start a react-native app on an Android 9 devices (I only tested physical device), in development mode. The app will not start, and will complain that the bundle can not be fetched.

[Salakar]

Came across this issue today, I used a one-liner to work around this for now;

Added android:usesCleartextTraffic="true" inside <application ...here...></application> in my AndroidManifest.xml. Diff: https://github.com/invertase/react-native-firebase/pull/1806/commits/b887849526716b4171523ce82dfbfd02fd3de67a

Though adding a network-security-config file should be the recommended workaround for now.

Have pushed up a PR that adds the network security config as part of RN devsupport (not part of release builds) 👇

[aryo]

Just a heads up for people that have existing RN projects and just started targeting API level 28, to apply the whitelist for debug builds only:

1. Add the network_security_config.xml to the android/src/debug/res/xml directory (make the dir if it doesn’t exist)
2. put <application android:networkSecurityConfig="@xml/network_security_config" ... /> in android/src/debug/AndroidManifest.xml

edit: updated wrong application attribute