Methods

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react-native`
Import	`import { CometChatUIKit, UIKitSettings } from "@cometchat/chat-uikit-react-native";`
Init	`CometChatUIKit.init(UIKitSettings)`
Login (dev)	`CometChatUIKit.login({ uid: "UID" })`
Login (prod)	`CometChatUIKit.login({ authToken: "AUTH_TOKEN" })`
Other methods	`CometChatUIKit.logout()`, `CometChatUIKit.createUser(user)`, `CometChatUIKit.updateUser(user)`
Send messages	`CometChatUIKit.sendTextMessage()`, `CometChatUIKit.sendMediaMessage()`, `CometChatUIKit.sendCustomMessage()`
Interactive messages	`CometChatUIKit.sendFormMessage()`, `CometChatUIKit.sendCardMessage()`, `CometChatUIKit.sendCustomInteractiveMessage()`
Note	Use these wrapper methods instead of raw SDK calls — they manage internal UI Kit eventing

The UI Kit wraps the Chat SDK methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls.

CometChatUIKit.init(UIKitSettings) must be called before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.

Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client. Never expose Auth Keys in production client code.

All methods are accessed via the CometChatUIKit class.

Init

Initializes the CometChat React Native SDK. Must be called on app startup before any other UI Kit method.

Replace APP_ID, REGION, and AUTH_KEY with values from the CometChat Dashboard. Auth Key is optional — use Auth Token for production.

JavaScript

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 (optional for Auth Token flow)
});

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

Simple authentication for development/POC. For production, use Auth Token.

JavaScript

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

const uid = "user_uid";

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

Production-safe authentication that does not expose the Auth Key in client code.

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

JavaScript

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

const authToken = "AUTH_TOKEN";

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

Logout

Ends the current user session.

JavaScript

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

CometChatUIKit.logout();

Create User

Takes a User object and returns the created User object.

JavaScript

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

const uid = "user1";
const name = "Kevin";
const avatar = "https://example.com/avatar.png";

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

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

Update User

Takes a User object and returns the updated User object.

JavaScript

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

const uid = "user1";
const name = "Kevin Fernandez";
const avatar = "https://example.com/new-avatar.png";

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

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

Sending Messages

Text Message

Sends a text message in a 1:1 or group chat.

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);

Media Message

Sends a media message in a 1:1 or group chat.

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);

Custom Message

Sends a custom message (neither text nor media) in a 1:1 or group chat.

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);

Interactive Messages

Form Message

Sends a Form message which is an extension of Interactive Message.

1:1 Chat
Group Chat

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

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
);

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

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

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 TextInputElement("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);

Card Message

Sends a Card message which is an extension of Interactive Message.

1:1 Chat
Group Chat

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

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]
);

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

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

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);

Custom Interactive Message

Sends a CustomInteractive message which is an extension of Interactive Message.

1:1 Chat
Group Chat

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

const receiverID = "UID";
const customData = { /* your custom JSON data */ };

let customMessage = new CustomInteractiveMessage(
  receiverID,
  CometChat.RECEIVER_TYPE.USER,
  customData
);

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

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

const receiverID = "GUID";
const customData = { /* your custom JSON data */ };

let customMessage = new CustomInteractiveMessage(
  receiverID,
  CometChat.RECEIVER_TYPE.GROUP,
  customData
);

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.

Property	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`	`boolean`	Configure if web socket connections will be established automatically on app initialization (default: `true`)
`disableCalling`	`boolean`	Disable calling features
`overrideAdminHost`	`string`	Used to set the admin host
`overrideClientHost`	`string`	Used to set the client host

Next Steps

Integration

Complete guide to integrating the UI Kit

Events

Listen to UI Kit events for custom behavior

Components Overview

Explore all available UI components

Theme

Customize the look and feel of the UI Kit

​Methods

​Init

​Login using Auth Key

​Login using Auth Token

​Logout

​Create User

​Update User

​Sending Messages

​Text Message

​Media Message

​Custom Message

​Interactive Messages

​Form Message

​Card Message

​Custom Interactive Message

​UIKitSettings

​Next Steps

Integration

Events

Components Overview

Theme

Methods

Init

Login using Auth Key

Login using Auth Token

Logout

Create User

Update User

Sending Messages

Text Message

Media Message

Custom Message

Interactive Messages

Form Message

Card Message

Custom Interactive Message

UIKitSettings

Next Steps