BlobManager: implement Blob from ArrayBuffer

[CodyJasonBennett]

Summary:

Fixes a critical networking path used commonly in graphics code, among many other use-cases. It is commonplace to store images within a single binary such as a GLB (see KHR_binary_glTF). Base64 encoded glTF can be critically slow in older browsers with an increased size, so it's not a suitable fallback for those targeting multiple platforms. Furthermore, large base64 payloads can cause crash behavior on native when passed via JSI (e.g. expo-gl). For textures, this can be several megabytes of high precision data, and a uri from a blob is preferred rather than writing platform-specific workarounds via the filesystem.

A user-land patch I've employed in pmndrs/react-three-fiber, as well as existing user-land patches, is to test the Blob constructor with an empty ArrayBuffer. base64-js is used here since it's already installed with react-native for binary utils elsewhere. This is declared as a dependency in the linked library since this is an implementation detail, but will be de-duplicated at install time.

import { fromByteArray } from 'base64-js'

// Patch Blob for ArrayBuffer if unsupported
try {
  new Blob([new ArrayBuffer(4)])
} catch (_) {
  global.Blob = class extends Blob {
    constructor(parts, options) {
      super(
        parts?.map((part) => {
          if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
            part = fromByteArray(new Uint8Array(part))
          }

          return part
        }),
        options,
      )
    }
  }
}

Changelog:

[INTERNAL] [FIXED] - Implement Blob from ArrayBuffer

Test Plan:

Run the following at the project root to selectively test changes:

jest packages/react-native/Libraries/Blob

Note: base64 encoding will add an additional ~33% size increase to binary data as part of this PR. This is padded to 4 bytes so a byte length of 4 will encode as 8. Native ArrayBuffer support would not have this behavior and remove the overhead of base64 encoding back and forth. This is a growing behavior across the networking stack, such as in FileReader.

[facebook-github-bot]

Hi @CodyJasonBennett!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[github-actions]

	Warnings
⚠️	One hour and a half have passed and the E2E jobs haven't finished yet.
⚠️	packages/react-native/Libraries/Blob/BlobManager.js#L11 - packages/react-native/Libraries/Blob/BlobManager.js line 11 – Requires should be sorted alphabetically (lint/sort-imports)

Generated by 🚫 dangerJS against 6498dbe

[facebook-github-bot]

@dmytrorykun has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[github-actions]

This pull request was successfully merged by @CodyJasonBennett in a228b0f.

^{When will my fix make it into a release? | Upcoming Releases}

[wcandillon]

Thank you for this important patch @CodyJasonBennett. Is there a way to track in which RN version this has landed?