0

I'm currently building a React Native Android app and I'm trying to do a simple fetch inside my Code.

const response = await fetch('http://localhost:8081/assets/src/...',{
    method: 'GET'
})

There is absolutely no output from this call. No Error, no Return. When logging the Metro Server, there is not even a request coming in. The code stalls completely. I tried it with an XMLHttpRequest but the result is almost identical. The only difference is that the server gets the request. onerror or onload are never called.

What I've tried so far:

  • android:usesCleartextTraffic="true" added to manifest xml
  • inlineRequires: true, in metro config
  • used XMLHttpRequest
  • <uses-permission android:name="android.permission.INTERNET" /> is set

I Really hope someone can help me!

My Current package.json:

{
  "name": "myapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.17.7",
    "@tensorflow/tfjs": "^3.18.0",
    "@tensorflow/tfjs-react-native": "^0.8.0",
    "async-storage": "^0.1.0",
    "aws-sdk": "^2.1170.0",
    "expo": "^45.0.0",
    "expo-asset": "^8.5.0",
    "expo-camera": "^12.2.0",
    "expo-constants": "~13.1.1",
    "expo-file-system": "^14.0.0",
    "expo-gl": "^11.3.0",
    "expo-gl-cpp": "^11.3.0",
    "expo-modules-core": "^0.9.2",
    "ffmpeg-kit-react-native": "^4.5.2",
    "geolib": "^3.3.3",
    "graphql": "^16.5.0",
    "graphql-ws": "^5.9.1",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-base64": "^0.2.1",
    "react-native-battery": "^0.1.18",
    "react-native-device-info": "^10.0.0",
    "react-native-fs": "^2.20.0",
    "react-native-geolocation-service": "^5.3.0",
    "react-native-maps": "^1.0.0",
    "react-native-polyfill-globals": "^3.1.0",
    "react-native-vision-camera": "^2.13.5",
    "text-encoding": "^0.7.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/eslint-parser": "^7.18.2",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.67.0",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}
Slice
  • 33
  • 5

1 Answers1

0

If your response from Postman and from the Browser looks good then its probably the fact that you are using localhost wich the Emulator cant understand.

Try to use your IP Adress (the one from your PC where the Emulator runs).

So instead of: fetch('http://localhost:8081/assets/src...

use: fetch('http://localIPaddressFromYourPC:8081/assets/src

yesIamFaded
  • 1,970
  • 2
  • 20
  • 45
  • does not change the behaviour. Even if I fetch an HTTPS API the result is the same. With `XMLHttpRequest` the local server receives a request, so localhost is reachable for the app. – Slice Jul 11 '22 at 13:21
  • Well how are you displaying your result that should be there? Maybe thats your error. – yesIamFaded Jul 11 '22 at 13:25
  • It's a simple console log after the await, and that is never shown. The data of the request is binary. The promise of fetch is never resolved nor rejected. It stays "pending" – Slice Jul 11 '22 at 13:29
  • 1
    Just tried the same code in a RN0.67.4 app and it works like expected. – Slice Jul 11 '22 at 13:38
  • Glad to here that! – yesIamFaded Jul 11 '22 at 13:47