message: Add default avatar with initials
diff: @@ -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}>
  