# ChatContext

`ChatContext` is provided by [`Chat`](https://getstream.io/chat/docs/sdk/react-native/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.
- 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();
```

## Values

| Value                  | Description                                                                                                                                                                                                                                                                                                                                                    | Type                                                                                             |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| `client`               | Stream Chat client instance.                                                                                                                                                                                                                                                                                                                                   | [`StreamChat`](https://github.com/GetStream/stream-chat-js)                                      |
| `appSettings`          | App settings for the connected client.                                                                                                                                                                                                                                                                                                                         | [`AppSettingsAPIResponse`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts) |
| `channel`              | The currently active channel instance.                                                                                                                                                                                                                                                                                                                         | [`Channel`](https://getstream.io/chat/docs/javascript/creating-channels/)                                            |
| `connectionRecovering` | `true` when the WebSocket connection is disconnected and being recovered.                                                                                                                                                                                                                                                                                      | `boolean`                                                                                        |
| `enableOfflineSupport` | Enables offline support for the chat. When enabled, messages and channels are cached locally and the app can work without an internet connection. Requires `@op-engineering/op-sqlite` to be installed. See the [offline support documentation](https://getstream.io/chat/docs/sdk/react-native/basics/offline-support/) for more details on setting this up. Defaults to `false`. | `boolean`                                                                                        |
| `isOnline`             | `true` when the current user is connected. `null` during initial connection detection.                                                                                                                                                                                                                                                                         | `boolean \| null`                                                                                |
| `mutedUsers`           | Users muted by the current user.                                                                                                                                                                                                                                                                                                                               | `array`                                                                                          |
| `setActiveChannel`     | Callback to set the active channel.                                                                                                                                                                                                                                                                                                                            | `(newChannel?: Channel) => void`                                                                 |
| `isMessageAIGenerated` | A callback that determines whether a `message` was AI generated. Defaults to `() => false`.                                                                                                                                                                                                                                                                    | `(message: LocalMessage) => boolean`                                                             |

`ImageComponent` is provided through [`WithComponents`](https://getstream.io/chat/docs/sdk/react-native/customization/custom-components/) and can be read via `useComponentsContext()`:

```tsx
const { ImageComponent } = useComponentsContext();
```

---

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