Skip to content

Meteor Reactivity for your React Native application :)

License

Notifications You must be signed in to change notification settings

evolvier/react-native-meteor

 
 

Repository files navigation

@ajaybhatia/react-native-meteor

Meteor-like methods for React Native.

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

yarn add @ajaybhatia/react-native-meteor

or

npm i --save @ajaybhatia/react-native-meteor

!! See detailed installation guide

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.

It is recommended to always use the latest version of react-native-meteor compatible with your RN version:

Meteor.Collection().find() (for backwards compatibility) returns documents. If you are used to the usual Meteor find usage (find().fetch()), and want Meteor.Collection().find() to return a cursor instead, please see the cursoredFind option

Warning < RN 0.57.8 Android bug

There was a bug in the react native websocket android implementation that meant the close event wasn't being received from the server. Therefore RN versions prior to React-native 0.57.8 will not detect users being logged out from the server side. There could also be other bugs resulting from this.

Example usage

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Meteor, { withTracker, MeteorListView } from '@ajaybhatia/react-native-meteor';

Meteor.connect('ws:https://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;

    return (
      <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 withTracker(params => {
  const handle = Meteor.subscribe('todos');
  Meteor.subscribe('settings');

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

Documentation

Author

Want to help ?

Pull Requests and issues reported are welcome! :)

License

react-native-meteor is MIT Licensed.

About

Meteor Reactivity for your React Native application :)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 91.9%
  • Objective-C 5.5%
  • Python 1.9%
  • Other 0.7%