react-native-meteor

react-native-meteor

Meteor-like methods for React Native. ! For old docs, see v0.6.2 documentation (classic ddp interface).

What is it for ?

The purpose of this library is :

• to set up and maintain a ddp connection with a ddp server, freeing the developer from having to do it on their own.
• be fully compatible with react-native and help react-native developers.
• to match with Meteor documentation used with React.

Install

npm i --save react-native-meteor@latest

!! See detailed installation guide

Example usage

import { View, Text, Component } from 'react-native';
import Meteor, { connectMeteor, MeteorListView } from 'react-native-meteor';

/*
* Uses decorators (see detailed installation to activate it)
* Or use :

  class Todos extends Component {
    ...
  }
  connectMeteor(Todos);
  export default Todos;

*/

@connectMeteor
export default class App extends Component {
  componentWillMount() {
    const url = 'http://192.168.X.X:3000/websocket';
    Meteor.connect(url);
  }
  getMeteorData() {
    const handle = Meteor.subscribe('todos');
    Meteor.subscribe('settings');

    return {
      todosReady: handle.ready(),
      settings: Meteor.collection('settings').findOne()
    };
  }
  renderRow(todo) {
    return (
      <Text>{todo.title}</Text>
    );
  }
  render() {
    const { settings, todosReady } = this.data;

    <View>
      <Text>{settings.title}</Text>
        {!todosReady && <Text>Not ready</Text>}

        <MeteorListView
          collection="todos"
          selector={{done: true}}
          options={{sort: {createdAt: -1}}}
          renderRow={this.renderRow}
        />
    </View>

  }
}

connectMeteor

getMeteorData

Inside this method, you can create subscriptions (see below) when component is mounted. It will automatically unsubscribe if the component is unmounted.

• Meteor.subscribe : returns an handle

Inside getMeteorData, you can also access any Meteor reactive data source, which means :

• Meteor.subscribe handle
• Meteor.collection(collectionName)
  • .find(selector, options)
  • .findOne(selector, options)
• Meteor.user()
• Meteor.userId()
• Meteor.status()
• Meteor.loggingIn()

Additionals collection methods

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

• Meteor.collection(collectionName)
  • .insert(doc, callback)
  • .update(id, modifier, [options], [callback])
  • .remove(id, callback(err, countRemoved))

MeteorListView Component

Same as ListView Component but does not need dataSource and accepts three arguments :

• collection string required
• selector [string / object]
• options object

Example usage

<MeteorListView
  collection="todos"
  selector={{done: true}}
  options={{sort: {createdAt: -1}}}
  renderRow={this.renderItem}
/>

MeteorComplexListView Component

Same as ListView Component but does not need dataSource and accepts one argument. You may need it if you make complex requests combining multiples collections.

• elements function required : a reactive function which returns an array of elements.

Example usage

<MeteorComplexListView
  elements={()=>{return Meteor.collection('todos').find()}}
  renderRow={this.renderItem}
/>

API

Meteor DDP connection

Meteor.connect(endpoint, 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.disconnect()

Disconnect from the DDP server.

Meteor methods

• Meteor.call
• Meteor.loginWithPassword (Please note that user is auto-resigned in - like in Meteor Web applications - thanks to React Native AsyncStorage.)
• Meteor.logout
• Meteor.logoutOtherClients

Meteor.Accounts

• Accounts.createUser
• Accounts.changePassword
• Accounts.forgotPassword

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')
• ...

CollectionFS

• Meteor.FSCollection(collectionName) : Helper for Meteor-CollectionFS. Full documentation here
• This plugin also exposes a FSCollectionImagesPreloader component which helps you preload every image you want in CollectionFS

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

<FSCollectionImagesPreloader
  collection="imagesFiles"
  selector={{metadata.owner: XXX}}
/>

react-native-router-flux

• Github repository
• npm i --save react-native-meteor-router-flux@latest
• Custom scene renderer which allows to select tab scene to show depending from app state. It could be useful for authentication, restricted scenes, etc.

Want to help ?

Pull Requests and issues reported are welcome ! :)