Meteor React Native

Connect 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.

Meteor Guide · Beginners Workshop · Full API Documentation · Example Project · Starter Template (Expo) · More packages and resources

Features

• 🪄 Meteor's "automagical" features for your mobile app
• 🌱 Easy to set up and integrate
• 🚀 Build mobile apps with React-Native + Meteor in no time
• 🌈 Zero-Config Accounts / Authentication
• 📦 Storage-independent with zero-config defaults
• 👋 Supportive community in the Meteor Forums, Slack or Discord!

Table of Contents

• Installation
  • Use a different async storage
  • Using Expo Secure Store
• Basic Usage
• Companion Packages
• Compatibility
• Using on Web
• Changelog
• Package Interface
  • Usage of the package interface
  • Differences from Meteor Core to Note:
• Showcase
• Contribution and maintenance
• License

Installation

1. npm install --save @meteorrn/core
2. Confirm you have peer dependencty @react-native-community/netinfo installed
3. Confirm you have @react-native-async-storage/async-storage@>=1.8.1 installed. If you are using Expo, or otherwise cannot use @react-native-async-storage/async-storage, read below

Use a different async storage

This package uses @react-native-async-storage/async-storage by default. This may cause issues if you are using certain React Native versions, or if you are using Expo. To use a custom AsyncStorage implementation, pass it as an option in Meteor.connect:

import { AsyncStorage } from 'react-native';

// ...

Meteor.connect('wss://myapp.meteor.com/websocket', { AsyncStorage });

If 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.

Make 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.

Using Expo Secure Store

This example shows how to use Expo's secure store implementation as Async storage. Note, that secure storage in both Android and iOS have a low upper size limit of a few megabytes.

import * as SecureStore from 'expo-secure-store';

// ...

Meteor.connect('wss://myapp.meteor.com/websocket', {
  AsyncStorage: {
    getItem: SecureStore.getItemAsync,
    setItem: SecureStore.setItemAsync,
    removeItem: SecureStore.deleteItemAsync,
  },
});

Basic Usage

import Meteor, { Mongo, withTracker } from '@meteorrn/core';

// "mycol" should match the name of the collection on your meteor server,
// or pass null for a local collection
let MyCol = new Mongo.Collection('mycol');

Meteor.connect('wss://myapp.meteor.com/websocket'); // Note the /websocket after your URL

class App extends React.Component {
  render() {
    let { myThing } = this.props;

    return (
      <View>
        <Text>Here is the thing: {myThing.name}</Text>
      </View>
    );
  }
}

let AppContainer = withTracker(() => {
  Meteor.subscribe('myThing');
  let myThing = MyCol.findOne();

  return {
    myThing,
  };
})(App);

export default AppContainer;

Unique Scenarios: Running the app on a physical device but want to connect to local development machine? Check out this issue comment.

Companion Packages

The @meteorrn/core package has been kept as light as possible. To access more features, you can use companion packages.

Here are some examples:

• @meteorrn/oauth-google: Allows you to let users login to your app with Google
• @meteorrn/oauth-facebook: Allows you to let users login to your app with Facebook

For the full list of officially recognized packages, check out the @meteorrn github org.

Compatibility

This package is compatible with React Native versions from 0.60.0 to latest (0.63.2)

For React Native <0.60.0 use react-native-meteor.

Migrating from react-native-meteor:

• cursoredFind is no longer an option. All .find() calls will return cursors (to match Meteor)
• MeteorListView & MeteorComplexListView have been removed
• CollectionFS has been removed
• createContainer has been removed
• Mixins (connectMeteor) have been removed
• composeWithTracker has been removed

Using on Web

While 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:

const AsyncStorage = {
    setItem:async (key, value) => window.localStorage.setItem(key, value),
    getItem:async (key) => window.localStorage.getItem(key)
    removeItem:async (key) => window.localStorage.removeItem(key)
}

Meteor.connect("wss://.../websock", {AsyncStorage});

Changelog

The GitHub Releases Tab includes a full changelog

Package Interface

To ensure that MeteorRN companion packages use the same versions of external packages like AsyncStorage as the core, @meteorrn/core provides a package interface, where companion packages can access certain packages. Currently, package interface returns an object with the following properties:

• AsyncStorage

Usage of the package interface

import Meteor from '@meteorrn/core';

const { AsyncStorage } = Meteor.packageInterface();

Differences from Meteor Core to Note:

• This API does not implement observeChanges (but it does implement observe)

Showcase

Whazzup.co	StarlingRealtime
Whazzup.co uses Meteor React Native in their native app	StarlingRealtime uses Meteor React Native in their production app

lea.online	Your app here!
lea.online uses Meteor React Native in their native mobile learning app	Show us your app that uses this library!

Contribution and maintenance

Meteor React Native is maintained by Jan Küster and was formerly maintained by Nathaniel Dsouza who is available for consultation: [email protected]

We appreciate any contributions to this project!

If you have an issue, a question or want to discuss things, then use our issue link that will help you find the right spot to ask or tell.

If you want to contribute code, then please, make sure you have read our contribution guide and our code of conduct.

You can ask us anytime, if you get stuck or any of these documents are unclear to you.

License

MIT, see license file