-
Notifications
You must be signed in to change notification settings - Fork 24.8k
Closed
Labels
Description
Description
When an object URL for a blob of size greater than 64 kB is passed as source of <Image />
component, the image does not load on Android (but it works fine on iOS).
video.mp4
React Native version:
System:
OS: macOS 11.2.3
CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
Memory: 1.93 GB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.16.1 - /var/folders/nj/gnv84lfn0r78lkr4c64wbtgh0000gn/T/yarn--1624602004676-0.054501887345412614/node
Yarn: 1.22.10 - /var/folders/nj/gnv84lfn0r78lkr4c64wbtgh0000gn/T/yarn--1624602004676-0.054501887345412614/yarn
npm: 6.13.4 - ~/.asdf/installs/nodejs/12.16.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
Android SDK:
API Levels: 20, 21, 22, 23, 27, 28, 29, 30
Build Tools: 23.0.1, 28.0.3, 29.0.2, 29.0.3, 30.0.3
System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
Android NDK: 21.3.6528147
IDEs:
Android Studio: 4.2 AI-202.7660.26.42.7351085
Xcode: 12.5/12E262 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_282 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.2 => 0.64.2
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps To Reproduce
- Register
BlobProvider
as a Content Provider according to the following instructions:
react-native/Libraries/Blob/URL.js
Lines 27 to 50 in 33ef82c
/** * To allow Blobs be accessed via `content://` URIs, * you need to register `BlobProvider` as a ContentProvider in your app's `AndroidManifest.xml`: * * ```xml * <manifest> * <application> * <provider * android:name="com.facebook.react.modules.blob.BlobProvider" * android:authorities="@string/blob_provider_authority" * android:exported="false" * /> * </application> * </manifest> * ``` * And then define the `blob_provider_authority` string in `res/values/strings.xml`. * Use a dotted name that's entirely unique to your app: * * ```xml * <resources> * <string name="blob_provider_authority">your.app.package.blobs</string> * </resources> * ``` */ - Create an object URL for a blob of size greater than 64 kB using
URL.createObjectURL
:
const url = 'https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg'; // 83261 bytes
const result = await fetch(url);
const blob = await result.blob();
const objectURL = URL.createObjectURL(blob);
- Pass the above object URL as source for
<Image />
component.
<Image source={{uri: objectURL}} />
Expected Results
It should work for blobs bigger than 64 kB on Android as well.
Snack, code example, screenshot, or link to a repository:
sertony, BigRoma, savelichalex, SAnatoliiS, melsomino and 26 morepiaskowyk, sertony, Amphyby and Yacubane