This archived XMTP React Native example app provides a barebones exploration of integrating the XMTP client SDK for JavaScript into a React Native app. Specifically, this app uses the Hermes JavaScript engine, the XMTP client SDK for JavaScript, and polyfills to backport modern JavaScript APIs to the React Native environment.
The app has been archived because this integration approach resulted in very slow app performance when listing conversations.
Here are two alternative approaches to building an XMTP app with React Native:
-
Explore the XMTP React Native quickstart app, which demonstrates how to load the XMTP client SDK for JavaScript directly into a WebView. This is a workaround approach that some apps are using in the short term.
-
Longer term, consider building your app with the XMTP React Native SDK, which is currently a work in progress. This SDK also provides an example app for your reference.
To learn more about XMTP and get answers to frequently asked questions, see FAQ about XMTP.
This archived XMTP React Native example app is distributed under MIT License for learning about and developing applications built with XMTP, an open protocol and network for secure web3 messaging.
The XMTP client SDK relies on BigInt
and requires a React Native JavaScript environment that supports BigInts
including:
- Hermes v0.70+ for both iOS and Android (used in this example)
- JavaScriptCore for iOS (iOS 14+)
- V8 for Android
- Follow the React Native guide to set up a CLI environment.
- Set the
RECIPIENT_ADDRESS
in Home.tsx to an address already authenticated with XMTP. If you have not yet authenticated with XMTP, sign in on the dev network. - Run
npx pod-install
to install iOS dependencies. - Run
npx react-native start
to start Metro. - Run
npx react-native run-ios
ornpx react-native run-android
to run the app.
This example app provides two ways to connect to blockchain accounts:
- Authenticate on a physical Android or iOS device using WalletConnect.
- Generate a random account using Ethers for quick testing.
This example app uses the xmtp-js
Conversations abstraction to create a new conversation and send a gm
message from an authenticated account. On iOS devices, the app also listens for new messages that come in and shows an alert with the incoming message content.
This example app uses the following polyfills:
- @azure/core-asynciterator-polyfill (necessary for Hermes only)
- @ethersproject/shims
- react-native-get-random-values
- react-native-polyfill-globals
- crypto-browserify
- stream-browserify
- readable-stream
- https-browserify
- events
- process
- text-encoding
- web-streams-polyfill
- @peculiar/webcrypto
- assert
- os
- url
- util
- Stream messages on Android. Currently, listening for new messages is only available for iOS. See this PR for more context. In the meantime, consider polling for new messages periodically on Android using the XMTP client SDK's Conversation#messages API.
- Explore replacing the PeculiarVentures/webcrypto SubtleCrypto polyfill. The library comes with a warning that the solution should be considered suitable for research and experimentation only. In the meantime, it is the most popular polyfill we could find, with over 13,500 dependents.