# ChannelContext

`ChannelContext` is provided by [`Channel`](/chat/docs/sdk/react-native/v3/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

<partial id="chat-sdk/react-native/v3/_partials/common-content/core-components/channel/props/channel"></partial>

### enforceUniqueReaction

<partial id="chat-sdk/react-native/v3/_partials/common-content/core-components/channel/props/enforce_unique_reaction"></partial>

### disabled

<partial id="chat-sdk/react-native/v3/_partials/common-content/contexts/channel-context/disabled"></partial>

### 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](/chat/docs/javascript/channel_features/#edit-a-channel-type/).

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

### hideDateSeparators

<partial id="chat-sdk/react-native/v3/_partials/common-content/core-components/channel/props/hide_date_separators"></partial>

### hideStickyDateHeader

<partial id="chat-sdk/react-native/v3/_partials/common-content/core-components/channel/props/hide_sticky_date_header"></partial>

### `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

<partial id="chat-sdk/react-native/v3/_partials/common-content/core-components/channel/props/loading_indicator"></partial>

### `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

<partial id="chat-sdk/react-native/v3/_partials/common-content/core-components/channel/props/max_time_between_grouped_messages"></partial>

### members

<partial id="chat-sdk/react-native/v3/_partials/common-content/contexts/channel-context/members"></partial>

### 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/watch_channel/) API call.

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

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

### readEventsEnabled

<partial id="chat-sdk/react-native/v3/_partials/common-content/core-components/channel/props/read_events_enabled"></partial>

### `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

<partial id="chat-sdk/react-native/v3/_partials/common-content/contexts/channel-context/scroll_to_first_unread_threshold"></partial>

### 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 |

### typingEventsEnabled

<partial id="chat-sdk/react-native/v3/_partials/common-content/core-components/channel/props/typing_events_enabled"></partial>

### watchers

<partial id="chat-sdk/react-native/v3/_partials/common-content/contexts/channel-context/watchers"></partial>

### `watcherCount`

Total number of users, currently watching a channel.

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

### EmptyStateIndicator

<partial id="chat-sdk/react-native/v3/_partials/common-content/core-components/channel/props/empty_state_indicator"></partial>

### NetworkDownIndicator

<partial id="chat-sdk/react-native/v3/_partials/common-content/core-components/channel/props/network_down_indicator"></partial>

---

This page was last updated at 2025-08-15T14:16:10.669Z.

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