# MessageHeader

Renders the message header area inside [`MessageList`](/chat/docs/sdk/react-native/ui-components/message-list/). It conditionally displays pinned, reminder, saved-for-later, and sent-to-channel headers.

## Migration Notes

In v9, `MessageHeader` primarily reads from `useMessageContext()` and `useMessagesContext()`. Custom implementations should not assume the old explicit prop bag from the previous message row component is still passed through.

If you only want to change one header variant, prefer overriding the dedicated components instead of rewriting `MessageHeader`:

- `MessagePinnedHeader`
- `MessageReminderHeader`
- `MessageSavedForLaterHeader`
- `SentToChannelHeader`

## Best Practices

- Keep header overrides compact to avoid row height jumps.
- Let built-in visibility rules drive when headers appear.
- Reuse theme styles to keep header variants consistent.
- Avoid adding heavy async work in header components.
- Prefer component overrides over rewriting `MessageHeader`.

## Props

| Prop      | Description                                                                                                                             | Type           |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `message` | Message object. `message` is the only public prop on `MessageHeader`. Other values such as `alignment` come from `useMessageContext()`. | `Message` type |

## UI Component Props

### `MessagePinnedHeader`

Pinned message header component.

| Type          | Default                                                                                                                                                                    |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessagePinnedHeader`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx) |

### `MessageReminderHeader`

Reminder header component.

| Type          | Default                                                                                                                                                                        |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | [`MessageReminderHeader`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageItemView/Headers/MessageReminderHeader.tsx) |

### `MessageSavedForLaterHeader`

Saved-for-later header component.

| Type          | Default                                                                                                                                                                                  |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageSavedForLaterHeader`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx) |

### `SentToChannelHeader`

Sent-to-channel header component.

| Type          | Default                                                                                                                                                                    |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`SentToChannelHeader`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx) |


---

This page was last updated at 2026-04-17T17:33:45.707Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/message-header/](https://getstream.io/chat/docs/sdk/react-native/ui-components/message-header/).