One-to-One / Group Chat

Build focused CometChat React Native UI Kit one-to-one or group chat screens in Expo with headers, message lists, and composers.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-react-native
Framework	Expo
Components	CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer
Layout	Single chat window — no conversation list
Prerequisite	Complete Expo Integration Steps 1–4 first
Pattern	Support 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 Expo 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

---

Step 1 — Update App.tsx

TypeScript

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;

JavaScript

App.js

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,
  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 = () => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [selectedUser, setSelectedUser] = useState();
  const [selectedGroup, setSelectedGroup] = useState();

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

      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;

---

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);

---

Step 2 — Run the Project

iOS

npx expo run:ios

Android

npx expo run:android

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

Expo Integration

Back to the main setup guide

Core Features

Chat features included out of the box