Skip to content
XMTP status

Get started with the XMTP React Native SDK

Use the XMTP React Native SDK to build secure, private, and decentralized messaging into your cross-platform mobile app.

The guide provides some quickstart code, as well as a map to building a secure messaging app with XMTP, including support for:

  • End-to-end encrypted direct message and group chat conversations
  • Rich content types (attachments, reactions, replies, and more)
  • Spam-free inboxes using user consent preferences

Quickstart

React Native
// 1. Create an EOA or SCW signer.
// Details depend on your app's wallet implementation.
export function convertEOAToSigner(eoaAccount: EOAAccount): Signer {
  return {
    getIdentifier: async () => new PublicIdentity(eoaAccount.address, "ETHEREUM"),
    getChainId: () => undefined,
    getBlockNumber: () => undefined,
    signerType: () => "EOA",
    signMessage: async (message: string) => ({ signature: await eoaAccount.signMessage(message) }),
  };
}
 
// 2. Create the XMTP client
const client = Client.create(signer, {
  env: "production",
  dbEncryptionKey: keyBytes, // 32 bytes
});
 
// 3. Start conversations
const group = await client.conversations.newGroup([bo.inboxId, caro.inboxId]);
const groupWithMeta = await client.conversations.newGroup([bo.inboxId, caro.inboxId], {
  name: "The Group Name",
  imageUrl: "www.groupImage.com",
  description: "The description of the group",
  permissionLevel: "admin_only",
});
 
// 4. Send messages
const dm = await client.conversations.findOrCreateDm(recipientInboxId);
await dm.send("Hello world");
await group.send("Hello everyone");
 
// 5. List, stream, and sync
// List existing conversations
await client.conversations.list(["allowed"]);
// Stream new messages
await client.conversations.streamAllMessages(
  async (message: DecodedMessage<any>) => {
    // Received a message
  },
  { consentState: ["allowed"] }
);
// Sync all new welcomes, preference updates, conversations,
// and messages from allowed conversations 
await client.conversations.syncAllConversations(["allowed"]);

🛠️ Phase 0: Explore XMTP developer tools

💬 Phase I: Build core messaging

  1. Create an EOA or SCW signer.

  2. Create an XMTP client.

  3. Check if an identity is reachable on XMTP.

  4. Create a group chat or direct message (DM) conversation.

    With XMTP, "conversation" refers to both group chat and DM conversations.

  5. Send messages in a conversation.

  6. Manage group chat permissions and metadata.

  7. Manage identities, inboxes, and installations.

  8. Be sure to observe rate limits.

📩 Phase II: Manage conversations and messages

  1. List existing conversations from local storage.

  2. Stream new conversations from the network.

  3. Stream new messages from the network.

  4. Sync new conversations from the network.

  5. Sync a specific conversation's messages and preference updates from the network.

💅🏽 Phase III: Enhance the user experience

  1. Implement user consent, which provides a consent value of either unknown, allowed or denied to each of a user's contacts. You can use these consent values to filter conversations. For example:

    • Conversations with allowed contacts go to a user's main inbox
    • Conversations with unknown contacts go to a possible spam tab
    • Conversations with denied contacts are hidden from view.

  2. Support rich content types.

  3. Implement push notifications, if applicable.

🧪 Phase IV: Test and debug