Getting Started

npx @react-native-community/cli init ChattingApp

npm i @cometchat/chat-uikit-react-native

npm i @cometchat/chat-sdk-react-native
npm i @react-native-community/datetimepicker
npm i @react-native-clipboard/clipboard
npm i react-native-svg
npm i react-native-video
npm i dayjs
npm i @react-native-async-storage/async-storage

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

import React, { useEffect } from "react";
import {
  CometChatUIKit,
  UIKitSettings,
} from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

useEffect(() => {
  let uikitSettings: UIKitSettings = {
    appId: "Enter your App ID here", // Replace with your CometChat App ID
    authKey: "Enter your Auth Key here", // Replace with your App Auth Key
    region: "Enter your App Region here", // e.g., "us", "in"
    subscriptionType: CometChat.AppSettings
      .SUBSCRIPTION_TYPE_ALL_USERS as UIKitSettings["subscriptionType"],
  };

  CometChatUIKit.init(uikitSettings)
    .then(() => {
      console.log("CometChatUiKit successfully initialized");
    })
    .catch((error) => {
      console.log("Initialization failed with exception:", error);
    });
}, []);

// Replace with the actual user ID you want to log in
const uid = "<YOUR_USER_UID>";

// Login user with CometChatUIKit
CometChatUIKit.login({ uid })
  .then((user) => {
    // Login successful
    console.log(`User logged in successfully: ${user.getName()}`);
  })
  .catch((error) => {
    // Handle login error
    console.error("Login failed with error:", error);
  });

import React, { useEffect, useState } from "react";
import { SafeAreaView, ViewStyle } from "react-native";
import {
  CometChatConversations,
  CometChatUIKit,
  CometChatUiKitConstants,
  UIKitSettings,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

import Messages from "./src/components/Messages";

/* -------------------------------------------------------------------------- */
/*  ⚙️  Replace the placeholders below with your own CometChat credentials.    */
/* -------------------------------------------------------------------------- */
const APP_ID = "<APP_ID>"; // e.g. "123456abc"
const AUTH_KEY = "<AUTH_KEY>"; // e.g. "0b1c2d3e4f5g6h7i8j9k"
const REGION = "<REGION>"; // e.g. "us" | "eu" | "in"
const DEMO_UID = "<UID>"; // e.g. "john_doe"
/* -------------------------------------------------------------------------- */

/**
 * App
 * ---
 * The root component:
 *  1. Initializes the CometChat UI Kit.
 *  2. Logs a demo user in.
 *  3. Shows either the conversation list or an active chat screen.
 */
const App = (): React.ReactElement => {
  /* ------------------------------------------------------------------ */
  /* Local state                                                         */
  /* ------------------------------------------------------------------ */
  const [loggedIn, setLoggedIn] = useState(false);
  const [messageUser, setMessageUser] = useState<CometChat.User>();
  const [messageGroup, setMessageGroup] = useState<CometChat.Group>();

  /* ------------------------------------------------------------------ */
  /* One-time initialization                                             */
  /* ------------------------------------------------------------------ */
  useEffect(() => {
    const init = async () => {
      // 1️⃣  Configure the UI Kit.
      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);
        console.log("[CometChatUIKit] initialized");

        // 2️⃣  Login.
        await CometChatUIKit.login({ uid: DEMO_UID });
        setLoggedIn(true);
      } catch (err) {
        console.error("[CometChatUIKit] init/login error", err);
      }
    };

    init();
  }, []);

  /* ------------------------------------------------------------------ */
  /* Render                                                              */
  /* ------------------------------------------------------------------ */
  return (
    <SafeAreaView style={styles.fullScreen}>
      <CometChatThemeProvider>
        {/* Show conversations only after the user is logged in */}
        {loggedIn && (
          <>
            {/* Conversation list (hidden when a chat is open) */}
            <CometChatConversations
              style={{
                containerStyle: {
                  display: messageUser || messageGroup ? "none" : "flex",
                },
              }}
              onItemPress={(conversation: CometChat.Conversation) => {
                if (
                  conversation.getConversationType() ===
                  CometChatUiKitConstants.ConversationTypeConstants.user
                ) {
                  setMessageUser(
                    conversation.getConversationWith() as CometChat.User
                  );
                  return;
                }
                setMessageGroup(
                  conversation.getConversationWith() as CometChat.Group
                );
              }}
            />

            {/* Active chat screen */}
            {(messageUser || messageGroup) && (
              <Messages
                user={messageUser}
                group={messageGroup}
                onBack={() => {
                  setMessageUser(undefined);
                  setMessageGroup(undefined);
                }}
              />
            )}
          </>
        )}
      </CometChatThemeProvider>
    </SafeAreaView>
  );
};

/* -------------------------------------------------------------------------- */
/* Styles                                                                     */
/* -------------------------------------------------------------------------- */
const styles: { fullScreen: ViewStyle } = {
  fullScreen: { flex: 1 },
};

export default App;

import React from "react";
import { View, StyleSheet } from "react-native";
import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

/**
 * Messages
 * --------
 * A self-contained chat screen that combines the **CometChatMessageHeader**, **CometChatMessageList**,
 * and **CometChatMessageComposer** provided by the CometChat React-Native UI Kit.
 *
 * Props
 * -----
 * • `user`  – (CometChat.User, optional) Target user for a 1-to-1 conversation.
 * • `group` – (CometChat.Group, optional) Target group for a group conversation.
 * • `onBack`— () ⇒ void Callback fired when the back button in the header is pressed.
 *
 */
const Messages = ({
  user,
  group,
  onBack,
}: {
  user?: CometChat.User;
  group?: CometChat.Group;
  onBack: () => void;
}) => {
  return (
    <View /* root container fills the entire screen */ style={styles.root}>
      {/* Top bar: avatar, name & back button */}
      <CometChatMessageHeader
        user={user}
        group={group}
        onBack={onBack}
        showBackButton
      />

      {/* Scrollable list of chat messages */}
      <CometChatMessageList user={user} group={group} />

      {/* Input field + action buttons (emoji, attach, send, etc.) */}
      <CometChatMessageComposer user={user} group={group} />
    </View>
  );
};

const styles = StyleSheet.create({
  /** Ensures the component stretches to use all available space */
  root: {
    flex: 1,
  },
});

export default Messages;