Methods

API reference for CometChatUIKit class methods including initialization, authentication, and messaging functions.

Quick Reference for AI Agents & Developers

import { CometChatUIKit, UIKitSettings } from "@cometchat/chat-uikit-react-native";

// Initialize the UI Kit
const uiKitSettings = new UIKitSettings({
  appId: "APP_ID",
  region: "REGION",
  authKey: "AUTH_KEY", // Development only
});
await CometChatUIKit.init(uiKitSettings);

// Login with UID (development only)
await CometChatUIKit.login({ uid: "user_uid" });

// Login with Auth Token (production)
await CometChatUIKit.login({ authToken: "auth_token" });

// Logout
await CometChatUIKit.logout();

Security Note: The authKey should only be used during development. In production, use Auth Tokens generated from your backend server for secure authentication.

CometChatUIKit is a class that contains all necessary methods to help initialize the CometChat SDK with valid credentials for the ui kit to utilize.

The following properties and methods are present:

Parameters	Type	Description
init	static init(uiKitSettings: UIKitSettings): Promise<boolean>	method initializes the settings required for CometChat SDK. First, ensure authSettings is set and then call the init() method on app startup
login	static async login({ uid, authToken }: { uid?: string, authToken?: string }): Promise<CometChat.User>	used for logging in with credentials but use this function only for testing purpose
logout	static logout(): Promise<Object>	used for ending user session of logged in user
createUser	static createUser( user: CometChat.User): Promise<CometChat.User>	used for creating new user
updateUser	static updateUser(user: CometChat.User): Promise<CometChat.User> {	used for updating user object
sendCustomMessage	static sendCustomMessage(message: CometChat.CustomMessage, onSuccess?: (msg: CometChat.CustomMessage | CometChat.BaseMessage) => void, onError?: (msg: CometChat.CometChatException) => void): void	can be used to send a custom message
sendTextMessage	static sendTextMessage(message: CometChat.TextMessage, onSuccess?: (msg: CometChat.TextMessage | CometChat.BaseMessage) => void, onError?: (msg: CometChat.CometChatException) => void): void	can be used to send a text message
sendMediaMessage	static sendMediaMessage(message: CometChat.CustomMessage, onSuccess?: (msg: CometChat.MediaMessage | CometChat.BaseMessage) => void, onError?: (msg: CometChat.CometChatException) => void): void	can be used to send a media message
sendFormMessage	static sendFormMessage(message: FormMessage, disableLocalEvents: boolean = false): Promise<CometChat.TextMessage | CometChat.BaseMessage>	can be used to send a form message. disableLocalEvents - A boolean indicating whether to disable local events or not. Default value is false.
sendCardMessage	static sendCardMessage(message: CardMessage, disableLocalEvents: boolean = false): Promise<CometChat.TextMessage | CometChat.BaseMessage>	can be used to send a card message. disableLocalEvents - A boolean indicating whether to disable local events or not. Default value is false.
sendCustomInteractiveMessage	static sendCustomInteractiveMessage(message: CustomInteractiveMessage, disableLocalEvents: boolean = false): Promise<CometChat.TextMessage | CometChat.BaseMessage>	can be used to send a custom interactive message. disableLocalEvents - A boolean indicating whether to disable local events or not. Default value is false.

---

sendTextMessage

Used to send text messages.

TypeScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatUIKit,
  CometChatUiKitConstants,
} from "@cometchat/chat-uikit-react-native";

const receiverID: string = "uid";
const messageText: string = "Hello world!";
const receiverType: string = CometChatUiKitConstants.ReceiverTypeConstants.user;
const textMessage: CometChat.TextMessage = new CometChat.TextMessage(
  receiverID,
  messageText,
  receiverType
);

CometChatUIKit.sendTextMessage(textMessage)
  .then((message: CometChat.TextMessage) => {
    console.log("Message sent successfully:", message);
  })
  .catch(console.log);

JavaScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatUIKit,
  CometChatUiKitConstants,
} from "@cometchat/chat-uikit-react-native";

const receiverID = "uid";
const messageText = "Hello world!";
const receiverType = CometChatUiKitConstants.ReceiverTypeConstants.user;
const textMessage = new CometChat.TextMessage(
  receiverID,
  messageText,
  receiverType
);

CometChatUIKit.sendTextMessage(textMessage)
  .then((message) => {
    console.log("Message sent successfully:", message);
  })
  .catch(console.log);

sendMediaMessage

used to send media messages

TypeScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatUIKit,
  CometChatUiKitConstants,
} from "@cometchat/chat-uikit-react-native";

const receiverID: string = "uid";
const messageType: string = CometChatUiKitConstants.MessageTypeConstants.file;
const receiverType: string = CometChatUiKitConstants.ReceiverTypeConstants.user;
const mediaMessage: CometChat.MediaMessage = new CometChat.MediaMessage(
  receiverID,
  `INPUT FILE OBJECT`,
  messageType,
  receiverType
);

CometChatUIKit.sendMediaMessage(mediaMessage)
  .then((message: CometChat.MediaMessage) => {
    console.log("Media message sent successfully", message);
  })
  .catch(console.log);

JavaScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatUIKit,
  CometChatUiKitConstants,
} from "@cometchat/chat-uikit-react-native";

const receiverID = "uid";
const messageType = CometChatUiKitConstants.MessageTypeConstants.file;
const receiverType = CometChatUiKitConstants.ReceiverTypeConstants.user;
const mediaMessage = new CometChat.MediaMessage(
  receiverID,
  `INPUT FILE OBJECT`,
  messageType,
  receiverType
);

CometChatUIKit.sendMediaMessage(mediaMessage)
  .then((message) => {
    console.log("Media message sent successfully", message);
  })
  .catch(console.log);

sendCustomMessage

Used to send custom messages.

TypeScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatUIKit,
  CometChatUiKitConstants,
} from "@cometchat/chat-uikit-react-native";

const receiverID: string = "uid";
const customData: object = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002",
};
const customType: string = "location";
const receiverType: string = CometChatUiKitConstants.ReceiverTypeConstants.user;
const customMessage: CometChat.CustomMessage = new CometChat.CustomMessage(
  receiverID,
  receiverType,
  customType,
  customData
);

CometChatUIKit.sendCustomMessage(customMessage)
  .then((message: CometChat.CustomMessage) => {
    console.log("custom message sent successfully", message);
  })
  .catch(console.log);

JavaScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatUIKit,
  CometChatUiKitConstants,
} from "@cometchat/chat-uikit-react-native";

const receiverID = "uid";
const customData = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002",
};
const customType = "location";
const receiverType = CometChatUiKitConstants.ReceiverTypeConstants.user;
const customMessage = new CometChat.CustomMessage(
  receiverID,
  receiverType,
  customType,
  customData
);

CometChatUIKit.sendCustomMessage(customMessage)
  .then((message) => {
    console.log("custom message sent successfully", message);
  })
  .catch(console.log);

Send Form message

This method allows you to send Form messages which are the extension of Interactive Message

1:1 chat

import { CometChat } from "@cometchat/chat-sdk-react-native"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native"; //import uikit package

const receiverID = "UID";
// Create an instance of APIAction
let apiAction = new APIAction("https://example.com/api", "POST");

// Create an instance of ButtonElement
let submitButton = new ButtonElement("1", apiAction, "Submit");

// Create an instance of TextInput
let nameInput = new TextInputElement("1", "Please enter your name");
// Create a new instance of FormMessage

let formMessage = new FormMessage(
  receiverID,
  CometChat.RECEIVER_TYPE.USER,
  "Title",
  [nameInput],
  submitButton
);

const onSuccessSend = (message) => {
  console.log("Form message sent successfully", message);
};

const onErrorSend = (error: CometChat.CometChatException) => {
  console.log("Form message sent error", error);
};

CometChatUIKit.sendFormMessage(
  formMessage,
  undefined,
  onSuccessSend,
  onErrorSend
);

Group chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import {
  CometChatUIKitConstants,
  APIAction,
  ButtonElement,
  TextInput,
  FormMessage,
} from "@cometchat/uikit-resources"; //import shared package

const receiverID = "GUID";
// Create an instance of APIAction
let apiAction = new APIAction("https://example.com/api", "POST");
// Create an instance of ButtonElement
let submitButton = new ButtonElement("1", apiAction, "Submit");
// Create an instance of TextInput
let nameInput = new TextInput("1", "Please enter your name");
// Create a new instance of FormMessage
let formMessage = new FormMessage(
  "receiverId",
  CometChat.RECEIVER_TYPE.GROUP,
  "Title",
  [nameInput],
  submitButton
);

CometChatUIKit.sendFormMessage(formMessage)
  .then((message) => {
    console.log("Form message sent successfully", message);
  })
  .catch(console.log);

Send Card message

This method allows you to send Card messages which are the extension of Interactive Message

1:1 chat

import { CometChat } from "@cometchat/chat-sdk-react-native"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native"; //import uikit package

const receiverID = "UID";
// Create instance of ButtonElement for card actions
let cardAction = new ButtonElement(
  "1",
  new APIAction("https://example.com/api", "POST"),
  "Click Me"
);
// Create a new instance of CardMessage
let cardMessage = new CardMessage(
  "receiverId",
  CometChat.RECEIVER_TYPE.USER,
  "This is a card",
  [cardAction]
);

const onSuccessSend = (message) => {
  console.log("Card message sent successfully", message);
};

const onErrorSend = (error: CometChat.CometChatException) => {
  console.log("Card message sent error", error);
};

CometChatUIKit.sendCardMessage(
  cardMessage,
  undefined,
  onSuccessSend,
  onErrorSend
);

Group chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import {
  CometChatUIKitConstants,
  ButtonElement,
  CardMessage,
} from "@cometchat/uikit-resources"; //import shared package

const receiverID = "GUID";
// Create instance of ButtonElement for card actions
let cardAction = new ButtonElement(
  "1",
  new APIAction("https://example.com/api", "POST"),
  "Click Me"
);
// Create a new instance of CardMessage
let cardMessage = new CardMessage(
  "receiverId",
  CometChat.RECEIVER_TYPE.GROUP,
  "This is a card",
  [cardAction]
);

CometChatUIKit.sendCardMessage(cardMessage)
  .then((message) => {
    console.log("card message sent successfully", message);
  })
  .catch(console.log);

Send CustomInteractive message

This method allows you to send CustomInteractive messages which are the extension of Interactive Message

1:1 chat

import { CometChat } from "@cometchat/chat-sdk-react-native"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native"; //import uikit package

const receiverID = "UID";
// Create a new instance of CardMessage
let customMessage = new CustomInteractiveMessage(
  "receiverId",
  CometChat.RECEIVER_TYPE.USER,
  json
);

const onSuccess = (message) => {
  console.log("Card message sent successfully", message);
};

const onError = (error: CometChat.CometChatException) => {
  console.log("Card message sent error", error);
};

CometChatUIKit.sendCustomInteractiveMessage(
  cardMessage,
  undefined,
  onSuccess,
  onError
);

Group chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import {
  CometChatUIKitConstants,
  ButtonElement,
  CardMessage,
} from "@cometchat/uikit-resources"; //import shared package

const receiverID = "GUID";
// Create a new instance of CardMessage
let customMessage = new CustomInteractiveMessage(
  "receiverId",
  CometChat.RECEIVER_TYPE.GROUP,
  json
);

CometChatUIKit.sendCustomInteractiveMessage(customMessage)
  .then((message) => {
    console.log("CustomInteractive message sent successfully", message);
  })
  .catch(console.log);

UIKitSettings

UIKitSettings is an object containing credentials to initialize CometChat SDK.

Properties	Type	Description
appId	string	the unique ID for the app, available on dashboard
region	string	the region for the app us or eu
authKey	string	the auth key for the app, available on dashboard
subscriptionType	string	sets user presence subscription for all users
autoEstablishSocketConnection	Bool	configure if web socket connections will established automatically on app initialization or be done manually, set to true by default
disableCalling	boolean	disable calling
overrideAdminHost	string	used to set the admin host
overrideClientHost	string	used to set the client host

---

How to initialize the UI Kit?

The UI Kit can be initialized to use CometChatUIKit by populating the auth settings first and the calling the init method. Preferably this should be done at the top most level when the app starts.

Make sure you replace the APP_ID, REGION and AUTH_KEY with your CometChat App ID, Region and Auth Key in the below code. 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 method to log in securely.

TypeScript

//CometChatUIKit should be initialized at the start of application. No need to initialize it again

import { CometChatUIKit, UIKitSettings } from "@cometchat/chat-uikit-react-native";

const uikitSettings: UIKitSettings = new UIKitSettings({
  appId: "APP_ID", // Replace with your App ID
  region: "REGION", // Replace with your App Region ("eu" or "us")
  authKey: "AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
});

CometChatUIKit.init(uikitSettings)
  .then((user: boolean) => {
    console.log("Initialization completed successfully");
  })
  .catch((error: any) => {
    console.log("Initialization failed with exception:", error);
  });

JavaScript

//CometChatUIKit should be initialized at the start of application. No need to initialize it again

import { CometChatUIKit, UIKitSettings } from "@cometchat/chat-uikit-react-native";

const uikitSettings = new UIKitSettings({
  appId: "APP_ID", // Replace with your App ID
  region: "REGION", // Replace with your App Region ("eu" or "us")
  authKey: "AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
});

CometChatUIKit.init(uikitSettings)
  .then((user) => {
    console.log("Initialization completed successfully");
  })
  .catch((error) => {
    console.log("Initialization failed with exception:", error);
  });

---

How to login a user of your App?

Only the UID of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use AuthToken instead of Auth Key.

TypeScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native";

const uid: string = "user_uid"; // Enter User's UID Here

CometChatUIKit.login({ uid: uid })
  .then((user: CometChat.User) => {
    console.log("User logged in successfully", user);
  })
  .catch((error: any) => {
    console.log("Login failed with exception:", error);
  });

JavaScript

import { CometChatUIKit } from "@cometchat/chat-uikit-react-native";

const uid = "user_uid"; // Enter User's UID Here

CometChatUIKit.login({ uid: uid })
  .then((user) => {
    console.log("User logged in successfully", user);
  })
  .catch((error) => {
    console.log("Login failed with exception:", error);
  });

---

How to login a user with Auth Token?

This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.

1. Create a User via the CometChat API when the user signs up in your app.
2. Create an Auth Token via the CometChat API for the new user and save the token in your database.
3. Load the Auth Token in your client and pass it to the login({authToken: authToken}) method.

TypeScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native";

const authToken: string = "user_auth_token"; // Enter User's AuthToken Here

CometChatUIKit.login({ authToken: authToken })
  .then((user: CometChat.User) => {
    console.log("User logged in successfully", user);
  })
  .catch((error: any) => {
    console.log("Login failed with exception:", error);
  });

JavaScript

import { CometChatUIKit } from "@cometchat/chat-uikit-react-native";

const authToken = "user_auth_token"; // Enter User's AuthToken Here

CometChatUIKit.login({ authToken: authToken })
  .then((user) => {
    console.log("User logged in successfully", user);
  })
  .catch((error) => {
    console.log("Login failed with exception:", error);
  });

How to create a new user for your App?

Create an object the new user that needs to created with as little information as the name of the user and a uid and pass it to the create(user: User) method

TypeScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native";

const uid: string = "user_uid"; // Enter User's UID Here
const name: string = "User Name"; // Enter User Name Here
const avatar: string = "https://example.com/avatar.png"; // Enter User's Avatar URL Here

const user: CometChat.User = new CometChat.User(uid, name);
user.setAvatar(avatar);

CometChatUIKit.createUser(user)
  .then((user: CometChat.User) => {
    console.log("User created successfully", user);
  })
  .catch((error: any) => {
    console.log("Creating new user failed with exception:", error);
  });

JavaScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native";

const uid = "user_uid"; // Enter User's UID Here
const name = "User Name"; // Enter User Name Here
const avatar = "https://example.com/avatar.png"; // Enter User's Avatar URL Here

const user = new CometChat.User(uid, name);
user.setAvatar(avatar);

CometChatUIKit.createUser(user)
  .then((user) => {
    console.log("User created successfully", user);
  })
  .catch((error) => {
    console.log("Creating new user failed with exception:", error);
  });

How to update a user for your App?

Update an object the user that needs to updated with as little information as the name of the user and a uid and pass it to the update(user: User) method

TypeScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native";

const uid: string = "user_uid"; // Enter User's UID Here
const name: string = "Updated User Name"; // Enter Updated User Name Here
const avatar: string = "https://example.com/new-avatar.png"; // Enter Updated User's Avatar URL Here

const user: CometChat.User = new CometChat.User(uid, name);
user.setAvatar(avatar);

CometChatUIKit.updateUser(user)
  .then((user: CometChat.User) => {
    console.log("User updated successfully", user);
  })
  .catch((error: any) => {
    console.log("Updating user failed with exception:", error);
  });

JavaScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native";

const uid = "user_uid"; // Enter User's UID Here
const name = "Updated User Name"; // Enter Updated User Name Here
const avatar = "https://example.com/new-avatar.png"; // Enter Updated User's Avatar URL Here

const user = new CometChat.User(uid, name);
user.setAvatar(avatar);

CometChatUIKit.updateUser(user)
  .then((user) => {
    console.log("User updated successfully", user);
  })
  .catch((error) => {
    console.log("Updating user failed with exception:", error);
  });

How to logout from a logged-In User in App?

just pass the loggedIn-user to the logout method

TypeScript

import { CometChatUIKit } from "@cometchat/chat-uikit-react-native";

CometChatUIKit.logout()
  .then(() => {
    console.log("User logged out successfully");
  })
  .catch((error: any) => {
    console.log("Logout failed with exception:", error);
  });

JavaScript

import { CometChatUIKit } from "@cometchat/chat-uikit-react-native";

CometChatUIKit.logout()
  .then(() => {
    console.log("User logged out successfully");
  })
  .catch((error) => {
    console.log("Logout failed with exception:", error);
  });

---

Next Steps

Events

Listen to UI Kit events and handle user interactions

Components Overview

Explore all available UI components