I want to fetch audio-files from remote storage. How can i use the response-result from method "fetch" to handle binary data? i want to save them in local filesystem with react-native-fs. But i can't find nowhere a documentation of the return-value of method "fetch" to access the binary blob. I tried to console.log the response of fetch, but with binary data, xcode is hanging then being unresponsible

I am looking for something like this:

    fetch(mediaUrl).then( (response) => {
        let blob = response.getBinaryData()
    })

(getBinaryData is'nt a valid method. And exactly this is my question: how to obtain the binary data?)

Update

some people points to "response.blob()", but this method is not implemented in react-native.

"response.blob is not a function. (In 'response.blob()', 'response.blob' is undefined)"

I want to fetch audio-files from remote storage. How can i use the response-result from method "fetch" to handle binary data? i want to save them in local filesystem with react-native-fs. But i can't find nowhere a documentation of the return-value of method "fetch" to access the binary blob. I tried to console.log the response of fetch, but with binary data, xcode is hanging then being unresponsible

I am looking for something like this:

    fetch(mediaUrl).then( (response) => {
        let blob = response.getBinaryData()
    })

(getBinaryData is'nt a valid method. And exactly this is my question: how to obtain the binary data?)

Update

some people points to "response.blob()", but this method is not implemented in react-native.

"response.blob is not a function. (In 'response.blob()', 'response.blob' is undefined)"

• javascript
• react-native

2 Answers 2

I've totally forgotten this (outdated) question of myself nearly one and a half year ago and will finally provide a suitable answer:

With the library react-native-fs one can download binary files and stores them binary on disk storage, that audio-files can played well with react-native-sound and video-files for instance can be played well with react-native-video.

Example code:

  const downloadOptions = {
    fromUrl: imageUrl,
    toFile: filename
  }
  return yield RNFS.downloadFile(downloadOptions).promise.then( (res) => {
    if(res.statusCode == 200) {
      return true;
    }
    else {
      console.log("Download failed", res);
      return false;
    }

  })
  .catch((err) => {
    console.log('DownloadFile Error', err);
    return false;
  });

I spent a while investigating this. I'm sure there's more to know but I'd start with https://developer.mozilla/en-US/docs/Web/API/Blob and https://developer.mozilla/en-US/docs/Web/API/Body/blob

Here's a working RN code snippet.

url = 'https://www.google./images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
opts = {}
return fetch(url, opts)
  .then(response => response.blob())
  .then(blob => {
    console.log('blob', blob);
    let reader = new FileReader();
    reader.addEventListener("loadend", function() {
      console.log(reader.result);
    });
    reader.readAsDataURL(blob);
  });
}