react-nativeblobmicrosoft-graph-apiexpo

Display blob image in react native (Expo)


I have the following fetch function in my react native project to return a blob image from MS Graph, the return works but i cannot seem to display the blob as an image.

        //Blob Picture
      fetch('https://graph.microsoft.com/v1.0/me/photo/$value', {
        headers: { 'Authorization': "Bearer " + accessToken },
      })
        .then((response) => {
          // console.log(response);
               this.setState({ BlobImage: response});
        })
        .catch((error) => {
          console.error(error);
        });

Then i wish to display the image like so:

   <Image source={{uri: BlobImage}} style={{ height: 200, width: null, flex: 1 }}/>

Solution

  • One way is to convert your blob into base64 and use it as uri as described here But I would rather to use rn-fetch-blob and using path since is more straight forward. check this example:

    RNFetchBlob
      .config({
        fileCache : true,
        // by adding this option, the temp files will have a file extension
        appendExt : 'png'
      })
      .fetch('GET', 'http://www.example.com/file/example.zip', {
        //some headers ..
      })
      .then((res) => {
        // the temp file path with file extension `png`
        console.log('The file saved to ', res.path())
        // Beware that when using a file path as Image source on Android,
        // you must prepend "file://"" before the file path
        imageView = <Image source={{ uri : Platform.OS === 'android' ? 'file://' + res.path() : '' + res.path() }}/>
      })