Add default avatar with initials

app/components/Message.js

@@ -23,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
@@ -37,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,
@@ -51,9 +61,21 @@ export default class Message extends React.PureComponent {
 
 		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}>