Outgoing Call

Display and manage outgoing voice and video calls with CometChatOutgoingCall component in React Native UI Kit, providing call status and controls.

AI Integration Quick Reference

{
  "component": "CometChatOutgoingCall",
  "package": "@cometchat/chat-uikit-react-native",
  "import": "import { CometChatOutgoingCall } from \"@cometchat/chat-uikit-react-native\";",
  "description": "Visual representation for outgoing voice and video calls with call status and end call controls.",
  "props": {
    "data": {
      "call": {
        "type": "CometChat.Call | CometChat.CustomMessage",
        "note": "The outgoing call object"
      }
    },
    "callbacks": {
      "onEndCallButtonPressed": "(call: CometChat.Call) => void",
      "onError": "(error: CometChat.CometChatException) => void"
    },
    "sound": {
      "disableSoundForCalls": { "type": "boolean", "default": false },
      "customSoundForCalls": { "type": "string", "default": "built-in" }
    },
    "viewSlots": {
      "TitleView": "(call) => JSX.Element",
      "SubtitleView": "(call) => JSX.Element",
      "AvatarView": "(call) => JSX.Element",
      "EndCallView": "(call) => JSX.Element"
    }
  },
  "events": [
    { "name": "ccCallEnded", "payload": "{ call }", "description": "Call successfully ended" },
    { "name": "ccCallFailled", "payload": "{ call }", "description": "Error during call" }
  ]
}

Where It Fits

CometChatOutgoingCall is a Component that provides a visual representation of a user-initiated call, whether it’s a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience.

---

Minimal Render

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

function OutgoingCallDemo() {
  const [call, setCall] = useState<CometChat.Call>();

  useEffect(() => {
    const callObject = new CometChat.Call(
      "receiver-uid",
      CometChatUiKitConstants.MessageTypeConstants.audio,
      CometChatUiKitConstants.ReceiverTypeConstants.user
    );

    CometChat.initiateCall(callObject)
      .then((c) => setCall(c))
      .catch(console.log);
  }, []);

  return <>{call && <CometChatOutgoingCall call={call} />}</>;
}

---

Actions and Events

Callback Props

onEndCallButtonPressed

Fires when the end call button is pressed.

onEndCallButtonPressed?: (call: CometChat.Call) => void

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

function OutgoingCallWithEndButton() {
  const cancelCall = (c: CometChat.Call) => {
    CometChat.endCall(c.getSessionId()).then(() => {
      setCall(undefined);
    });
  };

  return (
    <CometChatOutgoingCall
      call={call}
      onEndCallButtonPressed={cancelCall}
    />
  );
}

onError

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

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

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

function OutgoingCallWithError() {
  return (
    <CometChatOutgoingCall
      call={call}
      onError={(error: CometChat.CometChatException) => {
        console.error("OutgoingCall 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
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 useOutgoingCallEvents() {
  useEffect(() => {
    const listenerId = "OUTGOING_CALL_EVENTS_" + Date.now();

    CometChatUIEventHandler.addCallListener(listenerId, {
      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
TitleView	(call) => JSX.Element	Caller name / title text
SubtitleView	(call) => JSX.Element	Call status text
AvatarView	(call) => JSX.Element	Avatar / profile picture
EndCallView	(call) => JSX.Element	End call button

TitleView

Custom view for the caller name / title text.

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

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

function TitleViewDemo() {
  const getTitleView = (call: CometChat.Call | CometChat.CustomMessage) => {
    const receiver = call.getCallReceiver();
    return <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{receiver.getName()}</Text>;
  };

  return <CometChatOutgoingCall call={call} TitleView={getTitleView} />;
}

SubtitleView

Custom view for the call status text.

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

import { CometChatOutgoingCall } 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) => {
    return <Text style={{ color: '#727272' }}>Calling...</Text>;
  };

  return <CometChatOutgoingCall call={call} SubtitleView={getSubtitleView} />;
}

AvatarView

Custom view for the avatar / profile picture.

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

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

function AvatarViewDemo() {
  const getAvatarView = (call: CometChat.Call | CometChat.CustomMessage) => {
    const receiver = call.getCallReceiver();
    return (
      <View style={{ width: 80, height: 80, borderRadius: 40, backgroundColor: '#6852D6' }}>
        <Text style={{ color: 'white', textAlign: 'center', lineHeight: 80, fontSize: 24 }}>
          {receiver.getName().charAt(0)}
        </Text>
      </View>
    );
  };

  return <CometChatOutgoingCall call={call} AvatarView={getAvatarView} />;
}

EndCallView

Custom view for the end call button.

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

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

function EndCallViewDemo() {
  const getEndCallView = (call: CometChat.Call | CometChat.CustomMessage) => {
    return (
      <TouchableOpacity
        style={{ backgroundColor: '#E54D2E', padding: 16, borderRadius: 30 }}
        onPress={() => CometChat.endCall(call.getSessionId())}
      >
        <Text style={{ color: 'white' }}>End Call</Text>
      </TouchableOpacity>
    );
  };

  return <CometChatOutgoingCall call={call} EndCallView={getEndCallView} />;
}

---

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

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

function StylingDemo() {
  return (
    <CometChatOutgoingCall
      call={call}
      style={{
        avatarStyle: {
          containerStyle: {
            borderRadius: 8,
          },
          imageStyle: {
            borderRadius: 8,
          },
        },
        endCallButtonStyle: {
          borderRadius: 8,
        },
      }}
    />
  );
}

Visibility Props

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

---

Next Steps

Incoming Call

Display and handle incoming 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