# ChannelContext

> **Info:** This is release candidate documentation for **Stream Chat React Native SDK v10**. For the latest stable version, see the [latest version (v9)](https://getstream.io/chat/docs/sdk/react-native/).

`ChannelContext` holds the channel that [`Channel`](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/channel/channel/) or `Thread` binds, and the display options of the message list that are set on them. Read it with `useChannelContext()`. [How components connect to state](https://getstream.io/chat/docs/sdk/react-native/v10/ui/how-components-connect-to-state/#contexts) shows where it sits among the other contexts.

## Best practices

- Read the channel with `useChannel()` in a component that renders in both a channel and a thread. Inside a `Thread`, `ChannelContext` holds the thread's channel too, and `useChannel()` reads the thread's channel first, so it stays right if the two ever differ.
- Read the channel's state from its stores with `useStateStore`: its data, members, read state and typing are in `channel.state`, and its messages in `channel.messagePaginator`. `ChannelContext` holds the channel object, which doesn't change when its state does, so the context won't re-render your component for them. See [Reading state in components](https://getstream.io/chat/docs/sdk/react-native/v10/ui/reading-state-in-components/).
- Mark the channel read with `useMarkRead(channel)`, and jump to messages with `useMessagePaginator()`. See [Message paginators](https://getstream.io/chat/docs/sdk/react-native/v10/state/loading-data/message-paginators/).
- Call `useChannelContext()` only inside `Channel` or `Thread`. It throws anywhere else.

## Basic usage

```tsx title="src/MemberCount.tsx"
import { Text } from "react-native";
import type { ChannelStateData } from "stream-chat";
import { useChannelContext, useStateStore } from "stream-chat-react-native";

const memberCountSelector = ({ data }: ChannelStateData) => ({
  memberCount: data?.member_count ?? 0,
});

export const MemberCount = () => {
  const { channel } = useChannelContext();
  const { memberCount } = useStateStore(channel.state, memberCountSelector);

  return <Text>{memberCount} members</Text>;
};
```

The context gives the channel, and the store gives a value that updates when members join or leave.

## Values

| Value                                 | Type                           | Description                                                                                                                                              |
| ------------------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `allowDateSeparatorForSystemMessages` | `boolean`                      | The `allowDateSeparatorForSystemMessages` prop, `false` by default.                                                                                      |
| `channel`                             | `Channel`                      | The channel `Channel` renders: the one you passed, or the object that superseded it. Inside a `Thread`, the thread's channel.                            |
| `disabled`                            | `boolean \| undefined`         | `true` while the channel is frozen. The message list hides its scroll-to-bottom button then.                                                             |
| `enableMessageGroupingByUser`         | `boolean \| undefined`         | The `enableMessageGroupingByUser` prop, `true` by default.                                                                                               |
| `enforceUniqueReaction`               | `boolean`                      | The `enforceUniqueReaction` prop, `false` by default.                                                                                                    |
| `hasPendingInitialTargetLoad`         | `(() => boolean) \| undefined` | Internal. Tells the message lists whether `Channel` or `Thread` is about to jump to a message, so the list doesn't pick its own starting position first. |
| `hideDateSeparators`                  | `boolean`                      | The `hideDateSeparators` prop, `false` by default.                                                                                                       |
| `hideStickyDateHeader`                | `boolean`                      | The `hideStickyDateHeader` prop, `false` by default.                                                                                                     |
| `maxTimeBetweenGroupedMessages`       | `number \| undefined`          | The `maxTimeBetweenGroupedMessages` prop. `undefined`, the default, puts no time limit on a group.                                                       |

The value is rebuilt only when the channel object or its `frozen` state changes. A new value of one of the props above, passed while the same channel stays mounted, doesn't reach the context until then.

## Related hooks

- `useChannelContext()` returns the value above, and throws outside `Channel` and `Thread`.
- `useChannel()` returns the channel: the thread's channel inside a `Thread`, otherwise `ChannelContext`'s.
- `useMessagePaginator()` returns the message list's paginator: the thread's inside a `Thread`, otherwise the channel's.
- `useOwnCapabilitiesContext()` returns what the user may do in the channel. See [OwnCapabilitiesContext](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/channel/owncapabilitiescontext/).

[Channel and thread hooks](https://getstream.io/chat/docs/sdk/react-native/v10/reference/hooks/channel-and-thread-hooks/) lists the hooks that read a channel's state.

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/channel/channelcontext/](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/channel/channelcontext/).