[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

react-native/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/AndroidInfoHelpers.java

Lines 20 to 22 in 5939d07

	public static final String EMULATOR_LOCALHOST = "10.0.2.2";
	public static final String GENYMOTION_LOCALHOST = "10.0.3.2";
	public static final String DEVICE_LOCALHOST = "localhost";

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

[cpojer]

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