import { useContext } from "react";
import { ChatContext } from "stream-chat-react-native";
const { client, isOnline } = useContext(ChatContext);ChatContext
ChatContext is provided by Chat. If you are not familiar with the React Context API, see the React docs.
Best Practices
- Prefer
useChatContextoveruseContext(ChatContext)for consistency. - Read
isOnlinebefore showing connection-dependent UI or actions. - Keep a single client instance in context to avoid race conditions.
- Treat
mutedUsersas read-only UI state; change it via client methods.
Basic Usage
Consume ChatContext in any child of Chat:
Alternatively, use the useChatContext hook.
import { useChatContext } from "stream-chat-react-native";
const { client, isOnline } = useChatContext();Values
| Value | Description | Type |
|---|---|---|
client | Stream Chat client instance. | StreamChat |
appSettings | App settings for the connected client. | AppSettingsAPIResponse |
connectionRecovering | true when the WebSocket connection is disconnected and being recovered. | boolean |
enableOfflineSupport | Enables 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 |
isOnline | true when the current user is connected. | boolean |
mutedUsers | Users muted by the current user. | array |
isMessageAIGenerated | A 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();