Skip to main content
FieldValue
Package@cometchat/chat-uikit-react-native
FrameworkReact Native CLI
ComponentsCometChatMessageHeader, CometChatMessageList, CometChatMessageComposer
LayoutSingle chat window — no conversation list
PrerequisiteComplete React Native CLI Integration Steps 1–4 first
PatternSupport chat, embedded widgets, focused messaging
This guide builds a single chat window — no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience. This assumes you’ve already completed React Native CLI Integration (project created, UI Kit installed, init + login working).

​
What You’re Building

Three components stacked vertically:
  1. Chat header — displays recipient name, avatar, online status, and optional call buttons
  2. Message list — real-time chat history with scrolling
  3. Message composer — text input with media, emojis, and send button
No additional files to create — everything goes in App.tsx.

​
Step 1 — Update App.tsx

The app fetches a user (or group) on mount and renders the three message components.
App.tsx
import React, { useEffect, useState } from "react";
import { View, Text, StyleSheet } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatUIKit,
  UIKitSettings,
  CometChatThemeProvider,
  CometChatI18nProvider,
} from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

const APP_ID = "APP_ID";
const AUTH_KEY = "AUTH_KEY";
const REGION = "REGION";
const LOGIN_UID = "cometchat-uid-1";

// The user or group to chat with
const CHAT_WITH_UID = "cometchat-uid-2"; // Replace with actual UID
// const CHAT_WITH_GUID = "GUID"; // Uncomment for group chat

const App = (): React.ReactElement => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [selectedUser, setSelectedUser] = useState<CometChat.User>();
  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group>();

  useEffect(() => {
    const init = async () => {
      const uiKitSettings: UIKitSettings = {
        appId: APP_ID,
        authKey: AUTH_KEY,
        region: REGION,
        subscriptionType: CometChat.AppSettings
          .SUBSCRIPTION_TYPE_ALL_USERS as UIKitSettings["subscriptionType"],
      };

      try {
        await CometChatUIKit.init(uiKitSettings);
        await CometChatUIKit.login({ uid: LOGIN_UID });
        setLoggedIn(true);

        // Fetch the user to chat with
        const user = await CometChat.getUser(CHAT_WITH_UID);
        setSelectedUser(user);

        // For group chat, uncomment below:
        // const group = await CometChat.getGroup(CHAT_WITH_GUID);
        // setSelectedGroup(group);
      } catch (err) {
        console.error("Init/login/fetch error:", err);
      }
    };

    init();
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <CometChatI18nProvider>
          <SafeAreaView style={styles.fullScreen}>
            <CometChatThemeProvider>
              {loggedIn && (selectedUser || selectedGroup) ? (
                <View style={styles.messagesWrapper}>
                  <CometChatMessageHeader
                    user={selectedUser}
                    group={selectedGroup}
                  />
                  <CometChatMessageList
                    user={selectedUser}
                    group={selectedGroup}
                  />
                  <CometChatMessageComposer
                    user={selectedUser}
                    group={selectedGroup}
                  />
                </View>
              ) : (
                <View style={styles.emptyState}>
                  <Text style={styles.emptyText}>
                    Set a user or group UID in App.tsx to start chatting
                  </Text>
                </View>
              )}
            </CometChatThemeProvider>
          </SafeAreaView>
        </CometChatI18nProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  fullScreen: {
    flex: 1,
  },
  messagesWrapper: {
    flex: 1,
  },
  emptyState: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5F5F5",
  },
  emptyText: {
    color: "#727272",
    fontSize: 14,
  },
});

export default App;
Key points:
  • CometChat.getUser(UID) fetches the user object from the SDK — you need a real user object, not a manually constructed one
  • Pass either user or group to the message components, never both
  • The highlighted constants show where to set the UID or swap to group chat

​
Switching Between User and Group Chat

To load a group chat instead of one-to-one, replace the getUser call with getGroup: 
const CHAT_WITH_GUID = "GUID"; // Replace with your actual Group ID

const group = await CometChat.getGroup(CHAT_WITH_GUID);
setSelectedGroup(group);
You can also determine this dynamically — for example, based on a route parameter or a selection from another part of your app.

​
Step 2 — Run the Project

npx react-native run-ios
You should see the chat window load with the conversation for the UID you set.

​
Next Steps

Theming

Customize colors, fonts, and styles to match your brand

Components Overview

Browse all prebuilt UI components

React Native CLI Integration

Back to the main setup guide

Core Features

Chat features included out of the box