---
id: chat
sidebar_position: 2
title: Chat
---

import Client from '../common-content/core-components/chat/props/client.mdx'
import I18nInstance from '../common-content/core-components/overlay-provider/props/i18n_instance.mdx';

`Chat` provides the [ChatContext](../contexts/chat_context.mdx), [TranslationContext](../contexts/translation_context.mdx), and [ThemeContext](../contexts/theme_context.mdx) to its child components.
`Chat` is the second highest level component in the Stream Chat for React Native library with only the [`OverlyProvider`](./overlay_provider.mdx) 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](../contexts/chat_context.mdx#isonline) indicates the status of the connection.

## Basic Usage

`Chat` should be rendered inside of the `OverlayProvider` and if you choose can be implemented at a high level of your application, similar to the `OverlayProvider`.

```tsx {8,10}
import { StreamChat } from 'stream-chat'; 
import { ChannelList, Chat, OverlayProvider } from 'stream-chat-react-native';

const client = StreamChat.getInstance('api_key');

export const App = () =>
  <OverlayProvider>
    <Chat client={client}>
      <ChannelList />
    </Chat>
  </OverlayProvider>;
```

## Context Providers

`Chat` contains providers for the `ChatContext`, `ThemeContext`, and `TranslationContext`.
These can be accessed using the corresponding hooks.

| Context | Hook |
| - | - |
| `ChatContext` | `useChatContext` |
| `ThemeContext` | `useTheme` |
| `TranslationContext` | `useTranslationContext` |

## Props

### <div class="label required">required</div> **client**

<Client />

### 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

<I18nInstance />

### style

A `theme` object to customize the styles of SDK components.
Detailed information on theming can be found in the [customization documentation](../customization/theming.mdx).

:::note

Themes are inherited from parent providers.
A [theme provided to the `OverlayProvider`](./overlay_provider.mdx#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.

:::


| Type |
| - |
| object |