react-native: [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.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (6 by maintainers)

Commits related to this issue

Add Network Security Config file (fixes #22375) (#23105) Summary: This fixes #22375. Android API level 28 and above now blocks all [clear text requests](https://developer.android.com/training/article... — committed to facebook/react-native by Salakar 5 years ago
Revert "Add Network Security Config file (fixes #22375) (#23105)" This reverts commit 9f14ac2 — committed to react-native-firebase/react-native by Salakar 5 years ago
apply Network Security Config file (fixes #22375) (part 2 of #23105) (#23135) Summary: This is a follow-up PR for https://github.com/facebook/react-native/pull/23105 - as mentioned on discord. --- ... — committed to facebook/react-native by Salakar 5 years ago
Add Network Security Config file (fixes #22375) (#23105) Summary: This fixes #22375. Android API level 28 and above now blocks all [clear text requests](https://developer.android.com/training/article... — committed to matt-oakes/react-native by Salakar 5 years ago
apply Network Security Config file (fixes #22375) (part 2 of #23105) (#23135) Summary: This is a follow-up PR for https://github.com/facebook/react-native/pull/23105 - as mentioned on discord. --- ... — committed to matt-oakes/react-native by Salakar 5 years ago
apply Network Security Config file (fixes #22375) (part 2 of #23105) (#23135) Summary: This is a follow-up PR for https://github.com/facebook/react-native/pull/23105 - as mentioned on discord. --- ... — committed to facebook/react-native by Salakar 5 years ago
Add Network Security Config file (fixes #22375) (#23105) Summary: This fixes #22375. Android API level 28 and above now blocks all [clear text requests](https://developer.android.com/training/article... — committed to microsoft/react-native-macos by Salakar 5 years ago
apply Network Security Config file (fixes #22375) (part 2 of #23105) (#23135) Summary: This is a follow-up PR for https://github.com/facebook/react-native/pull/23105 - as mentioned on discord. --- ... — committed to microsoft/react-native-macos by Salakar 5 years ago
Add debug network security config to allow http traffic. Android api level 28+ seems to not allow http traffic by default. This breaks react-native debugging that relies on fetching artifacts over ht... — committed to emiljoha/lightning-app by emiljoha 4 years ago

Most upvoted comments

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

+61

Salakar on Jan 22, 2019

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:

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

edit: updated wrong application attribute

+10

aryo on Jun 25, 2019

@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.

+10

TikiTDO on Nov 26, 2018

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

hey99xx on Nov 26, 2018

<?xml version=“1.0” encoding=“utf-8”?> <manifest …> <uses-permission android:name="android.permission.INTERNET" /> <application … android:usesCleartextTraffic=“true” … … </application> </manifest>`

RodrigoAngeloValentini on Apr 9, 2019

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.

hey99xx on Feb 22, 2019

@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.

hey99xx on Jan 23, 2019