Fix support for blobs larger than 64 KB on Android

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

@@ -72,7 +72,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,13 +84,22 @@ 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];
+
+    Thread writer = new Thread() {
+      public void run() {
+        try (OutputStream outputStream = new ParcelFileDescriptor.AutoCloseOutputStream(writeSide)) {
+          // If the blob data is larger than pipe capacity (64 KB), a synchronous write call
+          // would fill up the whole buffer and block until the bytes are read (i.e. never).
+          // Writing from a separate thread allows us to return the read side descriptor
+          // immediately so that the reader can start reading.
+          outputStream.write(data);
+        } catch (IOException exception) {
+          // no-op
+        }
+      }
+    };
+    writer.start();
 
     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,40 @@ type ImageSource = $ReadOnly<{|
   uri: string,
 |}>;
 
+type BlobImageExampleState = {|
+  objectURL: ?string,
+|};
+
+type BlobImageExampleProps = $ReadOnly<{|
+  url: string,
+|}>;
+
+class BlobImageExample extends React.Component<
+  BlobImageExampleProps,
+  BlobImageExampleState,
+> {
+  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 NetworkImageCallbackExampleState = {|
   events: Array<string>,
   startLoadPrefetched: boolean,
@@ -608,6 +642,16 @@ 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 url="https://www.facebook.com/ads/pics/successstories.png" />
+      );
+    },
+  },
   {
     title: 'Plain Static Image',
     description: ('Static assets should be placed in the source code tree, and ' +