inprogress-team / react-native-meteor

Meteor Reactivity for your React Native application :)

react-native-meteor

Meteor-like methods for React Native.

If you have questions, you can open a new issue in the repository or ask in the our Gitter chat:
https://gitter.im/react-native-meteor/Lobby

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 react-native-meteor

or

npm i --save 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:

• For RN > 0.49, use react-native-meteor@latest
• For RN > 0.45, use [email protected]
• For RN = 0.45, use [email protected]
• For RN < 0.45, you can use version [email protected] in case or problems.

Example usage

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

    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

• Learn how to getting started from connecting your components.
• The API reference lists all public APIs.
• Visit the How To ? section for further information.

Author

• Théo Mathieu (@Mokto) from inProgress
• Nicolas Charpentier (@charpeni)

Want to help ?

Pull Requests and issues reported are welcome! :)

License

react-native-meteor is MIT Licensed.

react-native-meteor's Issues

Find should accepts strings as selector

See http://docs.meteor.com/#/full/find

Unable to Resolve Module react-mixin in react-native-meteor 1.0.0-beta

I think you need to add this on Readme

npm install --save react-mixin

but anyway after I had installed that plugin, the error still there.
Any suggestion?

Meteor.LoggingIn return true when not loggedIn, and Meteor.user() is not saved to AsyncStorage

Meteor.LoggingIn return true when not loggedIn, but when loggedIn it return false.
And the most blocker thing is Meteor.user() is not saved to asyncStorage. So when I am refreshing the app, the Meteor.user() is not there anymore

Testing

Hi @Mokto I would like to add unit tests if that is ok. I have forked the repo and am adding tests in the fork. Are you interested in having unit tests? If so is it best to do it in a fork? Do you have any preferences of testing framework etc I should take into account?

Things that should be in 1.0.0 release - PLEASE FEEL FREE TO CONTRIBUTE IF YOU FEEL SOMETHING IS MISSING OR WRONG

Hi everyone,

With the work I've done/accomplished this week-end, I think we are close to a major 1.0.0 release.
I would like to make a Todo List of what is needed for this final release.

Please feel free to contribute and tell me what's wrong/missing in this plugin.

I'll update this post according to your advice. Thanks !!

TODO in 1.0.0

• Subscriptions ready #40
• Add unit tests (@vermiculite #38)
• Test on a production app [95 %]
• createContainer Meteor 1.3

TODO next

• Meteor.collection(collectionName).update should work offline and not just wait that the connection is live again
• [Meteor.loginWith[Provider]] : create submodules like react-native-meteor-facebook-login or something like that because native code is needed
• Save data to cache to make apps work offline #36

Connect to multiple DDP

How to do this?

EJSON parameter support

Using Meteor.call and Meteor.subscribe parameter is very important for production apps.
For now the parameter still only able to pass strings of object. We can't pass value like integer, Date etc. Maybe we need to make EJSON support.

If I am not wrong we can use this npm package https://www.npmjs.com/package/ejson.

For example:

var filters = {
   createdAt: {$gt: new Date()},
   vote: 5
};
filters = EJSON.stringify(filters); //stringify the object first
filters = EJSON.parse(filters); //make to EJSON obj
Meteor.subscribe('some_collections', [filters], function(someCollections){
   console.log(someCollections);
});

I think the above code should be simplified in "react-native-meteor" module instead manually doing that.
Regards

Update method

Meteor.collection('todos').update

Meteor user methods

• Meteor.logoutOtherClients
• Meteor.loginWith

Meteor.userId() gives null in the server

Helper for Meteor-CollectionFS

https://github.com/CollectionFS/Meteor-CollectionFS

Uses something like this :
meteor.getUrl()+'/cfs/files/imagesFiles/'+imageFile.$value._id+'?token='+btoa(JSON.stringify({authToken: token}))

Example for uploading image by using FSCollection

I am stuck with uploading image to the server. When i trigger the command

Meteor.FSCollection('images').insert({url: fileObj}, function(err, res) {
if (err) {
console.log('error during uploading');
} else {
console.log('uploading successfully');
// _this.props.navigator.pop();
}
});

It will give me the exception Meteor.waitDdpConnected is not a function. However, if i comment the part of uploading the image and do a call normally to insert the data, it works

Support for non-websocket DDP connections

Maybe this already exists and I'm missing it. I'm routing my app traffic through the free CloudFlare plan which doesn't support websockets. I attempted to get a plain HTTP connection working but could not.

Thanks!

this.userId is not defined on Meteor.call

if you have method on server like this, you can't get the "this.userId" variable although the client has been logged in

Meteor.methods({
   getSomething: function(){
      console.log(this.userId); //this return undefined
   }
});

I think this should be on 1.0 @Mokto . Thanks a lot

Cannot click on MeteorListView with Touchable

I trying to render the MeteorListView with the Touchable on it and somehow, the Touchable does not fire the event. This is my code

renderRow() {
    return (
        renderRow(restaurant) {
            var _this = this;
            return (
                    <TouchableOpacity onPress={this.eventDetailTriggered}>
                        <View style={{flexDirection: 'column'}} >
                            <Text style={styles.title}>{restaurant['Trading name']}</Text>
                            <Text style={styles.price}>{restaurant['Street address']}</Text>
                       </View>
                    </TouchableOpacity>
            );
        }
    );
}
render() {
    return (
        <Image source={require('../../../../image/meal.jpg')} style={styles.backgroundImage}>
            <MeteorListView
                 collection="restaurantInfos"
                 renderRow={this.renderRow}                        
                 style={styles.listView}
           />
       </Image>
    );
}

if i remove the MeteorListView and put the this.renderRow instead, i can trigger the button

Using ListView DataSource Best Practices with react-native-meteor 1.0.0-beta2

Am I doing it right?
Because currently I can't set the ds within state, I can only set it on render, so I don't use state like RN ds usually used.

here is my code, is this correct way to implement:

@connectMeteor
class MeteorRN extends Component {

  constructor(){
    super();

    this.ds = new ListView.DataSource({
      rowHasChanged: (row1, row2) => !_.isEqual(row1, row2),
    });
  }

  startMeteorSubscriptions() {
    Meteor.subscribe('channels');
  }

  getMeteorData() {
    //I can't set state here to update DS row like RN best practice, because data here is not valid
     return {
       channels: Meteor.collection('channels').find()
     }
  }

  _renderRow(rowData){
      return (
        <TouchableHighlight style={styles.row}  underlayColor='#c8c7cc'>
          <Text>{rowData.name}</Text>
        </TouchableHighlight>
      );
  }

  render(){
    const {channels} = this.data;

    return (
        <View style={styles.container}>
          <ListView
            dataSource={this.ds.cloneWithRows(channels)}
            renderRow={this._renderRow}
            style={styles.listView}
          />
        </View>
    )
  }

}

Thoughts on simplifying the examples meteor app

It's currently using webpack and possibly other technologies (I haven't actually gotten it running). Would it be worth it to put together a more simple example to demonstrate the power of this package?

Accounts Methods

• Accounts.verifyEmail(token, [callback])
• Accounts.changePassword(oldPassword, newPassword, [callback])
• Accounts.forgotPassword(options, [callback])
• Accounts.resetPassword(token, newPassword, [callback])

How to unsubscribe?

How to unsubscribe on componentWillUnmout? We need to unsub it because if not there is warning "set state can only update a mounting or mounted....". Currently I am doing "Meteor.disconnect()" to handle that, but if using it, there will be case that data is not subscribed in another Route. btw I am using "react-native-router-flux" npm package

Image url() from collectionFS return (ws://) prefix

Image url() from collectionFS return (ws://) prefix

ws://localhost:3000/cfs/files/images/3xnScz4irQggxopBK?store=images

that's make error at my RN, although it can be simply resolve by replacing the String.

@connectMeteor throwing Unexpected token

Can you explain the purpose of @connectMeteor expression. I've install the Babel presets and I have the fill with the following,
{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy"]
}
When I remove the reference, it appears the ddp connection fails?

is it possible to return something async to MeteorComplexListView?

is it possible to return something async to MeteorComplexListView?

Real world Case for very complex report :

<MeteorComplexListView
  elements={()=>{
    const {date} = this.props;
    Meteor.call("getReceiptTransactions", Meteor.userId(), date, (err, res)=>{
        return res.models;
    });
  }}
 renderRow={this._renderRow.bind(this)}
/>

Subscription_Error

We done with making successful connection with react-native, but while subscribe to a collection its return an array object for first time, then after immidiate its return an empty array along with "NO SUB" log.

Did Subscriptions support Publish Composite?

Did React-Native-Meteor Subscription able to get data from collection which is published by Meteor Publish Composite package? (publish collections with it's relation) so it can get the relational collection?

btw here is the link of publish composite package https://atmospherejs.com/reywood/publish-composite

ERROR: _reactNativeMeteor2.default.itemSubscribe is not a function

I've successfully authenticated via loginWithEmail

However, when I try to subscribe a publication, I get the error
_reactNativeMeteor2.default.itemSubscribe is not a function

Any ideas?
This is my code

this.messages = meteor.subscribe('messages', function(messages) {
        self.setState({
          dataSource: self.state.dataSource.clonewithRows(messages),
          loaded: true
        })
      });

Cannot read property 'on' of null

I had a working project I believe was 1.0.0beta17 I then upgraded to beta18 and now I get this error. Strangely if I downgrade to beta 17 it has the problem in issue #32.

Generate a real random id (collection.insert)

Related to #25.

Thanks to crypto library compatible with RN (thanks to @spencercarli)

beta30 installation issues.

FYI

This is happening when trying run the example:

npm ERR! addLocal Could not install /Users/jitter
npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/lib/node_modules/npm3/node_modules/npm/cli.js" "install"
npm ERR! node v4.3.0
npm ERR! npm v3.7.5
npm ERR! code EISDIR
npm ERR! errno -21
npm ERR! syscall read

npm ERR! eisdir EISDIR: illegal operation on a directory, read
npm ERR! eisdir This is most likely not a problem with npm itself
npm ERR! eisdir and is related to npm not being able to find a package.json in
npm ERR! eisdir a package you are trying to install.

how to use on added on removed etc?

MeteorListView cannot read property find of undefined

I think this probably because of this line

https://github.com/inProgress-team/react-native-meteor/blob/master/src/ListView.js#L40

you are assigning todos in there, so todos just work perfectly but another collections like "channels" etc on mine not working

Help understand @connectManger

I have a few quests. Can you explain what's happening with the @connectMetero. Whatpoint and how is it carried out in this context? Also, in the example app, where is "this.data" coming from? Is it related to @connectMeteor.

missing_observer

how to use observer methods like added,updated, removed with this library

When disconnected, minimongo insert is pushing data to view but not send to server when reconnecting.

When disconnected, minimongo insert is pushing data to view but not send to server when reconnecting.

example:

ddp is connected and trigger this method (this is working just fine)

Meteor.collection('somecol').insert(data);

when disconnected and call this method (data is pushed to view/listView correctly while offline)

Meteor.collection('somecol').insert(data);

but when ddp reconnecting the real collection is not inserted to server. (Meteor default behaviour allowing offline saved data to be inserted to real server when reconnecting)

How do you think about this? @Mokto . Thanks

(Btw sorry for interrupting you everyday lol)

null is not an object (evaluation '_data2.default.ddp.on')

when using @connectMeteor i get the error: null is not an object (evaluation '_data2.default.ddp.on'), the problem seems to be in Mixin.js:123, when calling Data.ddp.on, because in Data.js, ddp is set to null, i don't really know what is going on behind the scenes, but i would really like some help to get it working, I just tried out the example code.

Connection status unreliable

This is a great library. I especially like the built in reconnect-mechanism. It works well if I reboot my meteor server, but if I set the phone to flight mode, the status remains 'connected' an no automatic reconnect happens. Is this a known problem? It is probably a problem with ddp.js ...

Similarly, changing changing from Wifi to 4G connection drops the connection without any notice.

Expose DDP connection

I believe it would be useful to expose the ddp connection in your API. In my case, I would like to listen to low-level DDP messages, and don't think I can do this with the current setup.

As a quick and dirty solution, I just added these lines to my personal copy of Meteor.js:

// Meteor.js
  ...
  connect(endpoint) {
    Data.ddp = new DDP({
      endpoint: endpoint,
      SocketConstructor: WebSocket
    });
    this.ddp = Data.ddp; // added
    ...

Did Subscribe doesn't support parameter and callback in react-native-meteor 1.0.0-beta?

Although I am not yet successfully using this package, I have take a look at the src code. The subscribe method doesn't have parameter or callback if I am not wrong.
Please add ability to make subscribe able to receive parameter and using callback.
If it's already there, please give example how to do that

support infinite scroll for meteorListView/meteorComplexListView

is it possible to support infinite scroll for meteorListView/meteorComplexListView by default?

Meteor.ddp.on is not working

my Meteor.ddp.on('changed') etc is not working, please help

Is it possible to save data to cache after subscribe?

For example:

• first open the app and subscribe the data
• fetch the data using MeteorListView minimongo
• in this case, when turning off ddp connection we can still get the data because data saved to minimongo
• close the app completely (not only to background)
• re open the apps, and the data still persist without ddp connection or resubscribe (is this possible)?

How do you think @Mokto

Miss spelling subscribe with suscribe

Please fix the miss spelling of suscribe to subscribe. this will lead to chaos :)
thanks

No Result in Meteor.loginWithPassword

there isnt a res in the callback for loginWithPassword making it hard to tell if the login was sucessful

Support Observer for react-native-meteor 1.0.0-beta

Please support Observer for react-native-meteor. Although rn-meteor already using Meteor.collections mixin realtime it still need observer in some case.
Regards

Failed to install react-native-meteor 1.0.0 Beta

Error 504 on fetching npm registry:

while doing this:

Subscriptions ready

Has there been any attempt to listen to whether the sub is ready for this kind of use case:

isReady ? <TodosList todos={todos] /> : <Loading />

This would be a lovely addition to 1.0 #33

is MeteorListView's reactive?

Hi. I'm trying to do a simple app just for testing purposes

I have a publication on my meteor server:

Meteor.publish('pokemons', function(type) {
  let query = type ? {
    type: type
  } : {};

  return Pokemons.find(query);
});

On my RN app:

let types = [
  'fire',
  'water',
  'grass'
]

  constructor(props) {
    super(props);
    this.state = {
      currentType: 0
    }
  }

  startMeteorSubscriptions() {
    Meteor.subscribe('pokemons', types[this.state.currentType]);
  }

  _handlePress() {
    let currentType = this.state.currentType;
    currentType++;
    currentType = currentType % types.length;

    this.setState({
      currentType
    })
  }

The subscription is changing correctly when the state is changed... but:

        <MeteorListView
          collection="pokemons"
          selector={{type: types[this.state.currentType]}}
          renderRow={this.renderItem}
        />

The selector on MeteorListView does not respond to changes on the state... it keeps filtering by the first selector passed to it (types[0] -> 'fire')

Meteor.userId() always returns someone's user id even if not logged in.

Using userId() method, it will always return some user's id. When I delete the document that this method returned, it just returns someone else's id.

Example App

When running the example app, both listview routes hang on Loading...

You forgot to turn off debug (console.log) on latest beta27

I think this is a little bit annoying for debugging

Meteor.user() - Trackr

Is Meteor.user() using trackr? im trying to use react-komposer to update changes, however, whenever i update my data remotely im not seeing any changes in my app.

const ListOfItems = ({ items, openProject }) => (
  <List>
    {
      items.map((item, key) => (
        <ListItem key={ key }>
          <Text onPress={ openProject(item) }>
            { item.text }
          </Text>
        </ListItem>
      ))
    }
  </List>
);

const onPropsChange = (props, onData) => {
  Trackr.autorun(() => {
    const user = Meteor.user();
    console.log(user);
    onData(null, {
      ...props,
      items: [
        {
          text: user && user.profile.fullName
        }
      ]
    });
  });
};

const ProjectList = compose(onPropsChange, <Text />, <Text />)(ListOfItems);