How to Fix "Clear Text Not Permitted" Issue in React Native Android App

Introduction

In React Native Android apps, you may encounter the "Clear Text Not Permitted" issue, especially when dealing with network requests. This error arises due to security measures introduced in Android 9 (API level 28) and higher, where clear text traffic (HTTP) is not allowed by default. In this post, we'll explore how to fix this issue and ensure your app communicates securely over HTTPS.

Problem Statement

The "Clear Text Not Permitted" issue occurs when your React Native Android app attempts to make network requests over HTTP, which is considered insecure.

Solution:

1. Use HTTPS for Network Requests

Ensure that all network requests in your app use HTTPS instead of HTTP. This includes requests to your backend API, external APIs, or any other network resources.

2. Update Android Manifest

Add the android:usesCleartextTraffic="true" attribute to the <application> element in your app's AndroidManifest.xml file:

<application    android:usesCleartextTraffic="true"    ...>

This allows clear text traffic for all network requests within your app, but it's recommended to use HTTPS instead.

3. Use Network Security Config

Create a network security configuration file (res/xml/network_security_config.xml) and allow clear text traffic:

<!-- res/xml/network_security_config.xml -->
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <!-- Trust preinstalled CAs -->
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

Then, reference this file in your app's manifest:

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

4. Verify WebView Usage

If your app uses WebView, ensure it's not loading resources over HTTP. Use WebView.setMixedContentMode() to control mixed content.

5. Test Your App

Thoroughly test your app after making these changes to ensure that it functions as expected and that all network requests are secure.

Conclusion:By following these steps, you can fix the "Clear Text Not Permitted" issue in your React Native Android app and ensure that it complies with Android's network security requirements. It's crucial to prioritize security in your app's network communication to protect user data and maintain trust.

Remember, always use HTTPS for network requests to ensure the security and integrity of your app's data transmission.