React-native android does not build when i add networkSecurityConfig tag

Question

As I found in this article.
I want to update my network security config to allow root certificates from the personal store of my android emulator. but when I do this, I cant build my app anymore. The error message:

Unable to load script. Make sure you're either running a metro server (run 'react-native-start') or that your bundle 'index.android.bundle' is packaged correctly for release.

when i remove android:networkSecurityConfig="@xml/network_security_config" its all running fine again..

Does anyone know what to do? or has an other way of making changes to the security config?

Answer 1

Okay, finally found it ! :)

React-Native needs clear text traffic for the build. The network security config file should contain this:

<base-config cleartextTrafficPermitted="true">

I have a tag in src/debug/AndroidManifest.xml

<application tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" 
android:networkSecurityConfig="@xml/react_native_config" />

and created a file src/debug/res/xml/react_native_config.xml with:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="user"/>
            <certificates src="system"/>
        </trust-anchors>
    </base-config>
</network-security-config>