react-native-gifted-chat/lib/GiftedAvatar.js

The most complete chat UI for React Native

import React, { useCallback, useMemo } from 'react';
import { Image, View, StyleSheet, } from 'react-native';
import { Text } from 'react-native-gesture-handler';
import { Color } from './Color';
import { TouchableOpacity } from './components/TouchableOpacity';
import stylesCommon from './styles';
const { carrot, emerald, peterRiver, wisteria, alizarin, turquoise, midnightBlue, } = Color;
const styles = StyleSheet.create({
    avatarStyle: {
        width: 40,
        height: 40,
        borderRadius: 20,
    },
    avatarTransparent: {
        backgroundColor: Color.backgroundTransparent,
    },
    textStyle: {
        color: Color.white,
        fontSize: 16,
        backgroundColor: Color.backgroundTransparent,
        fontWeight: '100',
    },
});
export function GiftedAvatar(props) {
    const { user, avatarStyle, textStyle, onPress, } = props;
    const avatarName = useMemo(() => {
        const userName = user?.name || '';
        const name = userName.toUpperCase().split(' ');
        if (name.length === 1)
            return `${name[0].charAt(0)}`;
        else if (name.length > 1)
            return `${name[0].charAt(0)}${name[1].charAt(0)}`;
        else
            return '';
    }, [user?.name]);
    const backgroundColor = useMemo(() => {
        let sumChars = 0;
        if (user?.name)
            for (let i = 0; i < user.name.length; i += 1)
                sumChars += user.name.charCodeAt(i);
        // inspired by https://github.com/wbinnssmith/react-user-avatar
        // colors from https://flatuicolors.com/
        const colors = [
            carrot,
            emerald,
            peterRiver,
            wisteria,
            alizarin,
            turquoise,
            midnightBlue,
        ];
        return colors[sumChars % colors.length];
    }, [user?.name]);
    const renderAvatar = useCallback(() => {
        switch (typeof user?.avatar) {
            case 'function':
                return user.avatar([stylesCommon.centerItems, styles.avatarStyle, avatarStyle]);
            case 'string':
                return (<Image source={{ uri: user.avatar }} style={[stylesCommon.centerItems, styles.avatarStyle, avatarStyle]}/>);
            case 'number':
                return (<Image source={user.avatar} style={[stylesCommon.centerItems, styles.avatarStyle, avatarStyle]}/>);
            default:
                return null;
        }
    }, [user, avatarStyle]);
    const renderInitials = useCallback(() => {
        return (<Text style={[styles.textStyle, textStyle]}>
        {avatarName}
      </Text>);
    }, [textStyle, avatarName]);
    const handleOnPress = useCallback(() => {
        const { onPress, ...rest } = props;
        onPress?.(rest);
    }, [props]);
    const handleOnLongPress = useCallback(() => {
        const { onLongPress, ...rest } = props;
        if (onLongPress)
            onLongPress(rest);
    }, [props]);
    const placeholderView = useMemo(() => (<View style={[
            stylesCommon.centerItems,
            styles.avatarStyle,
            styles.avatarTransparent,
            avatarStyle,
        ]} accessibilityRole='image'/>), [avatarStyle]);
    if (!user || (!user.name && !user.avatar))
        return placeholderView;
    if (user.avatar)
        return (<TouchableOpacity enabled={!!onPress} onPress={handleOnPress} onLongPress={handleOnLongPress} accessibilityRole='image'>
        {renderAvatar()}
      </TouchableOpacity>);
    return (<TouchableOpacity enabled={!!onPress} onPress={handleOnPress} onLongPress={handleOnLongPress} style={[
            stylesCommon.centerItems,
            styles.avatarStyle,
            { backgroundColor },
            avatarStyle,
        ]} accessibilityRole='image'>
      {renderInitials()}
    </TouchableOpacity>);
}
//# sourceMappingURL=GiftedAvatar.js.map