How to convert base64 into Blob in React Native?

Question

I am going to convert b64 to blob in react native.

But I am getting error on atob function.

Here are my codes.

var binary = atob(this.state.avatarSource.uri.split(',')[1]);
var byteNumbers = new Array(binary.length);

for(var i = 0; i < binary.length; i++) {
  byteNumbers.push(binary.charCodeAt(i));
}
var file = new Blob([new Uint8Array(byteNumbers)], {type: 'image/jpeg'});

Anybody has any idea?

Answer 1

Do not use atob or btoa, that only works in Debug Mode.

Because when you're using Debug Mode, you're running your JS code in browser (which should be V8), whereas if you're going to run the app in production mode it uses JavascriptCore which does not have an atob or btoa implementation.

You can use base-64 to convert data to BASE64 encoded string, but I'm not sure if it can create a correct Blob object for you.

From my understanding, Blob is an bridge between JS context and file system, React Native does not have file system API itself yet, therefore you might get a Blob object but it's always empty.

If you're going to create an image from array contains numbers, you have a look at react-native-fetch-blob which is a project I'm working on, hopefully it can solve this kind of problems :)

Answer 2

Ran into this situation where fetch() on Android will not work with a data URI. Instead, try the following:

import { Buffer } from "buffer";


const base64 = 'iVBORw0KGgoAAAANSUhEU ....'
const buffer = Buffer.from(base64, "base64");

const blob = new Blob([buffer], { type: '[content-type]' })

content-type here would be 'image/png' if the base64 was a PNG file.

Answer 3

right solution

1 = download this library npm i -S base-64

2= add this into import sction in your screen import {decode as atob, encode as btoa} from 'base-64';

3= set this function in your screen

  const dataURLtoFile = (dataurl, filename) => {
var arr = dataurl.split(','),
  mime = arr[0].match(/:(.*?);/)[1],
  bstr = atob(arr[1]),
  n = bstr.length,
  u8arr = new Uint8Array(n);

while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
}

return new File([u8arr], filename, {type: mime});
};

finally call this function

let file = dataURLtoFile(
                'data:image/png;base64,' + response.assets[0].base64, //if your bas64 include <data:image/png;base64,> rmove this from parameter 
                'test.png',
              );



console.log(file )

haaaa everything is ready

i hope this answer to help anyone

Answer 4

Note that react native doesn't actually have Blobs - you can use the below code but note that the file will be loaded completely in memory so shouldn't be used for any large files. 'rn-fetch-blob' is the only library I have used that allows for native blobs - but it doesn't work with every package.

Note that the uri needs to be "file://path"

function uriToBlob(uri: string): Promise<Blob> {
return new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest()
  xhr.responseType = 'blob'
  xhr.onload = () => {
    const blob = xhr.response
    resolve(blob)
  }
  xhr.onerror = (err) => {
    reject(err)
  }
  xhr.open('GET', uri)
  xhr.send()
})}

Update: This also works for me

 const res = await fetch(`file://${segment.uri}`) 
 const blobData = await res.blob()

Answer 5

I am getting the base 64 of an image. After that I am displaying it from below code. Hope it may help you

let imgSrc = "data:image/png;base64," + base64ImageData;
<Image source={{uri: imgSrc, scale: 1}} style={{ height: 80, width: 80}}/>

Answer 6

you could try fetch

  let blob = await this.base64ToBlob(encoded);
  console.log('btoB64 resp === ', blob);

  async base64ToBlob(encoded) {
    let url = `data:image/jpg;base64,${encoded}`;
    let res = await fetch(url);
    let blob = await res?.blob();
    return blob;
  }