Render message time and username when there is alias

app/components/Message.js

@@ -4,6 +4,8 @@ import { View, Text, StyleSheet } from 'react-native';
 import { CachedImage } from 'react-native-img-cache';
 import { emojify } from 'react-emojione';
 import Markdown from 'react-native-easy-markdown';
+import moment from 'moment';
+
 import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
 
 const styles = StyleSheet.create({
@@ -41,35 +43,59 @@ const styles = StyleSheet.create({
 		flex: 1
 	},
 	username: {
-		fontWeight: 'bold',
+		fontWeight: 'bold'
-		marginBottom: 5
+	},
+	usernameView: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		marginBottom: 2
+	},
+	alias: {
+		fontSize: 10,
+		color: '#888',
+		paddingLeft: 5
+	},
+	time: {
+		fontSize: 10,
+		color: '#888',
+		paddingLeft: 5
 	}
 });
 
 export default class Message extends React.PureComponent {
 	static propTypes = {
 		item: PropTypes.object.isRequired,
-		baseUrl: PropTypes.string.isRequired
+		baseUrl: PropTypes.string.isRequired,
+		Message_TimeFormat: PropTypes.string.isRequired
 	}
 
 	render() {
+		const { item } = this.props;
+
 		const extraStyle = {};
-		if (this.props.item.temp) {
+		if (item.temp) {
 			extraStyle.opacity = 0.3;
 		}
 
-		const msg = emojify(this.props.item.msg, { output: 'unicode' });
+		const msg = emojify(item.msg, { output: 'unicode' });
 
-		const username = this.props.item.alias || this.props.item.u.username;
+		const username = item.alias || item.u.username;
 
 		let { initials, color } = avatarInitialsAndColor(username);
 
-		const avatar = this.props.item.avatar || `${ this.props.baseUrl }/avatar/${ this.props.item.u.username }`;
+		const avatar = item.avatar || `${ this.props.baseUrl }/avatar/${ item.u.username }`;
-		if (this.props.item.avatar) {
+		if (item.avatar) {
 			initials = '';
 			color = 'transparent';
 		}
 
+		let aliasUsername;
+		if (item.alias) {
+			aliasUsername = <Text style={styles.alias}>@{item.u.username}</Text>;
+		}
+
+		const time = moment(item.ts).format(this.props.Message_TimeFormat);
+
 		return (
 			<View style={[styles.message, extraStyle]}>
 				<View style={[styles.avatarContainer, { backgroundColor: color }]}>
@@ -77,9 +103,12 @@ export default class Message extends React.PureComponent {
 					<CachedImage style={styles.avatar} source={{ uri: avatar }} />
 				</View>
 				<View style={styles.texts}>
-					<Text onPress={this._onPress} style={styles.username}>
+					<View style={styles.usernameView}>
-						{username}
+						<Text onPress={this._onPress} style={styles.username}>
-					</Text>
+							{username}
+						</Text>
+						{aliasUsername}<Text style={styles.time}>{time}</Text>
+					</View>
 					<Markdown>
 						{msg}
 					</Markdown>

app/views/room.js

@@ -45,7 +45,8 @@ const styles = StyleSheet.create({
 
 @connect(state => ({
 	server: state.server,
-	Site_Url: state.settings.Site_Url
+	Site_Url: state.settings.Site_Url,
+	Message_TimeFormat: state.settings.Message_TimeFormat
 }), dispatch => ({
 	actions: bindActionCreators(actions, dispatch)
 }))
@@ -56,7 +57,8 @@ export default class RoomView extends React.Component {
 		sid: PropTypes.string,
 		name: PropTypes.string,
 		server: PropTypes.string,
-		Site_Url: PropTypes.string
+		Site_Url: PropTypes.string,
+		Message_TimeFormat: PropTypes.string
 	}
 
 	constructor(props) {
@@ -153,6 +155,7 @@ export default class RoomView extends React.Component {
 			id={item._id}
 			item={item}
 			baseUrl={this.props.Site_Url}
+			Message_TimeFormat={this.props.Message_TimeFormat}
 		/>
 	);