Archived: XMTP React Native example app

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.

Requirements

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

Get started

1. Follow the React Native guide to set up a CLI environment.
2. 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.
3. Run npx pod-install to install iOS dependencies.
4. Run npx react-native start to start Metro.
5. Run npx react-native run-ios or npx react-native run-android to run the app.

Functionality

Wallet connections

This example app provides two ways to connect to blockchain accounts:

1. Authenticate on a physical Android or iOS device using WalletConnect.
2. Generate a random account using Ethers for quick testing.

Chat conversations

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.

Polyfills

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

Up next

1. 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.
2. 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.