Displaying image from expo-image-picker after converting to blob

Question

I'm making a simple chat app where users can submit a message, and optionally submit an image, using expo-image-picker. That part works, but because the uri points to a local file, I want to convert it to a blob so I can store the information in the back end (using nodejs and postgres).

For now I'm just trying to get the image to show up if the source is the blob uri, instead of pointing to the local file. It's not working. What do I have wrong? (I don't use .blob() because it doesn't seem to work all the time and I'm also using react-native-web, so I want to try to find a solution that works across ios, android and web).

Functions:

  function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(",")[0].indexOf("base64") >= 0)
      byteString = atob(dataURI.split(",")[1]);
    else byteString = unescape(dataURI.split(",")[1]);

    // separate out the mime component
    var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], { type: mimeString });
  }

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
      base64: true,
    });

    if (!result.canceled) {
      let filename = result?.assets[0].uri.substring(
        result?.assets[0].uri.lastIndexOf("/") + 1,
        result?.assets[0].uri.length
      );

      setImage(result.assets[0].uri);
      console.log(image);

      delete result.cancelled;
      result = {
        ...result,
        name: filename,
      };
    }
  };

OnSubmit, after a user has picked an image:

  onSubmit={(values, actions) => {
            if (image !== null) {
              let imgblob = dataURItoBlob(image);
              let bloburl = URL.createObjectURL(imgblob);
              setBlobUrl(bloburl);
            } else {
              const imgblob = null;
              const bloburl = null;
            }
          }}

Here, blobUrl shows up in text, but nothing shows up for the Image.

 <Text>blobUrl is {blobUrl}</Text>
      {blobUrl && (
        <Image
          source={{ uri: blobUrl }}
          style={{ width: 300, height: 200, marginBottom: 5 }}
        />
      )}

Answer 1

To display an image from a blob URI in React Native using Expo Image Picker, you can follow these steps:

Convert the local file URI to a blob using the fetch() function. Create an object URL from the blob using URL.createObjectURL(). Set the blob URL in the state or a variable. Render the image using the blob URI. Here's an example implementation:

import React, { useState } from 'react';
import { Text, Image, TouchableOpacity } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(",")[0].indexOf("base64") >= 0)
    byteString = atob(dataURI.split(",")[1]);
else byteString = unescape(dataURI.split(",")[1]);

// separate out the mime component
var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];

// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}

 return new Blob([ia], { type: mimeString });
}

const MyChatApp = () => {
 const [blobUrl, setBlobUrl] = useState(null);

 const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
        base64: true,
    });

    if (!result.cancelled) {
        let imgBlob = dataURItoBlob(result.assets[0].uri);
        let blobUrl = URL.createObjectURL(imgBlob);
        setBlobUrl(blobUrl);
    }
};

return (
    <React.Fragment>
        <TouchableOpacity onPress={pickImage}>
            <Text>Pick Image</Text>
        </TouchableOpacity>

        {blobUrl && (
            <Image
                source={{ uri: blobUrl }}
                style={{ width: 300, height: 200, marginBottom: 5 }}
            />
        )}
    </React.Fragment>
  );
};

export default MyChatApp;