@cometchat/chat-uikit-react-native/lib/calls/CometChatCallBubble/CometChatCallBubble.js

Ready-to-use Chat UI Components for React Native

import React, { useMemo } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useTheme } from "../../theme";
import { localize } from "../../shared";
import { deepMerge } from "../../shared/helper/helperFunctions";
/**
 * Component representing a meet call bubble.
 *
 * @param {CometChatMeetCallBubbleInterface} props - Component properties.
 * @returns {JSX.Element} The rendered component.
 */
export const CometChatMeetCallBubble = (props) => {
    const { icon, titleText, subTitleText, buttonText, onClick, style } = props;
    return (<View style={style?.containerStyle}>
      {/* Row container for icon and texts */}
      <View style={styles.row}>
        <View style={style?.iconContainerStyle}>{icon}</View>
        <View style={styles.textContainer}>
          <Text style={style?.titleStyle}>{titleText}</Text>
          <Text style={style?.subtitleStyle}>{subTitleText}</Text>
        </View>
      </View>
      {/* Divider */}
      <View style={style?.dividerStyle}/>
      {/* Action button */}
      <TouchableOpacity style={style?.buttonStyle} onPress={onClick}>
        <Text style={style?.buttonTextStyle}>{buttonText}</Text>
      </TouchableOpacity>
    </View>);
};
/**
 * Component representing a call action bubble.
 *
 * This component displays a call action with an icon and text.
 * It differentiates styles if the call is missed.
 *
 * @param {CometChatUserCallBubbleInterface} props - Component properties.
 * @returns {JSX.Element} The rendered component.
 */
export const CometChatCallActionBubble = (props) => {
    const { titleText, icon, style } = props;
    const theme = useTheme();
    // Merge default theme styles with optional style overrides
    const callActionBubbleStyles = useMemo(() => {
        return deepMerge(theme.messageListStyles.callActionBubbleStyles, style ?? {});
    }, [theme.messageListStyles.callActionBubbleStyles, style]);
    return (<View style={{ justifyContent: "center", alignItems: "center" }}>
      <View style={titleText === localize("MISSED_CALL")
            ? callActionBubbleStyles.missedCallContainerStyle
            : callActionBubbleStyles.containerStyle}>
        {icon}
        <Text style={titleText === localize("MISSED_CALL")
            ? callActionBubbleStyles.missedCallTextStyle
            : callActionBubbleStyles.textStyle}>
          {titleText}
        </Text>
      </View>
    </View>);
};
const styles = StyleSheet.create({
    row: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 16,
        gap: 8,
    },
    textContainer: {
        gap: 4,
    },
});
//# sourceMappingURL=CometChatCallBubble.js.map