# ChannelContext

`ChannelContext` is provided by [`Channel`](/chat/docs/sdk/react-native/v8/core-components/channel/). If you are not familiar with the React Context API, see the [React docs](https://reactjs.org/docs/context.html).

## Best Practices

- Prefer `useChannelContext` to avoid direct context wiring.
- Avoid using `ChannelContext` deep in message rows to prevent expensive re-renders.
- Use `markRead` instead of calling `channel.markRead()` directly to benefit from throttling.
- Check `loading`/`error` before rendering heavy channel UI.
- Treat `read` and `members` as read-only UI data; update via client/channel APIs.

## Basic Usage

Consume `ChannelContext` in any child of `Channel`:

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

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

Alternatively, use the `useChannelContext` hook.

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

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

<admonition type="warning">

Avoid using `ChannelContext` at the message level; changes can re-render all messages and cause performance issues.

</admonition>

## Value

### channel

Channel instance from the Stream Chat client.

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


### enforceUniqueReaction

Limits reactions to one per user. Selecting a new reaction replaces the previous one (similar to iMessage).

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

### disabled

True if channel is [frozen](/chat/docs/javascript/disabling_channels/) and [disableIfFrozenChannel](/chat/docs/sdk/react-native/v8/core-components/channel#disableiffrozenchannel/) is true.

| Type    |
| ------- |
| Boolean |


### error

True if any `channel.query()` call fails during initial load or pagination.

| Type                    |
| ----------------------- |
| Error object \| boolean |

### giphyEnabled

True if Giphy is enabled on the [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/v8/ui-components/message-list/).

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

### hideStickyDateHeader

**Note:** Available in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/v8/releases).

Hide the sticky date header in [`MessageList`](/chat/docs/sdk/react-native/v8/ui-components/message-list/).

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

### `isAdmin`

True if the current user has the `admin` role at app or channel level. See [User Roles](/chat/docs/javascript/chat_permission_policies/).

```tsx
const isAdmin =
  client?.user?.role === "admin" || channel?.state.membership.role === "admin";
```

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

### `isModerator`

True if the current user has the `moderator` role at app or channel level. See [User Roles](/chat/docs/javascript/chat_permission_policies/).

```tsx
const isModerator =
  channel?.state.membership.role === "channel_moderator" ||
  channel?.state.membership.role === "moderator";
```

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

### `isOwner`

True if the current user has `owner` permissions for the channel type. See [User Permission](/chat/docs/javascript/chat_permission_policies/).

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

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

### `lastRead`

Timestamp when the 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) |

### loadChannelAroundMessage

Load the channel with messages around a specific message in history.

```tsx
loadChannelAroundMessage({
  messageId,
});
```

| Type     |
| -------- |
| function |

### loading

True while the channel loads messages for the first time.

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

### LoadingIndicator

Renders a full-screen loading indicator when a channel is loading.

| Type          | Default                                                                                                                                       |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [LoadingIndicator](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/Indicators/LoadingIndicator.tsx) |

### `markRead`

Marks the channel as read for the current user. Internally calls `channel.markRead()` (throttled) if [read events](/chat/docs/javascript/channel_features/) are enabled.

| Type     |
| -------- |
| function |

### maxTimeBetweenGroupedMessages

Maximum time (ms) between consecutive messages from the same user to keep them grouped.

| 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 for channel members. Received from the backend via [`client.queryChannels()`](/chat/docs/javascript/query_channels/) or [`channel.watch()`](/chat/docs/javascript/creating_channels/).

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

| Type   |
| ------ |
| object |

### `reloadChannel`

Reloads the channel at the most recent message. Resolves when reload completes.

| 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/v8/core-components/channel#initialscrolltofirstunreadmessage/) is set to true.

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

### setLastRead

Setter for the `lastRead` state in `Channel`.

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

### setTargetedMessage

Setter for the `targetedMessage` state in `Channel`.

| Type                          |
| ----------------------------- |
| `(messageId: string) => void` |

### `targetedMessage`

ID of the currently highlighted message. Set when you load a channel around a message using [loadChannelAroundMessage](#loadchannelaroundmessage).

| 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 users currently watching the channel.

| Type   |
| ------ |
| number |

### EmptyStateIndicator

Renders when the channel has no messages.

| Type          | Default                                                                                                                                             |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/Indicators/EmptyStateIndicator.tsx) |

### NetworkDownIndicator

Renders an indicator at the top of the channel when the network/connection is down.

| Type          | Default                                                                                                                                                |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | [NetworkDownIndicator](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/MessageList/NetworkDownIndicator.tsx) |


---

This page was last updated at 2026-04-17T17:33:44.324Z.

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