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
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.
Get your Application Keys
Signup for CometChat and then:
- Create a new app
- Head over to the API Keys section and note the Auth Key, App ID & Region
Add the CometChat Dependency
NPM
First, install via npm
npm install @cometchat-pro/[email protected] --save
Then, import the CometChat
object wherever you want to use CometChat
import { CometChat } from "@cometchat-pro/react-native-chat"
Initialize CometChat
We suggest you call the init()
method on app startup, preferably in the index.js
file.
var appID = "APP_ID";
var region = "REGION";
var appSetting = new CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build();
CometChat.init(appID, appSetting).then(
() => {
console.log("Initialization completed successfully");
// You can now call login function.
},
error => {
console.log("Initialization failed with error:", error);
// Check the reason for error and take appropriate action.
}
);
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 API Key
as input parameters and returns the created User
object if the request is successful.
let apiKey = "API_KEY";
var uid = "user1";
var name = "Kevin";
var user = new CometChat.User(uid);
user.setName(name);
CometChat.createUser(user, apiKey).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.
var UID = "SUPERHERO1";
var apiKey = "API_KEY";
CometChat.login(UID, apiKey).then(
user => {
console.log("Login Successful:", { user });
},
error => {
console.log("Login failed with exception:", { error });
}
);
Make sure you replace the API_KEY
with your CometChat API Key in the above code.
Sample Users
We have set-up 5 users for testing having UIDs:
SUPERHERO1
,SUPERHERO2
,SUPERHERO3
,SUPERHERO4
andSUPERHERO5
.
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.
Send a message
Once your user has logged in, you can send a message using the sendMessage()
method.
var receiverID = "SUPERHERO2";
var messageText = "Hello";
var receiverType = CometChat.RECEIVER_TYPE.USER;
var textMessage = new CometChat.TextMessage(receiverID, messageText, receiverType);
CometChat.sendMessage(textMessage).then(
message => {
console.log("Message sent successfully:", message);
// Do something with message
},
error => {
console.log("Message sending failed with error:", error);
// Handle any error
}
);
Parameter | Description |
---|---|
receiverID | The UID or GUID of the recipient |
messageText | The message string to be sent |
messageType | The type of the message that needs to be sent which in this case is |
receiverType | The type of the receiver to whom the message is to be sent i.e |
Once the message is sent successfully, you will receive the message information as the TextMessage
object on Promise
resolved.
Receive Messages
You can add multiple MessageListener using the addMessageListener()
method, to receive incoming messages wherever you need.
var listenerID = "UNIQUE_LISTENER_ID";
CometChat.addMessageListener(
listenerID,
new CometChat.MessageListener({
onTextMessageReceived: message => {
console.log("Message received successfully:", message);
// Handle text message
}
})
);
Parameter | Description |
---|---|
listenerID | An ID that uniquely identifies that listener. We recommend using the activity or fragment name |
Updated 6 days ago