> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-eng-39154-rn-v5-docs-fixes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Accordion title="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](#actions)                                                                                                        |
  | View slots     | None                                                                                                                                   |
  | UI events      | None of its own — [details](#events)                                                                                                   |
  | Styling        | No `style` prop — [details](#style)                                                                                                    |
  | Prerequisites  | `CometChatUIKit.init()` completed and a user logged in · `@cometchat/calls-sdk-react-native` installed (**not** a kit peer dependency) |
</Accordion>

***

## 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.

```tsx lines theme={null}
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.

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

### Actions

[Actions](/ui-kit/react-native/components-overview#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`.

```tsx lines theme={null}
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](#integration).

***

### Filters

[Filters](/ui-kit/react-native/components-overview#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:

```tsx lines theme={null}
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} />;
```

<Warning>
  Voice and video calls need microphone and camera permissions on iOS and Android. Add them as described in [Add Permissions](/ui-kit/react-native/calling-integration#add-permissions).
</Warning>

***

### Events

[Events](/ui-kit/react-native/components-overview#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. |

```tsx lines theme={null}
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`     |

<Note>
  * `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.
</Note>

### 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.

```tsx lines theme={null}
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](#integration).

```tsx lines theme={null}
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](#integration).

```tsx lines theme={null}
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](#integration).
* **`CometChatIncomingCall` or `CometChatOutgoingCall` renders it:** listen for `ccCallEnded`, as in [Events](#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](#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.

```tsx lines theme={null}
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

<CardGroup cols={2}>
  <Card title="Incoming Call" icon="phone-arrow-down-left" href="/ui-kit/react-native/incoming-call">
    Display and handle incoming calls
  </Card>

  <Card title="Outgoing Call" icon="phone-arrow-up-right" href="/ui-kit/react-native/outgoing-call">
    Display and manage outgoing calls
  </Card>

  <Card title="Call Buttons" icon="phone" href="/ui-kit/react-native/call-buttons">
    Add voice and video call buttons to your UI
  </Card>

  <Card title="Call Features" icon="video" href="/ui-kit/react-native/call-features">
    Overview of all calling features
  </Card>
</CardGroup>