Expo Blob

A web standards-compliant Blob implementation for React Native.

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

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

Classes

Types