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

# Call Buttons

> Add voice and video call buttons with CometChatCallButtons component in React Native UI Kit, enabling users to initiate calls directly.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatCallButtons",
    "package": "@cometchat/chat-uikit-react-native",
    "import": "import { CometChatCallButtons } from \"@cometchat/chat-uikit-react-native\";",
    "description": "Voice and video call buttons that initiate calls to users or groups.",
    "props": {
      "data": {
        "user": {
          "type": "CometChat.User",
          "note": "User object for one-on-one calls"
        },
        "group": {
          "type": "CometChat.Group",
          "note": "Group object for group calls"
        }
      },
      "callbacks": {
        "onError": "(error: CometChat.CometChatException) => void"
      },
      "visibility": {
        "hideVoiceCallButton": { "type": "boolean", "default": false },
        "hideVideoCallButton": { "type": "boolean", "default": false }
      },
      "configuration": {
        "callSettingsBuilder": "Callback to configure call settings",
        "outgoingCallConfiguration": "Configuration for outgoing call component"
      }
    },
    "events": [
      {
        "name": "ccCallRejected",
        "payload": "{ call }",
        "description": "Initiated call rejected by receiver"
      },
      {
        "name": "ccCallFailled",
        "payload": "{ call }",
        "description": "Error occurred during initiated call"
      },
      {
        "name": "ccOutgoingCall",
        "payload": "{ call }",
        "description": "User initiates a voice/video call"
      }
    ],
    "compositionExample": {
      "description": "Call buttons for message header",
      "components": [
        "CometChatCallButtons",
        "CometChatOutgoingCall"
      ],
      "flow": "Button press initiates call -> OutgoingCall screen displayed"
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatCallButtons` is a [Component](/ui-kit/react-native/components-overview#components) that provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Xgdtn9VZPDi47bm-/images/2338801e-call_button-90161ce159058183ff0d16adbf8f4734.png?fit=max&auto=format&n=Xgdtn9VZPDi47bm-&q=85&s=abd43b4d7f4d8dc7772cf21aaf99307a" width="2560" height="464" data-path="images/2338801e-call_button-90161ce159058183ff0d16adbf8f4734.png" />
</Frame>

***

## Minimal Render

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

function CallButtonsDemo() {
  return <CometChatCallButtons group={group} />;
}
```

***

## Actions and Events

### Callback Props

#### onError

Fires on internal errors (network failure, auth issue, SDK exception).

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

```tsx lines theme={null}
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react-native";

function CallButtonsWithError() {
  const handleError = (e: CometChat.CometChatException) => {
    console.error("CallButtons error:", e);
  };

  return <CometChatCallButtons user={user} onError={handleError} />;
}
```

### Global UI Events

`CometChatUIEventHandler` emits events subscribable from anywhere in the application. Add listeners and remove them on cleanup.

| Event            | Fires when                                 | Payload    |
| ---------------- | ------------------------------------------ | ---------- |
| `ccCallRejected` | Initiated call is rejected by the receiver | `{ call }` |
| `ccCallFailled`  | Error occurs during the initiated call     | `{ call }` |
| `ccOutgoingCall` | User initiates a voice/video 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 useCallEvents() {
  useEffect(() => {
    const listenerId = "CALL_EVENTS_" + Date.now();

    CometChatUIEventHandler.addCallListener(listenerId, {
      ccCallRejected: ({ call }) => {
        console.log("Call rejected:", call);
      },
      ccOutgoingCall: ({ call }) => {
        console.log("Outgoing call:", call);
      },
      ccCallFailled: ({ call }) => {
        console.log("Call failed:", call);
      },
    });

    return () => {
      CometChatUIEventHandler.removeCallListener(listenerId);
    };
  }, []);
}
```

***

## 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 `CometChatCallButtons` component.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mkn0UqPQ5BXljCV1/images/9864ab5c-DqXqOIPBfs6BAAAAAElFTkSuQmCC.png?fit=max&auto=format&n=mkn0UqPQ5BXljCV1&q=85&s=7024bcfbf74e0e204030fb72a50e2de8" width="1280" height="232" data-path="images/9864ab5c-DqXqOIPBfs6BAAAAAElFTkSuQmCC.png" />
</Frame>

```tsx lines theme={null}
import {
  CometChatCallButtons,
  useTheme,
} from "@cometchat/chat-uikit-react-native";

function StylingDemo() {
  const theme = useTheme();

  return (
    <CometChatCallButtons
      group={group}
      style={{
        audioCallButtonIconStyle: {
          tintColor: theme.color.primary,
        },
        audioCallButtonIconContainerStyle: {
          backgroundColor: theme.color.extendedPrimary100,
          paddingHorizontal: theme.spacing.padding.p4,
          paddingVertical: theme.spacing.padding.p2,
          borderRadius: 8,
        },
        videoCallButtonIconStyle: {
          tintColor: theme.color.primary,
        },
        videoCallButtonIconContainerStyle: {
          backgroundColor: theme.color.extendedPrimary100,
          paddingHorizontal: theme.spacing.padding.p4,
          paddingVertical: theme.spacing.padding.p2,
          borderRadius: 8,
        },
      }}
    />
  );
}
```

### Visibility Props

| Property              | Description                                | Code                            |
| --------------------- | ------------------------------------------ | ------------------------------- |
| `hideVoiceCallButton` | Toggle visibility of the voice call button | `hideVoiceCallButton?: boolean` |
| `hideVideoCallButton` | Toggle visibility of the video call button | `hideVideoCallButton?: boolean` |

### Outgoing Call Configuration

You can customize the properties of the Outgoing Call component by making use of the `outgoingCallConfiguration` prop:

```tsx lines theme={null}
import {
  CometChatCallButtons,
  OutgoingCallConfiguration,
} from "@cometchat/chat-uikit-react-native";

function OutgoingCallConfigDemo() {
  const getOutgoingCallConfig = () => {
    return new OutgoingCallConfiguration({
      disableSoundForCalls: true,
    });
  };

  return (
    <CometChatCallButtons
      user={user}
      outgoingCallConfiguration={getOutgoingCallConfig()}
    />
  );
}
```

All exposed properties of `OutgoingCallConfiguration` can be found under [Outgoing Call](/ui-kit/react-native/outgoing-call).

***

## 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 Logs" icon="clock-rotate-left" href="/ui-kit/react-native/call-logs">
    View call history and logs
  </Card>

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