Incoming Call - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatIncomingCall",
  "package": "@cometchat/chat-uikit-react-native",
  "import": "import { CometChatIncomingCall } from \"@cometchat/chat-uikit-react-native\";",
  "description": "Visual representation for incoming voice and video calls with accept/decline options.",
  "props": {
    "data": {
      "call": {
        "type": "CometChat.Call | CometChat.CustomMessage",
        "note": "The incoming call object"
      }
    },
    "callbacks": {
      "onAccept": "(call: CometChat.BaseMessage) => void",
      "onDecline": "(call: CometChat.BaseMessage) => void",
      "onError": "(error: CometChat.CometChatException) => void"
    },
    "sound": {
      "disableSoundForCalls": { "type": "boolean", "default": false },
      "customSoundForCalls": { "type": "string", "default": "built-in" }
    },
    "viewSlots": {
      "ItemView": "(call) => JSX.Element",
      "LeadingView": "(call) => JSX.Element",
      "TitleView": "(call) => JSX.Element",
      "SubtitleView": "(call) => JSX.Element",
      "TrailingView": "(call) => JSX.Element"
    }
  },
  "events": [
    { "name": "ccCallRejected", "payload": "{ call }", "description": "Call rejected by receiver" },
    { "name": "ccCallAccepted", "payload": "{ call }", "description": "Call accepted by receiver" },
    { "name": "ccCallEnded", "payload": "{ call }", "description": "Call successfully ended" },
    { "name": "ccCallFailled", "payload": "{ call }", "description": "Error during call" }
  ]
}

Where It Fits

CometChatIncomingCall is a Component that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call.

Minimal Render

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react-native";
import { useState, useRef, useEffect } from "react";

function IncomingCallDemo() {
  const incomingCall = useRef<CometChat.Call | null>(null);
  const [callReceived, setCallReceived] = useState(false);
  const listenerId = "INCOMING_CALL_LISTENER";

  useEffect(() => {
    CometChat.addCallListener(
      listenerId,
      new CometChat.CallListener({
        onIncomingCallReceived: (call) => {
          incomingCall.current = call;
          setCallReceived(true);
        },
        onIncomingCallCancelled: (call) => {
          incomingCall.current = null;
          setCallReceived(false);
        },
      })
    );

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

  return (
    <>
      {callReceived && incomingCall.current && (
        <CometChatIncomingCall
          call={incomingCall.current}
          onDecline={() => setCallReceived(false)}
        />
      )}
    </>
  );
}

Actions and Events

Callback Props

onAccept

Fires when the accept button is pressed.

onAccept?: (call: CometChat.BaseMessage) => void

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

function IncomingCallWithAccept() {
  const handleAccept = (call: CometChat.BaseMessage) => {
    console.log("Call accepted:", call);
  };

  return (
    <CometChatIncomingCall
      call={incomingCall}
      onAccept={handleAccept}
      onDecline={() => setCallReceived(false)}
    />
  );
}

onDecline

Fires when the decline button is pressed.

onDecline?: (call: CometChat.BaseMessage) => void

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

function IncomingCallWithDecline() {
  const handleDecline = (call) => {
    console.log("Call declined");
    setCallReceived(false);
  };

  return (
    <CometChatIncomingCall
      call={incomingCall}
      onDecline={handleDecline}
    />
  );
}

onError

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

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

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

function IncomingCallWithError() {
  return (
    <CometChatIncomingCall
      call={incomingCall}
      onDecline={() => setCallReceived(false)}
      onError={(error: CometChat.CometChatException) => {
        console.error("IncomingCall error:", error);
      }}
    />
  );
}

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 }`
`ccCallAccepted`	Initiated call is accepted by the receiver	`{ call }`
`ccCallEnded`	Initiated call successfully ends	`{ call }`
`ccCallFailled`	Error occurs during the initiated 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 useIncomingCallEvents() {
  useEffect(() => {
    const listenerId = "INCOMING_CALL_EVENTS_" + Date.now();

    CometChatUIEventHandler.addCallListener(listenerId, {
      ccCallRejected: ({ call }) => {
        console.log("Call rejected:", call);
      },
      ccCallAccepted: ({ call }) => {
        console.log("Call accepted:", call);
      },
      ccCallEnded: ({ call }) => {
        console.log("Call ended:", call);
      },
      ccCallFailled: ({ call }) => {
        console.log("Call failed:", call);
      },
    });

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

Custom View Slots

Each slot replaces a section of the default UI. Slots that accept a call parameter receive the call object for customization.

Slot	Signature	Replaces
`ItemView`	`(call) => JSX.Element`	Entire incoming call card
`LeadingView`	`(call) => JSX.Element`	Avatar / left section
`TitleView`	`(call) => JSX.Element`	Caller name / title text
`SubtitleView`	`(call) => JSX.Element`	Call type / status text
`TrailingView`	`(call) => JSX.Element`	Accept/decline buttons

ItemView

Custom view for the entire incoming call card.

ItemView?: (call: CometChat.Call | CometChat.CustomMessage) => JSX.Element

import { CometChatIncomingCall } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { View, Text } from "react-native";

function ItemViewDemo() {
  const getItemView = (call: CometChat.Call | CometChat.CustomMessage) => {
    return (
      <View style={{ padding: 20, backgroundColor: '#6852D6' }}>
        <Text style={{ color: 'white' }}>Incoming Call</Text>
      </View>
    );
  };

  return (
    <CometChatIncomingCall
      call={incomingCall}
      onDecline={() => setCallReceived(false)}
      ItemView={getItemView}
    />
  );
}

LeadingView

Custom view for the avatar / left section.

LeadingView?: (call: CometChat.Call | CometChat.CustomMessage) => JSX.Element

import { CometChatIncomingCall } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { View, Text } from "react-native";

function LeadingViewDemo() {
  const getLeadingView = (call: CometChat.Call | CometChat.CustomMessage) => {
    const caller = call.getCallInitiator();
    return (
      <View style={{ width: 60, height: 60, borderRadius: 30, backgroundColor: '#6852D6' }}>
        <Text style={{ color: 'white', textAlign: 'center', lineHeight: 60 }}>
          {caller.getName().charAt(0)}
        </Text>
      </View>
    );
  };

  return (
    <CometChatIncomingCall
      call={incomingCall}
      onDecline={() => setCallReceived(false)}
      LeadingView={getLeadingView}
    />
  );
}

SubtitleView

Custom view for the call type / status text.

SubtitleView?: (call: CometChat.Call | CometChat.CustomMessage) => JSX.Element

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

function SubtitleViewDemo() {
  const getSubtitleView = (call: CometChat.Call | CometChat.CustomMessage) => {
    const callType = call.getType() === "audio" ? "Voice Call" : "Video Call";
    return <Text style={{ color: '#727272' }}>{callType}</Text>;
  };

  return (
    <CometChatIncomingCall
      call={incomingCall}
      onDecline={() => setCallReceived(false)}
      SubtitleView={getSubtitleView}
    />
  );
}

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 CometChatIncomingCall component.

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

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

  return (
    <CometChatIncomingCall
      call={incomingCall}
      onDecline={() => setCallReceived(false)}
      style={{
        containerStyle: {
          backgroundColor: theme.color.extendedPrimary100,
        },
        avatarStyle: {
          containerStyle: {
            backgroundColor: theme.color.extendedPrimary500,
            borderRadius: 8,
          },
          imageStyle: {
            borderRadius: 8,
          },
        },
        declineCallButtonStyle: {
          backgroundColor: theme.color.staticWhite,
        },
        declineCallTextStyle: {
          color: theme.color.error,
        },
        acceptCallButtonStyle: {
          backgroundColor: theme.color.primary,
        },
      }}
    />
  );
}

Visibility Props

Property	Description	Code
`disableSoundForCalls`	Disable/enable the sound of incoming calls	`disableSoundForCalls?: boolean`
`customSoundForCalls`	Set custom sound for incoming calls	`customSoundForCalls?: string`

Next Steps

Outgoing Call

Display and manage outgoing calls

Call Buttons

Add voice and video call buttons to your UI

Call Features

Overview of all calling features

Component Styling

Customize the appearance of UI Kit components

​Where It Fits

​Minimal Render

​Actions and Events

​Callback Props

​onAccept

​onDecline

​onError

​Global UI Events

​Custom View Slots

​ItemView

​LeadingView

​SubtitleView

​Styling

​Visibility Props

​Next Steps