React Native support

[saulmc]

Context

Attempting to use xmtp-js in React Native will produce errors relating to ethers missing modules,BigInt type conversion, and missing crypto APIs.

Problem

Developers cannot use XMTP in React Native.

Goal

Unblock developers from developing with React Native by providing a proof-of-concept React Native example using xmtp-js.

Resolution

• ethers missing modules error

  • Resolved via ethers' recommended polyfill solution.

• BigInt type conversion error

  • Resolved by noting runtime environments that support BigInt: Hermes v0.70 for both iOS and Android , JavaScriptCore for iOS starting with iOS 14, and V8 for Android.

• Missing crypto APIs

  • TODO: Remove the SubtleCrypto dependency from xmtp-js or add a Node crypto workaround as proposed in Proof of Concept: Add node crypto fallback #157. This will allow us to remove the PeculiarVentures/webcrypto polyfill noted here.

[hiteshjoshi1]

I tried using Hermes but still get the BigInt issue, how did you resolve it. I would really appreciate exact steps.
I am assuming that until Missing crypto APIs is resolved, xmtp-js will not work for react-native. Is that correct?

[elisealix22]

@hiteshjoshi1 thank you for the questions!

I tried using Hermes but still get the BigInt issue, how did you resolve it.

BigInt was added to Hermes in the version bundled with React Native 0.70. However even on v0.70, it seems the Babel presets transform BigInt's into numbers causing a TypeError. To resolve that, we pass a hermes-stable param to the metro-react-native-babel-preset in our babel.config.js.

I am assuming that until Missing crypto APIs is resolved, xmtp-js will not work for react-native.

We have a working demo showcasing how xmtp-js can be used today, but the SubtleCrypto library we use is only for experimental purposes so we're working to remove that dependency. In the meantime, we can only recommend the demo be used for experimental purposes as well. Hope that helps clear that up!

[hiteshjoshi1]

Thanks, I upgraded my app to react v0.70 and still had the issue. But, I have not tried -
we pass a hermes-stable param to the metro-react-native-babel-preset in our [babel.config.js](https://github.com/xmtp/example-chat-react-native/blob/19f47c4b725aeefe04dfdea97fa83097bbe6e527/babel.config.js#L6).
I tried the working demo and I was able to send messages. I will wait for the SubtleCrypto dependency to be removed before looking to integrate with xmtp-js

[rygine]

now that we have a proper react native SDK, closing this issue.