Skip to content

Image does not load on Android when blob is bigger than 64kB #31774

@tomekzaw

Description

@tomekzaw

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

  1. Register BlobProvider as a Content Provider according to the following instructions:
    /**
    * 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>
    * ```
    */
  2. 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);
  1. 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:

https://github.com/tomekzaw/blobissue

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions