React Native file access api: blob.data is 'undefined' on android

Question

React native now supports blobs https://github.com/facebook/react-native/releases/tag/v0.54.0

I cannot make them work on Android.

axios({
      method: 'GET',
      url: imageUrl,
      responseType: 'blob'
    }, (res) => {
      callback(URL.createObjectURL(res.data));
    );
});

This is how I am creating blobs. Set the response type to 'blob' and then use URL.createObjectURL from the blob api https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL to make a uri that points to the blob. Next an image component points to the blob uri to display the image without crossing the RN Bridge / Message Queue.

This works perfectly on IOS but on Android I get the following error:

Cannot read property 'blobId' of undefined

Stepping through the RN code I found it is on line 60 of URL.js

return `${BLOB_URL_PREFIX}${blob.data.blobId}?offset=${
  blob.data.offset
}&size=${blob.size}`;

This is the access to blob.data.blobId. In IOS this is defined in Android it is undefined. On Android blob has only two properties:

size:24671
type:"image/jpeg"

I have already added the provider to my AndroidManifest.xml

 <provider
    android:name="com.facebook.react.modules.blob.BlobProvider"
    android:authorities="@string/blob_provider_authority"
    android:exported="false"
  />

And defined the string blob_provider_authority appropriately.

I do not want to use https://github.com/joltup/rn-fetch-blob since it may cause conflicts with version ^0.54 of react-native since they implemented similar functionality. I also anticipate rn-fetch-blob will stop being maintained as this becomes a core react native feature.

Other things I tried already:

• Delete app on device, rebuild project from scratch.
• change responseType to 'image/png' (this actually disables blobs)
• checking res.data is in fact the blob object

Environment (react-native info):

OS: macOS High Sierra 10.13.4
  Node: 10.5.0
  Yarn: 1.7.0
  npm: 6.1.0
  Watchman: 4.9.0
  Xcode: Xcode 9.4.1 Build version 9F2000
  Android Studio: 3.1 AI-173.4819257

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

Potentially some clues here: https://github.com/facebook/react-native/blob/5c2720b089dd0fb277771b0ac8b0e7788c493e5d/ReactAndroid/src/main/java/com/facebook/react/modules/blob/BlobModule.java

Has anyone found the same issue and knows how to fix it?

Or perhaps someone has the skill to read into the implementation for clues?

Answer 1

I solved this myself by using https://github.com/joltup/rn-fetch-blob instead of the react native blobs. React native blobs are not ready yet it seems and so far rn-fetch-blob works and is reliable.