Profile badge component

ProfileBadge.js

import React, { PropTypes } from 'react';
import { View, Text, StyleSheet } from 'react-native';

const colors = [
  'salmon', 'tomato', 'gold', 'yellowgreen', 'deepskyblue',
  'mediumspringgreen', 'darkturquoise', 'lightcoral', 'teal',
  'maroon', 'mediumseagreen', 'peru', 'plum', 'cadetblue',
  'darkorchid', 'palevioletred', 'lightgreen', 'limegreen',
  'indigo', 'coral', 'chocolate', 'orangered', 'lightskyblue'
];

function pickRandomColor(array) {
  return array[Math.floor(Math.random() * array.length)];
}

function getInitials(name) {
  return name.replace(/[^A-Z]/g, '');
}

const ProfileBadge = ({ size = 160, name, color = pickRandomColor(colors) }) => (
  <View
    style={[styles.container, {
      height: size,
      width: size,
      borderRadius: size / 2,
      backgroundColor: color
    }]}
  >
    <Text
      style={[styles.initials, {
        fontSize: size / (getInitials(name).length < 2 ? 2 : getInitials(name).length)
      }]}
    >
      {getInitials(name)}
    </Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  initials: {
    color: 'white',
    fontWeight: '300'
  }
});

ProfileBadge.propTypes = {
  size: PropTypes.number,
  name: PropTypes.string.isRequired,
  color: PropTypes.string
};

export default ProfileBadge;