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

Ready-to-use Chat UI Components for React Native

import React, { useMemo } from "react";
import { Text, View } from "react-native";
import { useTheme } from "../../../theme";
import { deepMerge } from "../../helper/helperFunctions";
/**
 * CometChatBadge component renders the unread message count as a badge.
 *
 * This component returns a badge with custom styling that displays the number of unread messages.
 *
 * Props for the component.
 * The rendered badge element or null if count is 0.
 */
export const CometChatBadge = (props) => {
    const { style = {}, count = 0 } = props;
    const theme = useTheme();
    // Merge the theme's badge style with any custom styles provided.
    const badgeStyle = useMemo(() => {
        return deepMerge(theme.badgeStyle, style ?? {});
    }, [theme.badgeStyle, style]);
    // Convert count to text, formatting as "999+" if count is greater than 999.
    const countText = useMemo(() => {
        if (Number.isInteger(count)) {
            if (count === 0)
                return "";
            if (count > 999)
                return "999+";
            return count.toString();
        }
        return count.toString();
    }, [count]);
    // If count is zero or an empty string, do not render the badge.
    if (countText.length === 0)
        return null;
    return (<View style={[badgeStyle.containerStyle]}>
      <Text style={[badgeStyle.textStyle]}>{countText}</Text>
    </View>);
};
//# sourceMappingURL=CometChatBadge.js.map