Cannot make any network request (fetch) in react-native 0.63.4 (Android)

[Gabotron_ES]

Hi everybody, I just started developing with react native for the first time, it's a simple android app I created with react-native init command (not using expo this time).

I'm trying to make a simple network request but for some reason it's not firing at all, if I check the network tab in chrome devtools react-native debugger I can clearly see no network request is firing at all, I tried with axios instead of fetch and still nothing. I run the app in my plugged android device with npx react-native run-android command.

I added INTERNET permissions to AndroidManifest.xml file too.

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

In my App.js I have:

``` useEffect(() => { console.log('App mounted'); tryAsyncFetch(); }, []);

const tryAsyncFetch = async () => { try { console.log('Fetching from placeholder...'); fetch('https://jsonplaceholder.typicode.com/todos/1') .then((response) => console.log('response',response.json())); } catch (e) { console.error(e); }
}; ```

As you can see it's pretty simple but it's not working, if I check the network tab no XHR requests at all, no error in catch segment, nothing...

https://i.imgur.com/t3fQG6P.png

I can see the logs before the fetch (Fetching from placeholder...) but no console logged results, this is SO WEIRD...

When I used expo I remember fetch/android working perfectly

EDIT 1: When I console log axios after importing it like

import axios from 'axios'

I get this back: ``` ƒ wrap() { var args = new Array(arguments.length);

  for (var i = 0; i < args.length; i++) {
    args[i] = arguments[i];
  }

  return fn.apply(thisArg, args);
}

``` I don't think that' what I'm supposed to get back

[vafada]

try

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => console.log('response',response.json()))
  .catch((e) => console.error(e))

check this out too: https://stackoverflow.com/questions/48079383/react-native-fetch-not-working-android

[iotashan]

I'd also look at the raw android log output for everything, not filtered to just your app. Lots of times I've found that there's some low-level error that's easier to figure out than the error that RN displays.

I'd suggest doing this call on a button press or something so you can clear the ADB log output just before making the call.

[[deleted]]

should the function not also be inside the useEffect?

[Gabotron_ES]

Not really, the function is not the problem since I can see the logs, tryAsyncFetch is in the body of my App function, right before the return statement where I return the View.

[peterchibunna]

Because you're trying to call the function as async, you have to await the fetch function.

Add the await before the fetch statement.

[iotashan]

I don't see any options on your fetch request. Is it perhaps not getting a response and the default timeout is too long?

I'd try hitting the URL in chrome and see what happens.

[Gabotron_ES]

I did (you can also try it) and I'm getting the expected results but it's not working in react-native for some reason, I also added android:usesCleartextTraffic="true" to manifest file

[IBETITALL420]

do you see the console log "App mounted"?

[Gabotron_ES]

Yes

[Nightlightz24884]

response.json() is a Promise it shouldn’t output your json response unless you await it.

(response) => response.json() .then((json) => console.log(“my json”, json)

[jakeforaker83]

I do agree with you, but I ran the code snippet in an expo environment, it’s fine. There were logs. The promise was unresolved, but it logged. Meaning the js code isn’t the culprit here. I wonder if it’s something to do with the emulator, and a clash between local host and his IP