Threaded Messages Header - CometChat Docs

AI Integration Quick Reference

Field	Value
Component	`CometChatThreadHeader`
Package	`@cometchat/chat-uikit-react-native`
Import	`import { CometChatThreadHeader } from "@cometchat/chat-uikit-react-native";`
Purpose	Displays the parent message and number of replies in a thread.
Data props	`parentMessage` · `template`
Primary output	None — presentational; renders the parent message and reply count
Styling	`style` prop — tokens and overrides
Prerequisites	`CometChatUIKit.init()` completed and a user logged in

Where It Fits

CometChatThreadHeader is a Component that displays the parent message and number of replies in a thread.

Minimal Render

import {
  CometChatMessageList,
  CometChatThreadHeader,
} from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { useState } from "react";

function ThreadHeaderDemo() {
  const [parentMessage, setParentMessage] = useState<CometChat.BaseMessage | null>(null);

  return (
    <>
      {!parentMessage && (
        <CometChatMessageList
          group={group}
          onThreadRepliesPress={(message: CometChat.BaseMessage) => {
            setParentMessage(message);
          }}
        />
      )}
      {parentMessage && <CometChatThreadHeader parentMessage={parentMessage} />}
    </>
  );
}

Styling

Using Style you can customize the look and feel of the component in your app. Pass a styling object as a prop to the CometChatThreadHeader component.

import { CometChatThreadHeader } from "@cometchat/chat-uikit-react-native";

function StylingDemo() {
  return (
    <CometChatThreadHeader
      parentMessage={parentMessage}
      style={{
        containerStyle: {
          backgroundColor: "#FEEDE1",
        },
        messageBubbleContainerStyle: {
          backgroundColor: "#FEEDE1",
        },
        replyCountBarStyle: {
          backgroundColor: "#FBA46B",
        },
        replyCountTextStyle: {
          color: "#FFFFFF",
        },
        outgoingMessageBubbleStyles: {
          containerStyle: {
            backgroundColor: "#F76808",
          },
        },
      }}
    />
  );
}

Visibility Props

Property	Description	Code
`replyCountVisibility`	Toggle reply count visibility	`replyCountVisibility?: boolean`
`replyCountBarVisibility`	Toggle reply count bar visibility	`replyCountBarVisibility?: boolean`
`receiptsVisibility`	Toggle receipts visibility	`receiptsVisibility?: boolean`
`avatarVisibility`	Toggle avatar visibility	`avatarVisibility?: boolean`
`alignment`	Alignment type for the parent message bubble	`alignment?: MessageBubbleAlignmentType`

Custom Template

The template property is used to configure and set a custom template for parent message bubble.

import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatThreadHeader,
  CometChatMessageTemplate,
  ChatConfigurator,
  MessageBubbleAlignmentType,
  useTheme,
} from "@cometchat/chat-uikit-react-native";
import { Text } from "react-native";

function CustomTemplateDemo() {
  const theme = useTheme();

  const getTemplate = () => {
    let templates: CometChatMessageTemplate[] =
      ChatConfigurator.getDataSource().getAllMessageTemplates(theme);
    const textTemplate = templates.find((template) => {
      if (template.type == "text") {
        template.ContentView = (
          messageObject: CometChat.BaseMessage,
          alignment: MessageBubbleAlignmentType
        ) => {
          const textMessage = messageObject as CometChat.TextMessage;
          return (
            <Text style={{ backgroundColor: "#fff5fd", padding: 10 }}>
              {textMessage.getText()}
            </Text>
          );
        };
        return template;
      }
    });
    return textTemplate;
  };

  return (
    <CometChatThreadHeader
      parentMessage={parentMessage}
      template={getTemplate()}
    />
  );
}

Thread Subscription

On React Native the subscription bell belongs to CometChatMessageHeader — the landed design places it in the thread screen’s top bar rather than in the reply-count row. A thread screen usually renders both: the message header as the top bar, and this component beneath it for the parent message and reply count.

import {
  CometChatMessageHeader,
  CometChatThreadHeader,
} from "@cometchat/chat-uikit-react-native";

// Top bar — `parentMessage` puts it in thread mode and renders the bell
<CometChatMessageHeader user={user} group={group} parentMessage={parentMessage} />

// Reply-count row — the parent message and its reply count
<CometChatThreadHeader parentMessage={parentMessage} />

This component’s own TrailingView replaces the trailing area of the reply-count bar. It is the escape hatch for putting your own control there — it does not host the subscription bell. See CometChatMessageHeader → Thread Subscription for the bell’s props, and the Thread Subscription guide for the full feature.

Next Steps