XMTP React Native example app

example-chat-react-native provides the XMTP React Native example app, which demonstrates core concepts and capabilities of the XMTP client SDK for JavaScript. The app provides a bare-bones example of integrating the XMTP client SDK into a React Native app.

This example app is in Developer Preview status and ready to serve as a reference for you to start building.

However, we do not recommend using Developer Preview software in production apps.

The 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 is maintained by XMTP Labs and distributed under MIT License for learning about and developing applications built with XMTP, an open protocol and network for secure web3 messaging. Build with XMTP to send messages between blockchain accounts, including DMs, notifications, announcements, and more.

To learn more about XMTP and get answers to frequently asked questions, see FAQ about XMTP.

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.