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.

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

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.

ContextHook
ChatContextuseChatContext
ThemeContextuseTheme
TranslationContextuseTranslationContext

Props

client

Instance of StreamChat 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.

TypeDefault
Booleantrue

i18nInstance

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

style

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

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

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.

TypeDefault
ComponentTypeImage

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.

TypeDefault
ComponentType | null | undefinednull

isMessageAIGenerated

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

TypeDefault
(message: MessageType) => boolean() => false
© Getstream.io, Inc. All Rights Reserved.