# ChannelDetails
The entry component for the channel details screen. It renders a full layout for a channel, composed of a navigation header, the channel profile, a navigation section (pinned messages, files and media), a members section and an actions section. Needs to be wrapped in a `ChannelDetailsContextProvider` that supplies the `channel` it renders. The component expects an already-initialized channel (for example via `channel.watch()` or by querying channels), as it reads the channel's state and data directly.
|  |  |
| ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
## Best Practices
- Wrap `ChannelDetails` in `ChannelDetailsContextProvider` and pass the `channel` whose details you want to display.
- Render it inside `Channel` so the section building blocks can access channel state and capabilities.
- Override and configure individual building blocks (e.g. `ChannelDetailsProfile`, `ChannelDetailsActionsSection`, `ChannelMemberItem`) by wrapping the component in `WithComponents` with an `overrides` map, instead of rewriting the whole screen.
- Use `onBack` to wire the header back button into your navigation stack.
- Use `getChannelActionItems` / `getNavigationItems` to tailor the rows without losing built-in behavior.
## General Usage
```tsx
import {
OverlayProvider,
Chat,
ChannelDetails,
ChannelDetailsContextProvider,
} from "stream-chat-react-native";
const App = () => {
return (
navigation.goBack()} />
);
};
```
## Props
| Prop | Description | Type |
| -------- | -------------------------------------------------------------------- | ------------ |
| `onBack` | Fired when the back button is pressed on the channel details header. | `() => void` |
## Building blocks
`ChannelDetails` composes the following sections. Each is sourced from the components context and can be overridden through the `Channel` component.
### ChannelDetailsNavHeader
The top navigation header.
| Prop | Description | Type |
| -------- | ------------------------------------------------------------------------------------- | ----------------- |
| `action` | Content rendered on the trailing side of the header (e.g. the edit button). | `React.ReactNode` |
| `onBack` | Fired when the back button is pressed. The back button only renders when provided. | `() => void` |
| `title` | Override the auto-resolved screen title (1:1 → "Contact Info", group → "Group Info"). | `string` |
### ChannelDetailsEditButton
Trailing header button that opens the channel edit form ([`ChannelEditDetailsForm`](/chat/docs/sdk/react-native/ui-components/channel-edit-details-form/)) in a modal. Hidden for direct chats.
| Prop | Description | Type |
| --------- | ---------------------------------------------------------- | ---------------------- |
| `onPress` | Override the default behavior, which opens the edit modal. | `() => void` |
| `style` | Style forwarded to the underlying `Button`. | `ButtonProps['style']` |
| `testID` | Test identifier. | `string` |
### ChannelDetailsProfile
Renders the channel avatar, name and description from the channel details context. Takes no props.
### ChannelDetailsMemberSection
A preview of the channel members with an entry point to the full list. Omitted for direct chats.
| Prop | Description | Type |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `onViewAllMembersPress` | Fired when the user taps the "view all members" button. By default it opens the full member list ([`ChannelMemberList`](/chat/docs/sdk/react-native/ui-components/channel-member-list/)) in a modal; provide this to navigate to your own members screen instead, in which case the built-in modal is not rendered. | `() => void` |
It renders the following member building blocks:
- **ChannelMemberItem** — a single member row. Renders the member's roles as badges via `RoleList`/`RoleItem`.
| 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`. Takes `roles: RoleLabel[]` and renders each via the overridable `RoleItem`.
- **RoleItem** — a single role badge (pill). Takes `role: RoleLabel`; `owner` roles use the accent (blue) palette, all others the neutral (grey) palette. Themeable via `theme.channelDetails.roleItem`, and accepts optional `viewStyle` / `textStyle` props for per-instance overrides.
- **ChannelAddMembersButton** — opens the add-members form ([`ChannelAddMembersForm`](/chat/docs/sdk/react-native/ui-components/channel-add-members-form/)) in a modal.
| 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` |
- **ChannelMemberList** — the full, searchable member list opened by "View all". See [`ChannelMemberList`](/chat/docs/sdk/react-native/ui-components/channel-member-list/).
- **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` |
### ChannelDetailsNavigationSection
The section that surfaces the [`PinnedMessageList`](/chat/docs/sdk/react-native/ui-components/pinned-message-list/), [`FileAttachmentList`](/chat/docs/sdk/react-native/ui-components/file-attachment-list/) and [`MediaList`](/chat/docs/sdk/react-native/ui-components/media-list/) navigation rows.
| Prop | Description | Type |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------- |
| `getNavigationItems` | Customize the navigation rows. Receives the built-in `defaultItems` (and a `context`) and returns the rows to render. Untouched rows keep their built-in behavior. | `GetChannelDetailsNavigationItems` |
### ChannelDetailsActionsSection
The section listing channel actions (mute, leave, delete, block, etc.).
| Prop | Description | Type |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| `getChannelActionItems` | Customize the list of action items. Receives the default items and returns the final list to render (filter, reorder, replace, or add). | `GetChannelActionItems` |
| `onChannelDismiss` | Fired after the channel is no longer available to the current user (delete, leave, or block actions). | `() => void` |
It renders `ChannelDetailsActionItem` rows:
| Prop | Description | Type |
| ------------- | ------------------------------------------------------- | -------------------------------- |
| `Icon` \* | Icon component rendered at the leading edge of the row. | `React.ComponentType` |
| `label` \* | The row label. | `string` |
| `destructive` | Renders the row with destructive styling. | `boolean` |
| `onPress` | Fired when the row is pressed. | `() => void` |
| `trailing` | Content rendered at the trailing edge of the row. | `React.ReactNode` |
| `testID` | Test identifier. | `string` |
---
This page was last updated at 2026-06-30T12:00:27.998Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/channel-details/](https://getstream.io/chat/docs/sdk/react-native/ui-components/channel-details/).