useCreateChatClient

Creates a Chat client and automatically connects/disconnects a user.

Best Practices

Pass stable apiKey, userData, and tokenOrProvider values to avoid reconnect loops.
Use a token provider for production to handle token refresh securely.
Treat the returned client as nullable during initial render and handle loading states.
Disconnect the user on logout by unmounting or changing the hook inputs.
Keep options consistent to avoid recreating the client unexpectedly.

Usage

import {
  Chat,
  OverlayProvider,
  useCreateChatClient,
} from "stream-chat-react-native";
import { ActivityIndicator, View } from "react-native";

const App = () => {
  const chatClient = useCreateChatClient({
    apiKey: "YOUR_API_KEY",
    userData: {
      id: "YOUR_USER_ID",
      name: "YOUR_USER_NAME",
    },
    tokenOrProvider: "YOUR_TOKEN_OR_PROVIDER",
  });

  if (!chatClient) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <OverlayProvider>
      <Chat client={chatClient}>{/** Your app components */}</Chat>
    </OverlayProvider>
  );
};

The hook returns null while the client is being created and the user is being connected. Make sure to handle this loading state in your component to prevent rendering errors. Never pass null to the Chat component's client prop.

Parameters

Name	Type	Required	Description
apiKey	`string`	Yes	The API key for the Stream Chat API.
userData	`OwnUserResponse` \| `UserResponse`	Yes	The user data for the user to connect.
tokenOrProvider	`TokenOrProvider`	Yes	The token or provider for the user to connect.
options	`StreamChatOptions`	No	The options for the Chat client.

Returns

Type	Description
`StreamChat` \| `null`	The Chat client instance, or `null` if the client is still connecting

ChatContext

Contexts Overview