3

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?

1

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

1 Comment

how did you do it with [ github.com/joltup/rn-fetch-blob] @koreus737

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.