Skip to main content
Version: v4

ChannelContext

ChannelContext is provided by Channel component. If you are not familiar with React Context API, please read about it on React docs.

Basic Usage#

ChannelContext can be consumed by any of the child component of Channel component as following:

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

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

Alternatively, you can also use useChannelContext hook provided by library to consume ChannelContext.

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

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

We don't recommend using ChannelContext at message level, since changes to its value may result in re-rendering of all the messages. And this can introduce performance issue

Value#

forwarded from Channel props
channel#

Channel instance from the StreamChat client.

Type
Channel

forwarded from Channel props
enforceUniqueReaction#

Limits reactions to one per user. If a user selects another reaction, their previous reaction will be replaced. This is similar to reaction UX of iMessage.

TypeDefault
booleanfalse

disabled#

True if channel is frozen and disableIfFrozenChannel is true.

Type
boolean

error#

True if any api call to channel.query() during first load or pagination fails.

Type
Error object | boolean

giphyEnabled#

True if giphy command is enabled on channel type.

Type
boolean

forwarded from Channel props
hideDateSeparators#

Hide inline date separators in MessageList component.

TypeDefault
booleanfalse

forwarded from Channel props
hideStickyDateHeader#

Note: This prop is available only in SDK version >= v3.9.0

Hide sticky date header in MessageList component.

TypeDefault
booleanfalse

isAdmin#

True if current user (connected to chat client) has admin role on application level or channel level. Please read more about User Roles for details.

const isAdmin = client?.user?.role === 'admin' || channel?.state.membership.role === 'admin';
Type
boolean

isModerator#

True if current user (connected to chat client) has moderator role on application level or channel level. Please read more about User Roles for details.

const isModerator =
channel?.state.membership.role === 'channel_moderator' || channel?.state.membership.role === 'moderator';
Type
boolean

isOwner#

True if current user (connected to chat client) has owner level permissions for current channel type. Please read User Permission section for details.

const isOwner = channel?.state.membership.role === 'owner';
Type
boolean

lastRead#

Timestamp of when current user marked the channel as read - channel.markRead()

Type
Date

loadChannelAtMessage#

Function to reload channel at particular message in history.

loadChannelAtMessage({
before: 10, // Number of messages to load before messageId
after: 10, // Number of messages to load after messageId
messageId,
});
Type
function

loading#

True if channel is loading messages during first load.

Type
boolean

forwarded from Channel props
LoadingIndicator#

Component to render full screen error indicator, when channel fails to load.

TypeDefault
componentLoadingIndicator

markRead#

Function to mark current channel as read, for current user. This function internally makes a throttled call to channel.markRead(), if read events are enabled

Type
function

forwarded from Channel props
maxTimeBetweenGroupedMessages#

Maximum time in milliseconds between consecutive messages from the same user to still consider them grouped together.

TypeDefault
numberinfinite

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.

caution

client.queryChannels() or channel.watch() returns only upto 100 members of channel. So if you expect total number of members to be > 100, its better to use client.queryMembers() api endpoint separately to get the list of members.

Record<
string, // userId
{
banned?: boolean;
created_at?: string;
invite_accepted_at?: string;
invite_rejected_at?: string;
invited?: boolean;
is_moderator?: boolean;
role?: string;
shadow_banned?: boolean;
updated_at?: string;
user?: UserResponse<UserType>;
user_id?: string;
}
>;
Type
object

read#

Read statuses of members of current channel. This value is received from backend when you query a channel, either using client.queryChannels() or channel.watch() api call.

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

reloadChannel#

Function to reload a channel at most recent message. Promise returned by this function will be resolved, when the channel has finished reloading.

Type
() => 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.

TypeDefault
number4

setLastRead#

Setter function for react state lastRead of Channel component.

Type
(date: Date) => void

setTargetedMessage#

Setter function for react state targetedMessage of Channel component

Type
(messageId: string) => void

targetedMessage#

Id of message, which is highlighted currently. This value gets set when you load a channel at particular message in history, using loadChannelAtMessage.

Type
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.

caution

client.queryChannels() or channel.watch() returns only upto 100 watchers for channel. So if you expect total number of watchers to be > 100, you should request them explicitely using Channel Pagination

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

watcherCount#

Total number of users, currently watching a channel.

Type
number

forwarded from Channel props
EmptyStateIndicator#

Component to render, when channel has no messages.

TypeDefault
componentEmptyStateIndicator

forwarded from Channel props
NetworkDownIndicator#

Component to render an indicator at top of the channel, which shows up when there is some issue with network or connection.

TypeDefault
componentNetworkDownIndicator

Did you find this page helpful?