> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> Getting Started — CometChat documentation.

## 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.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d5b5c3dc-chat_cometchat_screens-be750b2fa4910f8d7db41eec3e19f786.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=23baf368bff4d680c75d4a5cd0d3a578" alt="Image" width="4498" height="3120" data-path="images/d5b5c3dc-chat_cometchat_screens-be750b2fa4910f8d7db41eec3e19f786.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b3ccc95f-chat_cometchat_screens-ab29149514cb79f6604b2b41c077eeb1.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=dcc4b9c95d1a20429ff9935a50c7848f" alt="Image" width="4498" height="3120" data-path="images/b3ccc95f-chat_cometchat_screens-ab29149514cb79f6604b2b41c077eeb1.png" />
  </Tab>
</Tabs>

## 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. React Native Development Environment**

* Make sure you have React Native development environment properly set up on your machine. Follow the official React Native documentation to set up your development environment.

**ii. 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).

**iii. 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>
  Note

  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>

<Warning>
  There is a known issue with React Native versions 0.76 and 0.77 where enabling the new architecture may cause the Video Player in the UI Kit to malfunction on Android devices. To avoid this, either disable the new architecture or use a different version.
</Warning>

***

## Getting Started

You can start building a modern messaging experience in your app by installing the new UI Kit. This developer kit is an add-on feature to 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 init ChatingApp
    ```
  </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-async-storage/async-storage@1.17.10
    npm i @react-native-clipboard/clipboard@1.13.2
    npm i @react-native-community/datetimepicker@7.6.4
    ```
  </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" />
    ```
  </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)

If you want calling functionality inside your application then you need to install calling SDK additionally inside 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="JSON">
       ```json theme={null}
       // Dependencies required for calls sdk.
       {
         "@cometchat/chat-sdk-react-native": "^4.0.5",
         "@react-native-async-storage/async-storage": "^1.17.5",
         "@react-native-community/netinfo": "7.1.7", // for react-native 0.63 & above.
         "@react-native-community/netinfo": "6.1.0", // for react-native below 0.63
         "react-native-background-timer": "2.4.1",
         "react-native-callstats": "3.73.7",
         "react-native-webrtc": "1.106.1"
       }
       ```
     </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/v4/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 { Platform, PermissionsAndroid } from 'react-native'
    import { CometChatUIKit, UIKitSettings } from '@cometchat/chat-uikit-react-native'
    import { CometChat } from '@cometchat/chat-sdk-react-native'

    // add below code in App.js or App.tsx
    const getPermissions = () => {
        if (Platform.OS == "android") {
          PermissionsAndroid.requestMultiple([
            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
            PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
            PermissionsAndroid.PERMISSIONS.CAMERA,
            PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
          ]);
        }
    }

      useEffect(() => {
        getPermissions();
        let uikitSettings : UIKitSettings= {
          appId: <!--Your appId goes here -->,
          authKey: <!-- your app authKey goes here -->,
          region: <!-- App region goes here -->,
          subscriptionType: CometChat.AppSettings.SUBSCRIPTION_TYPE_ALL_USERS,
        };

        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/v4/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}
    let uid = <# Enter User's UID Here #>

        CometChatUIKit.login({uid: uid})
    			.then(user => {
                    console.log("User logged in successfully  \(user.getName())")
          })
    			.catch((error) => {
                    console.log("Login failed with exception:", error)
           })
    ```
  </Tab>
</Tabs>

<Note>
  * We have set up 5 users for testing having UIDs: cometchat-uid-1, cometchat-uid-2, cometchat-uid-3, cometchat-uid-4, and cometchat-uid-5.
</Note>

***

Step 5

## Render Conversation With Message

ConversationsWithMessages is a wrapper component that offers functionality to render both the Conversations and Messages components. It also enables opening the Messages by tapping on any conversation rendered in the list of conversations.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d5b5c3dc-chat_cometchat_screens-be750b2fa4910f8d7db41eec3e19f786.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=23baf368bff4d680c75d4a5cd0d3a578" alt="Image" width="4498" height="3120" data-path="images/d5b5c3dc-chat_cometchat_screens-be750b2fa4910f8d7db41eec3e19f786.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b3ccc95f-chat_cometchat_screens-ab29149514cb79f6604b2b41c077eeb1.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=dcc4b9c95d1a20429ff9935a50c7848f" alt="Image" width="4498" height="3120" data-path="images/b3ccc95f-chat_cometchat_screens-ab29149514cb79f6604b2b41c077eeb1.png" />
  </Tab>
</Tabs>

<Tabs>
  <Tab title="JSX">
    ```jsx theme={null}
    <CometChatConversationsWithMessages />
    ```
  </Tab>
</Tabs>

<Note>
  It will automatically fetch the conversation data upon loading the list. If the conversation list is empty, you can start a new conversation.
</Note>

<Warning>
  Make sure you add a [Privacy Manifest File](/ui-kit/react-native/v4/apple-privacy-manifest-guide) to your app before going live
</Warning>