React-native: Fetch not working for HTTP requests on Android

[Andarius]

🐛 Bug Report

When using fetch on http endpoints, the request raises a Network Request Fail error.
If works fine on https endpoints.

To Reproduce

use fetch with any http url.

Expected Behavior

The fetch function returns without throwing a Network Request Fail

Code Example

fetch(any-http-url)

Environment

  React Native Environment Info:
    System:
      OS: Linux 4.15 KDE neon 5.14
    Binaries:
      Node: 10.6.0 - /usr/local/bin/node
      Yarn: 1.12.3 - /usr/bin/yarn
      npm: 6.1.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.3, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 27.0.3, 28.0.1, 28.0.3
        System Images: android-27 | Google Play Intel x86 Atom
    npmPackages:
      react: 16.8.6 => 16.8.6 
      react-native: 0.59.2 => 0.59.2 
    npmGlobalPackages:
      create-react-native-app: 2.0.2
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

[karanpratapsingh]

Hey, I've had a similar problem, please make sure your request URL is HTTPS not HTTP as Android from new versions doesn't allow HTTP

[karanpratapsingh]

Unfortunately no...Best bet is debug js remotely option, moreover fetch related errors are not accurate at all for example recently I got a network request failure, then after hrs of self debugging I fixed my form data object

[alexPimentel]

Try using this one. It worked for me.

Add the codes in your main AndroidManifest.xml :

<manifest 
  xmlns:tools="http://schemas.android.com/tools">

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

    <application
      android:usesCleartextTraffic="true" tools:targetApi="28"> 
    ... 
    </application>
</manifest>

[anhkhoi]

Thanks @alexPimentel. It works for me

[adnanpirota]

Thanks @alexPimentel for me it works even without tools:targetAPI="28".

[SilvioLuis]

Thanks @alexPimentel for me it works even without tools:targetAPI="28".

me too

[firdaussoberi]

Thanks @alexPimentel for me it works even without tools:targetAPI="28".

me too

Just had this issue and want to comment that this works
My env:
RN Version 0.60.4,
buildToolsVersion = "28.0.3"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 28
supportLibVersion = "28.0.0"

[pstanton]

further to @alexPimentel's post:

usesCleartextTraffic

"Indicates whether the app intends to use cleartext network traffic, such as cleartext HTTP. The default value for apps that target API level 27 or lower is "true". Apps that target API level 28 or higher default to "false"."

explains why this is a "sneaky regression".

[vickykeshri]

I am using expo and i don't have android and ios directory. How can i fix this issue.?
However, I am running it on lower version of API also but it is not working.

[Redikins-JH]

I have same problem

in my case everything resolve when I access my emulalator to network.
my android emulator didnt't access to network.

I resolve from below.

https://stackoverflow.com/questions/42736038/android-emulator-not-able-to-access-the-internet

[mayupat13]

this works for me

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application android:usesCleartextTraffic="true" tools:targetApi="28" />

[EdersonJunior]

Try using this one. It worked for me.

Add the codes in your main AndroidManifest.xml :

<manifest 
  xmlns:tools="http://schemas.android.com/tools">

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

    <application
      android:usesCleartextTraffic="true" tools:targetApi="28"> 
    ... 
    </application>
</manifest>

I love you, man!

[andiakbarsisfo2014]

https://github.com/facebook/react-native/issues/24408#issuecomment-490368508

Try using this one. It worked for me.

Add the codes in your main AndroidManifest.xml :

<manifest 
  xmlns:tools="http://schemas.android.com/tools">

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

    <application
      android:usesCleartextTraffic="true" tools:targetApi="28"> 
    ... 
    </application>
</manifest>

It's Work ,,, thank you,,,

[cjahfar1]

I am facing the same issue in android release apk. React native version is 61.5. Tried with android:usesCleartextTraffic="true"( tried with fetch and axios ,still not working). Also tried with http and https also, still no luck.
Everything works fine in debug mode.

[anastely]

@cjahfar1 Are you solve it?

[cjahfar1]

@cjahfar1 Are you solve it?

Yes,. Actually "android:usesCleartextTraffic="true"" fixed the issue. There were another error which was blocking the api calls and the error was swallowed since this error happens in saga function. Sorry for not updating here.

[anastely]

@cjahfar1 Are you solve it?

Yes,. Actually "android:usesCleartextTraffic="true"" fixed the issue. There were another error which was blocking the api calls and the error was swallowed since this error happens in saga function. Sorry for not updating here.

I add "android:usesCleartextTraffic="true"" but still i got

Request failed with status code 400

But it's working fine in my Physical device

[cjahfar1]

@cjahfar1 Are you solve it?

Yes,. Actually "android:usesCleartextTraffic="true"" fixed the issue. There were another error which was blocking the api calls and the error was swallowed since this error happens in saga function. Sorry for not updating here.

I add "android:usesCleartextTraffic="true"" but still i got

Request failed with status code 400

But it's working fine in my Physical device

Status code 400 means, bad data. Double check the payload format. You are getting response 400, that means, API call is getting initiated.

[manhnguyenba]

@cjahfar1 Are you solve it?

Yes,. Actually "android:usesCleartextTraffic="true"" fixed the issue. There were another error which was blocking the api calls and the error was swallowed since this error happens in saga function. Sorry for not updating here.

what is the error in saga function, and how to fix it man, plz help

[cristianmino]

Try using this one. It worked for me.

Add the codes in your main AndroidManifest.xml :

<manifest 
  xmlns:tools="http://schemas.android.com/tools">

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

    <application
      android:usesCleartextTraffic="true" tools:targetApi="28"> 
    ... 
    </application>
</manifest>

thanks. It works

[logicincode]

Try using this one. It worked for me.
Add the codes in your main AndroidManifest.xml :

<manifest 
  xmlns:tools="http://schemas.android.com/tools">

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

    <application
      android:usesCleartextTraffic="true" tools:targetApi="28"> 
    ... 
    </application>
</manifest>

Not for me

[logicincode]

@cjahfar1 Are you solve it?

Yes,. Actually "android:usesCleartextTraffic="true"" fixed the issue. There were another error which was blocking the api calls and the error was swallowed since this error happens in saga function. Sorry for not updating here.

Hi, but what was blocking the API calls?