# ChatContext

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

## Best Practices

- Prefer `useChatContext` over `useContext(ChatContext)` for consistency.
- Read `isOnline` before showing connection-dependent UI or actions.
- Keep a single client instance in context to avoid race conditions.
- Use the context-provided `ImageComponent` to keep image rendering consistent.
- Treat `mutedUsers` as read-only UI state; change it via client methods.

## Basic Usage

Consume `ChatContext` in any child of `Chat`:

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

const { client, isOnline } = useContext(ChatContext);
```

Alternatively, use the `useChatContext` hook.

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

const { client, isOnline } = useChatContext();
```

## Value

### client

Stream Chat client instance.

| Type                                                        |
| ----------------------------------------------------------- |
| [`StreamChat`](https://github.com/GetStream/stream-chat-js) |

### `connectionRecovering`

`true` when the WebSocket connection is disconnected and being recovered.

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

### isOnline

`true` when the current user is connected.

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

### ImageComponent

Drop-in replacement for all underlying [`Image`](https://reactnative.dev/docs/next/image) components in the SDK. Useful for offline image caching. See the [Offline Support Guide](/chat/docs/sdk/react-native/v8/basics/offline-support/).

| Type          | Default                                            |
| ------------- | -------------------------------------------------- |
| ComponentType | [`Image`](https://reactnative.dev/docs/next/image) |


### `mutedUsers`

Users muted by the current user.

| Type  |
| ----- |
| array |


---

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

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