> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.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">
  ```json theme={null}
  {
    "component": "CometChatThreadHeader",
    "package": "@cometchat/chat-uikit-react-native",
    "import": "import { CometChatThreadHeader } from \"@cometchat/chat-uikit-react-native\";",
    "description": "Displays the parent message and number of replies in a thread.",
    "props": {
      "data": {
        "parentMessage": {
          "type": "CometChat.BaseMessage",
          "note": "The parent message for which replies are shown"
        },
        "template": {
          "type": "CometChatMessageTemplate",
          "note": "Custom template for the parent message bubble"
        }
      },
      "visibility": {
        "replyCountVisibility": { "type": "boolean", "default": true },
        "replyCountBarVisibility": { "type": "boolean", "default": true },
        "receiptsVisibility": { "type": "boolean", "default": true },
        "avatarVisibility": { "type": "boolean", "default": true }
      },
      "formatting": {
        "alignment": { "type": "MessageBubbleAlignmentType", "default": "left" },
        "datePattern": "(message: CometChat.BaseMessage) => string",
        "textFormatters": "Array<CometChatTextFormatter>"
      }
    }
  }
  ```
</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-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/ccfded5e-thread_header-02deacd1056bec41b2d4862bc713a4df.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=999d84cce2aa3d3fff5c48e41d1d657e" 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-rn-guide-message-privately/3EDM5JvI4mnAULac/images/76d4d00d-thread_header_styling-447011f9a5da276b357ce91cafa04e94.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=864c682fec9df0d320c485627f9e19ba" 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>