@cometchat/chat-uikit-react-native/lib/shared/views/CometChatAvatar/CometChatAvatar.js

Ready-to-use Chat UI Components for React Native

import React, { useCallback, useMemo } from "react";
import { Image, Text, View } from "react-native";
import { useCompTheme, useTheme } from "../../../theme/hook";
import { deepMerge } from "../../helper/helperFunctions";
/**
 * A functional component that renders a user's avatar.
 *
 * Props for the avatar.
 * The rendered avatar view.
 */
export const CometChatAvatar = (props) => {
    const theme = useTheme();
    const compTheme = useCompTheme();
    const { image, name, style = {} } = props;
    // Merges theme styles with component styles and custom styles.
    const avatarStyle = useMemo(() => {
        return deepMerge(theme.avatarStyle, compTheme.avatarStyle ?? {}, style);
    }, [theme.avatarStyle, style, compTheme.avatarStyle]);
    // Returns an Image view if a valid image is provided, otherwise a text view with initials.
    const getImageView = useCallback(() => {
        const imageSource = typeof image === "string" ? { uri: image } : image;
        if ((typeof imageSource === "object" &&
            "uri" in imageSource &&
            typeof imageSource.uri === "string") ||
            typeof imageSource === "number") {
            return <Image source={imageSource} style={[avatarStyle.imageStyle]}/>;
        }
        return <Text style={[avatarStyle.textStyle]}>{name?.substring(0, 2).toUpperCase()}</Text>;
    }, [image, name, avatarStyle.imageStyle, avatarStyle.textStyle]);
    return <View style={[avatarStyle.containerStyle]}>{getImageView()}</View>;
};
//# sourceMappingURL=CometChatAvatar.js.map