# ChannelDetailsBottomSheet

Renders the channel details action menu shown from `ChannelList` interactions. This is the default component for the [`ChannelDetailsBottomSheet`](/chat/docs/sdk/react-native/core-components/channel-list#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`](/chat/docs/sdk/react-native/core-components/channel-list#channeldetailsbottomsheet/) on `ChannelList`.

```tsx
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

| Prop                      | Description                                                          | Type                                        |
| ------------------------- | -------------------------------------------------------------------- | ------------------------------------------- |
| `channel`                 | Channel for which actions and header details are rendered.           | `Channel`                                   |
| `items`                   | List of channel action items rendered in the sheet.                  | `ChannelActionItem[]`                       |
| `additionalFlatListProps` | Additional props passed to the underlying FlatList used by the menu. | `Partial<FlatListProps<ChannelActionItem>>` |
| `ChannelDetailsHeader`    | Optional component used to render the sheet header above actions.    | `ComponentType<{ channel: Channel }>`       |


---

This page was last updated at 2026-04-17T17:33:46.310Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/channel-details-bottom-sheet/](https://getstream.io/chat/docs/sdk/react-native/ui-components/channel-details-bottom-sheet/).