Network Security Config results in React Native app not connecting to metro server

Question

I have a very weird issue that I am not able to solve. I am not sure how to Google this either because while I am familiar with React Native, I am not familiar with Android itself and not sure what my search term should be.

So, in my react native code, my client added the following network_security_config.xml file under the android/app/src/main/res/xml path:

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

and consequently, they have added the following in the AndroidManifest.xml file at android/app/src/main path:

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

The dots above indicate other attributes and tags that I have omitted for brevity.

My issue

I am using an Android emulator to test my React Native app.
Until the above xml was NOT present, my react native app was functioning fine. However, with the above addition, when I start my react native app using commands (in 2 different terminals):

$ npx react-native start --reset-cache
$ npx react-native run-android

The app loads in the emulator - but it seems to be disconnected from the metro bundler (Terminal running npx react-native start --reset-cache).

I try pressing r key in this terminal to check if reloading works and it outputs:

warn No apps connected. Sending "reload" to all React Native apps failed.
Make sure your app is running in the simulator or on a phone connected via USB.

I am not sure why though. If I were to remove the android:networkSecurityConfig="@xml/network_security_config" from the AndroidManifest.xml, then all is well.

How do I resolve this?

I didn't - I had to remove that line (mentioned above) each time I worked on it — callmekatootie, Feb 16 '23 at 18:35

score 4 · Answer 1 · answered Apr 20 '21 at 16:38

You can try adding localhost domains to the XML file :

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

Thiago Abreu · Answer 2 · 2023-07-24T16:02:49.607

You can try adding localhost domains to the XML file :

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

Hello friend, thanks for the suggestion, I was going through the same problem and it helped me to understand what was going on.

Solution

I guess that since metro server runs locally and through HTTP protocol, you should allow the ip address 10.0.2.2 (alias to your host, https://developer.android.com/studio/run/emulator-networking) and also set cleartextTrafficPermitted="true" this would be the result:

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

Tips

Since I'm using flavours, I also decided to put the above solution inside folder src/debug/xml/network_security_config.xml so this way 10.0.2.2 becomes allowed only in debug mode.

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34738226) — Yashovardhan99, Jul 30 '23 at 19:24

Network Security Config results in React Native app not connecting to metro server

2 Answers2