@kietpt2003/react-native-core-ui/dist/Avatars/Avatar.js

React Native Core UI components by KietPT

import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { View, Text, StyleSheet, } from 'react-native';
import FastImage from 'react-native-fast-image';
import { colors } from '../themes';
import SvgIcon from '../SvgIcon/SvgIcon';
const getAltLetter = (alt, isFirstAlt = true) => {
    if (!alt)
        return undefined;
    const parts = alt
        .trim()
        .split(/\s+/)
        .filter(Boolean);
    if (!parts.length)
        return undefined;
    const word = isFirstAlt ? parts[0] : parts[parts.length - 1];
    return word.charAt(0).toUpperCase();
};
const Avatar = ({ source, size = 40, variant = 'circular', children, alt, style, imageStyle, textStyle, backgroundColor = colors.primary, iconColor = colors.white, isFirstAlt = true, }) => {
    const [error, setError] = React.useState(false);
    const altLetter = getAltLetter(alt, isFirstAlt);
    const borderRadius = variant === 'square'
        ? 0
        : variant === 'rounded'
            ? 8
            : size / 2;
    const showImage = source && !error;
    return (_jsx(View, { style: [
            styles.root,
            {
                width: size,
                height: size,
                borderRadius,
                backgroundColor: showImage ? undefined : backgroundColor,
            },
            style,
        ], children: showImage ? (_jsx(FastImage, { source: source, style: [
                StyleSheet.absoluteFill,
                { borderRadius },
                imageStyle,
            ], resizeMode: "cover", onError: () => setError(true) })) : children ? (children) : altLetter ? (_jsx(Text, { style: [styles.text, textStyle], children: altLetter })) : (_jsx(SvgIcon, { name: 'person', color: iconColor, size: size / 2 })) }));
};
Avatar.displayName = 'Avatar';
const styles = StyleSheet.create({
    root: {
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden',
    },
    text: {
        color: colors.white,
        fontSize: 18,
        fontWeight: '600',
    },
    fallback: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    fallbackText: {
        fontSize: 20,
    },
});
Avatar.displayName = 'Avatar';
export default Avatar;