React Native Fetch Remote Http request throws Network Request Failed (On Android Device)

Question

I am trying to access Remote HTTP Api on my local machine. The API is working perfectly on Postman as well as on Chrome in my local machine. But When making Fetch call using Expo React Native Fetch I am getting the following error:

Network request failed

node_modules\whatwg-fetch\dist\fetch.umd.js:473:29 in xhr.onerror node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
node_modules\react-native\Libraries\Network\XMLHttpRequest.js:574:29 in setReadyState
node_modules\react-native\Libraries\Network\XMLHttpRequest.js:388:25 in __didCompleteResponse
node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
[native code]:null in callFunctionReturnFlushedQueue**

For your information I am trying to run the app on a Latest Android Device using expo client.

Code :

componentDidMount() {
  const url = (Remote Http URL);
  this.setState({
    loading: true
  });
  fetch(url)
    .then(res => res.json())
    .then(res => {
      this.setState({
        loading: false,
        error: res.error || null,
        data1: res
      }, () => {
        console.log(res);
      });
    })
    .catch(error => {
      this.setState({
        error,
        loading: false
      }, () => {
        console.log(error);
      });
    });
}

Please help me to resolve this issue. Thanks.

Yama Yama · Accepted Answer · 2020-05-02T18:36:01

The only solution I found to this problem was setting the url I'll be fetching to my IP address as the host (since my phone React Native runs differently then the backend). Lastly setting the backend to 0.0.0.0:8080 seems to have fixed this problem. At least momentarily.

React Native Fetch Remote Http request throws Network Request Failed (On Android Device)

1 Answers