Skip to main content
CometChatMessageHeader renders the header of a chat conversation showing user/group avatar, name, online/offline status, typing indicators, back navigation, and action buttons (call buttons, menu).

Where It Fits

CometChatMessageHeader is a toolbar component. It sits at the top of a chat screen above CometChatMessageList and CometChatMessageComposer. It automatically shows typing indicators and user presence in real-time.

Quick Start

For group chats, pass a Group object instead:
Prerequisites: CometChat SDK initialized with CometChatUIKit.init(), a user logged in, and a valid User or Group object.

Actions and Events

Callback Methods

onBack

Fires when the user presses the back button.

onError

Fires on internal errors.

SDK Events (Real-Time, Automatic)

The component listens to these SDK events internally. No manual setup needed.

Functionality


Custom View Slots

Subtitle View

Replace the default subtitle (online status / typing indicator / member count).

Leading View

Replace the avatar / left section.

Title View

Replace the name / title text.

Trailing View

Replace the right section (call buttons, menu, etc.).

Common Patterns

Header with info button for groups

Hide back button (embedded in tab layout)


Advanced

BLoC Access

Provide a custom MessageHeaderBloc:

Public BLoC Methods


Style

Style Properties

See Component Styling for the full reference.

Next Steps

Message List

Display messages in a conversation

Message Composer

Compose and send messages

Call Buttons

Add voice and video call buttons

Component Styling

Detailed styling reference