ChannelPinnedMessageListContext

ChannelPinnedMessageListContext is provided by ChannelPinnedMessageListProvider. Mount the provider around your pinned-message-list UI to access the search source used to query and paginate its pinned messages. If you are not familiar with the React Context API, see the React docs.

ChannelPinnedMessageListProvider takes the channel it operates on as a prop. In the channel-details flow, the PinnedMessageList component renders the provider and reads that channel from ChannelDetailsContext, so nested components don't need it via props.

Best Practices

• Render ChannelPinnedMessageListProvider with the channel whose pinned messages you want to list — inside the channel-details flow this comes from ChannelDetailsContext.
• Use searchSource for querying and paginating pinned messages; it is pre-configured to return pinned messages and supports text search.
• Pass a custom searchSource only when you need different filtering, sorting, or page size — otherwise rely on the default the provider creates.
• Calling useChannelPinnedMessageListContext outside the provider throws — render your pinned-message-list UI as a child of ChannelPinnedMessageListProvider.

Basic Usage

Wrap your pinned-message-list UI in ChannelPinnedMessageListProvider:

import { ChannelPinnedMessageListProvider } from "stream-chat-react-native";

<ChannelPinnedMessageListProvider channel={channel}>
  {/* pinned message list UI */}
</ChannelPinnedMessageListProvider>;

Consume ChannelPinnedMessageListContext in any child of the provider:

import { useContext } from "react";
import { ChannelPinnedMessageListContext } from "stream-chat-react-native";

const { searchSource } = useContext(ChannelPinnedMessageListContext);

Alternatively, use the useChannelPinnedMessageListContext hook to consume ChannelPinnedMessageListContext.

import { useChannelPinnedMessageListContext } from "stream-chat-react-native";

const { searchSource } = useChannelPinnedMessageListContext();

Values