import { useContext } from "react";
import { ChannelContext } from "stream-chat-react-native";
const { lastRead, reloadChannel, watcherCount } = useContext(ChannelContext);ChannelContext
ChannelContext is provided by Channel. If you are not familiar with the React Context API, see the React docs.
Best Practices
- Prefer
useChannelContextto avoid direct context wiring. - Avoid using
ChannelContextdeep in message rows to prevent expensive re-renders. - Use
markReadinstead of callingchannel.markRead()directly to benefit from throttling. - Check
loading/errorbefore rendering heavy channel UI. - Treat
readandmembersas read-only UI data; update via client/channel APIs.
Basic Usage
Consume ChannelContext in any child of Channel:
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
| 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 if channel is frozen and disableIfFrozenChannel is true. | boolean |
error | True if any channel.query() call fails during initial load or pagination. | error object | boolean |
giphyEnabled | True if Giphy is enabled on the channel type. | 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 |
isAdmin | True if the current user has the admin role at app or channel level. See User Roles. | boolean |
isModerator | True if the current user has the moderator role at app or channel level. See User Roles. | boolean |
isOwner | True if the current user has owner permissions for the channel type. See User Permission. | boolean |
lastRead | Timestamp when the current user marked the channel as read (channel.markRead()). | date |
loadChannelAroundMessage | Load the channel with messages around a specific message in history. | 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 4. | number |
setLastRead | Setter for the lastRead state in Channel. | (date: Date) => void |
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>
>;