React-native - Populate image with Blob that has been converted to a URL

Question

I want to populate an image with a uri.
I request the image from the server and it returns a BLOB.

BLOB when displayed to console:

I then convert the B

Answer 1

May be solved by react-native-fetch-blob, it's about issue #854

Answer 2

After you have received the blob:

let imageUri = "data:image/png;base64," + blob;

<Image source={{uri: imageUri, scale: 1}} style={{height: 30, width: 30}}/>

Answer 3

Solution

React-Native does not support blobs [ref: Git/React-Native]. In order to get this working I had to download react-native-fetch-blob which returns a base64 string.

Function that returns base64 string:

var RNFetchBlob = require('react-native-fetch-blob').default;

getImageAttachment: function(uri_attachment, mimetype_attachment) {

  return new Promise((RESOLVE, REJECT) => {

    // Fetch attachment
    RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment)
      .then((response) => {

        let base64Str = response.data;
        var imageBase64 = 'data:'+mimetype_attachment+';base64,'+base64Str;
        // Return base64 image
        RESOLVE(imageBase64)
     })

   }).catch((error) => {
   // error handling
   console.log("Error: ", error)
 });
},

Populate Image with base64
I then populate the image withe the returned base64Image with:

<Image source={{uri: imageBase64}} style={styles.image} />