@socialize/react-native-meteor v2.0.0-beta-7

@socialize/react-native-meteor

This project was adapted from react-native-meteor by inProgress Team to be more up to date and focused. This documentation has been revised to be more coherent, dependencies have been updated, and the API has been brought closely in-line with Meteor.

If you are moving from that package to this one, you may find certain parts are missing which were deemed to be outside the scope of this package (ListViews), they were removed/deprecated in meteor core, or they are outdated methods of connecting Tracker with your componenets (connectMeteor, composeWithTracker and createContainer).

• Supporting The Project
• Installation And Setup
  • Android
• Example Usage
  • withTracker
  • useTracker
• Reactive Data Sources
• API
  • Subscriptions
  • Collections
  • Meteor.is/Environment/
• DDP connection
  • Meteor.connect(url, options)
    • Arguments
  • Meteor.ddp
  • Meteor.disconnect()
• Meteor Methods
• Additional Packages
  • ReactiveDict
  • Accounts
  • React Meteor Data
• Contribution

Supporting The Project

Finding the time to maintain FOSS projects can be quite difficult. I am myself responsible for over 30 personal projects across 2 platforms, as well as Multiple others maintained by the Meteor Community Packages organization. Therfore, if you appreciate my work, I ask that you either sponsor my work through GitHub, or donate via Paypal or Patreon. Every dollar helps give cause for spending my free time fielding issues, feature requests, pull requests and releasing updates. Info can be found in the "Sponsor this project" section of the GitHub Repo

Installation And Setup

npm i --save @socialize/react-native-meteor @react-native-community/netinfo @react-native-community/async-storage

Android

Add the following permission to your AndroidManifest.xml file for faster reconnects to the DDP server when your device reconnects to the network.

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

If running an android emulator you have to forward the port of your meteor app.

adb reverse tcp:3000 tcp:3000

Example Usage

withTracker

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Meteor, { withTracker } from 'react-native-meteor';
import TodosCollection from '../api/todo';

Meteor.connect('ws://192.168.X.X:3000/websocket'); //do this only once

class App extends Component {
  renderRow(todo) {
    return (
      <Text>{todo.title}</Text>
    );
  }
  render() {
    const { todos, todosReady } = this.props;

    return(
      <View>
          {todosReady ? todos.map(renderRow) : <View>Loading...</View>}
      </View>
    )
  }
}

export default withTracker(params=>{
  return {
    todosReady: Meteor.subscribe('todos').ready(),
    todos: TodosCollection.find({done: false}, { sort: { createdAt: -1 }}),
  };
})(App);

useTracker

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Meteor, { withTracker } from 'react-native-meteor';
import TodosCollection from '../api/todo';

Meteor.connect('ws://192.168.X.X:3000/websocket'); //do this only once

const renderRow = (todo) => {
  return (
    <Text>{todo.title}</Text>
  );
}
export default () => {
  const { todos, todosReady } = useTracker(() => {
    return {
      todosReady: Meteor.subscribe('todos').ready(),
      todos: TodosCollection.find({done: false}, { sort: { createdAt: -1 }}),
    };
  });

  return(
    <View>
        {todosReady ? todos.map(renderRow) : <View>Loading...</View>}
    </View>
  )
}

Reactive Data Sources

These reactive sources can be used inside withTracker and useTracker. They will be populated into your component if they change.

• Meteor.subscribe()
• Mongo.Collection(collectionName, options)
  • .find(selector, options)
  • .fndOne(selector, options)
• Meteor.user()
• Meteor.userId()
• Meteor.loggingIn()
• Meteor.status()
• ReactiveDict()

API

Subscriptions

• Meteor.subscribe()

import Meteor, { Tracker } from '@socialize/react-native-meteor';

const handle = Meteor.subscribe('socialize.friends');

Tracker.autorun(() =>{
    if(handle.ready()){
        console.log('Subscription ready...');
        handle.stop();
    }
});

Collections

Collections work almost exactly like they do inside your Meteor app. To create a new collection you call new Mongo.Collection('collectionName', options). Currently only the transform option will be used. If you are sharing code between apps, other options will be ignored. The only potential issue that may arise here is if you use the connection option. Only the default connection is currently supported. If you have use for multiple connections, PR's and FR's are welcome.

• Mongo.Collection(collectionName, options)
  • .find(selector, options)
  • .fndOne(selector, options)
  • .insert(doc, callback)
  • .update(id, modifier, [options], [callback])
  • .remove(id, callback(err, countRemoved))

These methods work offline. That means that elements are correctly updated offline, and when you reconnect to ddp, Meteor calls are taken care of.

import { Mongo } from '@socialize/react-native-meteor';
import { Widget } from './models/widget';

let WidgetsCollection = Mongo.Collection("widgets", {
  transform: (document) => {
    //make our documents instances of the Widget class
    return new Widget(document);
  }
});

const aWidget = WidgetsCollection.findOne();

const cursorOfWidgets = WidgetsCollection.find();

const arrayOfWidgets = WidgetsCollection.find().fetch();

Meteor.is/Environment/

Keeping in line with Meteor's API, isClient is provided as well as a isReactNative, similar to how Meteor provides isCordova when code is running in a cordova build. isServer and isCordova are not provided as they will still be falsey when checking. These properties allow for code reuse across your codebases.

• Meteor.isClient - True
• Meteor.isReactNative - True

DDP connection

Meteor.connect(url, options)

Connect to a DDP server. You only have to do this once in your app.

Arguments

• url string required
• options object Available options are :
  • autoConnect boolean true whether to establish the connection to the server upon instantiation. When false, one can manually establish the connection with the Meteor.ddp.connect method.
  • autoReconnect boolean true whether to try to reconnect to the server when the socket connection closes, unless the closing was initiated by a call to the disconnect method.
  • reconnectInterval number 10000 the interval in ms between reconnection attempts.

Meteor.ddp

Once connected to the ddp server, you can access every method available in ddp.js.

• Meteor.ddp.on('connected')
• Meteor.ddp.on('added')
• Meteor.ddp.on('changed')

Meteor.disconnect()

Disconnect from the DDP server.

Meteor Methods

• Meteor.call

Additional Packages

ReactiveDict

import { reactivedict } from 'react-native-meteor';

See documentation.

Accounts

import Meteor, { Accounts } from 'react-native-meteor';

• Accounts.createUser
• Accounts.changePassword
• Accounts.forgotPassword
• Accounts.resetPassword
• Accounts.onLogin
• Accounts.onLoginFailure
• Meteor.user()
• Meteor.userId()
• Meteor.loggingIn()
• Meteor.loginWithPassword (Please note that user is auto-resigned in - like in Meteor Web applications - thanks to React Native AsyncStorage.)
• Meteor.logout
• Meteor.logoutOtherClients

React Meteor Data

import { withTracker, useTracker} from 'react-native-meteor';

See Meteor's react-meteor-data documentation for more info.

Contribution

Eslint configurations are provided for sanity. After cloning, you can run npm install --only=dev. This will install all necessary dependencies to enable linting in your code editor such as vscode.

Pull Requests, Feature Requests, and Bug Reports are welcome!