ChatContext

ChatContext is provided by Chat. If you are not familiar with the React Context API, see the React docs.

Best Practices

  • Prefer useChatContext over useContext(ChatContext) for consistency.
  • Read isOnline before showing connection-dependent UI or actions.
  • Keep a single client instance in context to avoid race conditions.
  • Treat mutedUsers as read-only UI state; change it via client methods.

Basic Usage

Consume ChatContext in any child of Chat:

import { useContext } from "react";
import { ChatContext } from "stream-chat-react-native";

const { client, isOnline } = useContext(ChatContext);

Alternatively, use the useChatContext hook.

import { useChatContext } from "stream-chat-react-native";

const { client, isOnline } = useChatContext();

Values

ValueDescriptionType
clientStream Chat client instance.StreamChat
appSettingsApp settings for the connected client.AppSettingsAPIResponse
connectionRecoveringtrue when the WebSocket connection is disconnected and being recovered.boolean
enableOfflineSupportEnables offline support for the chat. When enabled, messages and channels are cached locally and the app can work without an internet connection. Requires @op-engineering/op-sqlite to be installed. See the offline support documentation for more details on setting this up. Defaults to false.boolean
isOnlinetrue when the current user is connected.boolean
mutedUsersUsers muted by the current user.array
isMessageAIGeneratedA callback that determines whether a message was AI generated. Defaults to () => false.(message: LocalMessage) => boolean

ImageComponent is provided through WithComponents and can be read via useComponentsContext():

const { ImageComponent } = useComponentsContext();