Blob constructor is not spec compliant

[shamilovtim]

Description

The constructor for React Native's Blob has a comment:

"Currently we only support creating Blobs from other Blobs."

BlobManager confirms this:

"Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported"

This API is not spec compliant, since this is what the Blob specification specifies:

(Constructed from) "An iterable object such as an Array, having ArrayBuffers, TypedArrays, DataViews, Blobs, strings, or a mix of any of such elements, that will be put inside the Blob. Strings should be well-formed Unicode, and lone surrogates are sanitized using the same algorithm as String.prototype.toWellFormed()."

Steps to reproduce

1. Try to call:

new Blob(new Uint8Array([
    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
    21, 22, 23,
  ]);

See that RN doesn't support Blobs composed of anything but Blobs or strings.

React Native Version

0.73.6

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

N/A

Stacktrace or Logs

N/A

Reproducer

N/A

Screenshots and Videos

No response

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[huzhanbo1996]

Hi @shamilovtim, I'm looking into this. Blob on RN is String based and does not provide any stream/binary API. Could you describe your usage/need? So we can find out what else we should do to make Blob more usable.

[shamilovtim]

Hi @huzhanbo1996

The problem is that everyone on web builds on the Blob specification which is available on other platforms and browsers but RN's Blob does not meet these specifications. Then when libraries are used in RN they break because they rely on broken / incomplete Blob.

To describe what I need

1. I need to be able to construct a Blob from TypedArrays or ArrayBuffers like the Blob specification allows for. Because this is missing from RN Blob, certain web libraries break when used on react native.

Blob on RN is String based and does not provide any stream/binary API

2. Yes this is also a separate problem. I need to be able to call stream() on Blob as well, and this is another case where RN Blob does not match web specs.

[LinusU]

Somewhat related to this, and specifically related to this part:

Blob on RN is String based and does not provide any stream/binary API.

I guess that this is the reason that Response#arrayBuffer() doesn't work, which in turn makes ky not work (sindresorhus/ky#566).

[shamilovtim]

Just to forestall any duplicate efforts to fix I think @grabbou is working on a real Blob implementation

[grabbou]

Yeah, thanks for mentioning me. I am indeed working (releasing this week - I hope) a spec complaint Blob with both steam and array buffer and a bunch of other improvements.

Please reach out to me grabbou@gmail.com and we will coordinate to make sure it does fix your issues.

It's not something I'll be sending as a PR to RN Core since it's based on Nitro.

However, as a short term hot fix, I think you can polyfill missing methods. In case of arrayBuffer, just create one by using text encoder and string value of Blob.