Skip to main content
Version: v4

Methods

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:

ParametersTypeDescription
initstatic 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
loginstatic 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
logoutstatic logout(): Promise<Object>used for ending user session of logged in user
createUserstatic createUser(
user: CometChat.User): Promise<CometChat.User>		used for creating new user
updateUserstatic updateUser(user: CometChat.User): Promise<CometChat.User> {used for updating user object
sendCustomMessagestatic sendCustomMessage(message: CometChat.CustomMessage, onSuccess?: (msg: CometChat.CustomMessage | CometChat.BaseMessage) => void, onError?: (msg: CometChat.CometChatException) => void): voidcan be used to send a custom message
sendTextMessagestatic sendTextMessage(message: CometChat.TextMessage, onSuccess?: (msg: CometChat.TextMessage | CometChat.BaseMessage) => void, onError?: (msg: CometChat.CometChatException) => void): voidcan be used to send a text message
sendMediaMessagestatic sendMediaMessage(message: CometChat.CustomMessage, onSuccess?: (msg: CometChat.MediaMessage | CometChat.BaseMessage) => void, onError?: (msg: CometChat.CometChatException) => void): voidcan be used to send a media message
sendFormMessagestatic 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.
sendCardMessagestatic 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.
sendCustomInteractiveMessagestatic 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.

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

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.

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

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

Send Card message​

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

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

Send CustomInteractive message​

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

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

UIKitSettings​

UIKitSettings is an object containing credentials to initialize CometChat SDK.

PropertiesTypeDescription
appIdstringthe unique ID for the app, available on dashboard
regionstringthe region for the app us or eu
authKeystringthe auth key for the app, available on dashboard
subscriptionTypestringsets user presence subscription for all users
autoEstablishSocketConnectionBoolconfigure if web socket connections will established automatically on app initialization or be done manually, set to true by default
disableCallingbooleandisable calling
overrideAdminHoststringused to set the admin host
overrideClientHoststringused 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.

info

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.

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

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

let uikitSettings = UIKitSettings({
			APP_ID: "APP_ID", // Replace with your App ID
      REGION: "REGION", // Replace with your App Region ("eu" or "us")
      AUTH_KEY: "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.

let uid = <# Enter User's UID Here #>

CometChatUIKit.login({uid: uid})
			.then(user => {
                console.log("User logged in successfully")
			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.
let authToken = <# Enter User's AuthToken Here #>

CometChatUIKit.login({authToken: authToken})
		.then(user => {
                console.log("User logged in successfully")
      .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

let uid = <# Enter User's UID Here #>
let name = <# Enter User Name Here #>
let avatar = <# Enter User's Avatar URL Here #>

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

CometChatUIKit.create(user)
			.then(user => {
                console.log("User created successfully")
      .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

let uid = <# Enter User's UID Here #>
let name = <# Enter Updated User Name Here #>
let avatar = <# Enter Updated User's Avatar URL Here #>

let user = new CometChat.User(uidname)
user.setAvatar(avatar)

CometChatUIKit.update(user)
		.then(user => {
                console.log("User updated successfully");
    })
      .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

let uid = <# Enter User's UID Here #>
let name = <# Enter Updated User Name Here #>

let user = new CometChat.User(uid: uid, name: name)

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