ProfileAvatar 2 letters

ProfileAvatar.js

import React from 'react';
import {Avatar} from 'react-native-elements';
import {useSourceUri, useThemedStyles} from '@staks/react-native-commons';
import createStyles from './styles';
import LinearGradient from 'react-native-linear-gradient';
import {Text, View} from 'react-native';

const getLetters = (text) => {
  const words = text.split(' ').filter((x) => x);
  return words.length === 1
    ? words.substring(0, 2)
    : `${words[0][0]}${words[1][0]}`;
};

const getUri = ({firstName, lastName, name, pictureUrl}) =>
  pictureUrl ||
  `https://ui-avatars.com/api/?background=007426&color=fff&bold=true&rounded=true&name=${
    name || `${firstName} ${lastName}`
  }`;

const ProfileAvatar = ({profile}) => {
  const {styles, theme} = useThemedStyles(createStyles);
  return (
    <View style={styles.container}>
      <LinearGradient {...theme.gradients.brand} style={styles.circle}>
        <Text style={styles.text}>{getLetters(profile.name)}</Text>
      </LinearGradient>
    </View>
  );
};

const ProfileAvatar2 = ({profile, size = 'xlarge'}) => {
  const source = useSourceUri(getUri(profile));
  return (
    <Avatar
      rounded
      source={source}
      size={size}
      avatarStyle={styles.avatar}
      containerStyle={styles.avatarContainer}
    />
  );
};

export default ProfileAvatar;

styles.js

const createStyles = (theme) => ({
  avatar: {
    borderWidth: 2,
    borderColor: theme.colors.white,
  },
  avatarContainer: {
    elevation: 5,
    shadowColor: theme.colors.black,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  container: {
    height: 80,
    width: 80,
  },
  circle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 50,
    elevation: 5,
    shadowColor: theme.colors.black,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  text: {
    fontSize: theme.typography.title.large.fontSize * 1.3,
    color: theme.colors.white,
    fontWeight: 'bold',
    textTransform: 'uppercase',
  },
});

export default createStyles;