Skip to main content
The CometChat UI Kit for React Native ships with ready-to-use chat and calling components plus flexible theming. It works with both React Native CLI and Expo, letting you wire chat into mobile apps quickly. With native-ready views for conversations, one-to-one or group chat, and call logs, you can launch messaging experiences without rebuilding core UI.

​
Prerequisites

Before installing the React Native UI Kit, create a CometChat app in the CometChat Dashboard and keep these values handy:
  1. App ID
  2. Region
  3. Auth Key (for quick starts) or Auth Token (for production)
Development setup:
  • Node.js with npm or Yarn.
  • React Native CLI (Xcode + Android Studio) or Expo CLI.
  • A device or simulator/emulator.
  • Android builds need camera and mic permissions for calling.

​
Register & Set Up CometChat

  1. Sign up or sign in at the CometChat Dashboard.
  2. Create a new app and open Application → Credentials.
  3. Copy your App ID, Region, and Auth Key/Auth Token.
Each CometChat application can power multiple client apps. Users on the same CometChat app can chat across platforms (web, Android, iOS, React Native).

​
Built With

TechnologyDescription
Node.jsJavaScript runtime
React NativeCross-platform mobile framework
CometChat React Native UI KitPrebuilt chat UI components

​
Getting Started

​
Step 1: Create a React Native project

npx react-native init MyApp --template react-native-template-typescript
cd MyApp
Open the project in your editor and ensure iOS/Android tooling is set up.

​
Step 2: Install dependencies

Install the UI Kit (includes the Chat SDK): 
npm install @cometchat/chat-uikit-react-native @cometchat/chat-sdk-react-native
For tab-based navigation (see Tab Based Chat) also add React Navigation:
npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-safe-area-context react-native-screens

​
Step 3: Initialize the UI Kit (App.tsx)

Call CometChatUIKit.init once on app start. On Android, request camera/mic permissions before initializing if you plan to use calling. 
// App.tsx
import { useEffect } from "react";
import { PermissionsAndroid, Platform } from "react-native";
import { CometChatUIKit, UIKitSettings } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

const UIKIT_SETTINGS: UIKitSettings = {
  appId: "APP_ID",
  authKey: "AUTH_KEY", // Use Auth Token for production
  region: "REGION",
  subscriptionType: CometChat.AppSettings.SUBSCRIPTION_TYPE_ALL_USERS,
};

export default function App() {
  useEffect(() => {
    const init = async () => {
      if (Platform.OS === "android") {
        await PermissionsAndroid.requestMultiple([
          PermissionsAndroid.PERMISSIONS.CAMERA,
          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
        ]);
      }

      await CometChatUIKit.init(UIKIT_SETTINGS);
      console.log("CometChat UI Kit initialized");
    };

    init();
  }, []);

  return null; // render your navigators/screens after login
}
For production, prefer Auth Tokens over Auth Keys for secure authentication. See loginUsingAuthToken.

​
Step 4: Log in a user

Use the UID of a user you created in the dashboard or via API/SDK. Log the user in after initialization. 
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native";

const UID = "cometchat-uid-1"; // replace with your UID

CometChatUIKit.getLoggedInUser().then((user) => {
  if (!user) {
    CometChatUIKit.login({ uid: UID })
      .then((loggedIn) => {
        console.log("Login Successful:", loggedIn);
        // Render your app screens here
      })
      .catch((error) => console.error("Login failed:", error));
  } else {
    // Already logged in; render your app
  }
});

​
Step 5: Pick your chat experience

Choose the layout that fits your UX. Each option is prebuilt and mobile-ready.

​
1️⃣ Conversation List + Message View

Best for: WhatsApp/Slack-style layouts that switch between multiple chats. Features:
  • Two-panel flow – list on one side, chat on the other; auto-hides list on mobile when a chat opens.
  • One-to-one & group switching – tap a row to open that user or group.
  • Real-time updates – live presence, typing indicators, and message sync.
Integrate Conversation List + Message

​
2️⃣ One-to-One/Group Chat

Best for: Focused, full-screen messaging without a sidebar. Features:
  • Dedicated chat window – pass a UID or GUID to render the chat.
  • Optimized for mobile – minimal chrome, maximum space for messages.
  • Composer controls – hides automatically if the user is blocked/read-only.
Integrate One-to-One/Group Chat

​
3️⃣ Tab-Based Chat Experience

Best for: Apps that need quick navigation between Chats, Calls, Users, and Groups. Features:
  • Bottom tabs + stack – tabs for lists, stack screen for messages.
  • Contextual lists – conversations, call logs, users, or groups per tab.
  • Mobile-first – header back button returns to tabs; supports hardware back handling.
Integrate Tab-Based Chat

​
Build your own

Prefer to assemble custom flows? Start with the component docs: