# Chat

`Chat` provides [ChatContext](/chat/docs/sdk/react-native/v9/contexts/chat-context/), [TranslationContext](/chat/docs/sdk/react-native/v9/contexts/translation-context/), and [ThemeContext](/chat/docs/sdk/react-native/v9/contexts/theme-context/) to child components. It sits below [`OverlayProvider`](/chat/docs/sdk/react-native/v9/core-components/overlay-provider/).

`Chat` also tracks the WebSocket connection. See `isOnline` in [ChatContext](/chat/docs/sdk/react-native/v9/contexts/chat-context#isonline/).

## Best Practices

- Keep a single `Chat` provider per app unless you have a strong reason to isolate contexts.
- Use `useCreateChatClient` or a centralized client factory to avoid duplicate connections.
- Disconnect the client on logout to prevent stale sessions.
- Set `closeConnectionOnBackground` to match your push strategy (push requires no active socket).
- Pass theming and i18n consistently so children read from the same context.

## General Usage

Render `Chat` inside `OverlayProvider` at a high level in your app.

<admonition type="info">

Use a single `Chat` provider per app unless you have a strong reason not to.

</admonition>

```tsx {4,5,6,7,15,16,17,18,19,23,25,28-30}
import { StreamChat } from "stream-chat";
import {
  ChannelList,
  Chat,
  OverlayProvider,
  useCreateChatClient,
} from "stream-chat-react-native";

const chatApiKey = "REPLACE_WITH_API_KEY";
const chatUserId = "REPLACE_WITH_USER_ID";
const chatUserName = "REPLACE_WITH_USER_NAME";
const chatUserToken = "REPLACE_WITH_USER_TOKEN";

const user = {
  id: chatUserId,
  name: chatUserName,
};

export const App = () => {
  const chatClient = useCreateChatClient({
    apiKey: chatApiKey,
    userData: user,
    tokenOrProvider: chatUserToken,
  });

  if (!chatClient) {
    return null;
  }

  return (
    <OverlayProvider>
      <Chat client={chatClient}>
        <ChannelList />
      </Chat>
    </OverlayProvider>
  );
};
```

<admonition type="tip">

You can use `useCreateChatClient` from `stream-chat-react-native`/`stream-chat-expo` to create a client and handle connect/disconnect.

</admonition>

## Context Providers

`Chat` provides `ChatContext`, `ThemeContext`, and `TranslationContext` via their hooks.

| Context                                                                                                                                                   | Hook                    |
| --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| [`ChatContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/chatContext/ChatContext.tsx)                      | `useChatContext`        |
| [`ThemeContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/themeContext/ThemeContext.tsx)                   | `useTheme`              |
| [`TranslationContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/translationContext/TranslationContext.tsx) | `useTranslationContext` |

## Props

### `client`

Stream Chat client instance.

| Type                                                                                 |
| ------------------------------------------------------------------------------------ |
| [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts) |

### `closeConnectionOnBackground`

When `false`, the WebSocket stays connected in the background. For push notifications, the user must not have an active WebSocket connection. By default, the socket disconnects in background and reconnects on foreground.

| Type    | Default |
| ------- | ------- |
| Boolean | `true`  |

### `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](/chat/docs/sdk/react-native/v9/basics/offline-support/) for more details on setting this up.

| Type    | Default |
| ------- | ------- |
| Boolean | `false` |

### `i18nInstance`

`Streami18n` instance for internationalization. See [translations docs](/chat/docs/sdk/react-native/v9/basics/translations/).

| Type                                                                |
| ------------------------------------------------------------------- |
| [`Streami18n`](/chat/docs/sdk/react-native/v9/basics/translations/) |

### `style`

A `theme` object to customize styles. See [theming docs](/chat/docs/sdk/react-native/v9/customization/theming/).

<admonition type="note">

Themes are inherited from parent providers. A [theme provided to `OverlayProvider`](/chat/docs/sdk/react-native/v9/core-components/overlay-provider#value/) is the base theme that `style` merges into. Themes are not hoisted; a theme on `Chat` won't affect overlay components like the attachment picker.

</admonition>

| Type   |
| ------ |
| Object |

### `isMessageAIGenerated`

A callback that determines whether a `message` was AI generated. The default returns `false`.

| Type                               | Default     |
| ---------------------------------- | ----------- |
| (message: LocalMessage) => boolean | () => false |

## UI Component Props

### `ImageComponent`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/ui-components/chat/props/image_component"></partial>

### `LoadingIndicator`

Custom loading indicator for the chat loading state (for example, before the DB is initialized).

| Type                                     | Default |
| ---------------------------------------- | ------- |
| `ComponentType` \| `null` \| `undefined` | `null`  |


---

This page was last updated at 2026-04-03T17:24:35.668Z.

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