Setup
Skip the create new app step. Your existing v3 app can be migrated to v4.
Follow steps mentioned in Add the CometChat dependency section below to upgrade to latest version of v4
Get your Application Keys
Signup for CometChat and then:
- Create a new app
- 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 i @cometchat/chat-sdk-react-native
In order to integrate the CometChat Pro React Native SDK, you need to install one more dependencies
- Async-Storage:
- Javascript
npm install @react-native-async-storage/async-storage
Calling Component Configuration
For @cometchat/calls-sdk-react-native
, please make sure you add the following additional dependencies & permissions.
- JSON
{
"@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"
}
Permissions:
Android:
- XML
<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" />
iOS:
- XML
<key>NSCameraUsageDescription</key>
<string>This is for Camera permission</string>
<key>NSMicrophoneUsageDescription</key>
<string>This is for Mic permission</string>
Android:
Goto ./android
folder and open project level build.gradle
file and add all repository URLs in the repositories
block under the allprojects
section.
- Java
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:
- appID - You CometChat App ID
- 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: Represents the subscription type for user presence (real-time online/offline status)
- autoEstablishSocketConnection(boolean value): This property takes a boolean value which when set to true informs the SDK to manage the web-socket connection internally. If set to false, it informs the SDK that the web-socket connection will be managed manually. The default value for this parameter is true. For more information on this, please check the Managing Web-Socket connections manually section. The default value for this property is true.
- overrideAdminHost(adminHost: string): This method takes the admin URL as input and uses this admin URL instead of the default admin URL. This can be used in case of dedicated deployment of CometChat.
- overrideClientHost(clientHost: string): This method takes the client URL as input and uses this client URL instead of the default client URL. This can be used in case of dedicated deployment of CometChat.
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
- Typescript
let appID = "APP_ID";
let region = "REGION";
let appSetting = new CometChat.AppSettingsBuilder()
.subscribePresenceForAllUsers()
.setRegion(region)
.autoEstablishSocketConnection(true)
.build();
CometChat.init(appID, appSetting).then(
() => {
console.log("Initialization completed successfully");
},
(error) => {
console.log("Initialization failed with error:", error);
}
);
let appID: string = "APP_ID",
region: string = "APP_REGION",
appSetting: CometChat.AppSettings = new CometChat.AppSettingsBuilder()
.subscribePresenceForAllUsers()
.setRegion(region)
.autoEstablishSocketConnection(true)
.build();
CometChat.init(appID, appSetting).then(
(initialized: boolean) => {
console.log("Initialization completed successfully", initialized);
},
(error: CometChat.CometChatException) => {
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.
Parameter | Description |
---|---|
appID | CometChat App ID |
appSetting | An object of the AppSettings class. |