react-nativeblobreact-native-fetch-blob

React Native Blob is not a Function


I'm trying to create a blob in React Native using LaunchImageLibrary. My basic component is as follows:

import React from 'react'
import { Button, SafeAreaView } from 'react-native'
import { launchImageLibrary } from 'react-native-image-picker'


const Home = () => {

  const getImageFromLibrary = async () => {
    const result = await launchImageLibrary()

    const { uri } = result.assets[0]
    console.log(uri)
    // result: file:///Users/myMac/Library/Developer/CoreSimulator/Devices/7287EC81-054B-401E-942D-3978C6E308AF/data/Containers/Data/Application/6098A1CE-D49C-4ECD-8396-29BD0E8C598D/tmp/DBCF7839-8076-4D9A-8773-0F701EB58E0E.jpg

    const fetchedFile = await fetch(uri)
    console.log('FETCHED: ', fetchedFile)
    const blob =  await fetchedFile.blob()
    console.log('BLOB: ', blob)
  }

  return (
    <SafeAreaView>
      <Button onPress={getImageFromLibrary} title="Get from library" />    
    </SafeAreaView>
  )
}

export default Home

I get the following error:

Unhandled Promise Rejection (id: 1):
TypeError: fetchedFile.blob is not a function

I see other people able to use fetchedFile.blob() without any problem and I'm not sure why I'm having issues. I'm using an M1 mac, running iOS 15.5 emulator (iPhone13), using a create-react-app via npx.


Solution

  • React Native Fetch API implementation which is based on whatwg-fetch in some scenario feel buggy when you work with a large chunk of data like bitmap files.

    Alternative solution is using XMLHttpRequest API.

    const getImageFromLibrary = async () => {
      const result = await launchImageLibrary();
    
      const { uri } = result.assets[0];
      console.log(uri);
      // result: file:///Users/myMac/Library/Developer/CoreSimulator/Devices/7287EC81-054B-401E-942D-3978C6E308AF/data/Containers/Data/Application/6098A1CE-D49C-4ECD-8396-29BD0E8C598D/tmp/DBCF7839-8076-4D9A-8773-0F701EB58E0E.jpg
    
      const blob = await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function () {
          resolve(xhr.response);
        };
        xhr.onerror = function (e) {
          reject(new TypeError("Network request failed"));
        };
        xhr.responseType = "blob";
        xhr.open("GET", uri, true);
        xhr.send(null);
      });
    
      // Upload BLOB data to remote server...
    
      // We're done with the blob, close and release it
      blob.close();
    };