# ChannelContext

`ChannelContext` is provided by [`Channel`](/chat/docs/sdk/react-native/v4/core-components/channel/) component. If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).

## Basic Usage

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

```tsx
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.

```tsx
import { useChannelContext } from "stream-chat-react-native";

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

<admonition type="warning">

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

</admonition>

## Value

### channel

Channel instance from the StreamChat client.

| Type                                                |
| --------------------------------------------------- |
| [Channel](/chat/docs/javascript/creating-channels/) |


### 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](https://en.wikipedia.org/wiki/IMessage).

| Type    | Default |
| ------- | ------- |
| boolean | false   |


### disabled

True if channel is [frozen](/chat/docs/javascript/disabling-channels/) and [disableIfFrozenChannel](/chat/docs/sdk/react-native/v4/core-components/channel#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](/chat/docs/javascript/channel-features/#edit-a-channel-type/).

| Type    |
| ------- |
| boolean |

### hideDateSeparators

Hide inline date separators in [`MessageList`](/chat/docs/sdk/react-native/v4/ui-components/message-list/) component.

| Type    | Default |
| ------- | ------- |
| boolean | false   |


### hideStickyDateHeader

**Note:** This prop is available only in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/releases)

Hide sticky date header in [`MessageList`](/chat/docs/sdk/react-native/v4/ui-components/message-list/) 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](/chat/docs/javascript/chat-permission-policies/) for details.

```tsx
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](/chat/docs/javascript/chat-permission-policies/) for details.

```tsx
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](/chat/docs/javascript/chat-permission-policies/) section for details.

```tsx
const isOwner = channel?.state.membership.role === "owner";
```

| Type    |
| ------- |
| boolean |

### `lastRead`

Timestamp of when current user marked the channel as read - [`channel.markRead()`](/chat/docs/javascript/unread/)

| Type                                                                                          |
| --------------------------------------------------------------------------------------------- |
| [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |

### loadChannelAtMessage

Function to reload channel at particular message in history.

```tsx
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](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/LoadingIndicator.tsx) |


### `markRead`

Function to mark current channel as read, for current user. This function internally makes a throttled call to `channel.markRead()`, if [read events](/chat/docs/javascript/channel-features/) 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()`](/chat/docs/javascript/query-channels/) or [`channel.watch()`](/chat/docs/javascript/creating-channels/) API call.

<admonition type="warning">

`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()`](/chat/docs/javascript/query-members/) API endpoint separately to get the list of members.

</admonition>

```tsx
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()`](/chat/docs/javascript/query-channels/) or [`channel.watch()`](/chat/docs/javascript/creating-channels/) API call.

```tsx
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](/chat/docs/sdk/react-native/v4/core-components/channel#initialscrolltofirstunreadmessage/) is set to true.

| Type   | Default |
| ------ | ------- |
| number | 4       |


### setLastRead

Setter function for react state [`lastRead`](#lastread) of Channel component.

| Type                   |
| ---------------------- |
| `(date: Date) => void` |

### setTargetedMessage

Setter function for react state [`targetedMessage`](#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](#loadchannelatmessage).

| Type   |
| ------ |
| string |

### watchers

Watchers of current channel. This value is received from backend when you query a channel, either using [`client.queryChannels()`](/chat/docs/javascript/query-channels/) or [`channel.watch()`](/chat/docs/javascript/creating-channels/) API call.

<admonition type="warning">

`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](/chat/docs/javascript/channel-pagination/)

</admonition>

```tsx
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](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/EmptyStateIndicator.tsx) |


### 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](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/NetworkDownIndicator.tsx) |



---

This page was last updated at 2026-07-10T16:05:03.030Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v4/contexts/channel-context/](https://getstream.io/chat/docs/sdk/react-native/v4/contexts/channel-context/).