Blobs

Here at Silk Labs we’ve had a Blob implementation for React Native for a while. We want to contribute it back upstream. This issue discusses the API and implementation and tracks progress.

Motivation

Like in the browser, Blobs are opaque lumps of (usually binary) data that can be read into TypedArrays or strings, but don’t have to be. Concretely in React Native that means that the binary data lives in native and not in JS, unless you explicitly request it. Why is this useful? Say you’re receiving some data via XHR, WebSocket, or WebRTC, or some custom method that you’ve implemented and you want to display it in an <Image> view. Or you want to send it along through some other means without looking paying the cost of transferring it to the JS thread and back.

We already have something somewhat similar to this for images on iOS (RCTImageStoreManager). This would be a generalization of that.

API

The web has an API for Blobs. It’s not particularly pretty or anything, but it’s kind of a standard, so I think we should use that, or at least a pretty good subset.

Creating

Blobs typically get created when JS is receiving data, e.g. via XHR, WebSocket, etc. I am planning on making

xhr.responseType = 'blob';

and

websocket.binaryType = 'blob';

work so that when you specify those settings, the XHR and WebSocket responses will return Blob objects and not transfer the data to the JS thread. This works exactly like on the web.

Mutating

A subset of mutation operations will be supported:

let combinedBlob = new Blob([existingBlob, anotherBlob]);
let halfBlob = blob.slice(0, blob.size / 2);

I’m not planning on supporting creating a blob in JS from JS data (e.g. a string or TypedArray), though it should be easily implementable.

Consuming

Like in the browser, you’ll be able to map Blobs to URIs that you can then use in things that eat URIs, e.g. the <Image> view:

let url = URL.createObjectURL(blob);

Also like in the browser, you’ll be able to read the blob into a TypedArray or string. I am planning on simply implementing the web’s FileReader API.

Freeing

The following method is part of the Blob standard, but is currently not implemented by browsers. However, because we can’t automatically garbage collect our blobs like browsers can, it will be necessary to provide a manual way of freeing blobs, so that consumers can make use of it when appropriate:

blob.close();

Here’s a complete example of how consuming blobs would work: https://gist.github.com/philikon/4592efd153673f3e64dec353046af7a8

Implementation

Proposal

React Native already has a loose concept of a “blob”, in other words, a lump of data that’s not directly accessible by JS. The iOS (RCTImageStoreManager) mentioned above is an example.

XHR and most notably the <Image> tag already have a way to express a reference to a blob:

{uri: "some://uri/that/gets/resolved"}

How does some://uri/that/gets/resolved get resolved? On iOS, it gets resolved through a RCTURLRequestHandler. On Android, it gets resolved through a ContentProvider.

For instance, you can upload binary data provided by a system resource in the following way:

const xhr = new XMLHttpRequest();
xhr.open(...);
xhr.send({uri: "some://big/blob/of/binary/data"})

As long as some://big/blob/of/binary/data is resolvable by a RCTURLRequestHandler or ContentProvider, this will Just Work™ already.

On this basis, I’m proposing to implement Blobs as simply another way of URI-addressable binary data. Our implementation does exactly that.

Progress

Prep work:

• Make XMLHttpRequest and XMLHttpRequest.upload proper EventTargets so that we can receive progress events even when we’re not receiving data to JS, because we’re receiving it into a blob (#7017)
• Add responseType as a concept to RCTNetworking, so that we can add ‘blob’ later (#8324)

Implementation work, most likely by porting silk-react-native-blobs:

• Provide native blob storage with NativeModule API, and JS implementation of Blob class
• Provide URI integration (RCTURLRequestHandler on iOS, ContentProvider on Android)

Future implementation work:

• XHR integration: allow xhr.responseType = 'blob' and xhr.send(blob)
• WebSocket integration: allow websocket.binaryType = 'blob' and websocket.send(blob)
• Implement FileReader API for reading blobs into JS e.g. as TypedArrays. This can just be a thin wrapper around XHR, yay!

[philikon]

Yep, that’s the reason for this issue 😃, so that we can coordinate. I believe he’s uplifting our Blob implementation.

[austinksmith]

So how can we get this issue prioritized, it appears that PR has been in limbo for almost a year