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();

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.

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

hideDateSeparators

Hide inline date separators in MessageList component.

TypeDefault
booleanfalse

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

loadChannelAroundMessage

Function to load channel with messages around a particular message in history.

loadChannelAroundMessage({
  messageId,
});
Type
function

loadChannelAtMessage

Function to reload channel at particular message in history.

This function is deprecated. Use loadChannelAroundMessage instead.

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.

TypeDefault
ComponentTypeLoadingIndicator

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.

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.

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

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

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.

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.

TypeDefault
ComponentTypeEmptyStateIndicator

NetworkDownIndicator

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

TypeDefault
ComponentTypeNetworkDownIndicator

© Getstream.io, Inc. All Rights Reserved.