# Chat

`Chat` provides the [ChatContext](/chat/docs/sdk/react-native/v6/contexts/channel-context/), [TranslationContext](/chat/docs/sdk/react-native/v6/contexts/translation-context/), and [ThemeContext](/chat/docs/sdk/react-native/v6/contexts/theme-context/) to its child components.
`Chat` is the second highest level component in the Stream Chat for React Native library with only the [`OverlayProvider`](/chat/docs/sdk/react-native/v6/core-components/overlay-provider/) at a higher level.

`Chat` is also responsible for tracking the health of the WebSocket connection with Stream Chat server.
The value `isOnline` provided by the [ChatContext](/chat/docs/sdk/react-native/v6/contexts/chat-context#isonline/) indicates the status of the connection.

## General Usage

`Chat` should be rendered inside of the `OverlayProvider` at a high level of your application, similar to the `OverlayProvider`.

<admonition type="info">

We recommend using only one instance of `Chat` provider per application unless absolutely needed.

</admonition>

```tsx {4,5,6,7,15,16,17,18,19,23,25}
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,
  });

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

<admonition type="tip">

You can use the `useCreateChatClient` hook from `stream-chat-react-native`/`stream-chat-expo` to create a client instance and automatically connect/disconnect a user as per the example above, for simplicity.

</admonition>

## Context Providers

`Chat` contains providers for the `ChatContext`, `ThemeContext`, and `TranslationContext`.
These can be accessed using the corresponding 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`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/chat/props/client"></partial>

### `closeConnectionOnBackground`

When set to false the WebSocket connection won't disconnect when sending the app to the background.
To receive push notifications it's necessary that user doesn't have an active WebSocket connection.
By default the WebSocket connection is disconnected when the app goes to the background, and reconnects when app comes to the foreground.

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

### `i18nInstance`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/overlay-provider/props/i18n_instance"></partial>

### `style`

A `theme` object to customize the styles of SDK components.
Detailed information on theming can be found in the [customization documentation](/chat/docs/sdk/react-native/v6/customization/theming/).

<admonition type="note">

Themes are inherited from parent providers.
A [theme provided to the `OverlayProvider`](/chat/docs/sdk/react-native/v6/core-components/overlay-provider#value/) will be the base theme `style` is merged into.
Themes are not hoisted though, therefore a theme provided to `Chat` will not change overlay components such as the attachment picker.

</admonition>

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

## UI Component Props

### `ImageComponent`

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

### `LoadingIndicator`

Custom loading indicator component to be used to represent the loading state of the chat.

This can be used during the phase when db is not initialised.

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

### isMessageAIGenerated

A callback function responsible for determining whether a `message` was AI generated. Default function implementation just returns boolean value `false`.

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

---

This page was last updated at 2025-08-19T14:51:55.866Z.

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