> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Methods

> Methods — CometChat documentation.

`CometChatUIKit` is a class that contains all necessary methods to help initialize the [CometChat SDK](/sdk/react-native/overview) 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.

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    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);
    ```
  </Tab>
</Tabs>

### sendMediaMessage

used to send media messages

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    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);
    ```
  </Tab>
</Tabs>

### sendCustomMessage

Used to send custom messages.

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    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);
    ```
  </Tab>
</Tabs>

### Send Form message

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

<Tabs>
  <Tab title="1:1 chat">
    ```tsx theme={null}
    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
    );
    ```
  </Tab>

  <Tab title="Group chat">
    ```tsx theme={null}
    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);
    ```
  </Tab>
</Tabs>

### Send Card message

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

<Tabs>
  <Tab title="1:1 chat">
    ```tsx theme={null}
    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
    );
    ```
  </Tab>

  <Tab title="Group chat">
    ```tsx theme={null}
    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);
    ```
  </Tab>
</Tabs>

### Send CustomInteractive message

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

<Tabs>
  <Tab title="1:1 chat">
    ```tsx theme={null}
    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
    );
    ```
  </Tab>

  <Tab title="Group chat">
    ```tsx theme={null}
    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);
    ```
  </Tab>
</Tabs>

## 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.

<Note>
  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](#how-to-login-a-user-with-auth-token) method to log in securely.
</Note>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    //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
          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)
        })
    ```
  </Tab>
</Tabs>

***

## 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](#how-to-login-a-user-with-auth-token) instead of Auth Key.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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)
                })
    ```
  </Tab>
</Tabs>

***

## 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](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
2. [Create an Auth Token](/rest-api/chat-apis) 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.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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)
                })
    ```
  </Tab>
</Tabs>

## 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

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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)
                })
    ```
  </Tab>
</Tabs>

## 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

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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)
                })
    ```
  </Tab>
</Tabs>

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

just pass the loggedIn-user to the logout method

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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)
                })
    ```
  </Tab>
</Tabs>