XMTP React Native Example
This is a work in progress to demonstrate importing xmtp-js into a React Native app. The example currently generates a random account and sends a message to a given address. Please reference blockers for production for ongoing work and getting started to run the app.
This code should only be used experimentally as we work to remove our dependency on PeculiarVentures/webcrypto (a SubtleCrypto polyfill) as the library includes the following warning.
At this time this solution should be considered suitable for research and experimentation, further code and security review is needed before utilization in a production application.
- Follow the React Native guide to set up CLI environment
- Clone this repo and
- Edit the blockchain account address in App.tsx's
sendGm()to point to the recipient's address
npx react-native startto start Metro
npx react-native run-iosor
npx react-native run-androidto run the app
- Press the
Send a gmbutton once the app is running
- A message will arrive in the account provided in Step 3
Blockers for production
- Remove the
xmtp-jsor add a Node crypto workaround as proposed in a proof of concept PR. This will allow us to remove the PeculiarVentures/webcrypto polyfill noted in the above warning.
- Add authentication to the app instead of generating a random private key for a sender account in
- Nice to have: Remove unnecessary local storage dependency from
xmtp-jsto remove the polyfill in
BigIntsupport as it is required by
xmtp-jsuse of paulmillr/noble-secp256k1.
BigIntis included in the following JS environments:
- Hermes v0.70 for both iOS and Android (used in this example)
- V8 for Android
- @azure/core-asynciterator-polyfill (necessary for Hermes only)
- @peculiar/webcrypto (necessary for
SubtleCryptobut need to remove)
- @react-native-async-storage/async-storage (necessary for