Avatar.js

import React from 'react';
import { TouchableOpacity, TouchableNativeFeedback, Platform, View, Text, Image, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import Feather from 'react-native-vector-icons/Feather';
import { useThemeContext } from '../util/ThemeProvider';

const getContainerStyle = ({ theme, source, square, rounded, size }) => {
  const avatarStyle = [styles.container];
  avatarStyle.push({
    backgroundColor: '#f4f4f4',
    padding: theme.size[size],
    width: theme.avatarSize[size],
    height: theme.avatarSize[size],
    borderRadius: theme.avatarSize[size] * 2,
  });
  if (source) {
    avatarStyle.push({
      padding: 0,
    });
  }
  if (square) {
    avatarStyle.push({
      borderRadius: 0,
    });
  }
  if (rounded) {
    avatarStyle.push({
      borderRadius: 10,
    });
  }
  return avatarStyle;
};

const getEditIconStyle = ({ theme, size }) => {
  const iconStyle = [styles.editView, {
    width: theme.avatarSize[size] / 4,
    height: theme.avatarSize[size] / 4,
    borderRadius: theme.avatarSize[size] / 8,
    backgroundColor: theme.brandColor.disabled,
  }];
  return iconStyle;
};

const getTitleStyle = ({ theme, size }) => {
  return {
    fontWeight: '600',
    fontSize: theme.avatarSize[size] / 4,
    color: theme.textColor.disabled,
  };
};

const Avatar = (props) => {
  const theme = useThemeContext();
  const TouchableElement =
    Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
  return (
    <View style={StyleSheet.flatten([styles.propView, { width: theme.avatarSize[props.size] }])}>
      <TouchableElement disabled={!props.editable} {...props}>
        <View style={StyleSheet.flatten([getContainerStyle({ ...props, theme }), props.style])}>
          {props.source ?
            <Image
              source={props.source}
              resizeMode="cover"
              style={styles.image}
            /> :
            <Text numberOfLines={1} style={StyleSheet.flatten([getTitleStyle({ ...props, theme }), props.textStyle])}>
              {props.title}
            </Text>
          }
        </View>
      </TouchableElement>
      {props.editable &&
        <View style={StyleSheet.flatten([getEditIconStyle({ ...props, theme }), props.editIconStyle])}>
          <Feather
            name="edit-2"
            size={theme.avatarSize[props.size] / 8}
            color={props.editIconColor || theme.textColor.disabled}
          />
        </View>}
    </View>
  );
};

Avatar.propTypes = {
  style: PropTypes.object,
  textStyle: PropTypes.object,
  title: PropTypes.string,
  source: PropTypes.object,
  editable: PropTypes.bool,
  onPress: PropTypes.func,
  size: PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge']),
  square: PropTypes.bool,
  rounded: PropTypes.bool,
  editIconStyle: PropTypes.object,
  editIconColor: PropTypes.string,
};

Avatar.defaultProps = {
  title: 'MD',
  editable: false,
  size: 'medium',
};

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 1,
  },
  propView: {
    backgroundColor: 'transparent',
  },
  image: {
    width: '100%',
    height: '100%',
  },
  editView: {
    position: 'absolute',
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 1,
  },
});

export default Avatar;