React Native https axios resquest gets Network Error on Android but not iOS

Question

I was building my react native application and using backend URL as http://123.123.123.123:port/ and everything was working fine while in development. but when I built my app and installed it on an android device it wouldn't work and I remember someone telling me that android by default only lets https request. so I changed the URL to the one that the web app is using which is https://example.com/api/ ... (not self-signed TSL certificate) and now the android can send requests but they all return as Network Error s (when built and when running on an emulator), but it works fine on iOS simulator. I'm new to app development and can't find any solutions online. Maybe there is an option that I'm missing?

My axios setup, that is sending the requests:

const customAxios = axios.create({
        baseURL: baseURL,
        timeout: 6000,
    });

...

const response = await customAxios.post('/login', {
        email,
        password,
    });

Error stack:

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:81)
    at XMLHttpRequest.dispatchEvent (event-target-shim.js:818)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:574)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:388)
    at XMLHttpRequest.js:501
    at RCTDeviceEventEmitter.emit (EventEmitter.js:189)
    at MessageQueue.__callFunction (MessageQueue.js:436)
    at MessageQueue.js:111
    at MessageQueue.__guard (MessageQueue.js:384)

The https URL is working on ios and web applications

Answer 1

In your manifest file add android:usesCleartextTraffic="true" inside application tag.

<application
  xmlns:tools="http://schemas.android.com/tools"
  tools:replace="android:allowBackup"
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:usesCleartextTraffic="true">...
</application>