> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

## Start your first conversation

CometChat UI Kit for React Native is a collection of prebuilt UI components designed to simplify the development of an in-app chat with all the essential messaging features. Our UI Kit offers light and dark themes, various fonts, colors, and additional customization options.

CometChat UI Kit supports both one-to-one and group conversations. Follow the guide below to initiate conversations from scratch using CometChat React Native UI Kit.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/rwhg7oJFLB4eAI7-/images/4c141125-Instant_Messaging-3e86359342605c94dc912604de8f6617.png?fit=max&auto=format&n=rwhg7oJFLB4eAI7-&q=85&s=35a35e2f4dc3d3e7dc0959ddce629e72" width="1440" height="833" data-path="images/4c141125-Instant_Messaging-3e86359342605c94dc912604de8f6617.png" />
</Frame>

## Prerequisites

Before installing **UI Kit for React Native**, you need to create a CometChat application on the CometChat Dashboard, which comprises everything required in a chat service including users, groups, calls & messages. You will need the `App ID` , `AuthKey`, `Region` of your CometChat application when initialising the SDK.

**i. Register on CometChat**

* To install **UI Kit for React Native**, you need to first register on **CometChat Dashboard**. [Click here to sign up](https://app.cometchat.com/login).

**ii. Get Your Application Keys**

* Create a **new app**
* Head over to the **QuickStart** or **API & Auth Keys section** and note the **App ID**, **Auth Key**, and **Region**.

<Tip>
  Each CometChat application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.
</Tip>

***

## Getting Started

You can quickly start building a modern messaging experience into your app by installing the new UI Kit, an add-on for the CometChat React Native SDK.

***

Step 1

### Create a project

To get started, open `terminal` and create a new project using below command.

<Tabs>
  <Tab title="Bash">
    ```sh theme={null}
    npx @react-native-community/cli init ChattingApp
    ```

    <Warning>
      The CometChat React Native UI Kit is officially built and tested with React Native version 0.77.0 and above, up to the latest stable release. While it may work with older versions, they are not officially supported and could lead to unexpected issues.
    </Warning>
  </Tab>
</Tabs>

***

Step 2

### Add Dependency

You can install **UI Kit for React Native** through using below command.

<Tabs>
  <Tab title="Bash">
    ```sh theme={null}
    npm i @cometchat/chat-uikit-react-native
    ```
  </Tab>
</Tabs>

***

#### Other Dependencies

<Tabs>
  <Tab title="Bash">
    ```sh theme={null}
    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
    ```
  </Tab>
</Tabs>

***

#### Add Permissions for android

Open `AndroidManifest.xml` file from `android/app/src/main` location and add below permissions

<Tabs>
  <Tab title="XML">
    ```xml theme={null}
    <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" />
    ```
  </Tab>
</Tabs>

<Note>
  Please make sure Android SDK path is set in the `ANDROID_HOME` environment variable or in `local.properties` via the field `sdk.dir`.
</Note>

#### Install @cometchat/calls-sdk-react-native Package (Optional)

To enable calling functionality in your application, you need to install the Calling SDK separately within your project.

<Warning>
  React Native UI Kit supports Calls SDK V3 or higher.
</Warning>

1. You can install `@cometchat/calls-sdk-react-native` Calling SDK for React Native using below command.

   <Tabs>
     <Tab title="Bash">
       ```sh theme={null}
        npm i @cometchat/calls-sdk-react-native
       ```
     </Tab>
   </Tabs>

2. Install dependancies required for call SDK to work

   <Tabs>
     <Tab title="Bash">
       ```sh theme={null}
        npm i @cometchat/chat-sdk-react-native
        npm i @react-native-async-storage/async-storage
        npm i @react-native-community/netinfo
        npm i react-native-background-timer
        npm i react-native-callstats
        npm i react-native-webrtc
       ```
     </Tab>
   </Tabs>

3. Add permissions

   **Android:**

   <Tabs>
     <Tab title="XML">
       ```xml theme={null}
       <uses-permission android:name="android.permission.INTERNET" />
       <uses-permission android:name="android.permission.CAMERA" />
       <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
       <uses-permission android:name="android.permission.RECORD_AUDIO" />
       <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
       ```
     </Tab>
   </Tabs>

   **iOS:**

   <Tabs>
     <Tab title="XML">
       ```xml theme={null}
       <key>NSCameraUsageDescription</key>
       <string>This is for Camera permission</string>
       <key>NSMicrophoneUsageDescription</key>
       <string>This is for Mic permission</string>
       ```
     </Tab>
   </Tabs>

***

Step 3

## Initialise CometChatUIKit

To integrate and run CometChat UI Kit in your app, you need to initialize it beforehand.

The Init method initializes the settings required for CometChat. Please ensure to call this method before invoking any other methods from CometChat UI Kit or CometChat SDK.

<Note>
  The Auth Key is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](/ui-kit/react-native/methods#how-to-login-a-user-with-auth-token) method to log in securely.
</Note>

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    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);
        });
    }, []);
    ```
  </Tab>
</Tabs>

Step 4

## Login User

For login, you require a UID. You can create your own users on the CometChat Dashboard or via API. We have pre-generated test users: cometchat-uid-1, cometchat-uid-2, cometchat-uid-3, cometchat-uid-4, cometchat-uid-5.

The Login method returns the User object containing all the information of the logged-in user.

<Note>
  This straightforward authentication method is ideal for proof-of-concept (POC) development or during the early stages of application development. For production environments, however, we strongly recommend using an [Auth Token](/ui-kit/react-native/methods#how-to-login-a-user-with-auth-token) instead of an Auth Key to ensure enhanced security.
</Note>

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    // 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);
      });
    ```
  </Tab>
</Tabs>

***

Step 5

### Render Conversations with Messages

#### Loading the Conversations Component

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/IOPdWrN4_rrt5FC1/images/f2c77c5b-Conversation-ac41cc6650fbb941c64f389aee910dbc.png?fit=max&auto=format&n=IOPdWrN4_rrt5FC1&q=85&s=e20c916c8508352da29f6ca0ed6e0a96" width="1280" height="800" data-path="images/f2c77c5b-Conversation-ac41cc6650fbb941c64f389aee910dbc.png" />
</Frame>

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    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;
    ```
  </Tab>
</Tabs>

#### Loading the Messages Component

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/NYlKVet_SWy5r_yh/images/c9f210d3-messaegs-0ec2890a7a60ae5ea8e3991d83508474.png?fit=max&auto=format&n=NYlKVet_SWy5r_yh&q=85&s=5d51fa7c201609866b5ccba214577e25" width="360" height="800" data-path="images/c9f210d3-messaegs-0ec2890a7a60ae5ea8e3991d83508474.png" />
</Frame>

* The Messages component allows users to view and send messages in both one-on-one and group conversations.

<Tabs>
  <Tab title="Messages.tsx">
    ```tsx theme={null}
    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;
    ```
  </Tab>
</Tabs>