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 failedonerror@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:28005:31dispatchEvent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:34133:31setReadyState@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:29emit@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:49http://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:15callFunctionReturnFlushedQueue@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2469:21callFunctionReturnFlushedQueue@[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.