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

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

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "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" }
    ]
  }
  ```
</Accordion>

## Where It Fits

`CometChatOutgoingCall` is a [Component](/ui-kit/react-native/components-overview#components) 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2JiXkJ8lq6PmPGlJ/images/703120eb-outgoing_call-c24eb1936c04bb40ea873ac19b973b56.png?fit=max&auto=format&n=2JiXkJ8lq6PmPGlJ&q=85&s=fc41a9e26489f6706d5933679236d06b" width="1440" height="833" data-path="images/703120eb-outgoing_call-c24eb1936c04bb40ea873ac19b973b56.png" />
</Frame>

***

## Minimal Render

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

```tsx lines theme={null}
onEndCallButtonPressed?: (call: CometChat.Call) => void
```

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

```tsx lines theme={null}
onError?: (error: CometChat.CometChatException) => void
```

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

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

```tsx lines theme={null}
TitleView?: (call: CometChat.Call | CometChat.CustomMessage) => JSX.Element
```

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

```tsx lines theme={null}
SubtitleView?: (call: CometChat.Call | CometChat.CustomMessage) => JSX.Element
```

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

```tsx lines theme={null}
AvatarView?: (call: CometChat.Call | CometChat.CustomMessage) => JSX.Element
```

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

```tsx lines theme={null}
EndCallView?: (call: CometChat.Call | CometChat.CustomMessage) => JSX.Element
```

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/k0f_g7UwNe_JINeP/images/430add9e-outgoing_call_styling-4478d162278403121a8f89d481625c9e.png?fit=max&auto=format&n=k0f_g7UwNe_JINeP&q=85&s=54d3565dce96adb0eaa790ba9f081059" width="1280" height="800" data-path="images/430add9e-outgoing_call_styling-4478d162278403121a8f89d481625c9e.png" />
</Frame>

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

<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="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>

  <Card title="Component Styling" icon="paintbrush" href="/ui-kit/react-native/component-styling">
    Customize the appearance of UI Kit components
  </Card>
</CardGroup>