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 OverlayProvider 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.

General Usage

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

tip

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

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>
  );
};

success

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.

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

resizableCDNHosts

This option allows you to specify a list of CDNs that offer image resizing.

Type	Default
string[]	['.stream-io-cdn.com']

UI Component Props

ImageComponent

Drop in replacement of all the underlying Image components within SDK. This is useful for the purpose of offline caching of images. Please check the Offline Support Guide for usage.

Type	Default
ComponentType	Image