Repository navigation
Image does not load on Android when blob is bigger than 64kB #31774
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
BlobProvideras a Content Provider according to the following instructions:
https://github.com/facebook/react-native/blob/33ef82ce6dfd31e1f990d438c925a0e52723e16b/Libraries/Blob/URL.js#L27-L50 - 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:
Reacted by Anton S, Roman Tishakov, Alexey Savelev, Anatolii, Michael Vlasov, Aleksandr Klimashin, Alexander Novikov, Kirill, Phil Panteleev, Romanov Dmitry and 21 more
Reacted by Krzysztof Piaskowy, Anton S, Amphyby and Jakub Dybczak
Activity
tomekzaw commentedon Jun 25, 2021
When loading the image,
BlobProvidercallsblobModule.resolve(uri)to get blob data, then creates a pipe withParcelFileDescriptor.createPipe(), ensures that the pipe will be closed usingnew ParcelFileDescriptor.AutoCloseOutputStream(writeSide)and finally writes the bytes usingoutputStream.write(data).https://github.com/facebook/react-native/blob/dc80b2dcb52fadec6a573a9dd1824393f8c29fdc/ReactAndroid/src/main/java/com/facebook/react/modules/blob/BlobProvider.java#L57-L96
The issue may be related to the fact that pipe capacity is 65536 bytes and the write operation is blocking or it performs only a partial write if there is more bytes to be written (https://man7.org/linux/man-pages/man7/pipe.7.html, sections "Pipe capacity" and "PIPE_BUF").
Fix support for blobs larger than 64 KB on Android (#31789)