# ChannelDetailsContext

`ChannelDetailsContext` is provided by `ChannelDetailsContextProvider`. Unlike most contexts, it is not created automatically by a core component — you mount the provider yourself around your channel-details UI (as the sample app does). If you are not familiar with the React Context API, see the [React docs](https://reactjs.org/docs/context.html).

`ChannelDetailsContext` exposes the [`Channel`](/chat/docs/javascript/creating-channels/) instance that the channel-details screens operate on, so nested components don't need to receive it via props. It also exposes a `closeModals` method that asks every open channel-details modal to dismiss itself. It is the foundation for the other channel-details contexts — [`ChannelAddMembersContext`](/chat/docs/sdk/react-native/contexts/channel-add-members-context/) and [`ChannelEditDetailsContext`](/chat/docs/sdk/react-native/contexts/channel-edit-details-context/) both depend on it.

## Best Practices

- Mount `ChannelDetailsContextProvider` once at the root of your channel-details flow and pass the active `channel`.
- Use `useChannelDetailsContext` instead of prop-drilling the `channel` through every screen.
- Keep the provider scoped to the details flow so unrelated components don't subscribe to it.
- Calling `useChannelDetailsContext` outside the provider throws — render your details UI as a child of `ChannelDetailsContextProvider`.

## Basic Usage

Wrap your channel-details UI in `ChannelDetailsContextProvider`:

```tsx
import { ChannelDetailsContextProvider } from "stream-chat-react-native";

<ChannelDetailsContextProvider channel={channel}>
  {/* channel details screens */}
</ChannelDetailsContextProvider>;
```

Consume `ChannelDetailsContext` in any child of the provider:

```tsx
import { useContext } from "react";
import { ChannelDetailsContext } from "stream-chat-react-native";

const { channel } = useContext(ChannelDetailsContext);
```

Alternatively, use the `useChannelDetailsContext` hook to consume `ChannelDetailsContext`.

```tsx
import { useChannelDetailsContext } from "stream-chat-react-native";

const { channel, closeModals } = useChannelDetailsContext();
```

## Closing open modals

Call `closeModals` to dismiss any open channel-details modal — useful before navigating away (for example, when a per-member action routes the user to another screen):

```tsx
const { closeModals } = useChannelDetailsContext();

const onSendDirectMessage = (user) => {
  closeModals();
  navigation.navigate("NewDirectMessagingScreen", { initialUser: user });
};
```

Under the hood `closeModals` emits a one-shot signal through `signalStore`; the built-in channel-details modals subscribe to it and close themselves.

## Values

| Value         | Description                                                                                                                  | Type                                                                                |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| `channel` \*  | The [`Channel`](/chat/docs/javascript/creating-channels/) instance the channel-details UI operates on.                       | [`Channel`](https://github.com/GetStream/stream-chat-js/blob/master/src/channel.ts) |
| `closeModals` | Signals every open channel-details modal to dismiss itself. Call it before navigating away from the details flow.            | `() => void`                                                                        |
| `signalStore` | The `StateStore` backing `closeModals`. Modals subscribe to it to know when to close; you rarely need to access it directly. | `SignalStore`                                                                       |


---

This page was last updated at 2026-06-30T12:00:28.226Z.

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