Ongoing Call - CometChat Docs

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.leaveSession(); // Calls SDK 4.x: endSession()
              CometChat.clearActiveCall();
              onCallEnd();
            },
          })
        ),
    [call]
  );

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

This listener handles the call-ended case like CometChatIncomingCall, calling leaveSession(). It does not replicate the kit’s full teardown — the kit also ends the call from onUserLeft and gates endCall on isDefaultCall(call). To match that behavior, add an onUserLeft handler that leaves the session (gating endCall on isDefaultCall(call) where applicable), so the call also tears down when the remote participant leaves — not only on an explicit end. The kit itself still calls endSession(), which Calls SDK 5.x deprecates in favor of leaveSession().

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 { CometChatCalls } from "@cometchat/calls-sdk-react-native";
import { CometChatOngoingCall } from "@cometchat/chat-uikit-react-native";

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

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

Keep onError stable (wrap it in useCallback, as above). The token request re-runs whenever sessionID or onError changes, and its cleanup clears the built call settings. A new onError function on every render therefore restarts the request and leaves the loading spinner on screen for good. React StrictMode in development runs that cleanup once on mount, which shows the same spinner.

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(
    new CometChatCalls.OngoingCallListener({
      onCallEnded: () => {
        CometChatCalls.leaveSession(); // Calls SDK 4.x: endSession()
      },
    })
  );

<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 UI Kit wraps it in a safe-area container (top and bottom edges) filled with the theme’s background1 color, and shows a loading spinner in the theme’s primary color until the call is ready.

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.

There is one more path that opens the call screen: joining a group call from the meeting bubble in a group chat. The calling extension renders CometChatOngoingCall in a modal, built with CallingConfiguration.groupCallSettingsBuilder (called as (undefined, group, isAudioOnly)) or, without one, a plain builder with setIsAudioOnlyCall(...). It also sets its own OngoingCallListener, and this path emits no ccCallEnded. Leaving the call only closes the modal, through ccShowOngoingCall with { child: null }. CallingConfiguration is not exported from the package root.

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

​Usage

​Integration

​Actions

​1. onError

​Filters

​1. CallSettingsBuilder

​Example

​Events

​Customization

​Style

​Functionality

​Advanced

​Common Patterns

​Show the Ongoing Call After Accepting a Call

​Configure Call Settings for a Video Call

​Audio-Only Call Configuration

​Listen for Call End Events

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

​Next Steps

Incoming Call

Outgoing Call

Call Buttons

Call Features

Usage

Integration

Actions

1. onError

Filters

1. CallSettingsBuilder

Example

Events

Customization

Style

Functionality

Advanced

Common Patterns

Show the Ongoing Call After Accepting a Call

Configure Call Settings for a Video Call

Audio-Only Call Configuration

Listen for Call End Events

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

Next Steps