Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react native Fetch Network request failed on android

I'm trying to receive some simple json from mocky.

React native fetch function:

getMemberDomainList = async (name) => {
  try {
    let response = await fetch('https://5c9cc9ed3be4e30014a7d287.mockapi.io/api/domain', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    });
    let responseJson = await response.json();
    return responseJson;
  } catch (error) {
    console.error(error);
  }
}

I have tested the address in chrome on windows, it returns the expected mock data. But when the function is called on my android phone I get this error enter image description here

Error from remote debugger

...\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2348 TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (...\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:4337)
    at XMLHttpRequest.dispatchEvent (...\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:10760)
    at XMLHttpRequest.setReadyState (...\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:10511)
    at XMLHttpRequest.__didCompleteResponse (...\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:10343)
    at ...\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:10449
    at RCTDeviceEventEmitter.emit (...\Libraries\Components\DrawerAndroid\DrawerLayoutAndroid.android.js:11)
    at MessageQueue.__callFunction (...\Libraries\ART\ReactNativeART.js:362)
    at blob:http://localhost:8081/79251787-d190-4650-8040-23d091c08738:2334
    at MessageQueue.__guard (...\Libraries\ART\ReactNativeART.js:312)
    at MessageQueue.callFunctionReturnFlushedQueue (...\Libraries\ART\ReactNativeART.js:139)

I'm also running a WebView in my app, which is pointing to a web url, it loads perfectly so I am sure that the phone has internet permission and access etc.

like image 441
Rasmus Puls Avatar asked Mar 28 '19 13:03

Rasmus Puls


People also ask

How do you solve network request failed in react native?

It's just that simple! Start your app as usual but don't forget to give an IP address and a port, this will help you solve the Network Request Failed error. And on your mobile app, make sure to use the correct URL in your request. Make sure that CORS is enabled on your backend to avoid errors related to CORS.

Why does my phone say network request failed?

Most of time , when network request failed error occurred, clearing the app cache will resolve the issue. So, To fix Instagram network request failed issue, clear Instagram app cache. To clear the Instagram App cache, For Android users, Go to settings >> Find Instagram App >> Tap on clear cache.

Does react native support fetch?

React Native provides the Fetch API for your networking needs. Fetch will seem familiar if you have used XMLHttpRequest or other networking APIs before. You may refer to MDN's guide on Using Fetch for additional information.

What is network request?

A network request is an HTTP request from your mobile app to a server-side application. The iOS Agent detects network requests when the underlying implementation is handled by the NSURLConnection or NSURLSession classes.


2 Answers

In the latest android versions http requests are not allowed by default. Take a look at this post for further information about allowing http request: How to allow all Network connection types HTTP and HTTPS in Android (9) Pie?

like image 176
sebbab Avatar answered Oct 23 '22 02:10

sebbab


Can't get mockapi.io to work. But the error is not persistent when using services such as:

https://jsonplaceholder.typicode.com/todos/1

Might not be an android or react native related problem after all. Also had issues with mockapi.io in postman, though it works fine in chrome.

like image 37
Rasmus Puls Avatar answered Oct 23 '22 01:10

Rasmus Puls