react-native-meteor

react-native-meteor

Meteor-like methods for React Native. Currently in v1.0.0-beta8 ! 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);
  }
  startMeteorSubscriptions() {
    Meteor.subscribe('todos');
    Meteor.subscribe('settings');
  }
  getMeteorData() {
    return {
      settings: Meteor.collection('settings').findOne()
    };
  }
  renderRow(todo) {
    return (
      <Text>{todo.title}</Text>
    );
  }
  render() {
    const { settings } = this.data;

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

  }
}

connectMeteor

startMeteorSubscriptions

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

Meteor.subscribe

Example usage

your server side:

Meteor.publish('todos', function(done, options){
    return Todos.find({ done: done }, options);
});

your react-native client code:

//Meteor subscribe can be used like on meteor official site
Meteor.subscribe('todos', true, {limit: 10, sort: {createdAt: -1}});

getMeteorData

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

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

MeteorListView Component

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

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

Example usage

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

API

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.loginWithPassword (Please note that user is auto-resigned in - like in Meteor Web applications - thanks to React Native AsyncStorage.)
• Meteor.logout
• Meteor.call

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

TODO

• Connection status unreliable

Pull Requests are welcome ! :)