Incoming Call

Displays an incoming call notification with caller info, accept/decline buttons, and transitions to the ongoing call screen.

AI Integration Quick Reference

{
  "component": "CometChatIncomingCall",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatIncomingCall } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Displays an incoming call notification with caller info, accept/decline buttons, and transitions to the ongoing call screen.",
  "cssRootClass": ".cometchat-incoming-call",
  "primaryOutput": {
    "prop": "onAccept",
    "type": "(call: CometChat.Call) => void"
  },
  "props": {
    "callbacks": {
      "onAccept": "(call: CometChat.Call) => void",
      "onDecline": "(call: CometChat.Call) => void",
      "onCallEnded": "() => void",
      "onError": "((error: CometChat.CometChatException) => void) | null"
    },
    "sound": {
      "disableSoundForCalls": { "type": "boolean", "default": false },
      "customSoundForCalls": { "type": "string", "default": "built-in" }
    },
    "configuration": {
      "callSettingsBuilder": {
        "type": "(call: CometChat.Call) => any",
        "default": "undefined",
        "note": "Custom call settings for the ongoing call session after accepting"
      }
    },
    "viewSlots": {
      "itemView": "(call: CometChat.Call) => ReactNode",
      "leadingView": "(call: CometChat.Call) => ReactNode",
      "titleView": "(call: CometChat.Call) => ReactNode",
      "subtitleView": "(call: CometChat.Call) => ReactNode",
      "trailingView": "(call: CometChat.Call) => ReactNode"
    }
  },
  "events": [
    {
      "name": "ui:call/rejected",
      "payload": "{ call }",
      "description": "Call declined by user"
    },
    {
      "name": "ui:call/ended",
      "payload": "{}",
      "description": "Ongoing call ended"
    }
  ],
  "sdkListeners": [
    "onIncomingCallReceived",
    "onIncomingCallCancelled",
    "onOutgoingCallAccepted",
    "onOutgoingCallRejected"
  ],
  "types": {
    "CometChatDateFormatConfig": {
      "today": "string | undefined",
      "yesterday": "string | undefined",
      "lastWeek": "string | undefined",
      "otherDays": "string | undefined"
    }
  }
}

Overview

CometChatIncomingCall is a full-screen notification component that automatically listens for incoming calls via the CometChat SDK CallListener. When an incoming call is detected, it displays the caller’s avatar, name, and call type (Voice/Video) with accept and decline buttons.

Live Preview — interact with the default incoming call screen.

Open in Storybook ↗

The component handles:

• Automatic detection of incoming calls via SDK CallListener
• Caller avatar, name, and call type display (Voice/Video)
• Accept button — transitions to CometChatOngoingCall internally
• Decline button — rejects the call via SDK
• Incoming call sound playback (looping while notification is visible)
• Self-managed visibility (renders nothing when no incoming call is active)

Placement: Render CometChatIncomingCall at your app’s root level. It manages its own visibility internally and only appears when an incoming call is detected.

Note: In v7, CallButtons is not a standalone component — call button functionality is part of CometChatMessageHeader. Use CometChatIncomingCall separately to handle the incoming call notification flow.

---

Usage

Flat API

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

function App() {
  return (
    <div>
      {/* Your app content */}
      <CometChatIncomingCall
        onAccept={(call) => {
          console.log("Call accepted:", call.getSessionId());
        }}
        onDecline={(call) => {
          console.log("Call declined:", call.getSessionId());
        }}
        onCallEnded={() => {
          console.log("Call ended");
        }}
      />
    </div>
  );
}

Full Layout Example

import {
  CometChatConversations,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatIncomingCall,
} from "@cometchat/chat-uikit-react";

function ChatApp() {
  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ width: 360 }}>
        <CometChatConversations onItemClick={handleConversationClick} />
      </div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
        <CometChatMessageHeader user={user} group={group} />
        <CometChatMessageList user={user} group={group} />
        <CometChatMessageComposer user={user} group={group} />
      </div>

      {/* Render at root level — manages its own visibility */}
      <CometChatIncomingCall />
    </div>
  );
}

---

Actions and Events

Callback Props

Prop	Signature	Fires when
onAccept	(call: CometChat.Call) => void	User clicks the accept button
onDecline	(call: CometChat.Call) => void	User clicks the decline button
onCallEnded	() => void	Ongoing call session ends
onError	((error: CometChat.CometChatException) => void) | null	SDK error occurs

Events Emitted

UI events this component publishes:

Event	Payload	Fires when
ui:call/rejected	{ call }	Call declined by user
ui:call/ended	{}	Ongoing call ended

Events Received

This component does not subscribe to any UI events from other components.

SDK Listeners (Automatic)

These SDK CallListener callbacks are attached internally. The component updates its state automatically:

• onIncomingCallReceived — shows the incoming call notification
• onIncomingCallCancelled — hides the notification (caller cancelled)
• onOutgoingCallAccepted — transitions to ongoing call screen
• onOutgoingCallRejected — hides the notification (call rejected elsewhere)

---

Customization

View Props

Use view props to replace sections of the default UI while keeping the component’s behavior intact:

<CometChatIncomingCall
  leadingView={(call) => <MyCustomAvatar call={call} />}
  titleView={(call) => <span>{call.getSender().getName()}</span>}
  subtitleView={(call) => <span>Incoming {call.getType()} call</span>}
/>

Slot	Signature	Replaces
itemView	(call: CometChat.Call) => ReactNode	Entire call notification card
leadingView	(call: CometChat.Call) => ReactNode	Avatar section
titleView	(call: CometChat.Call) => ReactNode	Caller name
subtitleView	(call: CometChat.Call) => ReactNode	Call type label
trailingView	(call: CometChat.Call) => ReactNode	Trailing section

CSS Styling

Override design tokens on the component selector:

.cometchat-incoming-call {
  --cometchat-background-color-01: #1a1a2e;
  --cometchat-text-color-primary: #ffffff;
}

.cometchat-incoming-call__button-accept {
  background: var(--cometchat-success-color);
}

.cometchat-incoming-call__button-decline {
  background: var(--cometchat-error-color);
}

---

Props

All props are optional.

---

onAccept

Custom accept handler. When provided, overrides the default CometChat.acceptCall behavior.

Type	(call: CometChat.Call) => void
Default	undefined

---

onDecline

Custom decline handler. When provided, overrides the default CometChat.rejectCall behavior.

Type	(call: CometChat.Call) => void
Default	undefined

---

onCallEnded

Callback when the ongoing call session ends and the call screen should close.

Type	() => void
Default	undefined

---

disableSoundForCalls

Disable the incoming call ringtone sound.

Type	boolean
Default	false

---

customSoundForCalls

Custom sound URL to play for incoming calls (replaces the built-in ringtone).

Type	string
Default	Built-in ringtone

---

callSettingsBuilder

Custom call settings builder for the ongoing call session after accepting. If not provided, the component uses default settings.

Type	(call: CometChat.Call) => any
Default	undefined

<CometChatIncomingCall
  callSettingsBuilder={(call) => {
    return new CometChat.CallSettingsBuilder()
      .enableDefaultLayout(true)
      .setIsAudioOnlyCall(call.getType() === "audio")
      .build();
  }}
/>

---

onError

Callback when an SDK error occurs.

Type	((error: CometChat.CometChatException) => void) | null
Default	null

---

itemView

Custom renderer for the entire incoming call notification card.

Type	(call: CometChat.Call) => ReactNode
Default	undefined

---

leadingView

Custom renderer for the avatar section.

Type	(call: CometChat.Call) => ReactNode
Default	undefined

---

titleView

Custom renderer for the caller name.

Type	(call: CometChat.Call) => ReactNode
Default	undefined

---

subtitleView

Custom renderer for the call type label (Voice/Video).

Type	(call: CometChat.Call) => ReactNode
Default	undefined

---

trailingView

Custom renderer for the trailing section.

Type	(call: CometChat.Call) => ReactNode
Default	undefined

---

className

Additional CSS class name applied to the root element.

Type	string
Default	undefined

---

CSS Selectors

Target	Selector
Root container	.cometchat-incoming-call
Info section	.cometchat-incoming-call__info
Avatar	.cometchat-incoming-call__avatar
Details container	.cometchat-incoming-call__details
Title	.cometchat-incoming-call__title
Subtitle	.cometchat-incoming-call__subtitle
Trailing section	.cometchat-incoming-call__trailing
Button group	.cometchat-incoming-call__button-group
Accept button	.cometchat-incoming-call__button-accept
Decline button	.cometchat-incoming-call__button-decline

---

Next Steps

Outgoing Call

Display the outgoing call screen while waiting for the receiver to answer

Call Logs

Browse call history and re-initiate calls

Theming

Customize colors, fonts, and spacing