How to allow http traffic on android 28 api and up in react native

Question

I'm currently new developing react native, today I encounter problem regarding inserting data into database using the api. so now when I already done setup the axios post request my debugger browser shows of this error.

Note: API is created on my localhost reactjs.

My device that i used for developing :

• Vivo V9
• OS: Oreo

I already read some documents or some post here in the stackoverflow I tried there suggestion, but still I encounter of that Error on my application.

Suggestion:

1. android:networkSecurityConfig="@xml/network_security_config"
2. android:usesCleartextTraffic="true"

I also tried this setup:

<network-security-config>
<domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">127.0.0.1</domain>
</domain-config>

Now my androidmanifest.xml is now look like this:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

<uses-feature android:name="android.hardware.location.gps" />
<uses-feature android:name="android.hardware.location.network" />


<application android:networkSecurityConfig="@xml/network_security_config"
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:usesCleartextTraffic="true"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

My Function to insert data in the database is look like this:

const data = new FormData();

    data.append('driver_id','1');
    data.append('driver_route_lat',this.state.currentLocation.latitude);
    data.append('driver_route_long',this.state.currentLocation.longitude);


    axios({
      method: 'POST',
      url: 'http://127.0.0.1:8000/api/update_driver_route_logs',
      data: data,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    })
    .then((response) =>  {
      console.log(response.data)
    })
    .catch((error) =>  {
      console.log(error)
    });

In my postman the api is work well: