Ongoing Call

Display the React Native UI Kit in-call screen for voice and video calls with CometChatOngoingCall, configured through the Calls SDK call settings builder.

The CometChatOngoingCall component shows the screen users see during a voice or video call. It requests a call token for the session, then renders the Calls SDK call view, with video tiles and call controls such as mute, pause video, switch camera, and end call. Until the token arrives, it shows a loading spinner.

AI Integration Quick Reference

Field	Value
Component	CometChatOngoingCall
Package	@cometchat/chat-uikit-react-native
Import	import { CometChatOngoingCall } from "@cometchat/chat-uikit-react-native";
Purpose	In-call screen for an active voice or video call. Gets a call token for the session and renders the Calls SDK call view.
Data props	sessionID · callSettingsBuilder (both required)
Primary output	None on the component — call events arrive on the OngoingCallListener set on callSettingsBuilder
Other actions	onError — details
View slots	None
UI events	None of its own — details
Styling	No style prop — details
Prerequisites	CometChatUIKit.init() completed and a user logged in · @cometchat/calls-sdk-react-native installed (not a kit peer dependency)

---

Usage

Integration

CometChatIncomingCall and CometChatOutgoingCall render CometChatOngoingCall for you once a call connects, so most apps never render it directly. Render it yourself when you build your own call flow.

Pass the call’s session ID and a CometChatCalls.CallSettingsBuilder. Set an OngoingCallListener on the builder so your app knows when the call ends.

import { useMemo } from "react";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatCalls } from "@cometchat/calls-sdk-react-native";
import { CometChatOngoingCall } from "@cometchat/chat-uikit-react-native";

function OngoingCallScreen({ call, onCallEnd }: { call: CometChat.Call; onCallEnd: () => void }) {
  const callSettingsBuilder = useMemo(
    () =>
      new CometChatCalls.CallSettingsBuilder()
        .enableDefaultLayout(true)
        .setIsAudioOnlyCall(call.getType() === "audio")
        .setCallEventListener(
          new CometChatCalls.OngoingCallListener({
            onCallEndButtonPressed: () => {
              CometChat.endCall(call.getSessionId()).catch(console.log);
            },
            onCallEnded: () => {
              CometChatCalls.endSession();
              CometChat.clearActiveCall();
              onCallEnd();
            },
          })
        ),
    [call]
  );

  return (
    <CometChatOngoingCall
      sessionID={call.getSessionId()}
      callSettingsBuilder={callSettingsBuilder}
    />
  );
}

This listener takes the same steps as CometChatIncomingCall when a call ends.

The component fills its parent, so render it full screen, for example inside a React Native Modal as CometChatOutgoingCall does.

Actions

Actions dictate how a component functions. CometChatOngoingCall has one user-defined action.

1. onError

Fires when the component cannot get a call token: no user is logged in, or CometChat.getLoggedinUser() or CometChatCalls.generateToken() fails. A plain JavaScript Error, such as the one for no logged-in user, arrives as a CometChatException with the code TOKEN_GENERATION_FAILED.

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

function OngoingCallWithError() {
  const handleError = useCallback((error: CometChat.CometChatException) => {
    console.error("OngoingCall error:", error);
  }, []);

  return (
    <CometChatOngoingCall
      sessionID={sessionID}
      callSettingsBuilder={callSettingsBuilder}
      onError={handleError}
    />
  );
}

Errors during the call are not sent to this prop. They go to the onError handler of the OngoingCallListener on your builder.

CometChatOngoingCall has no call-ended action. To act when the call ends, set onCallEnded on the builder’s OngoingCallListener, as shown in Integration.

---

Filters

Filters narrow the data a component shows. CometChatOngoingCall shows no list. Instead, callSettingsBuilder controls the call itself.

1. CallSettingsBuilder

CometChatCalls.CallSettingsBuilder from @cometchat/calls-sdk-react-native offers these methods:

Methods	Description	Code
enableDefaultLayout	Show or hide the default button layout. Default: true	.enableDefaultLayout(boolean)
setIsAudioOnlyCall	Make the call audio-only. Default: false	.setIsAudioOnlyCall(boolean)
setCallEventListener	Set the OngoingCallListener that receives call events	.setCallEventListener(OngoingCallListener)
setMode	Set the call mode: DEFAULT or SPOTLIGHT from CometChatCalls.CALL_MODE	.setMode(mode)
setDefaultAudioMode	Set the default audio mode: SPEAKER, EARPIECE, BLUETOOTH or HEADPHONES from CometChatCalls.AUDIO_MODE	.setDefaultAudioMode(audioMode)
showEndCallButton	Show or hide the end call button. Default: true	.showEndCallButton(boolean)
showMuteAudioButton	Show or hide the mute audio button. Default: true	.showMuteAudioButton(boolean)
showPauseVideoButton	Show or hide the pause video button. Default: true	.showPauseVideoButton(boolean)
showSwitchCameraButton	Show or hide the switch camera button. Default: true	.showSwitchCameraButton(boolean)
showAudioModeButton	Show or hide the audio mode button. Default: true	.showAudioModeButton(boolean)
showRecordingButton	Show or hide the recording button. Default: false	.showRecordingButton(boolean)
startWithAudioMuted	Start the call with audio muted. Default: false	.startWithAudioMuted(boolean)
startWithVideoMuted	Start the call with video muted. Has no effect on audio calls. Default: false	.startWithVideoMuted(boolean)
startRecordingOnCallStart	Start recording as soon as the call starts. Default: false	.startRecordingOnCallStart(boolean)
setIdleTimeoutPeriod	When you are the only one in the call, end it after this period. You get the option to extend the call 60 seconds before it ends. Default: 180 seconds	.setIdleTimeoutPeriod(number)
enableVideoTileClick	Allow tapping video tiles in Spotlight mode. Default: allowed	.enableVideoTileClick(boolean)
enableVideoTileDrag	Allow dragging video tiles in Spotlight mode. Default: allowed	.enableVideoTileDrag(boolean)

Example

In the example below, the call shows the recording button and starts with audio muted:

import { CometChatCalls } from "@cometchat/calls-sdk-react-native";
import { CometChatOngoingCall } from "@cometchat/chat-uikit-react-native";

const callSettingsBuilder = new CometChatCalls.CallSettingsBuilder()
  .enableDefaultLayout(true)
  .setIsAudioOnlyCall(false)
  .showRecordingButton(true)
  .startWithAudioMuted(true)
  .setCallEventListener(callListener); // the OngoingCallListener from Integration

<CometChatOngoingCall sessionID={sessionID} callSettingsBuilder={callSettingsBuilder} />;

Voice and video calls need microphone and camera permissions on iOS and Android. Add them as described in Add Permissions.

---

Events

Events are emitted by a component. CometChatOngoingCall emits no events of its own. When CometChatIncomingCall or CometChatOutgoingCall render it for you, they emit this event when the call ends:

Event	Description
ccCallEnded	Triggers when a call shown by CometChatIncomingCall or CometChatOutgoingCall ends. Payload: { call }; call can be undefined.

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

function useCallEndedEvent() {
  useEffect(() => {
    const listenerId = "ONGOING_CALL_EVENTS_" + Date.now();

    // Add the listener
    CometChatUIEventHandler.addCallListener(listenerId, {
      ccCallEnded: ({ call }: { call?: CometChat.Call }) => {
        console.log("Call ended:", call);
      },
    });

    // Remove the listener on cleanup
    return () => {
      CometChatUIEventHandler.removeCallListener(listenerId);
    };
  }, []);
}

If you render CometChatOngoingCall yourself, nothing emits this event. Use onCallEnded on your builder’s OngoingCallListener instead.

---

Customization

To fit your app’s requirements, you can customize how the call behaves through the component’s props and callSettingsBuilder.

Style

CometChatOngoingCall has no style prop. The Calls SDK draws the call screen. The only UI Kit element is the loading spinner, which uses the theme’s primary color.

---

Functionality

Property	Description	Code
sessionID	Session ID of the call. Required.	sessionID: string
callSettingsBuilder	Settings for the call. Required.	callSettingsBuilder: CometChatCalls.CallSettingsBuilder
onError	Called when the component cannot get a call token	onError?: (e: CometChat.CometChatException) => void

• callSettingsBuilder must be a CometChatCalls.CallSettingsBuilder instance, because the component calls its build() method. A plain settings object does not work.
• The call uses the settings built on the component’s first render. Passing a different builder later has no effect.

Advanced

For advanced customization, UI Kit components accept custom views for parts of their UI. CometChatOngoingCall has no view slots, so it offers no customization beyond callSettingsBuilder.

---

Common Patterns

Show the Ongoing Call After Accepting a Call

Accept the call with the Chat SDK, then render the call screen for the accepted call. This mirrors what CometChatIncomingCall does by default.

import { useState } from "react";
import { Button } from "react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function AcceptCall({ incomingCall }: { incomingCall: CometChat.Call }) {
  const [activeCall, setActiveCall] = useState<CometChat.Call>();

  const accept = () => {
    CometChat.acceptCall(incomingCall.getSessionId())
      .then((accepted) => setActiveCall(accepted))
      .catch(console.log);
  };

  if (activeCall) {
    // OngoingCallScreen is the component from Integration
    return <OngoingCallScreen call={activeCall} onCallEnd={() => setActiveCall(undefined)} />;
  }

  return <Button title="Accept" onPress={accept} />;
}

Configure Call Settings for a Video Call

When you render CometChatOngoingCall yourself, also set the OngoingCallListener from Integration.

import { CometChatCalls } from "@cometchat/calls-sdk-react-native";

const videoCallSettings = new CometChatCalls.CallSettingsBuilder()
  .enableDefaultLayout(true)
  .setIsAudioOnlyCall(false)
  .setMode(CometChatCalls.CALL_MODE.SPOTLIGHT)
  .showSwitchCameraButton(true)
  .startWithVideoMuted(false);

Audio-Only Call Configuration

When you render CometChatOngoingCall yourself, also set the OngoingCallListener from Integration.

import { CometChatCalls } from "@cometchat/calls-sdk-react-native";

const audioCallSettings = new CometChatCalls.CallSettingsBuilder()
  .enableDefaultLayout(true)
  .setIsAudioOnlyCall(true)
  .setDefaultAudioMode(CometChatCalls.AUDIO_MODE.SPEAKER)
  .showMuteAudioButton(true)
  .showEndCallButton(true);

Listen for Call End Events

How you learn that a call ended depends on what renders the call screen:

• You render CometChatOngoingCall: set onCallEnded on the builder’s OngoingCallListener, as in Integration.
• CometChatIncomingCall or CometChatOutgoingCall renders it: listen for ccCallEnded, as in Events.

Use Your Own Settings with Incoming Call, Outgoing Call or Call Buttons

These components take a builder for the call screen they open:

Component	Prop	Value
CometChatIncomingCall	callSettingsBuilder	A CometChatCalls.CallSettingsBuilder instance
CometChatOutgoingCall	callSettingsBuilder	A CometChatCalls.CallSettingsBuilder instance
CometChatCallButtons	callSettingsBuilder	A function (user, group, isAudioOnly) that returns a builder, used for the outgoing call screen it opens

Two things differ from rendering CometChatOngoingCall yourself:

• These components set their own OngoingCallListener on your builder, which replaces any listener you set. React to the call through their callbacks and events instead.
• Without a builder, they turn on the default layout and make audio calls audio-only. Your builder is used as it is, so set enableDefaultLayout(true) and setIsAudioOnlyCall(...) yourself.

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

function CallButtonsWithSettings({ user }: { user: CometChat.User }) {
  return (
    <CometChatCallButtons
      user={user}
      callSettingsBuilder={(_user, _group, isAudioOnly) =>
        new CometChatCalls.CallSettingsBuilder()
          .enableDefaultLayout(true)
          .setIsAudioOnlyCall(isAudioOnly ?? false)
          .startWithAudioMuted(true)
      }
    />
  );
}

---

Next Steps

Incoming Call

Display and handle incoming calls

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