@cometchat/chat-uikit-react-native/lib/CometChatMessageList/CometChatMessageList.d.ts

Ready-to-use Chat UI Components for React Native

import { CometChat } from "@cometchat/chat-sdk-react-native";
import React, { JSX } from "react";
import { CometChatMentionsFormatter, CometChatTextFormatter, CometChatUrlsFormatter } from "../shared";
import { MessageListAlignmentType } from "../shared/base/Types";
import { CometChatMessageTemplate } from "../shared/modals/CometChatMessageTemplate";
import { CometChatTheme } from "../theme/type";
import { DeepPartial } from "../shared/helper/types";
/**
 * Uses Inverted Flat List
 * Array needs to be reversed meaning the latest message will be at array[0]
 * New message will be appended to the beginning of the array
 * ScrollToBottom -> scrollToOffset({offset: 0}) (top of the list is visual bottom, remember that latest message is at array[0])
 * layoutHeight is the viewport or visible portion of the list
 * Intially when the list is loaded, offset 0 is the bottom most item of the visible area
 */
/**
 * Properties for rendering the CometChat message list component.
 */
export interface CometChatMessageListProps {
    /**
     * ID of the parent message when rendering threaded messages.
     */
    parentMessageId?: string;
    /**
     * The user object associated with the message list.
     */
    user?: CometChat.User;
    /**
     * The group object associated with the message list.
     */
    group?: CometChat.Group;
    /**
     * A component to display when there are no messages.
     */
    EmptyView?: () => JSX.Element;
    /**
     * A component to display when an error occurs.
     */
    ErrorView?: () => JSX.Element;
    /**
     * Flag to hide the error view.
     */
    hideError?: boolean;
    /**
     * A component to display while messages are loading.
     */
    LoadingView?: () => JSX.Element;
    /**
     * Flag to hide read receipts.
     */
    receiptsVisibility?: boolean;
    /**
     * Flag to disable sound for incoming messages.
     */
    disableSoundForMessages?: boolean;
    /**
     * Custom sound URL for messages.
     */
    customSoundForMessages?: string;
    /**
     * Alignment type for the message list.
     */
    alignment?: MessageListAlignmentType;
    /**
     * Flag to show or hide the user's avatar.
     */
    avatarVisibility?: boolean;
    /**
     * Function that returns a custom string representation for a message's date.
     *
     * @param message - The base message object.
     * @returns A string representing the custom date.
     */
    datePattern?: (message: CometChat.BaseMessage) => string;
    /**
     * Function that returns a custom date separator string based on a timestamp.
     *
     * @param date - The timestamp (in milliseconds).
     * @returns A string representing the date separator.
     */
    dateSeparatorPattern?: (date: number) => string;
    /**
     * An array of message templates for rendering custom message types.
     */
    templates?: Array<CometChatMessageTemplate>;
    /**
     * An array of message templates for rendering custom message types.
     */
    addTemplates?: Array<CometChatMessageTemplate>;
    /**
     * Builder for constructing a request to fetch messages.
     */
    messageRequestBuilder?: CometChat.MessagesRequestBuilder;
    /**
     * If true, the message list will scroll to the bottom when new messages arrive.
     */
    scrollToBottomOnNewMessages?: boolean;
    /**
     * Callback invoked when the thread replies view is pressed.
     *
     * @param messageObject - The message object triggering the event.
     * @param messageBubbleView - A function that returns the message bubble view component.
     */
    onThreadRepliesPress?: (messageObject: CometChat.BaseMessage, messageBubbleView: () => JSX.Element | null) => void;
    /**
     * Custom header view component.
     *
     * @param props - The props object containing user, group, and identifiers.
     * @returns A JSX element representing the header.
     */
    HeaderView?: ({ user, group, id, }: {
        user?: CometChat.User;
        group?: CometChat.Group;
        id?: {
            uid?: string;
            guid?: string;
            parentMessageId?: string;
        };
    }) => JSX.Element;
    /**
     * Custom footer view component.
     *
     * @param props - The props object containing user, group, and identifiers.
     * @returns A JSX element representing the footer.
     */
    FooterView?: ({ user, group, id, }: {
        user?: CometChat.User;
        group?: CometChat.Group;
        id?: {
            uid?: string;
            guid?: string;
            parentMessageId?: string;
        };
    }) => JSX.Element;
    /**
     * Callback to handle errors.
     *
     * @param e - The error object from CometChat.
     */
    onError?: (e: CometChat.CometChatException) => void;
    /**
     * Callback invoked on back navigation.
     */
    onBack?: () => void;
    /**
     * Collection of text formatter classes to apply custom formatting.
     *
     * @type {Array<CometChatMentionsFormatter | CometChatUrlsFormatter | CometChatTextFormatter>}
     */
    textFormatters?: Array<CometChatMentionsFormatter | CometChatUrlsFormatter | CometChatTextFormatter>;
    /**
     * Callback invoked when a reaction is pressed.
     *
     * @param reaction - The reaction count object.
     * @param messageObject - The message object.
     */
    onReactionPress?: (reaction: CometChat.ReactionCount, messageObject: CometChat.BaseMessage) => void;
    /**
     * Callback invoked when a reaction is long pressed.
     *
     * @param reaction - The reaction count object.
     * @param messageObject - The message object.
     */
    onReactionLongPress?: (reaction: CometChat.ReactionCount, messageObject: CometChat.BaseMessage) => void;
    /**
     * Callback invoked when an item in the reaction list is pressed.
     *
     * @param messageReaction - The message reaction object.
     * @param messageObject - The message object.
     */
    onReactionListItemPress?: (messageReaction: CometChat.Reaction, messageObject: CometChat.BaseMessage) => void;
    /**
     * Custom styles for the message list component.
     */
    style?: DeepPartial<CometChatTheme["messageListStyles"]>;
    /**
     * Builder for constructing a request to fetch reactions.
     */
    reactionsRequestBuilder?: CometChat.ReactionsRequestBuilder;
    /**
     * Callback invoked when the add reaction button is pressed.
     */
    onAddReactionPress?: () => void;
    /**
     * List of quick reactions.
     *
     * @type {[string, string?, string?, string?, string?]}
     */
    quickReactionList?: [string, string?, string?, string?, string?];
    /**
     * Callback to handle errors.
     *
     * @param messageList - Array of CometChat.BaseMessage
     */
    onLoad?: (messageList: CometChat.BaseMessage[]) => void;
    /**
     * Callback to handle errors.
     *
     * @param messageList - Array of CometChat.BaseMessage
     */
    onEmpty?: () => void;
    /**
     * Flag to hide the reply in thread option
     */
    hideReplyInThreadOption?: boolean;
    /**
     * Flag to hide the share message option
     */
    hideShareMessageOption?: boolean;
    /**
     * Flag to hide the edit message option
     */
    hideEditMessageOption?: boolean;
    /**
     * Flag to hide the translate message option
     */
    hideTranslateMessageOption?: boolean;
    /**
     * Flag to hide the delete message option
     */
    hideDeleteMessageOption?: boolean;
    /**
     * Flag to hide the react to message option
     */
    hideReactionOption?: boolean;
    /**
     * Flag to hide the message privately option
     */
    hideMessagePrivatelyOption?: boolean;
    /**
     * Flag to hide the copy message option
     */
    hideCopyMessageOption?: boolean;
    /**
     * Flag to hide the message info option
     */
    hideMessageInfoOption?: boolean;
    /**
     * Flag to hide group action messages
     */
    hideGroupActionMessages?: boolean;
    /**
     * Flag to hide the timestamp on message bubbles
     */
    hideTimestamp?: boolean;
}
/**
 * Interface defining the actions for managing a CometChat message list.
 */
export interface CometChatMessageListActionsInterface {
    /**
     * Adds a new message to the message list.
     *
     * @param messageObject - The message object to be added.
     */
    addMessage: (messageObject: object) => void;
    /**
     * Updates an existing message in the message list.
     *
     * @param messageObject - The base message object containing updated data.
     * @param withMuid - A flag indicating whether to update the message with a MUID.
     */
    updateMessage: (messageObject: CometChat.BaseMessage, withMuid: boolean) => void;
    /**
     * Removes a message from the message list.
     *
     * @param messageObject - The base message object to be removed.
     */
    removeMessage: (messageObject: CometChat.BaseMessage) => void;
    /**
     * Permanently deletes a message from the message list.
     *
     * @param messageObject - The base message object to be deleted.
     */
    deleteMessage: (messageObject: CometChat.BaseMessage) => void;
    /**
     * Scrolls the message list to the bottom.
     */
    scrollToBottom: () => void;
    /**
     * Creates an action message.
     *
     * @remarks
     * TODO: Clarify the purpose and the appropriate usage of this method.
     */
    createActionMessage: () => void;
    /**
     * Updates the receipt information of a message.
     *
     * @param message - The base message object whose receipt is to be updated.
     */
    updateMessageReceipt: (message: CometChat.BaseMessage) => void;
}
export declare const CometChatMessageList: React.NamedExoticComponent<CometChatMessageListProps & React.RefAttributes<CometChatMessageListActionsInterface>>;