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.

ChannelDetailsContext exposes the Channel 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 and ChannelEditDetailsContext 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:

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

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

Consume ChannelDetailsContext in any child of the provider:

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

const { channel } = useContext(ChannelDetailsContext);

Alternatively, use the useChannelDetailsContext hook to consume ChannelDetailsContext.

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

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