{"id":28906899,"url":"https://github.com/xmtp/example-chat-react-native","last_synced_at":"2025-09-13T03:35:36.242Z","repository":{"id":73038746,"uuid":"538700465","full_name":"xmtp/example-chat-react-native","owner":"xmtp","description":"ARCHIVED: See the README for alternative approaches to building an XMTP app with React Native.","archived":true,"fork":false,"pushed_at":"2023-04-19T15:45:00.000Z","size":880,"stargazers_count":33,"open_issues_count":3,"forks_count":5,"subscribers_count":20,"default_branch":"main","last_synced_at":"2025-06-21T15:11:31.686Z","etag":null,"topics":["react-native","xmtp"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xmtp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-09-19T21:17:59.000Z","updated_at":"2023-08-13T22:29:58.000Z","dependencies_parsed_at":"2023-05-17T01:15:47.017Z","dependency_job_id":null,"html_url":"https://github.com/xmtp/example-chat-react-native","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xmtp/example-chat-react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xmtp%2Fexample-chat-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xmtp%2Fexample-chat-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xmtp%2Fexample-chat-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xmtp%2Fexample-chat-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xmtp","download_url":"https://codeload.github.com/xmtp/example-chat-react-native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xmtp%2Fexample-chat-react-native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274915086,"owners_count":25373189,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-13T02:00:10.085Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","xmtp"],"created_at":"2025-06-21T15:10:24.436Z","updated_at":"2025-09-13T03:35:36.234Z","avatar_url":"https://github.com/xmtp.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Archived: XMTP React Native example app\n\n![Status](https://img.shields.io/badge/Project_Status-Archived-lightgrey)\n\nThis **archived** XMTP React Native example app provides a barebones exploration of integrating the [XMTP client SDK for JavaScript](https://github.com/xmtp/xmtp-js) into a React Native app. Specifically, this app uses the [Hermes](https://reactnative.dev/docs/hermes) JavaScript engine, the [XMTP client SDK for JavaScript](https://github.com/xmtp/xmtp-js), and [polyfills](#polyfills) to backport modern JavaScript APIs to the React Native environment.\n\nThe app has been **archived** because this integration approach resulted in [very slow app performance when listing conversations](https://github.com/xmtp/example-chat-react-native/issues/13).\n\nHere are two alternative approaches to building an XMTP app with React Native:\n\n- Explore the [XMTP React Native quickstart app](https://github.com/xmtp/xmtp-quickstart-react-native), which demonstrates how to load the [XMTP client SDK for JavaScript](https://github.com/xmtp/xmtp-js) directly into a WebView. This is a **workaround approach** that some apps are using in the short term.\n\n- Longer term, consider building your app with the [XMTP React Native SDK](https://github.com/xmtp/xmtp-react-native), which is currently a work in progress. This SDK also provides an [example app](https://github.com/xmtp/xmtp-react-native/tree/main/example) for your reference.\n\nTo learn more about XMTP and get answers to frequently asked questions, see [FAQ about XMTP](https://xmtp.org/docs/dev-concepts/faq).\n\n![x-red-sm](https://user-images.githubusercontent.com/510695/163488403-1fb37e86-c673-4b48-954e-8460ae4d4b05.png)\n\n---\n\nThis archived XMTP React Native example app is distributed under MIT License for learning about and developing applications built with [XMTP](https://xmtp.org), an open protocol and network for secure web3 messaging.\n\n## Requirements\n\nThe XMTP client SDK relies on `BigInt` and requires a React Native JavaScript environment that supports `BigInts` including:\n- Hermes v0.70+ for both iOS and Android (used in this example)\n- JavaScriptCore for iOS (iOS 14+)\n- [V8](https://github.com/Kudo/react-native-v8) for Android\n\n## Get started\n\n1. Follow the [React Native guide](https://reactnative.dev/docs/environment-setup) to set up a CLI environment.\n1. Set the `RECIPIENT_ADDRESS` in [Home.tsx](https://github.com/xmtp/example-chat-react-native/blob/main/components/Home.tsx) to an address already authenticated with XMTP. If you have not yet authenticated with XMTP, [sign in](https://xmtp.vercel.app/) on the [dev network](https://github.com/xmtp/xmtp-js#xmtp-production-and-dev-network-environments).\n1. Run `npx pod-install` to install iOS dependencies.\n1. Run `npx react-native start` to start Metro.\n1. Run `npx react-native run-ios` or `npx react-native run-android` to run the app.\n\n## Functionality\n\n### Wallet connections\n\nThis example app provides two ways to connect to blockchain accounts:\n\n1. Authenticate on a physical Android or iOS device using [WalletConnect](https://www.npmjs.com/package/@walletconnect/react-native-dapp).\n1. Generate a random account using [Ethers](https://docs.ethers.org/v5/cookbook/react-native/) for quick testing.\n\n### Chat conversations\n\nThis example app uses the `xmtp-js` [Conversations](https://github.com/xmtp/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.\n\n## Polyfills\n\nThis example app uses the following polyfills:\n\n- @azure/core-asynciterator-polyfill (necessary for Hermes only)\n- @ethersproject/shims\n- react-native-get-random-values\n- react-native-polyfill-globals\n- crypto-browserify\n- stream-browserify\n- readable-stream\n- https-browserify\n- events\n- process\n- text-encoding\n- web-streams-polyfill\n- @peculiar/webcrypto\n- assert\n- os\n- url\n- util\n\n## Up next\n\n1. Stream messages on Android. Currently, listening for new messages is only available for iOS. See [this PR](https://github.com/xmtp/example-chat-react-native/pull/8) for more context. In the meantime, consider polling for new messages periodically on Android using the XMTP client SDK's [Conversation#messages API](https://github.com/xmtp/xmtp-js/blob/6293eb9ac376b8be872c942b935b0ccf1ffedbce/src/conversations/Conversation.ts#L54).\n1. Explore replacing the [PeculiarVentures/webcrypto](https://github.com/PeculiarVentures/webcrypto) [SubtleCrypto](https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto) polyfill. The library comes with a [warning](https://github.com/PeculiarVentures/webcrypto#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](https://github.com/PeculiarVentures/webcrypto/network/dependents).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxmtp%2Fexample-chat-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxmtp%2Fexample-chat-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxmtp%2Fexample-chat-react-native/lists"}