Stream api with fetch in a react-native app

Question

I was trying to use Stream api with fetch in react-native app, I implemented with the help of a great example mentioned at jeakearchibald.com . code is something similar to :-

fetch('https://html.spec.whatwg.org/').then(function(response) {
  console.log('response::-', response)
  var reader = response.body.getReader();
  var bytesReceived = 0;

  reader.read().then(function processResult(result) {
    if (result.done) {
      console.log("Fetch complete");
      return;
    }
    bytesReceived += result.value.length;
    console.log(`Received ${bytesReceived} bytes of data so far`);

    return reader.read().then(processResult);
  });
});

Stream api reference is :-

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

But it seems fetch implementation of react-native is little different than of browsers and it is not easy to use Stream in the same way as used on web.

There is already an unresolved issue on react-native for the same https://github.com/facebook/react-native/issues/12912

On web we can access Stream from response.body.getReader(), where response is just normal result retuned from fetch call of stream url, but in react-native there is no way we can access body and hence getReader from response of fetch call.

So to overcome this I tried to use rn-fetch-blob npm package , because it supports Streams, but that to seems to support only from locale file paths because there readStream functions doesn't seems to have support to pass Authorization and other necessary headers, so I tried to use RNFetchBlob.fetch with the remote url and necessary headers and then using readStream method from response but that always returns me there is no stream with the current response.

RNFetchBlob.fetch('GET', 'https://html.spec.whatwg.org/')
      .progress((received, total) => {
        console.log('progress', received / total);
      })
      .then((resp) => {
        // const path = resp.path();
        console.log('resp success:-', resp);
        RNFetchBlob.fs.readStream(path, 'utf8').then((stream) => {
          let data = '';
          stream.open();
          stream.onData((chunk) => {
            data += chunk;
          });
          stream.onEnd(() => {
            console.log('readStream::-', data);
          });
        // });
      })
      .catch((err) => {
        console.log('trackAppointmentStatus::-', err);
      });

I may be doing something wrong in both approaches of mine, so little guidance may help me or someone else in the future. Or I may need to find a way to do it natively with writing a bridge.

Answer 1

If you are using React Native, it used to not be possible to do this.

But streaming is now possible with https://github.com/react-native-community/fetch.

This was actually a bug that was never addressed by RN team for a while, and this repo emerged to provide a better fetch that complies with WHATWG Spec

This is a fork of GitHub's fetch polyfill, the fetch implementation React Native currently provides. This project features an alternative fetch implementation directy built on top of React Native's Networking API instead of XMLHttpRequest for performance gains. At the same time, it aims to fill in some gaps of the WHATWG specification for fetch, namely the support for text streaming.

Here's how to use it:

Install

This concise steps are from hours of debugging, and I dont want to waste your time.

$ npm install react-native-fetch-api --save

Now install polyfills:

$ npm install react-native-polyfill-globals

Use the polyfill with fetch:

Add the following code to the top of your app's entry file, index.js, located at the root of your project. Now your new Fetch is available globally.

import { polyfill as polyfillFetch } from 'react-native-polyfill-globals/src/fetch';
polyfill();

Now you can use the stream object like the normal browser fetch. Make sure to specify the option textStreaming true.

fetch('https://jsonplaceholder.typicode.com/todos/1', { reactNative: { textStreaming: true } })
  .then(response => response.body)
  .then(stream => ...)

Hope this helps!