Giter VIP home page Giter VIP logo

react-native-meteor's Introduction

react-native-meteor react-native-meteor npm version Dependency Status

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.

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

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.

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.Accounts

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 (only available on ios)
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 ! :)

react-native-meteor's People

Contributors

faridsafi avatar funkyeah avatar josephdburdick avatar mokto avatar radiegtya avatar spencercarli avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.