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

import {
  OverlayProvider,
  Chat,
  ChannelDetails,
  ChannelDetailsContextProvider,
} from "stream-chat-react-native";

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <ChannelDetailsContextProvider channel={channel}>
          <ChannelDetails onBack={() => navigation.goBack()} />
        </ChannelDetailsContextProvider>
      </Chat>
    </OverlayProvider>
  );
};

Props

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.

ChannelDetailsEditButton

Trailing header button that opens the channel edit form (ChannelEditDetailsForm) in a modal. Hidden for direct chats.

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.

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) 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.

• 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, FileAttachmentList and MediaList navigation rows.

ChannelDetailsActionsSection

The section listing channel actions (mute, leave, delete, block, etc.).

It renders ChannelDetailsActionItem rows: