react-native: React-Native Network request failed on Android Emulator API 16-19 with specific SSL Cipher suite

🐛 Bug Report

To Reproduce

This bug is related to React-Native v0.59.1

  1. react-native init testnet
  2. Copy these lines to your App.js above render()
  componentDidMount() {
   	this.testNet();
  }

  testNet(){
  	console.log("Executing test function");
    fetch('https://reqres.in/api/users?page=2').then(response => response.json()).then(json => console.log("TESTOUTPUT",json['total']))
  }

Try to run project on Android Emulator running on API 16-19 with Google APIs, You will have this error:

03-18 15:00:36.022 2191-2224/com.testnet W/ReactNativeJS: Possible Unhandled Promise Rejection (id: 0):
    TypeError: Network request failed
    onerror@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:24080:31
    dispatchEvent@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:28724:31
    setReadyState@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:28477:33
    __didCompleteResponse@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:28304:29
    emit@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:3280:42
    __callFunction@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:2577:49
    http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:2334:31
    __guard@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:2531:15
    callFunctionReturnFlushedQueue@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:2333:21
    callFunctionReturnFlushedQueue@[native code]

Notes:

  1. This testing demo is using an HTTPS website, So it’s not related to network security config cleartext issue.
  2. The problem occurs with specific SSL/TLS Cipher suites for web-servers which are the following as example:
Cipher suites enabled for https://reqres.in and all other Cloudflare Free plan SSL sites:
TLS_ECDHE_ECDSA_WITH_AES_128_CBC_SHA (0xC009)
TLS_ECDHE_ECDSA_WITH_AES_256_CBC_SHA (0xC00A)
TLS_ECDHE_ECDSA_WITH_AES_128_CBC_SHA256 (0xC023)
TLS_ECDHE_ECDSA_WITH_AES_256_CBC_SHA384 (0xC024)
TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256 (0xC02B)
TLS_ECDHE_ECDSA_WITH_AES_256_GCM_SHA384 (0xC02C)
TLS_ECDHE_ECDSA_WITH_CHACHA20_POLY1305_SHA256 (0xCC14)

It seems the whole project cannot access internet connectivity, I have the permission in the manifest to access internet

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

Otherwise you can test the same project on Android Emulator running on API 20 or later.

Expected Behavior

Expected console log output with 'TESTOUTPUT', 12.

Code Example

https://snack.expo.io/@areeb111/testnet

Environment

$ react-native info
info 
  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-2520M CPU @ 2.50GHz
      Memory: 393.43 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 9.11.1 - /usr/local/bin/node
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 22, 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.3, 24.0.0, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.1, 27.0.3, 28.0.3
        System Images: android-16 | Google APIs Intel x86 Atom, android-17 | Google APIs Intel x86 Atom, android-19 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom_64, android-23 | Android TV Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.1 => 0.59.1 
    npmGlobalPackages:
      react-native-animatable: 1.2.4
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
      react-native-modal: 5.4.0

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 12
  • Comments: 33 (2 by maintainers)

Most upvoted comments

The same error like @plowman described. Also tried with axios (just Network error with status code 0) and on API 25 and 28. But its working on API 23

Ok. Ive found a workaround:

  1. Removed ./android/app/src/debug folder
  2. add android:usesCleartextTraffic=“true” to ./adnroid/app/src/main/AndroidManifest:
     <application
       ...
      android:usesCleartextTraffic="true"
     ...>
+177
RageOfJustice on Mar 22, 2019

Same problem here after upgrading from 0.57 to ReactNative 0.59.1. TypeError: Network request failed at XMLHttpRequest.xhr.onerror (47baf4cc-4977-4d41-b6f0-f842f48c5840:23673) at XMLHttpRequest.dispatchEvent (47baf4cc-4977-4d41-b6f0-f842f48c5840:28317) at XMLHttpRequest.setReadyState (47baf4cc-4977-4d41-b6f0-f842f48c5840:28070) at XMLHttpRequest.__didCompleteResponse (47baf4cc-4977-4d41-b6f0-f842f48c5840:27897) at 47baf4cc-4977-4d41-b6f0-f842f48c5840:28007 at RCTDeviceEventEmitter.emit (47baf4cc-4977-4d41-b6f0-f842f48c5840:3290) at MessageQueue.__callFunction (47baf4cc-4977-4d41-b6f0-f842f48c5840:2587) at 47baf4cc-4977-4d41-b6f0-f842f48c5840:2344 at MessageQueue.__guard (47baf4cc-4977-4d41-b6f0-f842f48c5840:2541) at MessageQueue.callFunctionReturnFlushedQueue (47baf4cc-4977-4d41-b6f0-f842f48c5840:2343)

ENV INFO: React Native Environment Info: System: OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus) CPU: (4) x64 Intel® Core™ i5-5200U CPU @ 2.20GHz Memory: 183.18 MB / 7.66 GB Shell: 4.3.48 - /bin/bash Binaries: Node: 8.12.0 - /usr/local/bin/node Yarn: 1.9.4 - /usr/local/bin/yarn npm: 6.4.1 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman npmPackages: react: ^16.8.4 => 16.8.4 react-native: ^0.59.1 => 0.59.1 npmGlobalPackages: create-react-native-app: 2.0.2 react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7

+10
jahicDario on Mar 19, 2019

The same error like @plowman described. Also tried with axios (just Network error with status code 0) and on API 25 and 28. But its working on API 23

Ok. Ive found a workaround:

  1. Removed ./android/app/src/debug folder
  2. add android:usesCleartextTraffic=“true” to ./adnroid/app/src/main/AndroidManifest:
     <application
       ...
      android:usesCleartextTraffic="true"
     ...>

still didnt resolve the issue. i removed the ./android/app/src/debug folder, added the android:usesCleartextTraffic application tag inside ./android/src/main/AndroidManifest.xml but still showing below error. Please anybody help

TypeError: Network request failed at XMLHttpRequest.xhr.onerror (691a5233-3b7d-4b46-9…-c070b1174550:42527) at XMLHttpRequest.dispatchEvent (691a5233-3b7d-4b46-9…-c070b1174550:47969) at XMLHttpRequest.setReadyState (691a5233-3b7d-4b46-9…-c070b1174550:46830) at XMLHttpRequest.__didCompleteResponse (691a5233-3b7d-4b46-9…-c070b1174550:46657) at 691a5233-3b7d-4b46-9…-c070b1174550:46767 at RCTDeviceEventEmitter.emit (691a5233-3b7d-4b46-9…-c070b1174550:16846) at MessageQueue.__callFunction (691a5233-3b7d-4b46-9…-c070b1174550:16459) at 691a5233-3b7d-4b46-9…-c070b1174550:16216 at MessageQueue.__guard (691a5233-3b7d-4b46-9…-c070b1174550:16413) at MessageQueue.callFunctionReturnFlushedQueue (691a5233-3b7d-4b46-9…-c070b1174550:16215)

+9
azuddin on Jul 3, 2019

I’m seeing the same thing, “Uncaught Error: unsupported BodyInit type” after upgrading react-native to 0.59.1. Hopefully the following helps someone debug this further:

  1. I’m seeing this on a physical device running Android Pie / Android API Level 28. Also saw this on the iOS Simulator.
  2. This only happens with debugging enabled, I’m using Chrome 73.0.3683.86
  3. I tried adding the network_security_config.xml as suggested above but it didn’t make a difference.
  4. I’m on macOS 10.14.3

This is preventing me from debugging anything which makes a network call in Android so it would be great if someone could look at this. Thanks!

Stack Trace

Click to expand 
Uncaught Error: unsupported BodyInit type

Body._initBody@deprecatedPropType.js:11
 Response@MatrixMath.js:216
 xhr.onload@MatrixMath.js:304
 load (async)
 (anonymous)@MatrixMath.js:280
 tryCallTwo@ReactNativeRenderer-dev.js:72
 doResolve@ReactNativeRenderer-dev.js:424
 Promise@ReactNativeRenderer-dev.js:144
 self.fetch@MatrixMath.js:280
 fetchWithTimeout@blob:http://localhos…b7dbde8b148e:204812
 execute$@SpotRequestsContainer.js:108
 tryCatch@index.js:57
 invoke@index.js:101
 prototype.(anonymous function)@index.js:94
 tryCatch@index.js:57
 invoke@index.js:101
 (anonymous)@index.js:101
 tryCallTwo@ReactNativeRenderer-dev.js:72
 doResolve@ReactNativeRenderer-dev.js:424
 Promise@ReactNativeRenderer-dev.js:144
 callInvokeWithMethodAndArg@index.js:101
 enqueue@index.js:101
 prototype.(anonymous function)@index.js:94
 runtime.async@index.js:101
 execute@SpotRequestsContainer.js:116
 fetchWithRetries@SpotRequestsContainer.js:131
 fetchResource$@unstated.js:10
 tryCatch@index.js:57
 invoke@index.js:101
 prototype.(anonymous function)@index.js:94
 tryCatch@index.js:57
 invoke@index.js:101
 (anonymous)@index.js:101
 tryCallTwo@ReactNativeRenderer-dev.js:72
 doResolve@ReactNativeRenderer-dev.js:424
 Promise@ReactNativeRenderer-dev.js:144
 callInvokeWithMethodAndArg@index.js:101
 enqueue@index.js:101
 prototype.(anonymous function)@index.js:94
 runtime.async@index.js:101
 fetchResource@unstated.js:10
 authenticateWithFirebase$@LotsContainer.js:145
 tryCatch@index.js:57
 invoke@index.js:101
 prototype.(anonymous function)@index.js:94
 tryCatch@index.js:57
 invoke@index.js:101
 (anonymous)@index.js:101
 tryCallOne@ReactNativeRenderer-dev.js:58
 (anonymous)@ReactNativeRenderer-dev.js:293
 (anonymous)@ReactNativeRenderer-dev.js:5475
 _callTimer@ReactNativeRenderer-dev.js:5294
 _callImmediatesPass@ReactNativeRenderer-dev.js:5342
 callImmediates@ReactNativeRenderer-dev.js:5681
 __callImmediates@LayoutTreeParser.js:95
 (anonymous)@Commands.js:100
 __guard@LayoutTreeParser.js:84
 flushedQueue@Commands.js:100
 invokeCallbackAndReturnFlushedQueue@Commands.js:95
 (anonymous)@debuggerWorker.js:80
+6
plowman on Mar 22, 2019

The same error like @plowman described. Also tried with axios (just Network error with status code 0) and on API 25 and 28. But its working on API 23

Ok. Ive found a workaround:

  1. Removed ./android/app/src/debug folder
  2. add android:usesCleartextTraffic=“true” to ./adnroid/app/src/main/AndroidManifest:
     <application
       ...
      android:usesCleartextTraffic="true"
     ...>

Just adding android:usesCleartextTraffic=“true” worked for me. If you’re using localhost API, make sure to put your IPV4 instead of use localhost, example: …

const client = new ApolloClient({
  uri: 'http://192.168.1.102:4000/graphql',
})
+5
andersoncscz on Dec 11, 2019

Hey 👋 thank you for raising this issue; starting with Android 9 (API level 28 - RN 59 builds with 28), cleartext traffic support is disabled by default.

@jahicDario @vitalii I think this applies to your issue; we added some network security config rules as part of 59 but these will only apply to new apps created through react-native init. For existing apps please could you try following the documentation indicated on the Android tab here: https://facebook.github.io/react-native/docs/integration-with-existing-apps#network-security-config-api-level-28

@areeb111 I think there may be two different issues going on here, if the cleartext configuration change is unrelated please could you let me know.

Thank you

+5
Salakar on Mar 19, 2019

It’s working!

+2
AnkitAnandTopno on Oct 4, 2019

The same error like @plowman described. Also tried with axios (just Network error with status code 0) and on API 25 and 28. But its working on API 23

Ok. Ive found a workaround:

  1. Removed ./android/app/src/debug folder
  2. add android:usesCleartextTraffic=“true” to ./adnroid/app/src/main/AndroidManifest:
     <application
       ...
      android:usesCleartextTraffic="true"
     ...>

still didnt resolve the issue. i removed the ./android/app/src/debug folder, added the android:usesCleartextTraffic application tag inside ./android/src/main/AndroidManifest.xml but still showing below error. Please anybody help

TypeError: Network request failed at XMLHttpRequest.xhr.onerror (691a5233-3b7d-4b46-9…-c070b1174550:42527) at XMLHttpRequest.dispatchEvent (691a5233-3b7d-4b46-9…-c070b1174550:47969) at XMLHttpRequest.setReadyState (691a5233-3b7d-4b46-9…-c070b1174550:46830) at XMLHttpRequest.__didCompleteResponse (691a5233-3b7d-4b46-9…-c070b1174550:46657) at 691a5233-3b7d-4b46-9…-c070b1174550:46767 at RCTDeviceEventEmitter.emit (691a5233-3b7d-4b46-9…-c070b1174550:16846) at MessageQueue.__callFunction (691a5233-3b7d-4b46-9…-c070b1174550:16459) at 691a5233-3b7d-4b46-9…-c070b1174550:16216 at MessageQueue.__guard (691a5233-3b7d-4b46-9…-c070b1174550:16413) at MessageQueue.callFunctionReturnFlushedQueue (691a5233-3b7d-4b46-9…-c070b1174550:16215)

Add the codes in your main AndroidManifest.xml

manifest => xmlns:tools=“http://schemas.android.com/tools” application=> android:usesCleartextTraffic=“true” tools:targetApi=“28”

And make sure u still use http:// not https:// to fetch . it can working on Android 9 with API 28

+2
dqhung311 on Jul 6, 2019

The fix is landed in the master, but still requires some manual configuration in build.gradle. Please see https://github.com/facebook/react-native/pull/23984 for more information. Feel free to comment if issue persists with workaround, and I’ll re-open this.

+2
dulmandakh on Apr 2, 2019

The same error like @plowman described. Also tried with axios (just Network error with status code 0) and on API 25 and 28. But its working on API 23

Ok. Ive found a workaround:

  1. Removed ./android/app/src/debug folder
  2. add android:usesCleartextTraffic=“true” to ./adnroid/app/src/main/AndroidManifest:
     <application
       ...
      android:usesCleartextTraffic="true"
     ...>

In my case i already have this, just need to delete debug folder and it works! Thanks

+1
satriapr on Jan 22, 2020

The same error like @plowman described. Also tried with axios (just Network error with status code 0) and on API 25 and 28. But its working on API 23

Ok. Ive found a workaround:

  1. Removed ./android/app/src/debug folder
  2. add android:usesCleartextTraffic=“true” to ./adnroid/app/src/main/AndroidManifest:
     <application
       ...
      android:usesCleartextTraffic="true"
     ...>

Thanks it’s now fixed!

+1
luiscflores on Apr 5, 2019

Fixed for me with add android:usesCleartextTraffic=“true” to ./adnroid/app/src/main/AndroidManifest

+1
ahce on Apr 4, 2019

have the same problem, but only with local ip address, and API 28. So, I think it’s not really emulator API version issue

my error

console.error: "erer", {"line":24080,"column":31,"sourceURL":"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"}
error

<unknown>
lexer.js:479:2
tryCallOne
ReactNativeRenderer-dev.js:4669:6
<unknown>
ReactNativeRenderer-dev.js:4766:14
_callTimer
ReactNativeRenderer-dev.js:9701:10
_callImmediatesPass
ReactNativeRenderer-dev.js:9747:13
callImmediates
ReactNativeRenderer-dev.js:9996:8
__callImmediates
ReactNativeART.js:388:4
<unknown>
ReactNativeART.js:232:6
__guard
ReactNativeART.js:373:1
flushedQueue
ReactNativeART.js:234:19

What is interesitng, if I switch on remote debugging it can send a request, but then fails on handling

ReactNativeRenderer-dev.js:4039 Uncaught Error: unsupported BodyInit type
    at Response.Body._initBody (ReactNativeRenderer-dev.js:4039)
    at new Response (ReactNativeRenderer-dev.js:4337)
    at XMLHttpRequest.xhr.onload (ReactNativeRenderer-dev.js:4386)
+1
vitalii on Mar 19, 2019
Read more comments on GitHub
← react-native: react-native link hangs after "Assets have been successfully linked to your project"
react-native: React Native Packager sometimes crashes with WebSocket "ERROR not opened" →