MessagePinnedHeader

Renders the pinned message label inside MessageList.

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.

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.