[Regression] [0.57] Fetching images on iOS fails with an empty fetch body and warning that "Received data was not a string, or was not a recognized encoding."

[tallpants]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 417.92 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.4 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 25.0.2, 26.0.0, 26.0.2, 26.0.3, 27.0.3, 28.0.0
        API Levels: 23, 25, 26, 27, 28
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0
      react-native: 0.57.0 => 0.57.0

Description

Trying to fetch an image on iOS errors out with "Received data was not a string, or was not a recognized encoding." The body of the fetch response is empty:

Output from debug console for iOS:

This works absolutely fine on Android.
Output from debug console on Android:

This is definitely a regression since this worked absolutely on fine on iOS on the 0.55 release (the same version that's currently used by Expo as of 13th September 2018 -- 0.55.4 to be precise). Blobs should be fetch-able since 0.54: (https://github.com/facebook/react-native/releases/tag/v0.54.0)

Reproducible Demo

react-native init a new app, and paste this in App.js:

import React from 'react'
import { Text, View } from 'react-native'

export default class App extends React.Component {
  async componentDidMount() {
    const x = await fetch('https://placekitten.com/g/1000/1000')
    console.log(x)
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Hello, React Native!</Text>
      </View>
    )
  }
}

Also tried with this direct file URL: https://i.imgur.com/w45SLoD.jpg

[Gregoirevda]

I saw that fetch (whatwg-fetch) calls let xhr = new XMLHttpRequest() and xhr.responseType is "". Which is transformed to "text" by default. IOS code will, based on responseType handle the response as text and not blob.

Changing xhr variable at runtime (debugger on fetch and go inside function call) to xhr.responseType = 'blob' solves the issue.

I don't know if this is related to whatwg-fetch or ios code

[minimaluminium]

@Gregoirevda Oh god, you just saved my day. I was using fetch(), rn-fetch-blob with no luck for an entire day. Thanks a lot.