{"id":13805176,"url":"https://github.com/meteorrn/meteor-react-native","last_synced_at":"2025-10-27T13:32:52.328Z","repository":{"id":38789907,"uuid":"160400975","full_name":"meteorrn/meteor-react-native","owner":"meteorrn","description":"Meteor client for React Native matching Meteor Spec","archived":false,"fork":false,"pushed_at":"2024-10-12T04:03:44.000Z","size":2572,"stargazers_count":60,"open_issues_count":1,"forks_count":33,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-16T09:30:48.306Z","etag":null,"topics":["cross-platform","ddp","fullstack-development","javascript","javascript-library","meteor","meteorjs","mobile-application-development","mobile-development","react-native"],"latest_commit_sha":null,"homepage":"https://guide.meteor.com/react-native.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meteorrn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["jankapunkt"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2018-12-04T18:24:46.000Z","updated_at":"2024-10-31T00:58:04.000Z","dependencies_parsed_at":"2023-02-09T08:02:41.356Z","dependency_job_id":"22aad217-4d85-4286-a6b9-e08df312efc9","html_url":"https://github.com/meteorrn/meteor-react-native","commit_stats":{"total_commits":633,"total_committers":46,"mean_commits":13.76086956521739,"dds":0.693522906793049,"last_synced_commit":"f3222c7053b23f916eea3e6c40974e992f8adc9e"},"previous_names":["therealnate/meteor-react-native"],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorrn%2Fmeteor-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorrn%2Fmeteor-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorrn%2Fmeteor-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorrn%2Fmeteor-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meteorrn","download_url":"https://codeload.github.com/meteorrn/meteor-react-native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406111,"owners_count":20933806,"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","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":["cross-platform","ddp","fullstack-development","javascript","javascript-library","meteor","meteorjs","mobile-application-development","mobile-development","react-native"],"created_at":"2024-08-04T01:00:58.268Z","updated_at":"2025-10-27T13:32:52.322Z","avatar_url":"https://github.com/meteorrn.png","language":"JavaScript","funding_links":["https://github.com/sponsors/jankapunkt"],"categories":["Mobile"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/meteorrn/meteor-react-native\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"logo.svg\"\u003e\n    \u003cimg alt=\"Novu Logo\" src=\"logo.svg\" width=\"280\"/\u003e\n  \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eMeteor React Native\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![built for Meteor](https://img.shields.io/badge/Meteor-npm%20package-green?logo=meteor\u0026logoColor=white)](https://meteor.com)\n[![Node.js CI](https://github.com/meteorrn/meteor-react-native/actions/workflows/node.js.yml/badge.svg)](https://github.com/meteorrn/meteor-react-native/actions/workflows/node.js.yml)\n[![CodeQL](https://github.com/meteorrn/meteor-react-native/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/meteorrn/meteor-react-native/actions/workflows/codeql-analysis.yml)\n![npm version](https://img.shields.io/npm/v/%40meteorrn/core)\n![npm downloads](https://img.shields.io/npm/dm/@meteorrn/core)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n![NPM](https://img.shields.io/npm/l/%40meteorrn%2Fcore)\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\nConnect your React Native app to your Meteor server, and take advantage of Meteor-specific features like accounts, reactive data trackers, etc. Compatible with the latest version of React Native.\n\u003c/p\u003e\n\n\u003e Please note: this repo will migrate to ESM-only end of 2025. Please prepare your projects accordingly.\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://guide.meteor.com/react-native.html\"\u003eMeteor Guide\u003c/a\u003e\n\u003cspan\u003e·\u003c/span\u003e\n\u003ca href=\"https://dev.to/jankapunkt/meteor-and-react-native-create-a-native-mobile-app-2ile\"\u003eBeginners Workshop\u003c/a\u003e\n\u003cspan\u003e·\u003c/span\u003e\n\u003ca href=\"https://github.com/meteorrn/meteor-react-native/blob/master/docs/index.html\"\u003eFull API Documentation\u003c/a\u003e\n\u003cspan\u003e·\u003c/span\u003e\n\u003ca href=\"https://github.com/meteorrn/sample\"\u003eExample Project\u003c/a\u003e\n\u003cspan\u003e·\u003c/span\u003e\n\u003ca href=\"https://github.com/jankapunkt/meteor-react-native-starter\"\u003eStarter Template (Expo)\u003c/a\u003e\n\u003cspan\u003e·\u003c/span\u003e\n\u003ca href=\"https://github.com/meteorrn\"\u003eMore packages and resources\u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n- 🪄 Meteor's \"automagical\" features for your mobile app\n- 🌱 Easy to set up and integrate\n- 🚀 Build mobile apps with React-Native + Meteor in no time\n- 🌈 Zero-Config Accounts / Authentication\n- 📦 Storage-independent with zero-config defaults\n- 👋 Supportive community in the [Meteor Forums](https://forums.meteor.com), [Slack](https://meteor-community.slack.com/) or [Discord](https://discord.gg/9GDmECsYdH)!\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Installation](#installation)\n  - [Use a different async storage](#use-a-different-async-storage)\n  - [Using Expo Secure Store](#using-expo-secure-store)\n- [Basic Usage](#basic-usage)\n- [Companion Packages](#companion-packages)\n- [Compatibility](#compatibility)\n- [Using on Web](#using-on-web)\n- [Changelog](#changelog)\n- [Package Interface](#package-interface)\n  - [Usage of the package interface](#usage-of-the-package-interface)\n  - [Differences from Meteor Core to Note:](#differences-from-meteor-core-to-note)\n- [Showcase](#showcase)\n- [Contribution and maintenance](#contribution-and-maintenance)\n- [License](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\n1. `npm install --save @meteorrn/core`\n2. Confirm you have peer dependency `@react-native-community/netinfo` installed\n3. Confirm you have `@react-native-async-storage/async-storage@\u003e=1.8.1` installed.\n   If you are using Expo, or otherwise cannot use `@react-native-async-storage/async-storage`, read below\n\n### Use a different async storage\n\nThis package uses `@react-native-async-storage/async-storage` by default.\nThis may cause issues if you are using certain React Native versions, or if you are using Expo.\nTo use a custom AsyncStorage implementation, pass it as an option in `Meteor.connect`:\n\n```javascript\nimport { AsyncStorage } from 'react-native';\n\n// ...\n\nMeteor.connect('wss://myapp.meteor.com/websocket', { AsyncStorage });\n```\n\nIf you are using the `AsyncStorage` API yourself, its important that you use the same version that MeteorRN is using, or issues could be caused due to the conflicting versions.\n\nMake sure you are using the same AsyncStorage you pass into Meteor (or `@react-native-async-storage/async-storage` if you aren't passing anything), or you can use [MeteorRN's package interface](#package-interface).\n\n### Using Expo Secure Store\n\nThis example shows how to use Expo's secure store implementation as Async storage.\nNote, that secure storage in both Android and iOS have a low upper size limit of a few megabytes.\n\n```js\nimport * as SecureStore from 'expo-secure-store';\n\n// ...\n\nMeteor.connect('wss://myapp.meteor.com/websocket', {\n  AsyncStorage: {\n    getItem: SecureStore.getItemAsync,\n    setItem: SecureStore.setItemAsync,\n    removeItem: SecureStore.deleteItemAsync,\n  },\n});\n```\n\n## Basic Usage\n\n```javascript\nimport Meteor, { Mongo, withTracker } from '@meteorrn/core';\n\n// \"mycol\" should match the name of the collection on your meteor server,\n// or pass null for a local collection\nlet MyCol = new Mongo.Collection('mycol');\n\nMeteor.connect('wss://myapp.meteor.com/websocket'); // Note the /websocket after your URL\n\nclass App extends React.Component {\n  render() {\n    let { myThing } = this.props;\n\n    return (\n      \u003cView\u003e\n        \u003cText\u003eHere is the thing: {myThing.name}\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nlet AppContainer = withTracker(() =\u003e {\n  Meteor.subscribe('myThing');\n  let myThing = MyCol.findOne();\n\n  return {\n    myThing,\n  };\n})(App);\n\nexport default AppContainer;\n```\n\n**Unique Scenarios:**\nRunning the app on a physical device but want to connect to local development machine? Check out [this issue comment](https://github.com/TheRealNate/meteor-react-native/issues/82#issuecomment-1012867899).\n\n## Companion Packages\n\nThe `@meteorrn/core` package has been kept as light as possible. To access more features, you can use companion packages.\n\nHere are some examples:\n\n- `@meteorrn/oauth-google`: Allows you to let users login to your app with Google\n- `@meteorrn/oauth-facebook`: Allows you to let users login to your app with Facebook\n\nFor the full list of officially recognized packages,\ncheck out [the @meteorrn github org](https://github.com/meteorrn).\n\n## Compatibility\n\nThis package is compatible with React Native versions from 0.60.0 to latest (0.63.2)\n\nFor React Native \u003c0.60.0 use [react-native-meteor](https://github.com/inProgress-team/react-native-meteor).\n\n**Migrating from `react-native-meteor`:**\n\n- cursoredFind is no longer an option. All .find() calls will return cursors (to match Meteor)\n- `MeteorListView` \u0026 `MeteorComplexListView` have been removed\n- `CollectionFS` has been removed\n- `createContainer` has been removed\n- Mixins (`connectMeteor`) have been removed\n- `composeWithTracker` has been removed\n\n## Using on Web\n\nWhile this package was designed with React Native in mind, it is also capable of running on web (using `react-dom`). This can be useful if you need a light-weight Meteor implementation, if you want to create a client app separate from your server codebase, etc. The only change required is providing an AsyncStorage implementation. Here is a simple example:\n\n```js\nconst AsyncStorage = {\n    setItem:async (key, value) =\u003e window.localStorage.setItem(key, value),\n    getItem:async (key) =\u003e window.localStorage.getItem(key)\n    removeItem:async (key) =\u003e window.localStorage.removeItem(key)\n}\n\nMeteor.connect(\"wss://.../websock\", {AsyncStorage});\n```\n\n## Changelog\n\nThe [GitHub Releases Tab](https://github.com/TheRealNate/meteor-react-native/releases) includes a full changelog\n\n## Package Interface\n\nTo ensure that MeteorRN companion packages use the same versions of external packages like AsyncStorage as the core,\n`@meteorrn/core` provides a package interface, where companion packages can access certain packages.\nCurrently, package interface returns an object with the following properties:\n\n- AsyncStorage\n\n### Usage of the package interface\n\n```js\nimport Meteor from '@meteorrn/core';\n\nconst { AsyncStorage } = Meteor.packageInterface();\n```\n\n### Differences from Meteor Core to Note:\n\n- This API does not implement `observeChanges` (but it does implement `observe`)\n\n## Advanced topics\n\n### Logging library internals\n\nThe library includes several internal classes and constructs,\nthat are mostly operate on their own and without user's influence.\n\nDebugging the library working as expected requires listening to several events.\nThe following shows several events that allow for detailed logging and inspection.\n\n\u003e The logging can be useful for analysis and instrumentation of production apps\n\u003e where no console access is possible\n\n#### Data level events (high level)\n\nThe most convenient way to track internals is via `Data.onChange`:\n\n```js\nconst Data = Meteor.getData();\ndata.onChange((event) =\u003e console.debug(event));\n```\n\nUnder the hood this does:\n\n```js\nthis.db.on('change', cb);\nthis.ddp.on('connected', cb);\nthis.ddp.on('disconnected', cb);\nthis.on('loggingIn', cb);\nthis.on('loggingOut', cb);\nthis.on('change', cb);\n```\n\nYou can also listen on `loggingIn`, `loggingOut`, `onLogin`, `onLoginFailure`\nand `change` individually:\n\n```js\nconst Data = Meteor.getData();\nData.on('loggingIn', (e) =\u003e console.debug('loggingIn', e));\n// ...\n```\n\n#### DDP events (high-level)\n\n```js\nconst events = [\n  // connection messages\n  'connected',\n  'disconnected',\n  // Subscription messages (Meteor Publications)\n  'ready',\n  'nosub',\n  'added',\n  'changed',\n  'removed',\n  // Method messages (Meteor Methods)\n  'result',\n  'updated',\n  // Error messages\n  'error',\n];\nconst Data = Meteor.getData();\nevents.forEach((eventName) =\u003e {\n  Data.ddp.on(eventName, (event) =\u003e console.debug(eventName, event));\n});\n```\n\n#### Websocket events (low-level)\n\nThe library attempts to use the native Websocket, provided by ReactNative.\nWith the following events you can hook into the low-level messaging with the server:\n\n- `open` - the Websocket successfully opens\n- `close` - the Websocket successfully closes\n- `message:out` - a message is sent to the server\n- `message:in` - a message comes in from the server\n- `error` - an error occurred on the Websocket level\n\n```js\nconst Data = Meteor.getData();\nconst socket = Data.ddp.socket;\nconst events = ['open', 'close', 'message:out', 'message:in', 'error'];\nevents.forEach((eventName) =\u003e {\n  socket.on(eventName, (event) =\u003e console.debug(eventName, event));\n});\n```\n\n#### Raw Websocket (lowest-level)\n\nThere is the possibility to hook into Websocket one level lower by accessing the\nraw socket.\n\n\u003e This is highly discouraged for production, use at your own risk!\n\u003e Note, that Data.ddp.socket listens to some of these already (e.g. error)\n\u003e and bubbles them up but also handles cleanup and garbage collection properly.\n\u003e Raw socket errors will have the `isRaw` property set to `true`.\n\n```js\nconst Data = Meteor.getData();\nconst rawSocket = Data.ddp.socket.rawSocket;\nrawSocket.onopen = (e) =\u003e console.debug('raw open', e);\nrawSocket.onmessage = (e) =\u003e console.debug('raw message', e);\nrawSocket.onclose = (e) =\u003e console.debug('raw close', e);\nrawSocket.onerror = (e) =\u003e console.debug('raw error', e);\n```\n\n#### Minimongo (low-level)\n\nYou can hook into DB events from minimongo directly:\n\n```js\nconst Data = Meteor.getData();\nData.db.on('change', (e) =\u003e console.debug(e));\n```\n\n### Send logs and errors to the server and external services\n\nWhile Meteor relies on Websocket connections and DDP as protocol,\nyou might want sometimes to send data over HTTP.\n\nThe following example provides an easy way to listen to errors and send them\nto a service via `fetch` request:\n\n```js\n// in your App code\nconst errorToBody = (err) =\u003e {\n  const errProps = Object.getOwnPropertyNames(err);\n  const formBody = [];\n  for (const prop of errProps) {\n    const encodedKey = encodeURIComponent(prop);\n    const encodedValue = encodeURIComponent(err[prop]);\n    formBody.push(encodedKey + '=' + encodedValue);\n  }\n  return formBody.join('\u0026');\n};\n\nconst sendError = (err) =\u003e {\n  fetch('https://mydomain.tld/log/error', {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',\n    },\n    body: errToBody(err),\n  })\n    .then(console.debug)\n    .catch(console.error);\n};\n\n// hook into all DDP and socket-level errors\nconst Data = Meteor.getData();\nData.dpp.on('error', (e) =\u003e {\n  const error = e instanceof Error ? e : e?.error;\n  return error \u0026\u0026 sendError(error);\n});\n```\n\n#### Accounts\n\n## Showcase\n\n| Whazzup.co                                                                                                                                    | StarlingRealtime                                                                                                                                            |\n| --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003cimg src=\"https://user-images.githubusercontent.com/16267331/120551863-84907c80-c3c4-11eb-8e32-39b950b67875.png\" height=\"200\" align=\"center\"\u003e | \u003cimg src=\"https://uploads-ssl.webflow.com/5f112aac57df16c9ac9c21e0/5f11b8a2e5a66ea03a1a9835_android-chrome-512x512%20copy.png\" height=\"200\" align=\"center\"\u003e |\n| [Whazzup.co](https://whazzup.co/) uses Meteor React Native in their native app                                                                | [StarlingRealtime](https://www.starlingrealtime.com/) uses Meteor React Native in their production app                                                      |\n\n| lea.online                                                                                                                                            | Plan B Schule                                                                                         |\n| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |\n| \u003cimg src=\"https://avatars.githubusercontent.com/u/48286741?s=250\u0026v=4\" height=\"200\" align=\"center\"\u003e                                                    | \u003cimg src=\"https://planb.schule/wp-content/uploads/2024/01/logo-blau.png\" height=\"200\" align=\"center\"\u003e |\n| [lea.online](https://github.com/leaonline) uses Meteor React Native in their [native mobile learning app](https://github.com/leaonline/leaonline-app) | [Plan B Schule](https://www.planb.schule) uses Meteor React Native in their production app            |\n\n**Want to showcase your app using meteor-react-native?** Just create a PR to add your logo here.\n\n## Contribution and maintenance\n\nMeteor React Native is maintained by [Jan Küster](https://github.com/jankapunkt)\nand was formerly maintained by [Nathaniel Dsouza](github.com/therealnate)\nwho is available for consultation: nate@notaiyet.io\n\n\u003e We appreciate any contributions to this project!\n\nIf you have an issue, a question or want to discuss things, then use our [issue link](https://github.com/meteorrn/meteor-react-native/issues/new/choose) that will help you find the\nright spot to ask or tell.\n\nIf you want to contribute code, then please, make sure you have read our [contribution guide](./CONTRIBUTING.md) and our\n[code of conduct](./CODE_OF_CONDUCT.md).\n\nYou can [ask us anytime](https://github.com/meteorrn/meteor-react-native/discussions/categories/q-a), if you get stuck or any of these documents are unclear to you.\n\n## License\n\nMIT, see [license file](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteorrn%2Fmeteor-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeteorrn%2Fmeteor-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteorrn%2Fmeteor-react-native/lists"}