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,
  WithComponents,
} from "stream-chat-react-native";

const CustomChannelDetailsBottomSheet = (props) => (
  <ChannelDetailsBottomSheet {...props} />
);

const App = () => {
  return (
    <WithComponents
      overrides={{ ChannelDetailsBottomSheet: CustomChannelDetailsBottomSheet }}
    >
      <ChannelList swipeActionsEnabled />
    </WithComponents>
  );
};

Props