Fetch request to jsonplaceholder.typicode.com gets stuck in Pending mode (android)

[sdancer75]

Description

The fetch is stuck in Pending mode. Removing the @babel/plugin-proposal-class-properties as proposed at #30187 is not worked for me. Also in my case neither the XMLHttpRequest worked.

  const fetchData = url => {
    console.log('Fetching Data...');
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.addEventListener('readystatechange', e => {
        if (xhr.readyState !== 4) {          
          return;
        }
        if (xhr.status === 200) {          
          resolve(xhr.responseText);
        } else {          
          reject(e);
        }
      });
      xhr.open('GET', url);
      xhr.send();
    });
  };

React Native Version

0.71.11

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: Windows 10 10.0.19045
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 3.26 GB / 15.87 GB
Binaries:
Node: 19.1.0 - D:\Program Files\nodejs\node.EXE
Yarn: 1.22.7 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.8 - D:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 33, 33
Build Tools: 29.0.3, 30.0.3, 33.0.0, 33.0.2, 34.0.0
System Images: android-33 | Google APIs Intel x86_64 Atom
Android NDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.10240.0, 10.0.10586.0, 10.0.14393.0, 10.0.15063.0, 10.0.16299.0, 10.0.17134.0, 10.0.17763.0
IDEs:
Android Studio: Not Found
Visual Studio: 15.9.33027.88 (Visual Studio Enterprise 2017)
Languages:
Java: javac 11 - C:\Program Files\Java\jdk-11\bin\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.11 => 0.71.11
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

npx react-native init list

Replace the App.js with the code example below

Snack, code example, screenshot, or link to a repository

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, {useState, useEffect} from 'react';

import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  FlatList,
} from 'react-native';



const App = () => {

  const [filteredDataSource, setFilteredDataSource] = useState([]);
  const [masterDataSource, setMasterDataSource] = useState([]);

  useEffect(() => {    
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(responseJson => {
        setFilteredDataSource(responseJson);
        setMasterDataSource(responseJson);
        console.log(responseJson);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  const ItemView = ({item}) => {
    return (
      <Text style={styles.itemStyle} onPress={() => getItem(item)}>
        {item.id}
        {'.'}
        {item.title.toUpperCase()}
      </Text>
    );
  };

  const ItemSeparatorView = () => {
    return (
      // Flat List Item Separator
      <View
        style={{
          height: 0.5,
          width: '100%',
          backgroundColor: '#C8C8C8',
        }}
      />
    );
  };

  const getItem = item => {
    // Function for click on an item
    alert('Id : ' + item.id + ' Title : ' + item.title);
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <FlatList
          data={filteredDataSource}
          keyExtractor={(item, index) => index.toString()}
          ItemSeparatorComponent={ItemSeparatorView}
          renderItem={ItemView}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
  },
  itemStyle: {
    padding: 10,
  },
});

export default App;

[sdancer75]

***UPDATE: It seems that XMLHttpRequest and fetch take a long long time to get a successful response.

It took about 10 minutes to resolve the promise successfully.

Now what? What seems to be the problem here?

[sdancer75]

I found that the root of the problem was the URL address itself.

While this mentioned URL https://jsonplaceholder.typicode.com/posts seems to have a problem, with simple vanilla web JS code it works just fine. Any specific reason for that?

Other URLs ie https://dummyjson.com/products work fine either with fetch or XMLHttpRequest.

[cortinico]

I found that the root of the problem was the URL address itself.

Is this the only URL that is causing this issue? Is there anything specific with it?

[sdancer75]

I found that the root of the problem was the URL address itself.

Is this the only URL that is causing this issue? Is there anything specific with it?

I don't know if it is the only url that is causing issues and I am really surprised of this. As already said, curl, browser, and vanilla JavaScript works fine with this url. I didn't find anything specific with this.

I can not conclude what causes this specific problem. Maybe something with the server itself? I tested fetch with two more urls and it worked fine.

[cortinico]

This is related to #29698

[JKKholmatov]

@sdancer75 Hi! did you find a solution?, I am also having this issue, fetch hangs for 2 minutes and gets response, I tried other endpoints but the issue occured in all cases

[sdancer75]

@sdancer75 Hi! did you find a solution?, I am also having this issue, fetch hangs for 2 minutes and gets response, I tried other endpoints but the issue occured in all cases

It concerns the same website jsonplaceholder.typicode.com? If yes, then no. There is something wrong with this. With my own backend, there is no pending problem.

[JKKholmatov]

@sdancer75 Hi! did you find a solution?, I am also having this issue, fetch hangs for 2 minutes and gets response, I tried other endpoints but the issue occured in all cases

It concerns the same website jsonplaceholder.typicode.com? If yes, then no. There is something wrong with this. With my own backend, there is no pending problem.

I tried with google, wikipedia, github, and Appsync Graphql API endpoints all fetches hang for 2 minutes sometimes.
I found out that on iPhone and Android with VPN it works without any issue, without VPN Android always hangs, I can't find any solution

[crukundo]

If you are having this challenge while testing an API hosted locally( as in http://localhost/api..), replace localhost with your local ip address (as in http://192.168...). This should fix it.

[irisjae]

@crukundo I believe I'm running into the same issue as you are. Testing fetches to my remote host (not local machine), I can confirm that IP address works quite reliably, wheras neither http or https give any reasonable results, returning anywhere from 10 seconds to 2 minutes. Concurrently running fetches on IP, HTTP, and HTTPS also seem to indicate that a successful IP fetch causes the other requests to soon complete as well.

For now, I presume this is the Happy Eyeballs issue #32730 ?

[BogdanRad]

Hi @cortinico, the fetch request return in android TypeError: Network request failed
In ios is ok..

I have added android:usesCleartextTraffic="true" in android manifest but the error persists...

Can you help me with a solution? :( thank you!

"react-native": "0.73.2",

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue was closed because it has been stalled for 7 days with no activity.

[rkdesign]

I am also facing the same issue, it is working on my personal laptop but it is working on my office laptop.

`import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

Sample code
export default function App() {
const [res, setRes]= useState([])
useEffect(() =>{
const apiURL = 'https://jsonplaceholder.typicode.com/users'
const fetchData = async() => {
try{
const response = await fetch(apiURL)
const data = await response.json()
setRes(data)
console.log("data == ",data)
} catch(error) {
console.log(error)
}
}
fetchData()
},[])
return (

Open up App.tsx to start working on your app!


);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
`

Error :
(NOBRIDGE) LOG [TypeError: Network request failed]
(NOBRIDGE) LOG [TypeError: Network request failed]