Skip to main content
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 guide.

​
I want to integrate with my app

  1. Get your application keys
  2. Add the CometChat dependency
  3. Initialize CometChat
  4. Register and Login your user
  5. 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. React Native Sample App

​
Get your Application Keys

Signup for CometChat 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:
  • JavaScript
npm install @cometchat-pro/react-native-chat@2.4.1 --save
In order to integrate the CometChat Pro React Native SDK, you need to install one more dependencies.
  1. Async-Storage:
  • HTML
npm install @react-native-async-storage/async-storage --save
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 --saveThe calling component requires some configuration. Please follow the steps mentioned here.

​
Calling Component Configuration

Goto ./android folder and open project levelbuild.gradle file and add all repository URLs in the repositories block under the allprojects section.
  • build.gradle
allprojects {
  repositories {
    maven {
			url "https://dl.cloudsmith.io/public/cometchat/cometchat-pro-android/maven/"
		}
  }
}
Also in the same file in buildscript section in ext block make sure you have set minSdkVersion to 24.
  • build.gradle
buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 24
        compileSdkVersion = 29
        targetSdkVersion = 29
    }
}

​
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
  • Podfile
platform :ios, '11.0'
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: 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.
  • JavaScript
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);
  }
);
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.
  • JavaScript
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);
    }
)
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.
  • JavaScript
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 });
		}
);
Make sure you replace the AUTH_KEY with your CometChat Auth Key in the above code.
Sample UsersWe 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.
The login() method returns the User object containing all the information of the logged-in user.
UID can be alphanumeric with underscore and hyphen. Spaces, punctuation and other special characters are not allowed.

​
Integrate our UI Kits

Please refer to the React Native UI Kitsection to integrate React Native UI Kit inside your app.