# MessagePinnedHeader

Renders the pinned message label inside [`MessageList`](/chat/docs/sdk/react-native/v8/ui-components/message-list/).

## Best Practices

- Keep the pinned label subtle to avoid distracting from content.
- Show the label only when a message is actually pinned.
- Use consistent styling with other message metadata.
- Avoid heavy logic in the header render.
- Override via `Channel` prop for centralized customization.

## Basic Usage

Customize `MessagePinnedHeader` and pass it via the [`MessagePinnedHeader`](/chat/docs/sdk/react-native/v8/core-components/channel#MessagePinnedHeader/) prop on `Channel`.

```tsx
import { Channel, MessagePinnedHeader } from "stream-chat-react-native";

const MessagePinnedHeaderComponent = () => <MessagePinnedHeader />;

<Channel MessagePinnedHeader={MessagePinnedHeaderComponent} />;
```

## Props

This component reads default values from [`MessageContext`](/chat/docs/sdk/react-native/v8/contexts/message-context/).

### `message`

Message object.

| Type           |
| -------------- |
| `Message` type |



---

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

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