> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.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">
  ```json theme={null}
  {
    "component": "CometChatMessageHeader",
    "package": "@cometchat/chat-uikit-react-native",
    "import": "import { CometChatMessageHeader } from \"@cometchat/chat-uikit-react-native\";",
    "description": "Displays user or group details in the chat toolbar with typing indicators and navigation controls.",
    "props": {
      "data": {
        "user": {
          "type": "CometChat.User",
          "note": "User object for one-on-one chat header"
        },
        "group": {
          "type": "CometChat.Group",
          "note": "Group object for group chat header"
        }
      },
      "callbacks": {
        "onBack": "() => void",
        "onError": "(error: CometChat.CometChatException) => void",
        "onNewChatButtonClick": "() => void",
        "onChatHistoryButtonClick": "() => void"
      },
      "visibility": {
        "showBackButton": { "type": "boolean", "default": true },
        "hideVoiceCallButton": { "type": "boolean", "default": false },
        "hideVideoCallButton": { "type": "boolean", "default": false },
        "usersStatusVisibility": { "type": "boolean", "default": true },
        "hideNewChatButton": { "type": "boolean", "default": true },
        "hideChatHistoryButton": { "type": "boolean", "default": true }
      },
      "viewSlots": {
        "ItemView": "({ user, group }) => JSX.Element",
        "LeadingView": "({ user, group }) => JSX.Element",
        "TitleView": "({ user, group }) => JSX.Element",
        "SubtitleView": "({ user, group }) => JSX.Element",
        "TrailingView": "({ user, group }) => JSX.Element",
        "AuxiliaryButtonView": "({ user, group }) => JSX.Element"
      },
      "options": {
        "options": "({ user, group }) => MenuItemInterface[]"
      }
    },
    "compositionExample": {
      "description": "Header component for message view",
      "components": [
        "CometChatMessageHeader",
        "CometChatMessageList",
        "CometChatMessageComposer"
      ],
      "flow": "Displays user/group info at top of chat, handles back navigation and call buttons"
    }
  }
  ```
</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-docs-agent-in-group-react-v6/H3wU8vJF-bF9IftS/images/6fc1ac0d-message_header-3ef4b07948db07a2ec0b2aca8bcdc221.png?fit=max&auto=format&n=H3wU8vJF-bF9IftS&q=85&s=3b65ac797da0e145dc84c615d1790f0b" 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-docs-agent-in-group-react-v6/FQNeiVxajtzWdB3i/images/b408416f-message_header_subtitle_view-be9b7d171337920165f41323606589e9.png?fit=max&auto=format&n=FQNeiVxajtzWdB3i&q=85&s=c9e0b4fc6509dd5992d533e9db03bb71" 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-docs-agent-in-group-react-v6/8U2-5SWHI94obVDJ/images/9e1f135d-message_header_menu-b41c7675805df674135444571760be25.png?fit=max&auto=format&n=8U2-5SWHI94obVDJ&q=85&s=09b8e1c5acf3eb1bf6c4687f4c51ac3e" width="1280" height="240" data-path="images/9e1f135d-message_header_menu-b41c7675805df674135444571760be25.png" />
</Frame>

```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} />;
}
```

***

## 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-docs-agent-in-group-react-v6/1dpm1fhJnD7O18Uv/images/c761803d-message_header_styling-ae4670a5a130374818f37e2144246748.png?fit=max&auto=format&n=1dpm1fhJnD7O18Uv&q=85&s=0afb3382abc6572795e2d0da0701c9cb" 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` |

### 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>