Skip to content

Meteor Reactivity for your React Native application :)

License

Notifications You must be signed in to change notification settings

vyky/react-native-meteor

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-meteor

react-native-meteor npm version Dependency Status

Meteor-like methods for React Native.

Compatibility notes

  • Since RN 0.26.0 you have to use ws or wss protocol to connect to your meteor server. http is not working on Android.

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 React, { Component } from 'react';
import { View, Text } from 'react-native';
import Meteor, { createContainer } from 'react-native-meteor';

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 { settings, todosReady } = this.props;

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

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

  }
}

export default createContainer(params=>{
  const handle = Meteor.subscribe('todos');
  Meteor.subscribe('settings');

  return {
    todosReady: handle.ready(),
    settings: Meteor.collection('settings').findOne()
  };
}, App)

Connect your components

Since Meteor 1.3, createContainer is the recommended way to populate your React Components.

createContainer

Very similar to getMeteorData but your separate container components from presentational components.

Example

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


class Orders extends Component {
  render() {
    const { pendingOrders } = this.props;

    //...
    );
  }
}

export default createContainer(params=>{
  return {
    pendingOrders: Meteor.collection('orders').find({status: "pending"}),
  };
}, Orders)

connectMeteor && getMeteorData

connectMeteor is a React Mixin which enables getMeteorData (the old way of populating meteor data into your components).

Example

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

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

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

*/

@connectMeteor
class Orders extends Component {
  getMeteorData() {
    return {
      pendingOrders: Meteor.collection('orders').find({status: "pending"}),
    };
  }
  render() {
    const { pendingOrders } = this.props;

    //...
    );
  }
}

Reactive variables

These variables can be used inside getMeteorData or createContainer. They will be populated into your component if they change.

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.

ListView Components

MeteorListView Component

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

  • collection string required
  • selector [string / object]
  • options object
  • listViewRef [string / function] ref to ListView component.

Example usage

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

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.
  • listViewRef [string / function] ref to ListView component.

Example usage

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

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

Availables packages

Convenience packages

Example `import { composeWithTracker } from 'react-native-meteor';``

  • EJSON
  • Tracker
  • composeWithTracker: If you want to use react-komposer, you can use react-native-meteor compatible composeWithTracker
  • Accounts (see below)

ReactiveDict

See documentation.

Meteor.Accounts

`import { Accounts } from 'react-native-meteor';``

FSCollection

  • 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 (only available on ios)
import { FSCollectionImagesPreloader } from 'react-native-meteor';

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

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

How To ?

react-native-router-flux

  • You can use Switch with createContainer. Example :
  componentWillMount() {
    this.scenes = Actions.create(
        <Scene key="root" component={createContainer(this.composer, Switch)} selector={this.selector} tabs={true}>
            <Scene key="loading" hideNavBar={true} component={Loading} />
            <Scene key="login" hideNavBar={true}>
              <Scene key="loginbis" component={Login} />
            </Scene>

            <Scene key="loggedIn" component={Layout}>
                <Scene key="main" hideNavBar={true}>
                    //...
                </Scene>
            </Scene>
        </Scene>
    );
  }
  composer() {
    return {
      connected: Meteor.status().connected,
      user: Meteor.user()
    }
  }
  selector(data, props) {
    if(!data.connected) {
      return "loading";
    } else if (!data.user) {
      return "login";
    } else {
      return "loggedIn";
    }
  }

Author

inProgress

Want to help ?

Pull Requests and issues reported are welcome ! :)

About

Meteor Reactivity for your React Native application :)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 88.8%
  • Objective-C 7.3%
  • Python 2.1%
  • Java 1.5%
  • HTML 0.3%