# 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](https://reactjs.org/docs/context.html).

`ChannelMediaListProvider` takes the `channel` it operates on as a prop. In the channel-details flow, the [`MediaList`](/chat/docs/sdk/react-native/ui-components/media-list/) component renders the provider and reads that `channel` from [`ChannelDetailsContext`](/chat/docs/sdk/react-native/contexts/channel-details-context/), 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`](/chat/docs/sdk/react-native/contexts/channel-details-context/).
- 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`:

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

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

Consume `ChannelMediaListContext` in any child of the provider:

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

const { searchSource } = useContext(ChannelMediaListContext);
```

Alternatively, use the `useChannelMediaListContext` hook to consume `ChannelMediaListContext`.

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

const { searchSource } = useChannelMediaListContext();
```

## Values

| Value             | Description                                                                                                                                                                                                                                                          | Type                                                                                                      |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `searchSource` \* | A [`MessageSearchSource`](https://github.com/GetStream/stream-chat-js/blob/master/src/search_controller.ts) used to query and paginate the channel's media attachments. Pre-configured to return `image` and `video` attachments, sorted by `created_at` descending. | [`MessageSearchSource`](https://github.com/GetStream/stream-chat-js/blob/master/src/search_controller.ts) |


---

This page was last updated at 2026-06-30T12:00:28.261Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/contexts/channel-media-list-context/](https://getstream.io/chat/docs/sdk/react-native/contexts/channel-media-list-context/).