Improved example + exposes ddp to Meteor

README.md

@@ -12,7 +12,7 @@
 
 # react-native-meteor
 
-Meteor-like methods for React Native. **Currently in v1.0.0-beta2** ! For old docs, see [v0.6.2 documentation](https://github.com/inProgress-team/react-native-meteor/tree/0.6.2) (classic ddp interface).
+Meteor-like methods for React Native. **Currently in v1.0.0-beta3** ! For old docs, see [v0.6.2 documentation](https://github.com/inProgress-team/react-native-meteor/tree/0.6.2) (classic ddp interface).
 
 ## What is it for ?
 
@@ -129,10 +129,16 @@ Connect to a DDP server. You only have to do this once in your app.
 
 ## Meteor methods
 
+* [Meteor.loginWithPassword](http://docs.meteor.com/#/full/meteor_loginwithpassword) (Please note that user is auto-resigned in - like in Meteor Web applications - thanks to React Native AsyncStorage.)
+* [Meteor.logout](http://docs.meteor.com/#/full/meteor_logout)
 * [Meteor.call](http://docs.meteor.com/#/full/meteor_call)
-    
+
 ##### NOTE
 Meteor call parameter still not supporting EJSON, so you can't pass param value like date, boolean etc. For now it's only support object of string (JSON)
 
-* [Meteor.loginWithPassword](http://docs.meteor.com/#/full/meteor_loginwithpassword) (Please note that user is auto-resigned in - like in Meteor Web applications - thanks to React Native AsyncStorage.)
-* [Meteor.logout](http://docs.meteor.com/#/full/meteor_logout)
+## Meteor.ddp
+
+Once connected to the ddp server, you can access every method available in [ddp.js](https://github.com/mondora/ddp.js/).
+* Meteor.ddp.on('added')
+* Meteor.ddp.on('changed')
+* ...

example/mobile/app/App.js

@@ -17,18 +17,23 @@ import Meteor from 'react-native-meteor';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 
 import Todos from './Routes/Todos';
+import TodosListView from './Routes/TodosListView';
 import Status from './Routes/Status';
 
 export default class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      selectedTab: 1
+      selectedTab: 0
     };
   }
   componentWillMount() {
     const url = 'http://'+this.props.serverUrl+':3000/websocket';
     Meteor.connect(url);
+
+    Meteor.ddp.on('added', function(message) {
+      console.log(message);
+    });
   }
   render() {
     //https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html
@@ -43,17 +48,24 @@ export default class App extends Component {
           <Todos />
         </Icon.TabBarItem>
         <Icon.TabBarItem
-          title="Status"
-          iconName="security"
+          iconName="list"
+          title="Todos ListView"
           selected={this.state.selectedTab === 1}
           onPress={() => {this.setState({selectedTab: 1});}}>
+          <TodosListView />
+        </Icon.TabBarItem>
+        <Icon.TabBarItem
+          title="Status"
+          iconName="security"
+          selected={this.state.selectedTab === 2}
+          onPress={() => {this.setState({selectedTab: 2});}}>
           <Status />
         </Icon.TabBarItem>
         <Icon.TabBarItem
           title="More"
             iconName="list"
-          selected={this.state.selectedTab === 2}
-          onPress={() => {this.setState({selectedTab: 2});}}>
+          selected={this.state.selectedTab === 3}
+          onPress={() => {this.setState({selectedTab: 3});}}>
 <View></View>
         </Icon.TabBarItem>
       </TabBarIOS>

example/mobile/app/Routes/TodosListView.js

@@ -0,0 +1,68 @@
+'use strict';
+
+console.disableYellowBox = true;
+
+
+import React, {
+  Component,
+  StyleSheet,
+  Text,
+  View,
+  ListView,
+  TabBarIOS
+} from 'react-native';
+
+import Meteor, { connectMeteor } from 'react-native-meteor';
+
+@connectMeteor
+export default class TodosListView extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ds: new ListView.DataSource({
+        rowHasChanged: (row1, row2) => !_.isEqual(row1, row2),
+      })
+    };
+  }
+  getMeteorData() {
+    return {
+      todos: Meteor.collection('todos').find()
+    };
+  }
+  startMeteorSubscriptions() {
+    Meteor.subscribe('todos');
+  }
+  renderItem(todo) {
+    return (
+      <View key={todo._id}>
+        <Text>{todo.title}</Text>
+      </View>
+    )
+  }
+  render() {
+    const { todos } = this.data;
+    const { ds } = this.state;
+
+    return (
+      <View style={styles.container}>
+        <View style={styles.header} />
+        <ListView
+          dataSource={ds.cloneWithRows(todos)}
+          renderRow={this.renderItem}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  header: {
+    backgroundColor: 'blue',
+    height: 50
+  }
+});

example/mobile/ios/mobile.xcodeproj/project.pbxproj

@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-meteor",
-  "version": "1.0.0-beta2",
+  "version": "1.0.0-beta3",
   "description": "DDP React-native Client",
   "main": "src/Meteor.js",
   "scripts": {

src/Meteor.js

@@ -50,7 +50,7 @@ module.exports = {
     });
   },
   connect(endpoint) {
-    Data.ddp = new DDP({
+    this.ddp = Data.ddp = new DDP({
       endpoint: endpoint,
       SocketConstructor: WebSocket
     });
@@ -68,8 +68,7 @@ module.exports = {
     });
 
     Data.ddp.on("ready", message => {
-      console.info('READY', message.subs);
-      //console.log('READY', Data.db.todos && Data.db.todos.find().length);
+      //console.info('READY', message.subs);
     });
 
     Data.ddp.on("changed", message => {