Fix support for blobs larger than 64 KB on Android

ReactAndroid/src/main/java/com/facebook/react/modules/blob/BlobProvider.java

@@ -20,9 +20,15 @@
 import java.io.FileNotFoundException;
 import java.io.IOException;
 import java.io.OutputStream;
+import java.util.concurrent.ExecutorService;
+import java.util.concurrent.Executors;
 
 public final class BlobProvider extends ContentProvider {
 
+ private static final int PIPE_CAPACITY = 65536;
+
+ private ExecutorService executor = Executors.newSingleThreadExecutor();
+
  @Override
  public boolean onCreate() {
  return true;
@@ -72,7 +78,7 @@ public ParcelFileDescriptor openFile(Uri uri, String mode) throws FileNotFoundEx
  throw new RuntimeException("No blob module associated with BlobProvider");
  }
 
- byte[] data = blobModule.resolve(uri);
+final byte[] data = blobModule.resolve(uri);
  if (data == null) {
  throw new FileNotFoundException("Cannot open " + uri.toString() + ", blob not found.");
  }
@@ -84,12 +90,34 @@ public ParcelFileDescriptor openFile(Uri uri, String mode) throws FileNotFoundEx
  return null;
  }
  ParcelFileDescriptor readSide = pipe[0];
- ParcelFileDescriptor writeSide = pipe[1];
-
- try (OutputStream outputStream = new ParcelFileDescriptor.AutoCloseOutputStream(writeSide)) {
- outputStream.write(data);
- } catch (IOException exception) {
- return null;
+ final ParcelFileDescriptor writeSide = pipe[1];
+
+ if (data.length <= PIPE_CAPACITY) {
+ // If the blob length is less than or equal to pipe capacity (64 KB),
+ // we can write the data synchronously to the pipe buffer.
+ try (OutputStream outputStream = new ParcelFileDescriptor.AutoCloseOutputStream(writeSide)) {
+ outputStream.write(data);
+ } catch (IOException exception) {
+ return null;
+ }
+ } else {
+ // For blobs larger than 64 KB, a synchronous write would fill up the whole buffer
+ // and block forever, because there are no readers to empty the buffer.
+ // Writing from a separate thread allows us to return the read side descriptor
+ // immediately so that both writer and reader can work concurrently.
+ // Reading from the pipe empties the buffer and allows the next chunks to be written.
+ Runnable writer =
+ new Runnable() {
+ public void run() {
+ try (OutputStream outputStream =
+ new ParcelFileDescriptor.AutoCloseOutputStream(writeSide)) {
+ outputStream.write(data);
+ } catch (IOException exception) {
+ // no-op
+ }
+ }
+ };
+ executor.submit(writer);
  }
 
  return readSide;

packages/rn-tester/android/app/src/main/AndroidManifest.xml

@@ -52,6 +52,11 @@
  </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+ <provider
+ android:name="com.facebook.react.modules.blob.BlobProvider"
+ android:authorities="@string/blob_provider_authority"
+ android:exported="false"
+ />
  </application>
 
 </manifest>

packages/rn-tester/android/app/src/main/res/values/strings.xml

@@ -1,3 +1,4 @@
 <resources>
  <string name="app_name">RNTester App</string>
+ <string name="blob_provider_authority">com.facebook.react.uiapp.blobs</string>
 </resources>

packages/rn-tester/js/examples/Image/ImageExample.js

@@ -32,6 +32,58 @@ type ImageSource = $ReadOnly<{|
  uri: string,
 |}>;
 
+type BlobImageState = {|
+ objectURL: ?string,
+|};
+
+type BlobImageProps = $ReadOnly<{|
+ url: string,
+|}>;
+
+class BlobImage extends React.Component<BlobImageProps, BlobImageState> {
+ state = {
+ objectURL: null,
+ };
+
+ UNSAFE_componentWillMount() {
+ (async () => {
+ const result = await fetch(this.props.url);
+ const blob = await result.blob();
+ const objectURL = URL.createObjectURL(blob);
+ this.setState({objectURL});
+ })();
+ }
+
+ render() {
+ return this.state.objectURL !== null ? (
+ <Image source={{uri: this.state.objectURL}} style={styles.base} />
+ ) : (
+ <Text>Object URL not created yet</Text>
+ );
+ }
+}
+
+type BlobImageExampleState = {||};
+
+type BlobImageExampleProps = $ReadOnly<{|
+ urls: string[],
+|}>;
+
+class BlobImageExample extends React.Component<
+ BlobImageExampleProps,
+ BlobImageExampleState,
+> {
+ render() {
+ return (
+ <View style={styles.horizontal}>
+ {this.props.urls.map(url => (
+ <BlobImage key={url} url={url} />
+ ))}
+ </View>
+ );
+ }
+}
+
 type NetworkImageCallbackExampleState = {|
  events: Array<string>,
  startLoadPrefetched: boolean,
@@ -608,6 +660,21 @@ exports.examples = [
  return <Image source={fullImage} style={styles.base} />;
  },
  },
+ {
+ title: 'Plain Blob Image',
+ description: ('If the `source` prop `uri` property is an object URL, ' +
+ 'then it will be resolved using `BlobProvider` (Android) or `RCTBlobManager` (iOS).': string),
+ render: function(): React.Node {
+ return (
+ <BlobImageExample
+ urls={[
+ 'https://www.facebook.com/favicon.ico',
+ 'https://www.facebook.com/ads/pics/successstories.png',
+ ]}
+ />
+ );
+ },
+ },
  {
  title: 'Plain Static Image',
  description: ('Static assets should be placed in the source code tree, and ' +