react-native: Using fetch to obtain blob results in `ERR_FILE_NOT_FOUND` & "Network request failed", workaround gets superficial string representation

[✔️] Review the documentation: https://facebook.github.io/react-native
[✔️] Search for existing issues: https://github.com/facebook/react-native/issues
[✔️] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info: System: OS: Windows 10 CPU: (8) x64 Intel® Core™ i7-4770K CPU @ 3.50GHz Memory: 6.39 GB / 15.94 GB Binaries: Yarn: 1.12.1 - C:\Users\atrauzzi\AppData\Roaming\npm\yarn.CMD npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD

Description

I’ve been working on a new react native project which needs to work with files. Given that the most optimal way to work with binary data in JS environments is via the Blob APIs, I set out to find my best option for getting binary references to local filesystem data.

After a bit of research, I discovered that I should be using the fetch API with local file paths. As a side note, it might have been nice to see official documentation about opening files here. Or possibly even a page dedicated to the topic as I’m sure it’s fairly nuanced. 😄

Unfortunately when I went to open the file using fetch, I ended up experiencing this issue.

After a bit more research, it appears that this problem is generally confirmed and an in-depth analysis with a workaround has been documented by @sjchmiela here

//
// This is my adaptation of the suggested workaround.

const deferred = createDeferred<Blob>();
const xhr = new XMLHttpRequest();
        
xhr.responseType = "blob";
xhr.onload = () => deferred.resolve(xhr.response);
xhr.onerror = deferred.reject;

xhr.open("GET", uri, true);
xhr.send();

const blobFromFetch = await deferred.promise;