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.

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

forwarded from Channel props

hideDateSeparators

Hide inline date separators in MessageList component.

Type	Default
boolean	false

forwarded from Channel props

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

forwarded from Channel props

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

forwarded from Channel props

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.

caution

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

forwarded from Channel props

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

forwarded from Channel props

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.

caution

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

forwarded from Channel props

EmptyStateIndicator

Component to render, when channel has no messages.

Type	Default
component	EmptyStateIndicator

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.

Type	Default
component	NetworkDownIndicator