Info:
This is release candidate documentation for Stream Chat React Native SDK v10. For the latest stable version, see the latest version (v9).

ChannelContext

ChannelContext holds the channel that Channel or Thread binds, and the display options of the message list that are set on them. Read it with useChannelContext(). How components connect to state shows where it sits among the other contexts.

Best practices

  • Read the channel with useChannel() in a component that renders in both a channel and a thread. Inside a Thread, ChannelContext holds the thread's channel too, and useChannel() reads the thread's channel first, so it stays right if the two ever differ.
  • Read the channel's state from its stores with useStateStore: its data, members, read state and typing are in channel.state, and its messages in channel.messagePaginator. ChannelContext holds the channel object, which doesn't change when its state does, so the context won't re-render your component for them. See Reading state in components.
  • Mark the channel read with useMarkRead(channel), and jump to messages with useMessagePaginator(). See Message paginators.
  • Call useChannelContext() only inside Channel or Thread. It throws anywhere else.

Basic usage

src/MemberCount.tsx
import { Text } from "react-native";
import type { ChannelStateData } from "stream-chat";
import { useChannelContext, useStateStore } from "stream-chat-react-native";

const memberCountSelector = ({ data }: ChannelStateData) => ({
  memberCount: data?.member_count ?? 0,
});

export const MemberCount = () => {
  const { channel } = useChannelContext();
  const { memberCount } = useStateStore(channel.state, memberCountSelector);

  return <Text>{memberCount} members</Text>;
};

The context gives the channel, and the store gives a value that updates when members join or leave.

Values

Value Type Description
allowDateSeparatorForSystemMessages boolean The allowDateSeparatorForSystemMessages prop, false by default.
channel Channel The channel Channel renders: the one you passed, or the object that superseded it. Inside a Thread, the thread's channel.
disabled boolean | undefined true while the channel is frozen. The message list hides its scroll-to-bottom button then.
enableMessageGroupingByUser boolean | undefined The enableMessageGroupingByUser prop, true by default.
enforceUniqueReaction boolean The enforceUniqueReaction prop, false by default.
hasPendingInitialTargetLoad (() => boolean) | undefined Internal. Tells the message lists whether Channel or Thread is about to jump to a message, so the list doesn't pick its own starting position first.
hideDateSeparators boolean The hideDateSeparators prop, false by default.
hideStickyDateHeader boolean The hideStickyDateHeader prop, false by default.
maxTimeBetweenGroupedMessages number | undefined The maxTimeBetweenGroupedMessages prop. undefined, the default, puts no time limit on a group.

The value is rebuilt only when the channel object or its frozen state changes. A new value of one of the props above, passed while the same channel stays mounted, doesn't reach the context until then.

Related hooks

  • useChannelContext() returns the value above, and throws outside Channel and Thread.
  • useChannel() returns the channel: the thread's channel inside a Thread, otherwise ChannelContext's.
  • useMessagePaginator() returns the message list's paginator: the thread's inside a Thread, otherwise the channel's.
  • useOwnCapabilitiesContext() returns what the user may do in the channel. See OwnCapabilitiesContext.

Channel and thread hooks lists the hooks that read a channel's state.