Call Buttons

Add voice and video call buttons with CometChatCallButtons component in React Native UI Kit, enabling users to initiate calls directly.

AI Integration Quick Reference

{
  "component": "CometChatCallButtons",
  "package": "@cometchat/chat-uikit-react-native",
  "import": "import { CometChatCallButtons } from \"@cometchat/chat-uikit-react-native\";",
  "description": "Voice and video call buttons that initiate calls to users or groups.",
  "props": {
    "data": {
      "user": {
        "type": "CometChat.User",
        "note": "User object for one-on-one calls"
      },
      "group": {
        "type": "CometChat.Group",
        "note": "Group object for group calls"
      }
    },
    "callbacks": {
      "onError": "(error: CometChat.CometChatException) => void"
    },
    "visibility": {
      "hideVoiceCallButton": { "type": "boolean", "default": false },
      "hideVideoCallButton": { "type": "boolean", "default": false }
    },
    "configuration": {
      "callSettingsBuilder": "Callback to configure call settings",
      "outgoingCallConfiguration": "Configuration for outgoing call component"
    }
  },
  "events": [
    {
      "name": "ccCallRejected",
      "payload": "{ call }",
      "description": "Initiated call rejected by receiver"
    },
    {
      "name": "ccCallFailled",
      "payload": "{ call }",
      "description": "Error occurred during initiated call"
    },
    {
      "name": "ccOutgoingCall",
      "payload": "{ call }",
      "description": "User initiates a voice/video call"
    }
  ],
  "compositionExample": {
    "description": "Call buttons for message header",
    "components": [
      "CometChatCallButtons",
      "CometChatOutgoingCall"
    ],
    "flow": "Button press initiates call -> OutgoingCall screen displayed"
  }
}

Where It Fits

CometChatCallButtons is a Component that provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.

---

Minimal Render

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

function CallButtonsDemo() {
  return <CometChatCallButtons group={group} />;
}

---

Actions and Events

Callback Props

onError

Fires on internal errors (network failure, auth issue, SDK exception).

onError?: (e: CometChat.CometChatException) => void

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

function CallButtonsWithError() {
  const handleError = (e: CometChat.CometChatException) => {
    console.error("CallButtons error:", e);
  };

  return <CometChatCallButtons user={user} onError={handleError} />;
}

Global UI Events

CometChatUIEventHandler emits events subscribable from anywhere in the application. Add listeners and remove them on cleanup.

Event	Fires when	Payload
ccCallRejected	Initiated call is rejected by the receiver	{ call }
ccCallFailled	Error occurs during the initiated call	{ call }
ccOutgoingCall	User initiates a voice/video call	{ call }

When to use: sync external UI with call state changes. For example, update a call status indicator, show notifications, or log call events.

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

function useCallEvents() {
  useEffect(() => {
    const listenerId = "CALL_EVENTS_" + Date.now();

    CometChatUIEventHandler.addCallListener(listenerId, {
      ccCallRejected: ({ call }) => {
        console.log("Call rejected:", call);
      },
      ccOutgoingCall: ({ call }) => {
        console.log("Outgoing call:", call);
      },
      ccCallFailled: ({ call }) => {
        console.log("Call failed:", call);
      },
    });

    return () => {
      CometChatUIEventHandler.removeCallListener(listenerId);
    };
  }, []);
}

---

Styling

Using Style you can customize the look and feel of the component in your app. Pass a styling object as a prop to the CometChatCallButtons component.

import {
  CometChatCallButtons,
  useTheme,
} from "@cometchat/chat-uikit-react-native";

function StylingDemo() {
  const theme = useTheme();

  return (
    <CometChatCallButtons
      group={group}
      style={{
        audioCallButtonIconStyle: {
          tintColor: theme.color.primary,
        },
        audioCallButtonIconContainerStyle: {
          backgroundColor: theme.color.extendedPrimary100,
          paddingHorizontal: theme.spacing.padding.p4,
          paddingVertical: theme.spacing.padding.p2,
          borderRadius: 8,
        },
        videoCallButtonIconStyle: {
          tintColor: theme.color.primary,
        },
        videoCallButtonIconContainerStyle: {
          backgroundColor: theme.color.extendedPrimary100,
          paddingHorizontal: theme.spacing.padding.p4,
          paddingVertical: theme.spacing.padding.p2,
          borderRadius: 8,
        },
      }}
    />
  );
}

Visibility Props

Property	Description	Code
hideVoiceCallButton	Toggle visibility of the voice call button	hideVoiceCallButton?: boolean
hideVideoCallButton	Toggle visibility of the video call button	hideVideoCallButton?: boolean

Outgoing Call Configuration

You can customize the properties of the Outgoing Call component by making use of the outgoingCallConfiguration prop:

import {
  CometChatCallButtons,
  OutgoingCallConfiguration,
} from "@cometchat/chat-uikit-react-native";

function OutgoingCallConfigDemo() {
  const getOutgoingCallConfig = () => {
    return new OutgoingCallConfiguration({
      disableSoundForCalls: true,
    });
  };

  return (
    <CometChatCallButtons
      user={user}
      outgoingCallConfiguration={getOutgoingCallConfig()}
    />
  );
}

All exposed properties of OutgoingCallConfiguration can be found under Outgoing Call.

---

Next Steps

Incoming Call

Display and handle incoming calls

Outgoing Call

Display and manage outgoing calls

Call Logs

View call history and logs

Call Features

Overview of all calling features