ChannelMediaListContext

ChannelMediaListContext is provided by ChannelMediaListProvider. Mount the provider around your media-list UI to access the search source used to query and paginate its media attachments. If you are not familiar with the React Context API, see the React docs.

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

Best Practices

• Render ChannelMediaListProvider with the channel whose media you want to list — inside the channel-details flow this comes from ChannelDetailsContext.
• Use searchSource for querying and paginating media; it is pre-configured to return image and video attachments, newest first.
• Pass a custom searchSource only when you need different filtering, sorting, or page size — otherwise rely on the default the provider creates.
• Calling useChannelMediaListContext outside the provider throws — render your media-list UI as a child of ChannelMediaListProvider.

Basic Usage

Wrap your media-list UI in ChannelMediaListProvider:

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

<ChannelMediaListProvider channel={channel}>
  {/* media list UI */}
</ChannelMediaListProvider>;

Consume ChannelMediaListContext in any child of the provider:

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

const { searchSource } = useContext(ChannelMediaListContext);

Alternatively, use the useChannelMediaListContext hook to consume ChannelMediaListContext.

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

const { searchSource } = useChannelMediaListContext();

Values