react-native: Response#arrayBuffer throws `FileReader.readAsArrayBuffer` is not implemented on iOS or android

Description

See title. For example:

      const response = await fetch('https://sheetjs.com/pres.numbers');
      const data = await response.arrayBuffer();

Related issues:

#20091 and #21209 were closed and locked because “it does not appear to follow any of the provided issue templates”.
#30769 is an inefficient pure-JS attempt to address the situation. The ideal solution would not involve the intermediate Base64 step.

Version

0.69 (latest)

Output of `npx react-native info`

n/a (reproducible in Expo Snack)

Steps to reproduce

Load https://snack.expo.dev/DsZd8Av6-?platform=android and test in the “iOS” and “android” platforms. The demo does work in the web platform, in case you want to see the expected output.

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/DsZd8Av6-?platform=android

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 5
Comments: 17 (3 by maintainers)

Commits related to this issue

FileReader#readAsArrayBuffer (#36332) Summary: Fixes a number of issues with third party libraries that use `Blob#arrayBuffer` or `FileReader#readAsArrayBuffer`, including https://github.com/facebook... — committed to facebook/react-native by SheetJSDev a year ago
FileReader#readAsArrayBuffer (#36332) Summary: Fixes a number of issues with third party libraries that use `Blob#arrayBuffer` or `FileReader#readAsArrayBuffer`, including https://github.com/facebook... — committed to OlimpiaZurek/react-native by SheetJSDev a year ago

Most upvoted comments

It’s crazy that this isn’t supported. I’ve been trying to find a way around this all day.

+10

Nantris on Oct 12, 2022

Not sure what their reasoning is for not approving the PR?

djaffer on Jun 9, 2023

We really can’t upload images in react-native, huh?

You can do it; you just have to spend days of your life searching for a workaround to do what you’d expect to do in a single line of code.

I guess wget magic only gets you so far. I really need this to work so I’ll post any solution I find. Godspeed, everyone.

TaquitoSlayer on Apr 19, 2023

Still an issue in the latest version (0.70.6), but the offending code is in JS and can be effortlessly patched.

The changes from #30769 work when applied to node_modules/react-native/Libraries/Blob/FileReader.js . For CI use, patch-package can automate this process.

react-native+0.70.6.patch

Download the linked patch file and save it to patches/react-native+0.70.6.patch within your project and run npx patch-package.

This can be verified on macOS using the original demo app:

### new project
npx react-native init AwesomeProject
cd AwesomeProject
### install patch
mkdir -p patches
curl -L -o patches/react-native+0.70.6.patch https://github.com/facebook/react-native/files/10356761/react-native%2B0.70.6.patch
npx patch-package
### use App.js from example
curl -LO https://exp.host/--/api/v2/snack/download/DsZd8Av6-
unzip -p DsZd8Av6- fetch-example/App.js > App.js 
npm i --save https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz
### test
npx react-native run-ios

@Slapbox please test this in your application.

SheetJSDev on Jan 6, 2023

will react native get ArrayBuffer support???

arasrezaei on Jun 3, 2023