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

# Incoming Call

> Display and handle incoming voice and video calls with CometChatIncomingCall component in React Native UI Kit, providing options to accept or decline.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatIncomingCall",
    "package": "@cometchat/chat-uikit-react-native",
    "import": "import { CometChatIncomingCall } from \"@cometchat/chat-uikit-react-native\";",
    "description": "Visual representation for incoming voice and video calls with accept/decline options.",
    "props": {
      "data": {
        "call": {
          "type": "CometChat.Call | CometChat.CustomMessage",
          "note": "The incoming call object"
        }
      },
      "callbacks": {
        "onAccept": "(call: CometChat.BaseMessage) => void",
        "onDecline": "(call: CometChat.BaseMessage) => void",
        "onError": "(error: CometChat.CometChatException) => void"
      },
      "sound": {
        "disableSoundForCalls": { "type": "boolean", "default": false },
        "customSoundForCalls": { "type": "string", "default": "built-in" }
      },
      "viewSlots": {
        "ItemView": "(call) => JSX.Element",
        "LeadingView": "(call) => JSX.Element",
        "TitleView": "(call) => JSX.Element",
        "SubtitleView": "(call) => JSX.Element",
        "TrailingView": "(call) => JSX.Element"
      }
    },
    "events": [
      { "name": "ccCallRejected", "payload": "{ call }", "description": "Call rejected by receiver" },
      { "name": "ccCallAccepted", "payload": "{ call }", "description": "Call accepted by receiver" },
      { "name": "ccCallEnded", "payload": "{ call }", "description": "Call successfully ended" },
      { "name": "ccCallFailled", "payload": "{ call }", "description": "Error during call" }
    ]
  }
  ```
</Accordion>

## Where It Fits

`CometChatIncomingCall` is a [Component](/ui-kit/react-native/components-overview#components) that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mkn0UqPQ5BXljCV1/images/9737d621-Incoming_call-76e8c9c41ca422a3b1b08a7b26963b15.png?fit=max&auto=format&n=mkn0UqPQ5BXljCV1&q=85&s=1d7e62f6486d30d4b4a4976b9832f19b" width="1280" height="800" data-path="images/9737d621-Incoming_call-76e8c9c41ca422a3b1b08a7b26963b15.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react-native";
import { useState, useRef, useEffect } from "react";

function IncomingCallDemo() {
  const incomingCall = useRef<CometChat.Call | null>(null);
  const [callReceived, setCallReceived] = useState(false);
  const listenerId = "INCOMING_CALL_LISTENER";

  useEffect(() => {
    CometChat.addCallListener(
      listenerId,
      new CometChat.CallListener({
        onIncomingCallReceived: (call) => {
          incomingCall.current = call;
          setCallReceived(true);
        },
        onIncomingCallCancelled: (call) => {
          incomingCall.current = null;
          setCallReceived(false);
        },
      })
    );

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

  return (
    <>
      {callReceived && incomingCall.current && (
        <CometChatIncomingCall
          call={incomingCall.current}
          onDecline={() => setCallReceived(false)}
        />
      )}
    </>
  );
}
```

***

## Actions and Events

### Callback Props

#### onAccept

Fires when the accept button is pressed.

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

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

function IncomingCallWithAccept() {
  const handleAccept = (call: CometChat.BaseMessage) => {
    console.log("Call accepted:", call);
  };

  return (
    <CometChatIncomingCall
      call={incomingCall}
      onAccept={handleAccept}
      onDecline={() => setCallReceived(false)}
    />
  );
}
```

#### onDecline

Fires when the decline button is pressed.

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

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

function IncomingCallWithDecline() {
  const handleDecline = (call) => {
    console.log("Call declined");
    setCallReceived(false);
  };

  return (
    <CometChatIncomingCall
      call={incomingCall}
      onDecline={handleDecline}
    />
  );
}
```

#### 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 { CometChatIncomingCall } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function IncomingCallWithError() {
  return (
    <CometChatIncomingCall
      call={incomingCall}
      onDecline={() => setCallReceived(false)}
      onError={(error: CometChat.CometChatException) => {
        console.error("IncomingCall 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    |
| ---------------- | ------------------------------------------ | ---------- |
| `ccCallRejected` | Initiated call is rejected by the receiver | `{ call }` |
| `ccCallAccepted` | Initiated call is accepted by the receiver | `{ call }` |
| `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 useIncomingCallEvents() {
  useEffect(() => {
    const listenerId = "INCOMING_CALL_EVENTS_" + Date.now();

    CometChatUIEventHandler.addCallListener(listenerId, {
      ccCallRejected: ({ call }) => {
        console.log("Call rejected:", call);
      },
      ccCallAccepted: ({ call }) => {
        console.log("Call accepted:", call);
      },
      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                  |
| -------------- | ----------------------- | ------------------------- |
| `ItemView`     | `(call) => JSX.Element` | Entire incoming call card |
| `LeadingView`  | `(call) => JSX.Element` | Avatar / left section     |
| `TitleView`    | `(call) => JSX.Element` | Caller name / title text  |
| `SubtitleView` | `(call) => JSX.Element` | Call type / status text   |
| `TrailingView` | `(call) => JSX.Element` | Accept/decline buttons    |

### ItemView

Custom view for the entire incoming call card.

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

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

function ItemViewDemo() {
  const getItemView = (call: CometChat.Call | CometChat.CustomMessage) => {
    return (
      <View style={{ padding: 20, backgroundColor: '#6852D6' }}>
        <Text style={{ color: 'white' }}>Incoming Call</Text>
      </View>
    );
  };

  return (
    <CometChatIncomingCall
      call={incomingCall}
      onDecline={() => setCallReceived(false)}
      ItemView={getItemView}
    />
  );
}
```

### LeadingView

Custom view for the avatar / left section.

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

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

function LeadingViewDemo() {
  const getLeadingView = (call: CometChat.Call | CometChat.CustomMessage) => {
    const caller = call.getCallInitiator();
    return (
      <View style={{ width: 60, height: 60, borderRadius: 30, backgroundColor: '#6852D6' }}>
        <Text style={{ color: 'white', textAlign: 'center', lineHeight: 60 }}>
          {caller.getName().charAt(0)}
        </Text>
      </View>
    );
  };

  return (
    <CometChatIncomingCall
      call={incomingCall}
      onDecline={() => setCallReceived(false)}
      LeadingView={getLeadingView}
    />
  );
}
```

### SubtitleView

Custom view for the call type / status text.

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

```tsx lines theme={null}
import { CometChatIncomingCall } 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) => {
    const callType = call.getType() === "audio" ? "Voice Call" : "Video Call";
    return <Text style={{ color: '#727272' }}>{callType}</Text>;
  };

  return (
    <CometChatIncomingCall
      call={incomingCall}
      onDecline={() => setCallReceived(false)}
      SubtitleView={getSubtitleView}
    />
  );
}
```

***

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/edb0ab59-incoming_call_styled-d36b6a11d6d67a3aedc24f543ac94e0d.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=c6d80ea80f3ec32e33f6b194eadf52f2" width="4524" height="3200" data-path="images/edb0ab59-incoming_call_styled-d36b6a11d6d67a3aedc24f543ac94e0d.png" />
</Frame>

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

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

  return (
    <CometChatIncomingCall
      call={incomingCall}
      onDecline={() => setCallReceived(false)}
      style={{
        containerStyle: {
          backgroundColor: theme.color.extendedPrimary100,
        },
        avatarStyle: {
          containerStyle: {
            backgroundColor: theme.color.extendedPrimary500,
            borderRadius: 8,
          },
          imageStyle: {
            borderRadius: 8,
          },
        },
        declineCallButtonStyle: {
          backgroundColor: theme.color.staticWhite,
        },
        declineCallTextStyle: {
          color: theme.color.error,
        },
        acceptCallButtonStyle: {
          backgroundColor: theme.color.primary,
        },
      }}
    />
  );
}
```

### Visibility Props

| Property               | Description                                | Code                             |
| ---------------------- | ------------------------------------------ | -------------------------------- |
| `disableSoundForCalls` | Disable/enable the sound of incoming calls | `disableSoundForCalls?: boolean` |
| `customSoundForCalls`  | Set custom sound for incoming calls        | `customSoundForCalls?: string`   |

***

## Next Steps

<CardGroup cols={2}>
  <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>

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