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

🐛 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

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 22

Most upvoted comments

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>

+76

alexPimentel on May 8, 2019

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

+25

karanpratapsingh on Apr 11, 2019

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

adnanpirota on Jul 11, 2019

@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.

cjahfar1 on Jan 15, 2020

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.

cjahfar1 on Dec 28, 2019

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" />

mayupat13 on Oct 1, 2019

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!

EdersonJunior on Oct 3, 2019

@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

sadiomanhne on Jan 21, 2020