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

Ready-to-use Chat UI Components for React Native

import React, { memo, useState, useCallback, useMemo } from "react";
import { View } from "react-native";
/**
 * CometChatMessageBubble renders a customizable message bubble with optional header, content, footer,
 * and additional views such as leading, bottom, and thread views. The component adjusts its alignment
 * based on the provided `alignment` prop.
 *
 * @param {CometChatMessageBubbleInterface} props - Props for configuring the message bubble.
 * @returns {JSX.Element} The rendered message bubble.
 */
export const CometChatMessageBubble = memo(({ HeaderView, StatusInfoView, ReplyView, ContentView, FooterView, LeadingView, BottomView, ThreadView, alignment, id, style, }) => {
    const [_width, setWidth] = useState();
    /**
     * Handles layout changes by updating the component's width.
     *
     * @param {any} event - The layout event.
     */
    const handleLayout = useCallback((event) => {
        const { width: newWidth } = event.nativeEvent.layout;
        // Update width only if it has changed
        if (newWidth !== _width) {
            setWidth(newWidth);
        }
    }, [_width]);
    const alignItems = useMemo(() => {
        return alignment === "right" ? "flex-end" : alignment === "left" ? "flex-start" : alignment;
    }, [alignment]);
    return (<View style={{
            width: "100%",
            alignItems: alignItems
        }}>
        <View style={{ flexDirection: "row" }}>
          {LeadingView && LeadingView}
          <View style={{ marginStart: 4, maxWidth: "80%" }}>
            {HeaderView && HeaderView}
            <View style={{ ...style?.containerStyle }} onLayout={handleLayout}>
              {ReplyView && ReplyView}
              {ContentView && ContentView}
              {StatusInfoView && StatusInfoView}
              {BottomView && BottomView}
            </View>
            {_width && (<View style={{ maxWidth: _width }}>
                {FooterView
                ? typeof FooterView === "function"
                    ? FooterView({ maxContentWidth: _width }) // Call function if FooterView is a function
                    : FooterView // Render JSX element directly
                : null}
              </View>)}
            {ThreadView && ThreadView}
          </View>
        </View>
      </View>);
});
//# sourceMappingURL=CometChatMessageBubble.js.map