ChannelDetailsBottomSheet

Renders the channel details action menu shown from ChannelList interactions. This is the default component for the ChannelDetailsBottomSheet prop.

Best Practices

• Keep action labels short and explicit (for example, mute, archive, leave).
• Distinguish destructive actions with dedicated styling and icon color.
• Close the bottom sheet after action execution to keep interaction flow clear.
• Use channel metadata (members/online count) only for lightweight header context.
• Enable swipe actions on ChannelList when relying on this menu.

General Usage

Customize it and pass it via ChannelDetailsBottomSheet on ChannelList.

import {
  ChannelDetailsBottomSheet,
  ChannelList,
} from "stream-chat-react-native";

const App = () => {
  return (
    <ChannelList
      swipeActionsEnabled
      ChannelDetailsBottomSheet={(props) => (
        <ChannelDetailsBottomSheet {...props} />
      )}
    />
  );
};

Props

channel

Channel for which actions and header details are rendered.

items

List of channel action items rendered in the sheet.

additionalFlatListProps

Additional props passed to the underlying FlatList used by the menu.

ChannelDetailsHeader

Optional component used to render the sheet header above actions.