Track: react native support

[hugomrdias]

Tracking:

• ipfs-http-client Track: HTTP client support on React Native for Android and iOS #3404
• ipfs

Related

ipfs-http-client

https://github.com/ipfs/js-ipfs-http-client/issues/1117#issuecomment-589011968
ipfs-inactive/js-ipfs-http-client#1224 (comment) this needs to be patched in react-native not here
https://github.com/ipfs/js-ipfs-http-client/issues/1219#issuecomment-582846315 close after proper fix for arrayBuffer
ipfs-inactive/js-ipfs-http-client#1224

ipfs

#1254 nodejs-mobile, nodejs-mobile-react-native
#2768 nodejs-mobile-react-native

[pcowgill]

I appreciate you adding the label awesome endeavour 😄

[pcowgill]

The latest update on my efforts related to this:

Back to using the GitHub fetch polyfill which is bundled in React Native (rather than rn-fetch-blob or polyfilling fetch with streams using @stardazed/streams-polyfill) and locally handling the case when body is undefined and giving an async iterable behavior in a fork of ipfs-http-client
Latest upstream changes to ipfs-http-client allow requests to go through with a 2xx status code to the local daemon which wasn't the case before with older versions, but it's always the same empty file that is added in the local node.

• Did a lot of logging on the receiving side after switching over to js-ipfs for the local daemon (from go-ipfs before), and that helped determined the difference between what was actually reaching the node in React vs. React Native
• When doing an add from React Native the data we're adding to the multipart/form-data payload is missing (boundary, headers, etc. are still there), but it's there when sent from a React env. Next step is logging along the path to the http request that is initiated to see where the data is dropped. React Native's non-standard implementation of Blob seems likely to be the problem.
• We now have the tooling to see what is reaching the IPFS node, but other than continuing to log incoming payloads there the next debugging to be done is back on the React Native side as the data is transformed into the HTTP request.
• When using dag.put rather than add, it isn't working in either React or React Native at the moment, which is surprising. Issue here: dag.put does not work in the js ipfs daemon with cbor-style input, even though the same request works with go-ipfs #2825

[pcowgill]

ipfs-inactive/js-ipfs-http-client#1224 (comment) this needs to be patched in react-native not here

I think this is true on a longer timescale, but I'm not sure if we have a good chance of getting this through on a short timescale. So I think it's worth patching here in the meantime. @achingbrain what do you think?

[pcowgill]

I think this is true on a longer timescale, but I'm not sure if we have a good chance of getting this through on a short timescale. So I think it's worth patching here in the meantime. @achingbrain what do you think?

We could use an approach like you all did with ky-universal before:

// TODO remove this when upstream fix for ky-universal is merged
// https://github.com/sindresorhus/ky-universal/issues/9
// also this should only be necessary when nodeIntegration is false in electron renderer
if (isElectronRenderer) {
  exports.toFormData = require('./form-data.browser').toFormData
}

[pcowgill]

Here is the tracking issue on the React Native repo facebook/react-native#27741

[achingbrain]

Reading that and the related issues, it doesn't sound like something they'll take on unless it becomes a priority for them, but it does sound like they are open to other people contributing a fix. Want to take a stab at PRing support in?

[hugomrdias]

Exactly these issues about half baked spec implementations need to be patch directly in rn or in a external package.

[pcowgill]

Based on the latest comments on that issue, they're open to creating a fork of github/fetch under the react-native-community org, so we can move forward with that. I emailed @alloy and cc'ed @hugomrdias to get that started.

Here's the original discussion about the changes to be made to github/fetch JakeChampion/fetch#746. That is a medium-term solution. The ideal long-term solution is a spec-compliant implementation of fetch at the native level https://react-native.canny.io/feature-requests/p/implement-fetch-using-native-implementations-instead-of-fetch-on-top-of-xhr

I added a related comment here about where these changes should land from the IPFS org's perspective #2847 (comment)

[RobertFischer]

https://www.npmjs.com/package/cross-fetch works in RN already...why not just use that?

[hugomrdias]

cross-fetch is just a wrapper problems the issue is much deeper in the stack

[RobertFischer]

@pcowgill @hugomrdias What's the status of this? I've got some spare cycles that I'd like to throw at it.

[x5engine]

@RobertFischer cycles? who wants to fund this? I'll take care of it.

[pcowgill]

@x5engine If you're asking what @RobertFischer means by cycles, he means time to work on this.

@RobertFischer @x5engine My comment on Mar 10 reflects the latest status on this as far as I know. My funding to work on this problem disappeared along with the pandemic, but I'd be happy to hop on a call to do a full debrief of the current state of things!

[x5engine]

@pcowgill I have no issues on this if you want to have a call and do a full debrief on how to get this working I would be very glad to be there and we can live stream it too! set a time

[ZTECH10]

I am currently working on using IPFS on react-native.

On React-native: When I add a buffered string(i.e. Buffer(str) ) to IPFS using ipfs.add, the buffered string is added successfully and IPFS returns the hash.

When I try to retrieve the buffered string via ipfs.cat and the hash, ipfs.cat returns [Error: XHR error]. So the returned variable is undefined.

On Node.jS and ReactJs: I do not have this problem. Both ipfs.add and ipfs.cat works.

Is this a problem with react native? is it related to fetching ? would changing the ipfs-http-client version in packag.json help?

btw, i am using ipfs-http-client 27.0.0

Any suggestions would be highly appreciated

[x5engine]

@ZTECH10 nice show us a repo or something on how you did that? did you use an ipfs node or just the http api?

[qalqi]

@x5engine

Here is react-native sandbox with working get requests https://github.com/qalqi/react-native-ipfs-http-client/tree/primary/rn-nodeify

[acostalima]

I've ran into a possible issue with the ReadableStream polyfill. Started a discussion at MattiasBuelens/web-streams-polyfill#68.

[acostalima]

Found an issue in RN about the usage of console.error and console.warn when consuming a Blob with FileReader.readAsDataURL. Started a discussion at facebook/react-native#30378.

[chrisdukakis]

Hi, has anyone managed to polyfill crypto? I use https://github.com/webview-crypto/webview-crypto but fails to serialize large files when I add().

EDIT: Managed to fix with webview-crypto/webview-crypto#8.
Now everything works. However, does someone know what this line does: https://github.com/libp2p/js-libp2p/blob/29597947966682b70e8751ddb1d022580557112a/src/keychain/index.js#L469
I had to comment it out, otherwise was getting Key 'self' already exists error.

[acostalima]

@chrisdukakis I'm sorry, I have no clue as to why you're getting that error in libp2p. I'm not familiar with libp2p's codebase.
I did polyfill window.crypto before, but I used react-native-get-random-values instead.

[RobertFischer]

I've also got a library that's a pure implementation of `randomBytes`: https://github.com/RobertFischer/randombytes-pure

…

On Sun, Jun 13, 2021 at 4:15 PM André Costa Lima ***@***.***> wrote: @chrisdukakis <https://github.com/chrisdukakis> I'm sorry, I have no clue as to why you're getting that error in libp2p. I'm not familiar with libp2p's codebase. I did polyfill window.crypto before, but I used react-native-get-random-values <https://github.com/LinusU/react-native-get-random-values>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2813 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAE5V7BSFBFR2MWQ2QBPL3TSUGWDANCNFSM4LASJE7A> .

[Haianh9999]

When use add function of ipfs-http-client on react native. I've got this error Invalid attempt to iterate non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method. Please help me to solve it 🙇

[SgtPooki]

js-ipfs is being deprecated in favor of Helia. You can #4336 and read the migration guide.

Please feel to reopen with any comments by 2023-06-02. We will do a final pass on reopened issues afterward (see #4336).

Note that I'm pushing to get an example using react-native in Helia. I posted a comment at ipfs/helia#43 (comment), please feel free to contribute an example if you get time!

Related to #3404