ChannelContext

ChannelContext is provided by Channel. If you are not familiar with the React Context API, see the React docs.

Best Practices

Prefer useChannelContext to avoid direct context wiring.
Avoid using ChannelContext deep in message rows to prevent expensive re-renders.
Use markRead instead of calling channel.markRead() directly to benefit from throttling.
Check loading/error before rendering heavy channel UI.
Treat read and members as read-only UI data; update via client/channel APIs.

Basic Usage

Consume ChannelContext in any child of Channel:

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

const { channel, reloadChannel, watcherCount } = useContext(ChannelContext);

Alternatively, use the useChannelContext hook.

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

const { channel, reloadChannel, watcherCount } = useChannelContext();

Warning:

Avoid using ChannelContext at the message level; changes can re-render all messages and cause performance issues.

Values

Value	Description	Type
`channel`	Channel instance from the Stream Chat client.	channel
`enforceUniqueReaction`	Limits reactions to one per user. Selecting a new reaction replaces the previous one (similar to iMessage). Defaults to `false`.	`boolean`
`disabled`	True when the channel is frozen.	`boolean`
`error`	True if any `channel.query()` call fails during initial load or pagination.	`error object \| boolean`
`hideDateSeparators`	Hide inline date separators in MessageList. Defaults to `false`.	`boolean`
`hideStickyDateHeader`	Hide the sticky date header in MessageList. Available in SDK version >= v3.9.0. Defaults to `false`.	`boolean`
`highlightedMessageId`	ID of the message currently highlighted in the channel.	`string`
`isChannelActive`	True when the channel is the active (mounted and visible) channel.	`boolean`
`loadChannelAroundMessage`	Load the channel with messages around a specific message in history.	`function`
`loadChannelAtFirstUnreadMessage`	Load the channel starting at the first unread message.	`function`
`loading`	True while the channel loads messages for the first time.	`boolean`
`markRead`	Marks the channel as read for the current user. Internally calls `channel.markRead()` (throttled) if read events are enabled.	`function`
`maxTimeBetweenGroupedMessages`	Maximum time (ms) between consecutive messages from the same user to keep them grouped. Defaults to `infinite`.	`number`
`members`	Members of current channel. This value is received from backend when you query a channel, either using `client.queryChannels()` or `channel.watch()` API call. Note: `client.queryChannels()` or `channel.watch()` returns only up to 100 members of channel. If you expect total number of members to be > 100, use `client.queryMembers()` API endpoint separately.	`object`
`read`	Read statuses for channel members. Received from the backend via `client.queryChannels()` or `channel.watch()`.	`object`
`reloadChannel`	Reloads the channel at the most recent message. Resolves when reload completes.	`() => promise`
`scrollToFirstUnreadThreshold`	Minimum number of unread messages a channel should have in order to set the initial scroll position to first unread message. This value is only used when `initialScrollToFirstUnreadMessage` is set to true. Defaults to `0`.	`number`
`setTargetedMessage`	Setter for the `targetedMessage` state in `Channel`.	`(messageId: string) => void`
`targetedMessage`	ID of the currently highlighted message. Set when you load a channel around a message using `loadChannelAroundMessage`.	`string`
`watchers`	Watchers of current channel. This value is received from backend when you query a channel, either using `client.queryChannels()` or `channel.watch()` API call. Note: `client.queryChannels()` or `channel.watch()` returns only up to 100 watchers for channel. If you expect total number of watchers to be > 100, you should request them explicitly using Channel Pagination.	`object`
`watcherCount`	Total users currently watching the channel.	`number`

Examples

isAdmin

const isAdmin =
  client?.user?.role === "admin" || channel?.state.membership.role === "admin";

isModerator

const isModerator =
  channel?.state.membership.role === "channel_moderator" ||
  channel?.state.membership.role === "moderator";

isOwner

const isOwner = channel?.state.membership.role === "owner";

loadChannelAroundMessage

loadChannelAroundMessage({
  messageId,
});

read

Record<
  string, // userId
  {
    last_read: Date;
    user: UserResponse<UserType>;
  }
>;

watchers

Record<
  string, // string
  UserResponse<UserType>
>;