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 { lastRead, reloadChannel, watcherCount } = useContext(ChannelContext);

Alternatively, use the useChannelContext hook.

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

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

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

Values

ValueDescriptionType
channelChannel instance from the Stream Chat client.channel
enforceUniqueReactionLimits reactions to one per user. Selecting a new reaction replaces the previous one (similar to iMessage). Defaults to false.boolean
disabledTrue if channel is frozen and disableIfFrozenChannel is true.boolean
errorTrue if any channel.query() call fails during initial load or pagination.error object | boolean
giphyEnabledTrue if Giphy is enabled on the channel type.boolean
hideDateSeparatorsHide inline date separators in MessageList. Defaults to false.boolean
hideStickyDateHeaderHide the sticky date header in MessageList. Available in SDK version >= v3.9.0. Defaults to false.boolean
isAdminTrue if the current user has the admin role at app or channel level. See User Roles.boolean
isModeratorTrue if the current user has the moderator role at app or channel level. See User Roles.boolean
isOwnerTrue if the current user has owner permissions for the channel type. See User Permission.boolean
lastReadTimestamp when the current user marked the channel as read (channel.markRead()).date
loadChannelAroundMessageLoad the channel with messages around a specific message in history.function
loadingTrue while the channel loads messages for the first time.boolean
markReadMarks the channel as read for the current user. Internally calls channel.markRead() (throttled) if read events are enabled.function
maxTimeBetweenGroupedMessagesMaximum time (ms) between consecutive messages from the same user to keep them grouped. Defaults to infinite.number
membersMembers 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
readRead statuses for channel members. Received from the backend via client.queryChannels() or channel.watch().object
reloadChannelReloads the channel at the most recent message. Resolves when reload completes.() => promise
scrollToFirstUnreadThresholdMinimum 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 4.number
setLastReadSetter for the lastRead state in Channel.(date: Date) => void
setTargetedMessageSetter for the targetedMessage state in Channel.(messageId: string) => void
targetedMessageID of the currently highlighted message. Set when you load a channel around a message using loadChannelAroundMessage.string
watchersWatchers 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
watcherCountTotal 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>
>;