UserAvatar.jsx

import React from 'react';
import { View, Text, Image } from 'react-native';
import emojiRegex from 'emoji-regex';

const avatarColors = [
  'red',
  'blue',
  'green'
];

function getAvatarBackgroundColor(name) {
  const colorIndex = name.length % avatarColors.length; 
  return avatarColors[colorIndex];
}

function getInitials(name) {
  if (!name) return 'John Doe';
  const emojiMatch = emojiRegex().exec(name);
  let avatarName;
  if (emojiMatch) {
    avatarName = emojiMatch[0];
  } else {
    const [ first, second ] = name.split(' ');
    avatarName = `${first[0]} ${second ? second[0] : ''}`.toUpperCase();
  }
  return avatarName;
}

export default ({
  src, // url to image
  size=64,
  name
}) => {
  const initials = getInitials(name);
  const bgColor = getAvatarBackgroundColor(name);
  const style = {
    width: size,
    height: size,
    borderRadius: size / 2,
    backgroundColor: src ? 'transparent' : bgColor,
    justifyContent: 'center',
    alignItems: 'center'
  };
  const textStyle = {
    fontSize: 24,
    color: 'white'
  };

  return (
    <View style={style}>
      {
        src ? (
          <Image
            style={style}
            source={{uri: src}}
          />
        ) : (
          <Title
            style={textStyle}
            adjustsFontSizeToFit>{initials}</Title>
        )
      }
    </View>
  )
};