React-native: [Android] Android 9 can not access bundler via cleartext request without additional config

[TikiTDO]

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.

[meatwallace]

sorry @TikiTDO but can you provide an example of a working network_security_config.xml?

[TikiTDO]

@meatwallace I'm using the block almost verbatim from the example:

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

Obviously this will only work if you're connecting using USB, and using adb reverse to connect to the bundler, and any servers that the app may need to talk to. If you want connectivity over the network then you will need elements to set it to the values that you require.

[hey99xx]

For localhost development these are the domains that we put in our debug app in src/debug/res/xml/network_security_config.xml

<domain includeSubdomains="false">localhost</domain>
<domain includeSubdomains="false">10.0.2.2</domain>
<domain includeSubdomains="false">10.0.3.2</domain>

It's based on https://github.com/facebook/react-native/blob/5939d078a01edc9f83fce102317540ffbcac17c1/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/AndroidInfoHelpers.java#L20-L22

[iamdurui]

where is the network_security_config.xml? my apk don't have this !!! @TikiTDO

[TikiTDO]

@iamdurui You create it.

[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) 👇

[cpojer]

Thanks to @Salakar's PR this will be fixed in RN soon :)

[hey99xx]

@Salakar How is devsupport files filtered out of release builds, I cannot find such information. RN only releases one AAR file, not for debug and release separately.

Also as far as I know having this XML file alone does not do anything, the application needs to point to it in AndroidManifest.xml through:

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

Did you confirm your commit fixes the issue in debug build and does not make localhost usable in relase builds? If it doesn't work, maybe we can move the file into template/android/app/src/debug folder path.

[Exilz]

@Salakar 's workaround worked right away on my MI8 with android 9. Thanks 👍

[hey99xx]

Well, we iterated on Salakar's work, accidentally broke it, and fixed it again. But by at this point in 0.59.0-rc.2 this should be completely fixed.

[RodrigoAngeloValentini]

<?xml version="1.0" encoding="utf-8"?>

...
android:usesCleartextTraffic="true"
...
...

`

[GihanMaheshWijesuriya]

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: invertase/react-native-firebase@b887849

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) 👇

thankz buddy you save my day

[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

[npedrini]

@aryo, thanks. Was wondering how to do this myself and found little documentation.

[usrbowe]

ℹThere were couple workarounds, but the final solution is documented here:

https://facebook.github.io/react-native/docs/integration-with-existing-apps#cleartext-traffic-api-level-28
This will fix issue, when packager server is not reachable on Android API28+.

[kitttn]

Please note that presence of android:networkSecurityConfig="@xml/network_security_config" in your AndroidManifest.xml will override android:usesCleartextTraffic="true" anyway.
So for bringing RN into existing app with existing network security config the only way to set up packager is to update network_security_config.xml.