List messages of rooms (iOS)

app/meteor.js

@@ -35,11 +35,8 @@ export function connect(cb) {
 }
 
 export function loginWithPassword(selector, password, cb) {
-	console.log(0);
 	Meteor.loginWithPassword(selector, password, function() {
-		console.log(1);
 		Meteor.call('subscriptions/get', function(err, data) {
-			console.log(2, err);
 			if (err) {
 				console.error(err);
 			}
@@ -59,3 +56,18 @@ export function loginWithPassword(selector, password, cb) {
 		cb();
 	});
 }
+
+export function loadMessagesForRoom(rid) {
+	Meteor.call('loadHistory', rid, null, 50, function(err, data) {
+		if (err) {
+			console.error(err);
+		}
+		console.log(data);
+
+		realm.write(() => {
+			data.messages.forEach(message => {
+				realm.create('messages', message, true);
+			});
+		});
+	});
+}

app/navigation.js

@@ -2,9 +2,11 @@ import { StackNavigator } from 'react-navigation';
 import { LoginView } from './login';
 import { NewServerView } from './new-server';
 import { RoomsView } from './rooms';
+import { RoomView } from './room';
 
 
 export default new StackNavigator({
+	// Room: { screen: RoomView },
 	Home: {
 		navigationOptions: {
 			header: null
@@ -12,7 +14,8 @@ export default new StackNavigator({
 		screen: NewServerView
 	},
 	Login: { screen: LoginView },
-	Rooms: { screen: RoomsView }
+	Rooms: { screen: RoomsView },
+	Room: { screen: RoomView }
 }, {
 	cardStyle: {
 		backgroundColor: '#fff'

app/realm.js

@@ -40,10 +40,35 @@ const subscriptionSchema = {
 	}
 };
 
+const usersSchema = {
+	name: 'users',
+	primaryKey: '_id',
+	properties: {
+		_id: 'string',
+		username: 'string',
+		name: {type: 'string', optional: true}
+	}
+}
+
+const messagesSchema = {
+	name: 'messages',
+	primaryKey: '_id',
+	properties: {
+		_id: 'string',
+		msg: {type: 'string', optional: true},
+		rid: 'string',
+		ts: 'date',
+		u: 'users',
+		// mentions: [],
+		// channels: [],
+		_updatedAt: 'date'
+	}
+};
+
 // Realm.clearTestState();
 
 const realm = new Realm({
-	schema: [settingsSchema, serversSchema, subscriptionSchema]
+	schema: [settingsSchema, serversSchema, subscriptionSchema, messagesSchema, usersSchema]
 });
 
 export default realm;

app/room.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import { View, Text, FlatList, StyleSheet, Image } from 'react-native';
+import realm from './realm';
+import { loadMessagesForRoom } from './meteor';
+import Markdown from 'react-native-simple-markdown';
+
+
+const styles = StyleSheet.create({
+	roomItem: {
+		borderColor: '#aaa',
+		padding: 14,
+		flexDirection: 'row'
+	},
+	avatar: {
+		backgroundColor: '#ccc',
+		width: 40,
+		height: 40,
+		marginRight: 10,
+		borderRadius: 5
+	},
+	username: {
+		fontWeight: 'bold',
+		marginBottom: 5
+	},
+	container: {
+		flex: 1
+	},
+	separator: {
+		height: 1,
+		// width: "86%",
+		backgroundColor: '#CED0CE'
+		// marginLeft: "14%"
+	}
+});
+
+class RoomItem extends React.PureComponent {
+	_onPress = () => {
+		this.props.onPressItem(this.props.id);
+	};
+
+	render() {
+		return (
+			<View style={styles.roomItem}>
+				<Image style={styles.avatar} source={{uri: `http://localhost:3000/avatar/${ this.props.item.u.username }`}}>
+				</Image>
+				<View>
+					<Text onPress={this._onPress} style={styles.username}>
+						{this.props.item.u.username}
+					</Text>
+					<Markdown whitelist={['link', 'url']}>
+						{this.props.item.msg}
+					</Markdown>
+				</View>
+			</View>
+		);
+	}
+}
+
+export class RoomView extends React.Component {
+	static navigationOptions = ({ navigation }) => ({
+		title: realm.objectForPrimaryKey('subscriptions', navigation.state.params.sid).name
+		// title: navigation.state.params.rid
+	});
+
+	_onPressItem(id) {
+		console.log('pressed', id);
+	}
+
+	renderItem = ({item}) => (
+		<RoomItem
+			id={item._id}
+			onPressItem={this._onPressItem}
+			selected={true}
+			item={item}
+		/>
+	);
+
+	constructor(props) {
+		super(props);
+		this.rid = realm.objectForPrimaryKey('subscriptions', props.navigation.state.params.sid).rid;
+		// this.rid = 'GENERAL';
+
+		loadMessagesForRoom(this.rid);
+
+		const getState = () => {
+			return {
+				selected: new Map(),
+				dataSource: realm.objects('messages').filtered('rid = $0', this.rid)
+			};
+		};
+
+		realm.addListener('change', () => this.setState(getState()));
+
+		this.state = getState();
+	}
+
+	renderSeparator = () => {
+		return (
+			<View style={styles.separator} />
+		);
+	};
+
+
+	render() {
+		return (
+			<View style={styles.container}>
+				<FlatList
+					style={styles.list}
+					data={this.state.dataSource}
+					renderItem={this.renderItem}
+					keyExtractor={item => item._id}
+					ItemSeparatorComponent={this.renderSeparator}
+				/>
+			</View>
+		);
+	}
+}

app/rooms.js

@@ -34,8 +34,10 @@ class RoomItem extends React.PureComponent {
 }
 
 export class RoomsView extends React.Component {
-	_onPressItem(id) {
+	_onPressItem = (id) => {
+		const { navigate } = this.props.navigation;
 		console.log('pressed', id);
+		navigate('Room', {sid: id});
 	}
 
 	renderItem = ({item}) => (

ios/RocketChatRN/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,34 +1,148 @@
 {
   "images" : [
     {
+      "size" : "20x20",
       "idiom" : "iphone",
+      "filename" : "icon-20@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "20x20",
+      "idiom" : "iphone",
+      "filename" : "icon-20@3x.png",
+      "scale" : "3x"
+    },
+    {
       "size" : "29x29",
-      "scale" : "2x"
+      "idiom" : "iphone",
+      "filename" : "icon-29@1x.png",
+      "scale" : "1x"
     },
     {
-      "idiom" : "iphone",
       "size" : "29x29",
-      "scale" : "3x"
-    },
-    {
       "idiom" : "iphone",
-      "size" : "40x40",
+      "filename" : "icon-29@2x.png",
       "scale" : "2x"
     },
     {
+      "size" : "29x29",
       "idiom" : "iphone",
-      "size" : "40x40",
+      "filename" : "icon-29@3x.png",
       "scale" : "3x"
     },
     {
+      "size" : "40x40",
       "idiom" : "iphone",
-      "size" : "60x60",
+      "filename" : "icon-40@2x.png",
       "scale" : "2x"
     },
     {
+      "size" : "40x40",
       "idiom" : "iphone",
-      "size" : "60x60",
+      "filename" : "icon-40@3x.png",
       "scale" : "3x"
+    },
+    {
+      "size" : "57x57",
+      "idiom" : "iphone",
+      "filename" : "icon-57@1x.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "57x57",
+      "idiom" : "iphone",
+      "filename" : "icon-57@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "60x60",
+      "idiom" : "iphone",
+      "filename" : "icon-60@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "60x60",
+      "idiom" : "iphone",
+      "filename" : "icon-60@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "20x20",
+      "idiom" : "ipad",
+      "filename" : "icon-20@1x.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "20x20",
+      "idiom" : "ipad",
+      "filename" : "icon-20@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "ipad",
+      "filename" : "icon-29@1x.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "ipad",
+      "filename" : "icon-29@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "ipad",
+      "filename" : "icon-40@1x.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "ipad",
+      "filename" : "icon-40@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "50x50",
+      "idiom" : "ipad",
+      "filename" : "icon-50@1x.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "50x50",
+      "idiom" : "ipad",
+      "filename" : "icon-50@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "72x72",
+      "idiom" : "ipad",
+      "filename" : "icon-72@1x.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "72x72",
+      "idiom" : "ipad",
+      "filename" : "icon-72@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "76x76",
+      "idiom" : "ipad",
+      "filename" : "icon-76@1x.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "76x76",
+      "idiom" : "ipad",
+      "filename" : "icon-76@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "83.5x83.5",
+      "idiom" : "ipad",
+      "filename" : "icon-83.5@2x.png",
+      "scale" : "2x"
     }
   ],
   "info" : {