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

Ready-to-use Chat UI Components for React Native

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatMentionsFormatter, CometChatTextFormatter, CometChatUrlsFormatter } from "../shared";
import { SelectionMode } from "../shared/base/Types";
import { ConversationStyle } from "./style";
import { DeepPartial } from "../shared/helper/types";
import { MenuItemInterface } from "../shared/views/CometChatTooltipMenu/CometChatTooltipMenu";
import { JSX } from "react";
/**
 * Interface defining props for the CometChatConversations component.
 */
export interface ConversationInterface {
    /**
     * Hide the submit (selection) button.
     */
    hideSubmitButton?: boolean;
    /**
     * Toggles message receipts (single/double‑tick) inside the subtitle. When
     * `false`, ticks are not rendered for the last outgoing message.
     */
    receiptsVisibility?: boolean;
    /**
     * Toggle sound playback for received messages.
     */
    disableSoundForMessages?: boolean;
    /**
     * Custom sound file path for received messages.
     */
    customSoundForMessages?: string;
    /**
     * Function to generate a custom date string for a conversation.
     * @param conversation - The conversation object.
     * @returns A string representing the date.
     */
    datePattern?: (conversation: CometChat.Conversation) => string;
    /**
     * Completely overrides the default rendering of each conversation item in the list.
     *
     * **Note:** When `ItemView` is provided, all internal rendering logic – including
     * LeadingView, TitleView, SubtitleView, TrailingView – is ignored.
     *
     * **Important:** If you use `ItemView`, you are also responsible for handling:
     *
     * - **`onItemPress`** — trigger conversation open or custom action.
     * - **`onItemLongPress`** — show tooltip or perform contextual action.
     * - **Selection mode** (`selectionMode: "single" | "multiple"`) — you must manage
     *   selection state, checkboxes, and visual feedback yourself.
     */
    ItemView?: (item: CometChat.Conversation) => JSX.Element;
    /**
     * Functional component for rendering options in the app bar.
     */
    AppBarOptions?: () => JSX.Element;
    /**
     * Hide the back button.
     */
    hideBackButton?: boolean;
    /**
     * Selection mode: "none" | "single" | "multiple".
     */
    selectionMode?: SelectionMode;
    /**
     * Callback when conversation selection is complete.
     */
    onSelection?: (conversations: Array<CometChat.Conversation>) => void;
    /**
     * Callback when submit selection button is pressed.
     */
    onSubmit?: (conversation: Array<CometChat.Conversation>) => void;
    /**
     * Custom view for the empty state.
     */
    EmptyView?: () => JSX.Element;
    /**
     * Custom view for the error state.
     */
    ErrorView?: () => JSX.Element;
    /**
     * Custom view for the loading state.
     */
    LoadingView?: () => JSX.Element;
    /**
     * Request builder to fetch conversations.
     */
    conversationsRequestBuilder?: CometChat.ConversationsRequestBuilder;
    /**
     * Custom leading view for a conversation item.
     */
    LeadingView?: (conversation: CometChat.Conversation) => JSX.Element;
    /**
     * Custom title view for a conversation item.
     */
    TitleView?: (conversation: CometChat.Conversation) => JSX.Element;
    /**
     * Custom subtitle view for a conversation item.
     */
    SubtitleView?: (item: CometChat.Conversation) => JSX.Element;
    /**
     * Custom tail view for a conversation item.
     */
    TrailingView?: (item: CometChat.Conversation) => JSX.Element;
    /**
     * Hide error view.
     */
    hideError?: boolean;
    /**
     * Callback for when a conversation item is pressed.
     */
    onItemPress?: (item: CometChat.Conversation) => void;
    /**
     * Callback for when a conversation item is long pressed.
     */
    onItemLongPress?: (item: CometChat.Conversation) => void;
    /**
     * Callback when an error occurs while fetching conversations.
     */
    onError?: (e: CometChat.CometChatException) => void;
    /**
     * Callback for when the back action is triggered.
     */
    onBack?: () => void;
    /**
     * Array of text formatter classes.
     */
    textFormatters?: Array<CometChatMentionsFormatter | CometChatUrlsFormatter | CometChatTextFormatter>;
    /**
     * Custom styles for the conversation view.
     */
    style?: DeepPartial<ConversationStyle>;
    /**
     * Hide the header of the conversation list.
     */
    hideHeader?: boolean;
    /**
     * Callback triggered when the fetched list is empty.
     */
    onEmpty?: () => void;
    /**
     * Callback triggered once the users have loaded and are not empty.
     */
    onLoad?: (list: CometChat.Conversation[]) => void;
    /**
     * A function to **replace** the default menu items entirely for a users.
     */
    options?: (conversation: CometChat.Conversation) => MenuItemInterface[];
    /**
     * A function to **append** more menu items on top of the default menu items for a users.
     */
    addOptions?: (conversation: CometChat.Conversation) => MenuItemInterface[];
    /**
     * Toggle user status visibilty.
     */
    usersStatusVisibility?: boolean;
    /**
     * Toggle group type visibilty.
     */
    groupTypeVisibility?: boolean;
    /**
     * Toggle delete conversation option  visibilty.
     */
    deleteConversationOptionVisibility?: boolean;
}
/**
 * CometChatConversations is a container component that wraps and formats the conversation list.
 * It handles events such as new messages, typing indicators, call events, and group events.
 */
export declare const CometChatConversations: (props: ConversationInterface) => JSX.Element;