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?