"Network request failed" with react-native (even with `android:usesCleartextTraffic="true"`)

Question

I did npx react-native init AwesomeProject to create a new project (I'm following the official get-started tutorial. When I simply run npx react-native start and then npx react-native run-android without tweaking anything everything works fine. But I need to make an API call, so I tried copying and pasting the example from the official network tutorial (only without the try/catch, so I can see the errors) into App.js (right after the imports):

async function getMoviesFromApiAsync() {
    let response = await fetch(
        'https://reactnative.dev/movies.json'
    );
    let json = await response.json();
    console.log(json.movies);
    return json.movies;
}

Then right below it I added a call to that function:

getMoviesFromApiAsync();

That gives me a Network request failed error. This is the full error message I see on Terminal:

Fri May 08 2020 10:23:00.325]  WARN     Possible Unhandled Promise Rejection (id: 0):
TypeError: Network request failed
onerror@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:28005:31
dispatchEvent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:34133:31
setReadyState@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:33217:33
__didCompleteResponse@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:33044:29
emit@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:3420:42
__callFunction@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2748:49
http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2470:31
__guard@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2702:15
callFunctionReturnFlushedQueue@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2469:21
callFunctionReturnFlushedQueue@[native code]

I googled around and ended up trying the following:

1) I added android:usesCleartextTraffic="true" to AndroidManifest.xml

2) I added a bunch of permissions to AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

3) I added android:networkSecurityConfig="@xml/network_security_config" to AndroidManifest.xml

4) I tried setting a proxy (10.0.2.2) and port (8081), as suggested in here

5) I tried deleting the app from the emulator and reinstalling it, as well as clearing the cache (npx react-native start --reset-cache)

Nothing seems to work. I still get the same "Network request failed" message.

I'm using React Native 0.62.2 on a Pixel 2 API 28 emulator running Android 9.0, on macOS Catalina.

use try-catch for `Possible Unhandled Promise Rejection`. – Akhil Nayak May 08 '20 at 14:02 — Akhil Nayak, May 08 '20 at 14:02
But what do I put inside `catch`? – Parzival May 08 '20 at 17:39 — Parzival, May 08 '20 at 17:39

score 3 · Answer 1 · answered May 08 '20 at 19:03

I'm stupid. I've been at this for three full days and only now I realized that the problem is that the emulator didn't have access to the internet (even after adding android.permission.INTERNET to the manifest). The solution was to change the DNS address of my network, as detailed in this answer.

"Network request failed" with react-native (even with `android:usesCleartextTraffic="true"`)

1 Answers1