import { useContext } from 'react';
import { ChannelContext } from 'stream-chat-react-native';
const { lastRead, reloadChannel, watcherCount } = useContext(ChannelContext);
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:
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();
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
channel
Channel instance from the StreamChat client.
Type |
---|
Channel |
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.
Type | Default |
---|---|
boolean | false |
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 |
---|
boolean |
giphyEnabled
True if Giphy command is enabled on channel type.
Type |
---|
boolean |
hideDateSeparators
Hide inline date separators in MessageList
component.
Type | Default |
---|---|
boolean | false |
hideStickyDateHeader
Note: This prop is available only in SDK version >= v3.9.0
Hide sticky date header in MessageList
component.
Type | Default |
---|---|
boolean | false |
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 |
LoadingIndicator
Component to render full screen error indicator, when channel fails to load.
Type | Default |
---|---|
component | LoadingIndicator |
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 |
maxTimeBetweenGroupedMessages
Maximum time in milliseconds between consecutive messages from the same user to still consider them grouped
together.
Type | Default |
---|---|
number | infinite |
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.
client.queryChannels()
or channel.watch()
returns only up to 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 |
readEventsEnabled
Enable read receipts. The default value is supplied by the channel config.
Type |
---|
boolean |
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.
Type | Default |
---|---|
number | 4 |
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 |
typingEventsEnabled
Enable typing events, and typing indicators to be shown. The default value is supplied by the channel config.
Type |
---|
boolean |
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.
client.queryChannels()
or channel.watch()
returns only up to 100 watchers for channel. So if you expect total number of watchers to be > 100, you should request them explicitly using Channel Pagination
Record<
string, // string
UserResponse<UserType>
>;
Type |
---|
object |
watcherCount
Total number of users, currently watching a channel.
Type |
---|
number |
EmptyStateIndicator
Component to render, when channel has no messages.
Type | Default |
---|---|
component | EmptyStateIndicator |
NetworkDownIndicator
Component to render an indicator at top of the channel, which shows up when there is some issue with network or connection.
Type | Default |
---|---|
component | NetworkDownIndicator |
- Basic Usage
- Value
- channel
- enforceUniqueReaction
- disabled
- error
- giphyEnabled
- hideDateSeparators
- hideStickyDateHeader
- isAdmin
- isModerator
- isOwner
- lastRead
- loadChannelAtMessage
- loading
- LoadingIndicator
- markRead
- maxTimeBetweenGroupedMessages
- members
- read
- readEventsEnabled
- reloadChannel
- scrollToFirstUnreadThreshold
- setLastRead
- setTargetedMessage
- targetedMessage
- typingEventsEnabled
- watchers
- watcherCount
- EmptyStateIndicator
- NetworkDownIndicator