# ChannelMemberList
The full, searchable list of a channel's members. It renders a search input over a paginated `FlatList` of members and opens a per-member actions sheet when a row is tapped. Needs to be wrapped in a `ChannelDetailsContextProvider` that supplies the channel.
This is the component rendered behind the "view all" entry point of [`ChannelDetails`](/chat/docs/sdk/react-native/ui-components/channel-details/). Render it yourself to build a custom, full-screen members screen — for example a dedicated navigation route instead of a modal.
## Best Practices
- Wrap it in `ChannelDetailsContextProvider` so the list can resolve the channel.
- Render it as a full-screen route (or any container you control) and supply your own header — `ChannelMemberList` no longer ships its own modal chrome.
- Customize the per-member actions through `ChannelMemberActionsSheet`'s `getChannelMemberActionItems` instead of rebuilding the sheet.
- Override and configure building blocks like `ChannelMemberItem` or `ChannelMemberActionsSheet` by wrapping the list in `WithComponents` with an `overrides` map.
## General Usage
```tsx
import {
OverlayProvider,
Chat,
ChannelDetailsContextProvider,
ChannelMemberList,
} from "stream-chat-react-native";
const ChannelMembersScreen = () => {
return (
);
};
```
## Props
| Prop | Description | Type |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------- |
| `additionalFlatListProps` | Override the underlying [`FlatList`](https://reactnative.dev/docs/flatlist#props) props of the list. | `Partial>` |
| `searchInputProps` | Additional props forwarded to the search input. | `SearchInputProps` |
| `searchSource` | A custom `ChannelMemberSearchSource` used to query and paginate members. Overrides the source created by default (pre-configured to autocomplete by `name`). | `ChannelMemberSearchSource` |
## Building blocks
`ChannelMemberList` renders a `ChannelMemberItem` per member and opens a `ChannelMemberActionsSheet` on press. Both are sourced from the components context and can be overridden through `WithComponents`.
### ChannelMemberItem
A single member row. It renders the member's roles as badges via the overridable `RoleList`/`RoleItem` components.
| Prop | Description | Type |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
| `member` \* | The member to render. | `ChannelMemberResponse` |
| `getMemberRoles` | Override the roles shown next to the member; returns an array of `{ key, label }`. Defaults to the built-in Owner / Admin / Moderator logic. | `GetMemberRoles` |
| `onPress` | Fired when the row is pressed. | `(member: ChannelMemberResponse) => void` |
| `size` | Visual size of the row. `'sm'` (default) is a compact row; `'lg'` is a profile-style header. | `'sm' \| 'lg'` |
| `testID` | Test identifier. | `string` |
### RoleList
The horizontal list of role badges rendered inside `ChannelMemberItem`. Each badge is rendered by the overridable `RoleItem` component. Sourced from the components context and overridable through `WithComponents`.
| Prop | Description | Type |
| ---------- | ----------------------------------------------------- | ------------- |
| `roles` \* | The roles to render, as an array of `{ key, label }`. | `RoleLabel[]` |
### RoleItem
A single role badge (pill). `owner` roles use the accent (blue) palette; every other role uses the neutral (grey) palette. Colors are themeable via `theme.channelDetails.roleItem` (`ownerBackgroundColor`, `ownerColor`, `roleBackgroundColor`, `roleColor`). Sourced from the components context and overridable through `WithComponents`.
| Prop | Description | Type |
| ----------- | ---------------------------------------------------------------------- | ---------------------- |
| `role` \* | The role to render, as a `{ key, label }` pair. | `RoleLabel` |
| `viewStyle` | Style applied to the badge container, layered over the theme override. | `StyleProp` |
| `textStyle` | Style applied to the badge label, layered over the theme override. | `StyleProp` |
### ChannelAddMembersButton
A button that opens the add-members form ([`ChannelAddMembersForm`](/chat/docs/sdk/react-native/ui-components/channel-add-members-form/)) in a modal. Useful as a header action on a custom members screen.
| Prop | Description | Type |
| --------- | ----------------------------------------------------------------- | ---------------------- |
| `onPress` | Override the default behavior, which opens the add-members modal. | `() => void` |
| `style` | Style forwarded to the underlying `Button`. | `ButtonProps['style']` |
| `variant` | Render the button as an icon or a text button. | `'icon' \| 'text'` |
| `testID` | Test identifier. | `string` |
### ChannelMemberActionsSheet
Opened when a member is tapped. It renders a `ChannelMemberItem` (`size='lg'`) header followed by `ChannelDetailsActionItem` rows.
| Prop | Description | Type |
| ----------------------------- | ---------------------------------------------------------------------------- | ----------------------------- |
| `member` \* | The member the actions apply to. | `ChannelMemberResponse` |
| `onClose` \* | Fired when the sheet is closed. | `() => void` |
| `visible` \* | Controls sheet visibility. | `boolean` |
| `getChannelMemberActionItems` | Customize the list of action items rendered in the per-member actions sheet. | `GetChannelMemberActionItems` |
---
This page was last updated at 2026-06-30T12:00:28.012Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/channel-member-list/](https://getstream.io/chat/docs/sdk/react-native/ui-components/channel-member-list/).