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

# Overview

> Overview of Overview in CometChat.

This guide demonstrates how to add chat to a React Native application using CometChat. Before you begin, we strongly recommend you read the [Key Concepts](/sdk/react-native/2.0/key-concepts) guide.

#### **I want to integrate with my app**

1. [Get your application keys](./overview#get-your-application-keys)
2. [Add the CometChat dependency](./overview#add-the-cometchat-dependency)
3. [Initialize CometChat](./overview#initialize-cometchat)
4. [Register and Login your user](./overview#register-and-login-your-user)
5. [Integrate our UI Kits](./overview#integrate-our-ui-kits)

#### **I want to explore a sample app (includes UI)**

Open the app folder in your favourite code editor and follow the steps mentioned in the `README.md` file.

[](https://github.com/cometchat-pro/react-native-chat-app)

[React Native Sample App](https://github.com/cometchat-pro/react-native-chat-app)

### Get your Application Keys

[Signup for CometChat](https://app.cometchat.com) and then:

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

## Add the CometChat Dependency

Install the package as NPM module:

<Tabs>
  <Tab title="JavaScript">
    ```bash theme={null}
    npm install @cometchat-pro/react-native-chat@2.4.1 --save
    ```
  </Tab>
</Tabs>

**In order to integrate the CometChat Pro React Native SDK, you need to install one more dependencies.**

1. Async-Storage:

<Tabs>
  <Tab title="HTML">
    ```bash theme={null}
    npm install @react-native-async-storage/async-storage --save
    ```
  </Tab>
</Tabs>

<Note>
  v2.4+ onwards, Voice & Video Calling functionality has been moved to a separate library. In case you plan to use the calling feature, please install the Calling dependency (@cometchat-pro/react-native-calls).

  `npm install @cometchat-pro/react-native-calls@2.1.2 --save`

  The calling component requires some configuration. Please follow the steps mentioned [here](/sdk/react-native/2.0/overview#calling-component-configuration).
</Note>

## Calling Component Configuration

Goto `./android` folder and open **project level**`build.gradle` file and add all repository URLs in the `repositories` block under the `allprojects` section.

<Tabs>
  <Tab title="build.gradle">
    ```java theme={null}
    allprojects {
      repositories {
        maven {
    			url "https://dl.cloudsmith.io/public/cometchat/cometchat-pro-android/maven/"
    		}
      }
    }
    ```
  </Tab>
</Tabs>

Also in the same file in `buildscript` section in `ext` block make sure you have set **minSdkVersion** to **24.**

<Tabs>
  <Tab title="build.gradle">
    ```java theme={null}
    buildscript {
        ext {
            buildToolsVersion = "29.0.2"
            minSdkVersion = 24
            compileSdkVersion = 29
            targetSdkVersion = 29
        }
    }
    ```
  </Tab>
</Tabs>

#### iOS:

Please update the minimum target version in the Podfile. Goto ./ios folder and open the Podfile. In the Podfile update the platform version to `11.0`

<Tabs>
  <Tab title="Podfile">
    ```
    platform :ios, '11.0'
    ```
  </Tab>
</Tabs>

Open the `ios/App` folder and run `pod install` this will create an `App.xcworkspace` open this and run the app.

## Initialize CometChat

The `init()` method initialises the settings required for CometChat. The `init()` method takes the below parameters:

1. appID - You CometChat App ID
2. appSettings - An object of the AppSettings class can be created using the AppSettingsBuilder class. The region field is mandatory and can be set using the `setRegion()` method.

The `AppSettings` class allows you to configure two settings:

* Region: The region where your app was created.
* [Presence Subscription](/sdk/react-native/2.0/user-presence)

You need to call `init()` before calling any other method from CometChat. We suggest you call the `init()` method on app startup, preferably in the `index.js` file.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    let appID = "APP_ID";
    let region = "REGION";
    let appSetting = new CometChat.AppSettingsBuilder()
                        .subscribePresenceForAllUsers()
                        .setRegion(region)
                        .build();
    CometChat.init(appID, appSetting).then(
      () => {
        console.log("Initialization completed successfully");
      }, error => {
        console.log("Initialization failed with error:", error);
      }
    );
    ```
  </Tab>
</Tabs>

Make sure you replace the `APP_ID` with your CometChat **App ID** and `REGION` with your **App Region** in the above code.

## Register and Login your user

Once initialization is successful, you will need to create a user. To create users on the fly, you can use the `createUser()` method. This method takes a `User` object and the `Auth Key` as input parameters and returns the created `User` object if the request is successful.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    let authKey = "AUTH_KEY";
    let uid = "user1";
    let name = "Kevin";

    let user = new CometChat.User(uid);

    user.setName(name);

    CometChat.createUser(user, authKey).then(
        user => {
            console.log("user created", user);
        }, error => {
            console.log("error", error);
        }
    )
    ```
  </Tab>
</Tabs>

Make sure that `UID` and `name` are specified as these are mandatory fields to create a user.

Once you have created the user successfully, you will need to log the user into CometChat using the `login()` method.

We recommend you call the CometChat `login()` method once your user logs into your app. The `login()` method needs to be called only once.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    let UID = "cometchat-uid-1";
    let authKey = "AUTH_KEY";

    CometChat.getLoggedinUser().then(
        (user) => {
    				if(!user){
                CometChat.login(UID, authKey).then(
                  user => {
                    console.log("Login Successful:", { user });    
                  }, error => {
                    console.log("Login failed with exception:", { error });    
                  }
                );
            }
    		}, error => {
    				console.log("Some Error Occured", { error });
    		}
    );
    ```
  </Tab>
</Tabs>

Make sure you replace the `AUTH_KEY` with your CometChat **Auth Key** in the above code.

<Note>
  Sample Users

  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>

The `login()` method returns the `User` object containing all the information of the logged-in user.

<Warning>
  UID can be alphanumeric with underscore and hyphen. Spaces, punctuation and other special characters are not allowed.
</Warning>

## Integrate our UI Kits

Please refer to the [React Native UI Kit](/ui-kit/react-native/v2/overview)section to integrate React Native UI Kit inside your app.