React-native: RN is unable to communicate with metro bundler when targetSdkVersion 28

[luisnaranjo733]

Environment

React Native Environment Info:
System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 32.63 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 9.11.1 - ~/.nvm/versions/node/v9.11.1/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v9.11.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
Android SDK:
Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.2, 26.0.1, 26.0.2, 27.0.1, 27.0.3, 28.0.3
API Levels: 23, 24, 25, 26, 27, 28
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 9.2/9C40b - /usr/bin/xcodebuild
npmPackages:
@types/react: ^16.4.7 => 16.4.7
@types/react-native: ^0.57.5 => 0.57.5
react: 16.5.1 => 16.5.1
react-native: 0.57 => 0.57.2

✨ Done in 5.26s.

Description

When running a RN app with targetSdkVersion 28 on Android Pie, the app is unable to communicate with metro bundler. If you type the expected url and port into the browser, you can see some stuff about metro bundler appear, so I don't think it is a proxy issue.
When I revert targetSdkVersion to 27, the issue does not reproduce. It seems likely that this is related to one of these Pie changes for apps that target 28.

Reproducible Demo

Set targetSdkVersion to 28 and run the app on Android Pie. Observe that the app won't be able to load the bundle from metro bundler.

[hramos]

I suspect isCleartextTrafficPermitted() being false by default may be the source of this, if the React Native app is trying to reach the Metro server over http. Have you tried whitelisting Metro to see if that resolves it?

[luisnaranjo733]

Ah, it sounds likely that is the issue.

I just tried whitelisting metro, but I don't think my config is quite right because I still can't reload my bundle.

Here is my config

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <debug-overrides>
        <trust-anchors>
            <certificates src="user"/>
        </trust-anchors>
    </debug-overrides>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

The <debug-overrides> part is unrelated - that just enables Fiddler for debug build variants.

[kronosfere]

Just to add to @luisnaranjo733 's answer, I managed to get the app to connect to the bundler by adding the security config as such to AndroidManifest.xml

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

And then adding these config to res/xml/network_security_config.xml to whitelist localhost

<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

[nol13]

I also had to add.. (on 0.55.3)

<domain includeSubdomains="true">10.0.2.2</domain>

[tobi512]

Works for me as well:

• <domain includeSubdomains="true">localhost</domain> is needed for physical devices via USB (using "adb reverse tcp:8081 tcp:8081")
• <domain includeSubdomains="true">10.0.2.2</domain> is needed for emulators (default host, adjust for custom one)

Generally it's a good idea to put this config to a separate debug resource, so it won't land in production...

@hramos Could you point this out in the official documentation? I don't see a better solution for now 😄

[hramos]

@tobi512 can you send a PR to https://github.com/facebook/react-native-website?

[JGeraldoLima]

I can confirm that @kronosfere answer works (react-native version = "0.57.5"). Thank you!
Can anyone say whether there are any problem with this solution for publishing?

[cpojer]

This should work in 0.59 (or 0.60 coming soon).