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

# Methods

> Use CometChat React Native UI Kit methods for initialization, login, logout, users, groups, messages, calls, and session handling.

<Accordion title="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                               |
</Accordion>

The UI Kit wraps the [Chat SDK](/sdk/react-native/overview) methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls.

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

<Warning>
  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.
</Warning>

## Methods

All methods are accessed via the `CometChatUIKit` class.

### Init

Initializes the [CometChat React Native SDK](/sdk/react-native/overview). Must be called on app startup before any other UI Kit method.

<Note>
  Replace `APP_ID`, `REGION`, and `AUTH_KEY` with values from the CometChat Dashboard. `Auth Key` is optional — use [Auth Token](#login-using-auth-token) for production.
</Note>

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

***

### Login using Auth Key

Simple authentication for development/POC. For production, use [Auth Token](#login-using-auth-token).

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

***

### Login using Auth Token

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

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()` method.

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

***

### Logout

Ends the current user session.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChatUIKit } from "@cometchat/chat-uikit-react-native";

    CometChatUIKit.logout();
    ```
  </Tab>
</Tabs>

***

### Create User

Takes a `User` object and returns the created `User` object.

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

***

### Update User

Takes a `User` object and returns the updated `User` object.

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

***

## Sending Messages

### Text Message

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

<Tabs>
  <Tab title="JavaScript">
    ```js 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>

***

### Media Message

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

<Tabs>
  <Tab title="JavaScript">
    ```js 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>

***

### Custom Message

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

<Tabs>
  <Tab title="JavaScript">
    ```js 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>

***

## Interactive Messages

### Form Message

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

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

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

***

### Card Message

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

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

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

***

### Custom Interactive Message

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

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

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

***

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

<CardGroup cols={2}>
  <Card title="Integration" icon="plug" href="/ui-kit/react-native/react-native-cli-integration">
    Complete guide to integrating the UI Kit
  </Card>

  <Card title="Events" icon="bolt" href="/ui-kit/react-native/events">
    Listen to UI Kit events for custom behavior
  </Card>

  <Card title="Components Overview" icon="puzzle-piece" href="/ui-kit/react-native/components-overview">
    Explore all available UI components
  </Card>

  <Card title="Theme" icon="palette" href="/ui-kit/react-native/theme">
    Customize the look and feel of the UI Kit
  </Card>
</CardGroup>