Expo Blob

A web standards-compliant Blob implementation for React Native.

Android

iOS

Web

Included in Expo Go

expo-blob provides a web standards-compliant Blob implementation for React Native that offers superior performance and works consistently across all platforms. It is more reliable compared to the implementation exported from react-native, unlike Blob from react-native, which has limitations with the slice() method and other Web API features.

Installation

Terminal

- npx expo install expo-blob

- yarn expo install expo-blob

- pnpm expo install expo-blob

- bun expo install expo-blob

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic blob creation

import { Blob } from 'expo-blob';

// Create an empty blob
const emptyBlob = new Blob();

// Create a blob from text
const textBlob = new Blob(['Hello, World!'], { type: 'text/plain' });

// Create a blob from binary data
const binaryBlob = new Blob([new Uint8Array([1, 2, 3, 4])], {
  type: 'application/octet-stream',
});

// Create a blob from mixed content
const mixedBlob = new Blob(
  [
    'Text content',
    new Uint8Array([65, 66, 67]), // ABC in ASCII
    'More text',
  ],
  { type: 'text/plain' }
);

Blob properties

const blob = new Blob(['Hello, World!'], { type: 'text/plain' });

console.log(blob.size); // 13 (bytes)
console.log(blob.type); // "text/plain"

Reading blob content

const blob = new Blob(['Hello, World!'], { type: 'text/plain' });

// Read as text
const text = await blob.text();
console.log(text); // "Hello, World!"

// Read as bytes
const bytes = await blob.bytes();
console.log(bytes); // Uint8Array(13) [72, 101, 108, 108, 111, 44, 32, 87, 111, 114, 108, 100, 33]

// Read as ArrayBuffer
const arrayBuffer = await blob.arrayBuffer();
console.log(arrayBuffer); // ArrayBuffer(13)

Slicing blobs

const blob = new Blob(['Hello, World!'], { type: 'text/plain' });

// Slice from position 0 to 5
const slice1 = blob.slice(0, 5);
console.log(await slice1.text()); // "Hello"

// Slice from position 7 to end
const slice2 = blob.slice(7);
console.log(await slice2.text()); // "World!"

// Slice with custom type
const slice3 = blob.slice(0, 5, 'text/html');
console.log(slice3.type); // "text/html"

Streaming

const blob = new Blob(['Large content...'], { type: 'text/plain' });

// Create a readable stream
const stream = blob.stream();
const reader = stream.getReader();

// Read chunks
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  console.log('Chunk:', value);
}

API

No API data file found, sorry!