Search code examples
androidreact-nativehttpbackendapisauce

React Native app cannot reach backend API on Android, without using Charles + SSL tunnelling

My RN app works perfectly on iOS. But on Android, it cannot reach the backend (hosted in cloud using https) or any other URL like https://randomuser.me/api

But when I make the device use Charles as HTTP proxy, install the Charles root certificate and enable SSL proxying for the backend host name (or randomuser.org) - it works without any problems.

The problem both persists on 2 physical android 9 devices and on Android 11 simulator.

I believe there's some kind of configuration in the app code that I need to change, in order to make the app call my backend - it has worked before, but not now after upgrading everything including Android Studio. Or maybe the devices has been screwed up?

The error from Apisauce is not giving me much hints, unfortunately. I've also tried with a raw fetch, and get this error when not going through Charles SSL proxy.

The only thing I get from fetch is Fetch ERROR [TypeError: Network request failed]

What can be wrong?

enter image description here

Solution

  • Create network_security_config.xml file in app/src/main/res/xml folder (if there is no xml folder just create new one) and add this

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

    In AndroidManifest.xml add these two lines

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

    Re-install the app