> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-skills-v5-temp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Threaded Messages Header

> Display the parent message and reply count for threaded conversations with CometChatThreadHeader component in React Native UI Kit.

<Accordion title="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](#styling)                               |
  | Prerequisites  | `CometChatUIKit.init()` completed and a user logged in                        |
</Accordion>

## Where It Fits

`CometChatThreadHeader` is a [Component](/ui-kit/react-native/components-overview#components) that displays the parent message and number of replies in a thread.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-skills-v5-temp/_bGdnInXULxS2RTM/images/ccfded5e-thread_header-02deacd1056bec41b2d4862bc713a4df.png?fit=max&auto=format&n=_bGdnInXULxS2RTM&q=85&s=8ef4b56e006018d636aff8e9a4eec6f3" width="2560" height="658" data-path="images/ccfded5e-thread_header-02deacd1056bec41b2d4862bc713a4df.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-skills-v5-temp/jozDiB-eKbcNRvxm/images/76d4d00d-thread_header_styling-447011f9a5da276b357ce91cafa04e94.png?fit=max&auto=format&n=jozDiB-eKbcNRvxm&q=85&s=5809092cccb4b3fd21417e1ec8d42f50" width="1280" height="329" data-path="images/76d4d00d-thread_header_styling-447011f9a5da276b357ce91cafa04e94.png" />
</Frame>

```tsx lines theme={null}
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.

```tsx lines theme={null}
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()}
    />
  );
}
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Threaded Messages" icon="comments" href="/ui-kit/react-native/guide-threaded-messages">
    Display the complete threaded conversation view
  </Card>

  <Card title="Message List" icon="message" href="/ui-kit/react-native/message-list">
    Display the list of messages in a conversation
  </Card>

  <Card title="Message Template" icon="file-code" href="/ui-kit/react-native/message-header">
    Customize message bubble templates
  </Card>

  <Card title="Component Styling" icon="paintbrush" href="/ui-kit/react-native/component-styling">
    Customize the appearance of UI Kit components
  </Card>
</CardGroup>