React Native could not connect to development server on Android

Hi folks! did you ever experiencing metro bundler error not starting the progress and return “could not connect to development server”. But, actually you sure you was run with proper and wondering why still getting this error ? also with me :( Because, before i upgrading the targetSdkVersion to 29 for uploading purpose the apps to Google Play Store is still okey and can run with perfectly.

This is problem comes from Android Security Policies. According to the documentation.

Starting with Android 9.0 (API level 28), cleartext support is disabled by default.

Let’s get straight to solving the problem

Step 1

Add android:usesCleartextTraffic in your AndroidManifest.xml at folder android/src/main/AndroidManifest.xml

...
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:screenOrientation="portrait"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustPan"
android:usesCleartextTraffic="true"> // Add This
...

Step 2

Then create a file in android/src/debug/res/xml with name react_native_config.xml, if in your project structure don’t have that folders inside debug/ then create one.

After you create the file, copy paste the code below :

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

You can replace 10.0.0.2 with your local ip or anothers. Then, run again :

> cd android && ./gradlew clean && cd ../
> npx react-native run-android

That’s All.

Thanks for reading, may be useful.