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

# Outgoing Call

> Displays the outgoing call screen with receiver info and a cancel button while waiting for the call to be answered.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatOutgoingCall",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatOutgoingCall } from \"@cometchat/chat-uikit-react\";",
    "description": "Displays the outgoing call screen with receiver info and a cancel button while waiting for the call to be answered.",
    "cssRootClass": ".cometchat-outgoing-call",
    "primaryOutput": {
      "prop": "onCallCanceled",
      "type": "() => void"
    },
    "props": {
      "data": {
        "call": {
          "type": "CometChat.Call",
          "required": true,
          "note": "The CometChat call object representing the outgoing call"
        }
      },
      "callbacks": {
        "onCallCanceled": "() => void",
        "onError": "((error: CometChat.CometChatException) => void) | null"
      },
      "sound": {
        "disableSoundForCalls": { "type": "boolean", "default": false },
        "customSoundForCalls": { "type": "string", "default": "built-in" }
      },
      "viewSlots": {
        "titleView": "ReactNode",
        "subtitleView": "ReactNode",
        "avatarView": "ReactNode",
        "cancelButtonView": "ReactNode"
      }
    },
    "events": [],
    "eventsReceived": [],
    "sdkListeners": [],
    "types": {}
  }
  ```
</Accordion>

## Overview

`CometChatOutgoingCall` is a purely presentational component that displays the outgoing call screen while waiting for the receiver to answer. It shows the receiver's name, avatar, a "Calling..." subtitle, and an end-call button.

<Info>
  **Live Preview** — interact with the default outgoing call screen.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-calls-cometchat-outgoing-call--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-calls-cometchat-outgoing-call--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "700px", border: "1px solid #e0e0e0"}} title="CometChat Outgoing Call — Default" allow="clipboard-write" />

The component handles:

* Displaying receiver name and avatar from the `call` object
* "Calling..." subtitle text
* End-call/cancel button
* Outgoing call sound playback (looping while mounted, pauses on unmount)

> **Required prop:** The `call` prop is required. The component needs a valid `CometChat.Call` object to render receiver information.

> **Typical usage:** `CometChatOutgoingCall` is typically rendered by `CometChatMessageHeader` or `CometChatIncomingCall` internally when a call is initiated, but it can be used standalone.

***

## Usage

### Flat API

```tsx theme={null}
import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";

function OutgoingCallScreen({ call }: { call: CometChat.Call }) {
  return (
    <CometChatOutgoingCall
      call={call}
      onCallCanceled={() => {
        console.log("Call canceled by user");
        // Cancel the call via SDK
        CometChat.rejectCall(call.getSessionId(), CometChat.CALL_STATUS.CANCELLED);
      }}
    />
  );
}
```

### Standalone Usage Example

```tsx theme={null}
import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";

function CallManager() {
  const [outgoingCall, setOutgoingCall] = useState<CometChat.Call | null>(null);

  const initiateCall = async (receiverUID: string) => {
    const call = new CometChat.Call(
      receiverUID,
      CometChat.CALL_TYPE.VIDEO,
      CometChat.RECEIVER_TYPE.USER
    );
    const initiatedCall = await CometChat.initiateCall(call);
    setOutgoingCall(initiatedCall);
  };

  const cancelCall = () => {
    if (outgoingCall) {
      CometChat.rejectCall(
        outgoingCall.getSessionId(),
        CometChat.CALL_STATUS.CANCELLED
      );
      setOutgoingCall(null);
    }
  };

  return (
    <div>
      {outgoingCall && (
        <CometChatOutgoingCall
          call={outgoingCall}
          onCallCanceled={cancelCall}
        />
      )}
    </div>
  );
}
```

***

## Actions and Events

### Callback Props

| Prop             | Signature                                                 | Fires when                        |
| ---------------- | --------------------------------------------------------- | --------------------------------- |
| `onCallCanceled` | `() => void`                                              | User clicks the cancel/end button |
| `onError`        | `((error: CometChat.CometChatException) => void) \| null` | SDK error occurs                  |

### Events Emitted

This component does not emit any UI events.

### Events Received

This component does not subscribe to any UI events from other components.

### SDK Listeners (Automatic)

This component does not attach any SDK listeners. It is purely presentational — the parent component is responsible for managing call state transitions (e.g., listening for `onOutgoingCallAccepted` or `onOutgoingCallRejected`).

***

## Customization

### View Props

Use view props to replace sections of the default UI while keeping the component's behavior intact:

```tsx theme={null}
<CometChatOutgoingCall
  call={call}
  titleView={<span className="custom-title">{call.getReceiver().getName()}</span>}
  subtitleView={<span>Ringing...</span>}
  avatarView={<img src={call.getReceiver().getAvatar()} alt="avatar" />}
  cancelButtonView={<button onClick={handleCancel}>End Call</button>}
/>
```

| Slot               | Type        | Replaces          |
| ------------------ | ----------- | ----------------- |
| `titleView`        | `ReactNode` | Receiver name     |
| `subtitleView`     | `ReactNode` | "Calling..." text |
| `avatarView`       | `ReactNode` | Receiver avatar   |
| `cancelButtonView` | `ReactNode` | End-call button   |

#### titleView

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Xgdtn9VZPDi47bm-/images/294edd18-outgoing_calls_title_view_web_screens-bc3f5853236e03acb85aa532fd69706b.png?fit=max&auto=format&n=Xgdtn9VZPDi47bm-&q=85&s=324ef3b46be6bf12a7f1e149d51d5ece" width="1282" height="802" data-path="images/294edd18-outgoing_calls_title_view_web_screens-bc3f5853236e03acb85aa532fd69706b.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";

    function OutgoingCallCustomTitle({ call }: { call: CometChat.Call }) {
      return (
        <CometChatOutgoingCall
          call={call}
          titleView={
            <div className="outgoing-call__title">
              {call.getCallInitiator().getName()} {" <> "} {call.getCallReceiver().getName()}
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .outgoing-call__title {
      color: #141414;
      text-align: center;
      font: 500 24px Roboto;
    }
    ```
  </Tab>
</Tabs>

#### subtitleView

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mkn0UqPQ5BXljCV1/images/904cc985-outgoing_calls_subtitle_view_web_screens-ca75b11cc49d9955e040c37f05853a34.png?fit=max&auto=format&n=mkn0UqPQ5BXljCV1&q=85&s=930968c5f8371758a23836d6e31e929c" width="1282" height="802" data-path="images/904cc985-outgoing_calls_subtitle_view_web_screens-ca75b11cc49d9955e040c37f05853a34.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";

    function OutgoingCallCustomSubtitle({ call }: { call: CometChat.Call }) {
      return (
        <CometChatOutgoingCall
          call={call}
          subtitleView={
            <div className="outgoing-call__subtitle">
              <div className="outgoing-call__subtitle-icon" />
              {"Calling..."}
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .outgoing-call__subtitle {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 8px;
      color: #727272;
      text-align: center;
      font: 400 16px Roboto;
    }

    .outgoing-call__subtitle-icon {
      background: #a1a1a1;
      height: 24px;
      width: 24px;
    }
    ```
  </Tab>
</Tabs>

#### avatarView

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d242dfe4-outgoing_calls_avatar_view_web_screens-e4517aa9fc688283808448070a0d3c78.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=ba4bac10a691bf11c8e72979a01f6994" width="1282" height="802" data-path="images/d242dfe4-outgoing_calls_avatar_view_web_screens-e4517aa9fc688283808448070a0d3c78.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatOutgoingCall, CometChatAvatar } from "@cometchat/chat-uikit-react";

    function OutgoingCallCustomAvatar({ call }: { call: CometChat.Call }) {
      return (
        <CometChatOutgoingCall
          call={call}
          avatarView={
            <div className="outgoing-call__avatar">
              <CometChatAvatar.Root
                name={call.getCallReceiver()?.getName()}
                image={(call.getCallReceiver() as CometChat.User)?.getAvatar()}
              >
                <CometChatAvatar.Image />
                <CometChatAvatar.Initials />
              </CometChatAvatar.Root>
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .outgoing-call__avatar .cometchat-avatar {
      width: 160px;
      height: 160px;
      border-radius: 20px;
    }
    ```
  </Tab>
</Tabs>

### CSS Styling

Override design tokens on the component selector:

```css theme={null}
.cometchat-outgoing-call {
  --cometchat-background-color-01: #1a1a2e;
  --cometchat-text-color-primary: #ffffff;
}

.cometchat-outgoing-call__button {
  background: var(--cometchat-error-color);
}
```

***

## Props

The `call` prop is required. All other props are optional.

***

### call

The CometChat call object representing the outgoing call. **Required.**

|          |                  |
| -------- | ---------------- |
| Type     | `CometChat.Call` |
| Required | Yes              |

***

### disableSoundForCalls

Disable the outgoing call sound.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### customSoundForCalls

Custom sound URL to play during the outgoing call (replaces the built-in sound).

|         |                              |
| ------- | ---------------------------- |
| Type    | `string`                     |
| Default | Built-in outgoing call sound |

***

### onCallCanceled

Callback when the user clicks the cancel/end button.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `undefined`  |

***

### onError

Callback when an SDK error occurs.

|         |                                                           |
| ------- | --------------------------------------------------------- |
| Type    | `((error: CometChat.CometChatException) => void) \| null` |
| Default | `null`                                                    |

***

### titleView

Custom view that replaces the receiver name.

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

### subtitleView

Custom view that replaces the "Calling..." text.

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

### avatarView

Custom view that replaces the receiver avatar.

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

### cancelButtonView

Custom view that replaces the end-call button.

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

### className

Additional CSS class name applied to the root element.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

## CSS Selectors

| Target             | Selector                                    |
| ------------------ | ------------------------------------------- |
| Root container     | `.cometchat-outgoing-call`                  |
| Title container    | `.cometchat-outgoing-call__title-container` |
| Title              | `.cometchat-outgoing-call__title`           |
| Subtitle           | `.cometchat-outgoing-call__subtitle`        |
| Avatar             | `.cometchat-outgoing-call__avatar`          |
| Cancel button      | `.cometchat-outgoing-call__button`          |
| Cancel button icon | `.cometchat-outgoing-call__button-icon`     |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Incoming Call" icon="phone-arrow-down-left" href="/ui-kit/react/components/incoming-call">
    Handle incoming call notifications with accept/decline actions
  </Card>

  <Card title="Call Logs" icon="clock-rotate-left" href="/ui-kit/react/components/call-logs">
    Browse call history and re-initiate calls
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>