# MessagePinnedHeader

Renders the pinned message label inside [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/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 `WithComponents` for centralized customization.

## Basic Usage

Replace the default UI via `WithComponents`.

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

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

<WithComponents
  overrides={{ MessagePinnedHeader: MessagePinnedHeaderComponent }}
>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;
```

## Props

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

| Prop      | Description     | Type           |
| --------- | --------------- | -------------- |
| `message` | Message object. | `Message` type |

---

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