> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feat-rn-pin-save-thread-subscription-uik.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Header

> Display user or group details in the chat toolbar with CometChatMessageHeader component in React Native UI Kit, including typing indicators and navigation.

<Accordion title="AI Integration Quick Reference">
  | Field          | Value                                                                                                                                        |
  | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
  | Component      | `CometChatMessageHeader`                                                                                                                     |
  | Package        | `@cometchat/chat-uikit-react-native`                                                                                                         |
  | Import         | `import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";`                                                               |
  | Purpose        | Displays user or group details in the chat toolbar with typing indicators and navigation controls.                                           |
  | Data props     | `user` · `group`                                                                                                                             |
  | Primary output | `onBack()` — pops the chat screen                                                                                                            |
  | Other actions  | `onError` · `onNewChatButtonClick` · `onChatHistoryButtonClick` — [details](#actions-and-events)                                             |
  | View slots     | `ItemView` · `LeadingView` · `TitleView` · `SubtitleView` · `TrailingView` · `AuxiliaryButtonView` — [details](#custom-view-slots)           |
  | Styling        | `style` prop — [tokens and overrides](#styling)                                                                                              |
  | Prerequisites  | `CometChatUIKit.init()` completed and a user logged in                                                                                       |
  | Stitching      | Displays user/group info at top of chat, handles back navigation and call buttons (with `CometChatMessageList` · `CometChatMessageComposer`) |
</Accordion>

## Where It Fits

`CometChatMessageHeader` is a [Component](/ui-kit/react-native/components-overview#components) that showcases the [User](/sdk/react-native/user-management) or [Group](/sdk/react-native/retrieve-groups) details in the toolbar. It presents a typing indicator and a back navigation button for ease of use.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feat-rn-pin-save-thread-subscription-uik/rfTXq6UrPRqPhg6h/images/6fc1ac0d-message_header-3ef4b07948db07a2ec0b2aca8bcdc221.png?fit=max&auto=format&n=rfTXq6UrPRqPhg6h&q=85&s=6bd5091102a2dbf0e223268f3562f55f" width="1280" height="240" data-path="images/6fc1ac0d-message_header-3ef4b07948db07a2ec0b2aca8bcdc221.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";

function MessageHeaderDemo() {
  return <CometChatMessageHeader group={group} />;
}
```

***

## Actions and Events

### Callback Props

#### onError

Fires on internal errors (network failure, auth issue, SDK exception).

```tsx lines theme={null}
onError?: (error: CometChat.CometChatException) => void
```

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function MessageHeaderWithError() {
  return (
    <CometChatMessageHeader
      group={group}
      onError={(error: CometChat.CometChatException) => {
        console.error("MessageHeader error:", error);
      }}
    />
  );
}
```

#### onBack

Fires when the back button in the app bar is pressed. Requires `showBackButton={true}`.

```tsx lines theme={null}
onBack?: () => void
```

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";

function MessageHeaderWithBack() {
  return (
    <CometChatMessageHeader
      group={group}
      showBackButton={true}
      onBack={() => {
        console.log("Back pressed");
      }}
    />
  );
}
```

#### onNewChatButtonClick

Fires when the new chat button is pressed (only applies to AI Assistant users). Allows handling starting a new conversation with the AI assistant.

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";

function MessageHeaderWithNewChat() {
  return (
    <CometChatMessageHeader
      user={user}
      onNewChatButtonClick={() => {
        console.log("Starting new AI chat");
      }}
    />
  );
}
```

#### onChatHistoryButtonClick

Fires when the chat history button is pressed (only applies to AI Assistant users). Allows handling opening the AI assistant chat history.

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";

function MessageHeaderWithHistory() {
  return (
    <CometChatMessageHeader
      user={user}
      onChatHistoryButtonClick={() => {
        console.log("Opening AI chat history");
      }}
    />
  );
}
```

***

## Custom View Slots

Each slot replaces a section of the default UI. Slots that accept parameters receive the user or group object for customization.

| Slot                  | Signature                          | Replaces                           |
| --------------------- | ---------------------------------- | ---------------------------------- |
| `ItemView`            | `({ user, group }) => JSX.Element` | Entire header layout               |
| `LeadingView`         | `({ user, group }) => JSX.Element` | Avatar / left section              |
| `TitleView`           | `({ user, group }) => JSX.Element` | Name / title text                  |
| `SubtitleView`        | `({ user, group }) => JSX.Element` | Status / subtitle text             |
| `TrailingView`        | `({ user, group }) => JSX.Element` | Right section next to call buttons |
| `AuxiliaryButtonView` | `({ user, group }) => JSX.Element` | Replaces default call buttons      |

### TitleView

Custom view for the name / title text.

```tsx lines theme={null}
TitleView?: ({ user, group }) => JSX.Element
```

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { Text } from "react-native";

function TitleViewDemo() {
  const getTitleView = ({
    user,
    group,
  }: {
    user?: CometChat.User;
    group?: CometChat.Group;
  }) => {
    const name = user ? user.getName() : group?.getName();
    return (
      <Text style={{ fontWeight: 'bold', fontSize: 18 }}>
        {name}
      </Text>
    );
  };

  return <CometChatMessageHeader group={group} TitleView={getTitleView} />;
}
```

### AuxiliaryButtonView

Custom buttons that replace the default call buttons.

```tsx lines theme={null}
AuxiliaryButtonView?: ({ user, group }) => JSX.Element
```

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { TouchableOpacity, Text } from "react-native";

function AuxiliaryButtonDemo() {
  const getAuxiliaryView = ({
    user,
    group,
  }: {
    user?: CometChat.User;
    group?: CometChat.Group;
  }) => {
    return (
      <TouchableOpacity onPress={() => console.log("Custom action")}>
        <Text>Custom Button</Text>
      </TouchableOpacity>
    );
  };

  return (
    <CometChatMessageHeader
      group={group}
      AuxiliaryButtonView={getAuxiliaryView}
    />
  );
}
```

### ItemView

Custom view for the entire header layout.

```tsx lines theme={null}
ItemView?: ({ user, group }) => JSX.Element
```

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { View, Text } from "react-native";

function ItemViewDemo() {
  const getItemView = ({
    user,
    group,
  }: {
    user?: CometChat.User;
    group?: CometChat.Group;
  }) => {
    const name = user ? user.getName() : group?.getName();
    return (
      <View style={{ padding: 16 }}>
        <Text style={{ fontWeight: 'bold' }}>{name}</Text>
      </View>
    );
  };

  return <CometChatMessageHeader group={group} ItemView={getItemView} />;
}
```

### SubtitleView

Custom view for the subtitle / status text.

```tsx lines theme={null}
SubtitleView?: ({ user, group }) => JSX.Element
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feat-rn-pin-save-thread-subscription-uik/j-TIPDgA8TuVo5ya/images/b408416f-message_header_subtitle_view-be9b7d171337920165f41323606589e9.png?fit=max&auto=format&n=j-TIPDgA8TuVo5ya&q=85&s=6a0d957a4ae9de151b189d5be95fafd0" width="1280" height="240" data-path="images/b408416f-message_header_subtitle_view-be9b7d171337920165f41323606589e9.png" />
</Frame>

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { Text } from "react-native";

function SubtitleViewDemo() {
  const getSubtitleView = ({
    user,
    group,
  }: {
    user?: CometChat.User;
    group?: CometChat.Group;
  }) => {
    if (user) {
      return <Text style={{ color: '#727272' }}>Online</Text>;
    }
    return <Text style={{ color: '#727272' }}>{group?.getMembersCount()} members</Text>;
  };

  return <CometChatMessageHeader group={group} SubtitleView={getSubtitleView} />;
}
```

### LeadingView

Custom view for the avatar / left section.

```tsx lines theme={null}
LeadingView?: ({ user, group }) => JSX.Element
```

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { View, Text } from "react-native";

function LeadingViewDemo() {
  const getLeadingView = ({
    user,
    group,
  }: {
    user?: CometChat.User;
    group?: CometChat.Group;
  }) => {
    const name = user ? user.getName() : group?.getName();
    return (
      <View style={{ width: 40, height: 40, borderRadius: 20, backgroundColor: '#6852D6' }}>
        <Text style={{ color: 'white', textAlign: 'center', lineHeight: 40 }}>
          {name?.charAt(0)}
        </Text>
      </View>
    );
  };

  return <CometChatMessageHeader group={group} LeadingView={getLeadingView} />;
}
```

### TrailingView

Custom view for the right section next to call buttons.

```tsx lines theme={null}
TrailingView?: ({ user, group }) => JSX.Element
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feat-rn-pin-save-thread-subscription-uik/eF0QnmD9F_J6-Jjs/images/9e1f135d-message_header_menu-b41c7675805df674135444571760be25.png?fit=max&auto=format&n=eF0QnmD9F_J6-Jjs&q=85&s=f922c2ede42f6c86c4268f0a0a62549b" width="1280" height="240" data-path="images/9e1f135d-message_header_menu-b41c7675805df674135444571760be25.png" />
</Frame>

***

#### Options

A function that returns custom menu items to **replace** the default menu items entirely. This allows you to define your own set of options for the header menu.

Use Cases:

* Create a custom options menu with specific actions for your use case.
* Add info and search options with custom navigation.
* Show different menu options based on user type or permissions.
* Hide menu options for specific user types (like agentic users).

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import { useMemo } from "react";
    //code
    const options = useMemo(() => {
      return ({ user, group }: { user?: CometChat.User; group?: CometChat.Group }) => {
        // For agentic users, don't show any options menu
        if (agentic) {
          return [];
        }
        
        const menuOptions = [];

        // Add info option first
        if (group && loggedInUser) {
          menuOptions.push({
            text: 'Group Info',
            onPress: () => {
              navigation.navigate('GroupInfo', { group });
            },
            icon: <Icon name="info" width={20} height={20} color={theme.color.iconSecondary} />,
          });
        } else if (user && !user.getBlockedByMe()) {
          menuOptions.push({
            text: 'User Info',
            onPress: () => {
              navigation.navigate('UserInfo', { user });
            },
            icon: <Icon name="info" width={20} height={20} color={theme.color.iconSecondary} />,
          });
        }

        // Then add search option
        menuOptions.push({
          text: 'Search',
          onPress: () => {
            if (group) {
              navigation.navigate('SearchMessages', { group });
            } else if (user) {
              navigation.navigate('SearchMessages', { user });
            }
          },
          icon: <Icon name="search" width={20} height={20} color={theme.color.iconSecondary} />,
        });

        return menuOptions;
      };
    }, [navigation, group, user, theme, agentic, loggedInUser]);

    return (
      <CometChatMessageHeader
        group={group}
        options={options}
      />
    );
    ```
  </Tab>
</Tabs>

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { TouchableOpacity, Text } from "react-native";

function TrailingViewDemo() {
  const getTrailingView = ({
    user,
    group,
  }: {
    user?: CometChat.User;
    group?: CometChat.Group;
  }) => {
    return (
      <TouchableOpacity onPress={() => console.log("Menu pressed")}>
        <Text>⋮</Text>
      </TouchableOpacity>
    );
  };

  return <CometChatMessageHeader group={group} TrailingView={getTrailingView} />;
}
```

***

## Pinned Messages

`CometChatMessageHeader` can show a button that opens a conversation's pinned messages. It is **off by default** — set `showPinnedMessagesButton` to render it, and `onPinnedMessagesPress` to handle the tap.

```tsx lines theme={null}
showPinnedMessagesButton?: boolean   // default: false
onPinnedMessagesPress?: () => void
```

The component does not navigate for you: it raises the tap and you decide where to go, so the button works with any navigation setup.

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";
import { useNavigation } from "@react-navigation/native";

function ChatHeader({ user, group }) {
  const navigation = useNavigation<any>();

  return (
    <CometChatMessageHeader
      user={user}
      group={group}
      showPinnedMessagesButton={true}
      onPinnedMessagesPress={() =>
        navigation.navigate("PinnedMessages", { user, group })
      }
    />
  );
}
```

Render [CometChatPinnedMessages](/ui-kit/react-native/pinned-messages) on that screen, scoped to the same `user`/`group`. See the [Pin & Save Messages guide](/ui-kit/react-native/guide-pin-and-save-messages) for the full flow.

<Note>
  Pin must be enabled for your app in the CometChat Dashboard. The UI Kit reads that setting at login, so the button opens a panel that stays empty if the feature is off for your app.
</Note>

## Thread Subscription

When the header is given a `parentMessage`, it switches to **thread mode** and renders a bell that subscribes the user to that thread or unsubscribes them. Without `parentMessage` there is no thread to follow, so no bell renders — a conversation header can never accidentally show a thread control.

```tsx lines theme={null}
parentMessage?: CometChat.BaseMessage        // set this to enter thread mode
threadSubscriptionVisibility?: boolean       // default: true
onThreadSubscriptionChange?: (subscribed: boolean) => void
```

```tsx lines theme={null}
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";
import { Text } from "react-native";

function ThreadHeader({
  parentMessage,
  user,
  group,
  onBack,
}: {
  parentMessage: CometChat.BaseMessage;
  user?: CometChat.User;
  group?: CometChat.Group;
  onBack: () => void;
}) {
  return (
    <CometChatMessageHeader
      user={user}
      group={group}
      // Thread mode — this is what renders the bell.
      parentMessage={parentMessage}
      showBackButton={true}
      onBack={onBack}
      onThreadSubscriptionChange={(subscribed) =>
        console.log(subscribed ? "Following this thread" : "No longer following")
      }
      // A thread bar names the screen, not the person, and calls belong to a
      // conversation rather than a thread.
      hideVoiceCallButton={true}
      hideVideoCallButton={true}
      LeadingView={() => <></>}
      TitleView={() => <Text>Thread</Text>}
    />
  );
}
```

The bell manages itself: it reads the current state, flips optimistically on tap, reverts if the server rejects the change, and stays in step with a toggle made from the message action sheet.

To hide it on a particular screen, pass `threadSubscriptionVisibility={false}`:

```tsx lines theme={null}
<CometChatMessageHeader parentMessage={parentMessage} threadSubscriptionVisibility={false} />
```

The same subscribe/unsubscribe action is also offered as a message option on [CometChatMessageList](/ui-kit/react-native/message-list), hidden independently with `hideThreadSubscriptionOption` — an integrator may want one surface and not the other. See the [Thread Subscription guide](/ui-kit/react-native/guide-threaded-messages#thread-subscription).

## 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 `CometChatMessageHeader` component.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feat-rn-pin-save-thread-subscription-uik/YpOkBqMeseb2uWtJ/images/c761803d-message_header_styling-ae4670a5a130374818f37e2144246748.png?fit=max&auto=format&n=YpOkBqMeseb2uWtJ&q=85&s=1e534d34b8f5f44dba31e6b67fee77c6" width="1280" height="240" data-path="images/c761803d-message_header_styling-ae4670a5a130374818f37e2144246748.png" />
</Frame>

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";

function StylingDemo() {
  return (
    <CometChatMessageHeader
      group={group}
      style={{
        avatarStyle: {
          containerStyle: {
            borderRadius: 8,
            backgroundColor: "#FBA46B",
          },
          imageStyle: {
            borderRadius: 8,
          },
        },
        titleTextStyle: {
          color: "#F76808",
        },
        callButtonStyle: {
          audioCallButtonIconStyle: {
            tintColor: "#F76808",
          },
          videoCallButtonIconStyle: {
            tintColor: "#F76808",
          },
        },
      }}
    />
  );
}
```

### Visibility Props

| Property                       | Description                                                                 | Code                                     |
| ------------------------------ | --------------------------------------------------------------------------- | ---------------------------------------- |
| `showBackButton`               | Toggle visibility of the back button in the app bar                         | `showBackButton?: boolean`               |
| `hideVoiceCallButton`          | Toggle visibility of the voice call button                                  | `hideVoiceCallButton?: boolean`          |
| `hideVideoCallButton`          | Toggle visibility of the video call button                                  | `hideVideoCallButton?: boolean`          |
| `usersStatusVisibility`        | Toggle user status visibility                                               | `usersStatusVisibility?: boolean`        |
| `hideNewChatButton`            | Toggle visibility of new chat button for AI Assistants                      | `hideNewChatButton?: boolean`            |
| `hideChatHistoryButton`        | Toggle visibility of chat history button for AI Assistants                  | `hideChatHistoryButton?: boolean`        |
| `showPinnedMessagesButton`     | Toggle visibility of the pinned-messages button. Off by default             | `showPinnedMessagesButton?: boolean`     |
| `threadSubscriptionVisibility` | Toggle visibility of the thread subscription bell. Requires `parentMessage` | `threadSubscriptionVisibility?: boolean` |

### options

Custom menu items for the header options menu.

```tsx lines theme={null}
options?: ({ user, group }) => MenuItemInterface[]
```

```tsx lines theme={null}
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function OptionsDemo() {
  const getOptions = ({
    user,
    group,
  }: {
    user?: CometChat.User;
    group?: CometChat.Group;
  }) => {
    return [
      {
        text: "View Profile",
        onPress: () => { /* view profile logic */ },
      },
      {
        text: "Block User",
        onPress: () => { /* block logic */ },
      },
    ];
  };

  return <CometChatMessageHeader user={user} options={getOptions} />;
}
```

***

## Next Steps

<CardGroup cols={2}>
  <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 Composer" icon="pen" href="/ui-kit/react-native/message-composer">
    Compose and send messages in a chat
  </Card>

  <Card title="Messages" icon="comments" href="/ui-kit/react-native/message-list">
    Complete messaging interface with header, list, and composer
  </Card>

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