Chat

Chat provides the ChatContext, TranslationContext, and ThemeContext to its child components. Chat is the second highest level component in the Stream Chat for React Native library with only the OverlyProvider 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 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.

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

required

client

Instance of StreamChat client.

Type
StreamChat

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

Instance of Streami18n class used for internationalization. Please read more in the translations docs for details on creation and customization.

Type
Streami18n

style

A theme object to customize the styles of SDK components. Detailed information on theming can be found in the customization documentation.

note

Themes are inherited from parent providers. A theme provided to the OverlayProvider 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