Merge branch 'master' into search-bar

app/components/Message.js

@@ -2,16 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { View, Text, StyleSheet } from 'react-native';
 import { CachedImage } from 'react-native-img-cache';
+import Markdown from 'react-native-easy-markdown';
+import { emojify } from 'react-emojione';
 
 const styles = StyleSheet.create({
 	message: {
-		borderColor: '#aaa',
-		padding: 14,
+		padding: 12,
+		paddingTop: 6,
+		paddingBottom: 6,
 		flexDirection: 'row',
 		transform: [{ scaleY: -1 }]
 	},
 	avatarContainer: {
-		backgroundColor: '#ccc',
+		backgroundColor: '#eee',
 		width: 40,
 		height: 40,
 		marginRight: 10,
@@ -20,7 +23,15 @@ const styles = StyleSheet.create({
 	avatar: {
 		width: 40,
 		height: 40,
-		borderRadius: 5
+		borderRadius: 5,
+		position: 'absolute'
+	},
+	avatarInitials: {
+		margin: 2,
+		textAlign: 'center',
+		lineHeight: 36,
+		fontSize: 22,
+		color: '#ffffff'
 	},
 	texts: {
 		flex: 1
@@ -34,6 +45,8 @@ const styles = StyleSheet.create({
 	}
 });
 
+const colors = ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'];
+
 export default class Message extends React.PureComponent {
 	static propTypes = {
 		item: PropTypes.object.isRequired,
@@ -46,21 +59,32 @@ export default class Message extends React.PureComponent {
 			extraStyle.opacity = 0.3;
 		}
 
+		const msg = emojify(this.props.item.msg || 'asd', { output: 'unicode' });
+
+		let username = this.props.item.u.username;
+		const position = username.length % colors.length;
+
+		const color = colors[position];
+		username = username.replace(/[^A-Za-z0-9]/g, '.').replace(/\.+/g, '.').replace(/(^\.)|(\.$)/g, '');
+
+		const usernameParts = username.split('.');
+
+		let initials = usernameParts.length > 1 ? usernameParts[0][0] + usernameParts[usernameParts.length - 1][0] : username.replace(/[^A-Za-z0-9]/g, '').substr(0, 2);
+		initials = initials.toUpperCase();
+
 		return (
 			<View style={[styles.message, extraStyle]}>
-				<View style={styles.avatarContainer}>
+				<View style={[styles.avatarContainer, { backgroundColor: color }]}>
+					<Text style={styles.avatarInitials}>{initials}</Text>
 					<CachedImage style={styles.avatar} source={{ uri: `${ this.props.baseUrl }/avatar/${ this.props.item.u.username }` }} />
 				</View>
 				<View style={styles.texts}>
 					<Text onPress={this._onPress} style={styles.username}>
 						{this.props.item.u.username}
 					</Text>
-					<Text style={styles.msg}>
-						{this.props.item.msg}
-					</Text>
-					{/* <Markdown whitelist={['link', 'url']}>
-						{this.props.item.msg}
-					</Markdown> */}
+					<Markdown>
+						{msg}
+					</Markdown>
 				</View>
 			</View>
 		);

app/views/room.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text, View, FlatList, StyleSheet, Button } from 'react-native';
-// import Markdown from 'react-native-simple-markdown';
 import realm from '../lib/realm';
 import RocketChat from '../lib/rocketchat';
 
@@ -137,7 +136,6 @@ export default class RoomView extends React.Component {
 					extraData={this.state}
 					renderItem={this.renderItem}
 					keyExtractor={item => item._id}
-					ItemSeparatorComponent={this.renderSeparator}
 				/>
 				{this.renderFooter()}
 			</KeyboardView>

app/views/roomsList.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, View, FlatList, StyleSheet, TextInput } from 'react-native';
+import { Text, View, FlatList, StyleSheet, Platform, TextInput } from 'react-native';
 import Meteor from 'react-native-meteor';
 import realm from '../lib/realm';
 import RocketChat from '../lib/rocketchat';
@@ -59,9 +59,18 @@ export default class RoomsListView extends React.Component {
 		navigation: PropTypes.object.isRequired
 	}
 
-	static navigationOptions = () => ({
-		title: 'Rooms'
-	});
+	static navigationOptions = () => {
+		const server = RocketChat.currentServer ? RocketChat.currentServer.replace(/^https?:\/\//, '') : '';
+		const textAlign = Platform.OS === 'ios' ? 'center' : 'left';
+		const marginLeft = Platform.OS === 'ios' ? 0 : 20;
+		return {
+			headerTitle: <View style={{ height: 10, width: 200, top: -10, marginLeft }}>
+				<Text style={{ textAlign, fontSize: 16, fontWeight: '600' }}>Channels</Text>
+				<Text style={{ textAlign, fontSize: 10 }}>{server}</Text>
+			</View>,
+			title: 'Channels'
+		};
+	}
 
 	constructor(props) {
 		super(props);

package.json

@@ -13,7 +13,9 @@
   "dependencies": {
     "prop-types": "^15.5.10",
     "react": "16.0.0-alpha.12",
+    "react-emojione": "^3.1.10",
     "react-native": "0.46.1",
+    "react-native-easy-markdown": "git+https://github.com/lappalj4/react-native-easy-markdown.git",
     "react-native-fetch-blob": "^0.10.8",
     "react-native-img-cache": "^1.4.0",
     "react-native-meteor": "^1.1.0",