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 Channel prop for centralized customization.

Basic Usage

Customize MessagePinnedHeader and pass it via the MessagePinnedHeader prop on Channel.

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

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

<Channel MessagePinnedHeader={MessagePinnedHeaderComponent} />;

Props

This component reads default values from MessageContext.

message