Incoming Call

Handle incoming CometChat iOS UI Kit voice and video calls with caller details, accept, reject, custom sounds, and view slots.

The CometChatIncomingCall component 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.

AI Integration Quick Reference

{
  "component": "CometChatIncomingCall",
  "package": "CometChatUIKitSwift",
  "import": "import CometChatUIKitSwift\nimport CometChatSDK",
  "description": "Displays incoming call interface with accept and reject options",
  "inherits": "UIViewController",
  "primaryOutput": {
    "callback": "onAcceptClick",
    "type": "(Call, UIViewController) -> Void"
  },
  "props": {
    "data": {
      "call": { "type": "Call", "required": true }
    },
    "callbacks": {
      "onAcceptClick": "(Call, UIViewController) -> Void",
      "onCancelClick": "(Call, UIViewController) -> Void",
      "onError": "(CometChatException) -> Void"
    },
    "sound": {
      "disableSoundForCalls": { "type": "Bool", "default": false },
      "customSoundForCalls": { "type": "URL?", "default": "nil" }
    },
    "viewSlots": {
      "listItemView": "(Call) -> UIView",
      "leadingView": "(Call) -> UIView",
      "titleView": "(Call) -> UIView"
    }
  },
  "events": [
    { "name": "onIncomingCallAccepted", "payload": "Call", "description": "Fires when incoming call is accepted" },
    { "name": "onIncomingCallRejected", "payload": "Call", "description": "Fires when incoming call is rejected" },
    { "name": "onCallEnded", "payload": "Call", "description": "Fires when call ends" }
  ],
  "sdkListeners": [],
  "compositionExample": {
    "description": "IncomingCall is presented when a call is received",
    "components": ["CometChatIncomingCall", "CometChatOngoingCall"],
    "flow": "Call received → IncomingCall shown → User accepts → OngoingCall starts"
  }
}

Field	Value
Component	CometChatIncomingCall
Package	CometChatUIKitSwift
Inherits	UIViewController

---

Usage

Integration

CometChatIncomingCall is a custom view controller that offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.

Swift

// Create and configure incoming call view controller
let cometChatIncomingCall = CometChatIncomingCall().set(call: call)

// Present full screen
cometChatIncomingCall.modalPresentationStyle = .fullScreen
self.present(cometChatIncomingCall, animated: true)

If you are already using a navigation controller, you can use the pushViewController function instead of presenting the view controller.

Actions

Actions dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

1. SetOnAcceptClick

The setOnAcceptClick action is typically triggered when the user clicks on the accept button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.

Swift

let cometChatIncomingCall = CometChatIncomingCall()
    .set(onAcceptClick: { call, controller in
        // Perform your custom action when call is accepted
    })

2. SetOnCancelClick

The setOnCancelClick action is typically triggered when the user clicks on the reject button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.

Swift

let cometChatIncomingCall = CometChatIncomingCall()
    .set(onCancelClick: { call, controller in
        // Perform your custom action when call is rejected
    })

3. OnError

You can customize this behavior by using the provided code snippet to override the On Error and improve error handling.

Swift

let incomingCallConfiguration = IncomingCallConfiguration()
    .set(onError: { error in
        // Perform your custom error handling action
    })

---

Filters

Filters allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized experience. Filters can be applied using RequestBuilders of Chat SDK.

The IncomingCall component does not have any exposed filters.

---

Events

Events are emitted by a Component. By using events you can extend existing functionality. Being global events, they can be applied in multiple locations and are capable of being added or removed.

Events emitted by the Incoming Call component are as follows:

Event	Description
onIncomingCallAccepted	Triggers when the logged-in user accepts the incoming call
onIncomingCallRejected	Triggers when the logged-in user rejects the incoming call
onCallEnded	Triggers when the initiated call successfully ends

Add Listener

// View controller from your project where you want to listen to events
public class ViewController: UIViewController {

    public override func viewDidLoad() {
        super.viewDidLoad()

        // Subscribe to call events
        CometChatCallEvents.addListener("UNIQUE_ID", self as CometChatCallEventListener)
    }
}

// Listener events from call module
extension ViewController: CometChatCallEventListener {

    func onIncomingCallAccepted(call: Call) {
        // Handle accepted call
    }
    
    func onIncomingCallRejected(call: Call) {
        // Handle rejected call
    }

    func onCallEnded(call: Call) {
        // Handle ended call
    }
}

// Emitting Call Events

// Emit when logged in user accepts the incoming call
CometChatCallEvents.emitOnIncomingCallAccepted(call: Call)

// Emit when logged in user rejects the incoming call
CometChatCallEvents.emitOnIncomingCallRejected(call: Call)

// Emit when logged in user ends a call
CometChatCallEvents.emitOnCallEnded(call: Call)

---

Remove Listener

public override func viewWillDisappear(_ animated: Bool) {
    // Unsubscribe from call events
    CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
}

---

Customization

To fit your app’s design requirements, you can customize the appearance of the conversation component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

Style

Using Style you can customize the look and feel of the component in your app. These parameters typically control elements such as the color, size, shape, and fonts used within the component.

1. IncomingCall Style

You can customize the appearance of the IncomingCall Component by applying the IncomingCallStyle to it using the following code snippet.

Global level styling

Swift

// Create custom avatar style
let customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)

// Apply global incoming call styles
CometChatIncomingCall.style.nameLabelFont = UIFont(name: "Times-New-Roman", size: 20)
CometChatIncomingCall.style.callLabelFont = UIFont(name: "Times-New-Roman", size: 14)
CometChatIncomingCall.style.acceptButtonCornerRadius = .init(cornerRadius: 8)
CometChatIncomingCall.style.rejectButtonCornerRadius = .init(cornerRadius: 8)
CometChatIncomingCall.avatarStyle = customAvatarStyle

Instance level styling

Swift

// Create custom avatar style
var customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)

// Create custom incoming call style
var incomingCallStyle = IncomingCallStyle()
incomingCallStyle.nameLabelFont = UIFont(name: "Times-New-Roman", size: 20)
incomingCallStyle.callLabelFont = UIFont(name: "Times-New-Roman", size: 14)
incomingCallStyle.acceptButtonCornerRadius = .init(cornerRadius: 8)
incomingCallStyle.rejectButtonCornerRadius = .init(cornerRadius: 8)

// Apply styles to instance
let incomingCall = CometChatIncomingCall()
incomingCall.style = incomingCallStyle
incomingCall.avatarStyle = customAvatarStyle

List of properties exposed by IncomingCallStyle:

Property	Description	Code
overlayBackgroundColor	Background color for the overlay	overlayBackgroundColor: UIColor
acceptButtonBackgroundColor	Background color for the accept button	acceptButtonBackgroundColor: UIColor
rejectButtonBackgroundColor	Background color for the reject button	rejectButtonBackgroundColor: UIColor
acceptButtonTintColor	Tint color for the accept button	acceptButtonTintColor: UIColor
rejectButtonTintColor	Tint color for the reject button	rejectButtonTintColor: UIColor
acceptButtonImage	Icon image for the accept button	acceptButtonImage: UIImage
rejectButtonImage	Icon image for the reject button	rejectButtonImage: UIImage
acceptButtonCornerRadius	Sets corner radius for accept button	acceptButtonCornerRadius: CometChatCornerStyle?
rejectButtonCornerRadius	Sets corner radius for reject button	rejectButtonCornerRadius: CometChatCornerStyle?
acceptButtonBorderWidth	Sets border width for accept button	acceptButtonBorderWidth: CGFloat?
rejectButtonBorderWidth	Sets border width for reject button	rejectButtonBorderWidth: CGFloat?
acceptButtonBorderColor	Sets border color for accept button	acceptButtonBorderColor: UIColor?
rejectButtonBorderColor	Sets border color for reject button	rejectButtonBorderColor: UIColor?
backgroundColor	Background color for the call view	backgroundColor: UIColor
cornerRadius	Corner radius for the view	cornerRadius: nil
borderColor	Border color for the view	borderColor: UIColor
borderWidth	Border width for the view	borderWidth: CGFloat
callLabelColor	Text color for the call label	callLabelColor: UIColor
callLabelFont	Font for the call label	callLabelFont: UIFont
nameLabelColor	Text color for the name label	nameLabelColor: UIColor
nameLabelFont	Font for the name label	nameLabelFont: UIFont

---

Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component.

Property	Description	Code
disableSoundForCalls	Disables sound for incoming calls	disableSoundForCalls = true
setCustomSoundForCalls	Sets a custom sound for incoming calls	set(customSoundForCalls: URL)

Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

SetListItemView

With this function, you can assign a custom view to the incoming call item view.

Swift

cometChatIncomingCall.set(listItemView: { call in
    let customView = CustomListItemView()
    return customView
})

Demonstration:

You can create a CustomListItemView as a custom UIView:

import UIKit

class CustomListItemView: UIView {
    
    private let avatarView: UILabel = {
        let label = UILabel()
        label.backgroundColor = UIColor.systemPurple
        label.textColor = .white
        label.font = UIFont.boldSystemFont(ofSize: 18)
        label.textAlignment = .center
        label.layer.cornerRadius = 20
        label.clipsToBounds = true
        return label
    }()
    
    private let callTypeLabel: UILabel = {
        let label = UILabel()
        label.text = "Voice Call"
        label.textColor = .darkGray
        label.font = UIFont.systemFont(ofSize: 14)
        return label
    }()
    
    private let userNameLabel: UILabel = {
        let label = UILabel()
        label.text = "George Allen"
        label.font = UIFont.boldSystemFont(ofSize: 16)
        return label
    }()
    
    private let endCallButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(systemName: "phone.down.fill"), for: .normal)
        button.tintColor = .red
        button.backgroundColor = .white
        button.layer.cornerRadius = 18
        return button
    }()
    
    private let acceptCallButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(systemName: "phone.fill"), for: .normal)
        button.tintColor = .white
        button.backgroundColor = UIColor.systemPurple
        button.layer.cornerRadius = 18
        return button
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupView() {
        backgroundColor = UIColor.systemPurple.withAlphaComponent(0.1)
        layer.cornerRadius = 20
        
        addSubview(avatarView)
        addSubview(callTypeLabel)
        addSubview(userNameLabel)
        addSubview(endCallButton)
        addSubview(acceptCallButton)
        
        avatarView.translatesAutoresizingMaskIntoConstraints = false
        callTypeLabel.translatesAutoresizingMaskIntoConstraints = false
        userNameLabel.translatesAutoresizingMaskIntoConstraints = false
        endCallButton.translatesAutoresizingMaskIntoConstraints = false
        acceptCallButton.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            avatarView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 12),
            avatarView.centerYAnchor.constraint(equalTo: centerYAnchor),
            avatarView.widthAnchor.constraint(equalToConstant: 40),
            avatarView.heightAnchor.constraint(equalToConstant: 40),
            
            callTypeLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
            callTypeLabel.leadingAnchor.constraint(equalTo: avatarView.trailingAnchor, constant: 8),
            
            userNameLabel.topAnchor.constraint(equalTo: callTypeLabel.bottomAnchor, constant: 2),
            userNameLabel.leadingAnchor.constraint(equalTo: avatarView.trailingAnchor, constant: 8),
            
            endCallButton.trailingAnchor.constraint(equalTo: acceptCallButton.leadingAnchor, constant: -8),
            endCallButton.centerYAnchor.constraint(equalTo: centerYAnchor),
            endCallButton.widthAnchor.constraint(equalToConstant: 36),
            endCallButton.heightAnchor.constraint(equalToConstant: 36),
            
            acceptCallButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -12),
            acceptCallButton.centerYAnchor.constraint(equalTo: centerYAnchor),
            acceptCallButton.widthAnchor.constraint(equalToConstant: 36),
            acceptCallButton.heightAnchor.constraint(equalToConstant: 36)
        ])
    }
}

---

SetLeadingView

You can modify the leading view of an Incoming call component using the property below.

Swift

cometChatIncomingCall.set(leadingView: { call in
    let view = CustomLeadingView()
    return view
})

Demonstration:

You can create a CustomLeadingView as a custom UIView:

Swift

import UIKit

class CustomLeadingView: UIView {
    
    private let starIconView: UIImageView = {
        let imageView = UIImageView(image: UIImage(systemName: "star.fill"))
        imageView.tintColor = UIColor.systemPurple
        imageView.backgroundColor = .white
        imageView.layer.cornerRadius = 20
        imageView.contentMode = .center
        return imageView
    }()
    
    private let label: UILabel = {
        let label = UILabel()
        label.text = "PRO USER"
        label.font = UIFont.boldSystemFont(ofSize: 14)
        label.textColor = .white
        label.textAlignment = .center
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupView() {
        backgroundColor = UIColor.systemPurple
        layer.cornerRadius = 10
        
        addSubview(starIconView)
        addSubview(label)
        
        starIconView.translatesAutoresizingMaskIntoConstraints = false
        label.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            starIconView.centerXAnchor.constraint(equalTo: centerXAnchor),
            starIconView.topAnchor.constraint(equalTo: topAnchor, constant: 8),
            starIconView.widthAnchor.constraint(equalToConstant: 40),
            starIconView.heightAnchor.constraint(equalToConstant: 40),
            
            label.topAnchor.constraint(equalTo: starIconView.bottomAnchor, constant: 8),
            label.centerXAnchor.constraint(equalTo: centerXAnchor),
            label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
        ])
    }
}

---

SetTitleView

You can customize the title view of an incoming call component using the property below.

Swift

cometChatIncomingCall.set(titleView: { call in
    let view = CustomTitleView()
    return view
})

Demonstration:

You can create a CustomTitleView as a custom UIView which we will inflate in setTitleView():

Swift

import UIKit

class CustomTitleView: UIView {
    
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.text = "Voice Call"
        label.textColor = .darkGray
        label.font = UIFont.systemFont(ofSize: 16)
        return label
    }()
    
    private let tagView: UIView = {
        let view = UIView()
        view.backgroundColor = .systemGreen
        view.layer.cornerRadius = 12
        return view
    }()
    
    private let starIconView: UIImageView = {
        let imageView = UIImageView(image: UIImage(systemName: "star.fill"))
        imageView.tintColor = .white
        return imageView
    }()
    
    private let tagLabel: UILabel = {
        let label = UILabel()
        label.text = "Important"
        label.textColor = .white
        label.font = UIFont.boldSystemFont(ofSize: 14)
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupView() {
        addSubview(titleLabel)
        addSubview(tagView)
        tagView.addSubview(starIconView)
        tagView.addSubview(tagLabel)
        
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        tagView.translatesAutoresizingMaskIntoConstraints = false
        starIconView.translatesAutoresizingMaskIntoConstraints = false
        tagLabel.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
            titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
            
            tagView.leadingAnchor.constraint(equalTo: titleLabel.trailingAnchor, constant: 8),
            tagView.centerYAnchor.constraint(equalTo: centerYAnchor),
            tagView.heightAnchor.constraint(equalToConstant: 24),
            tagView.widthAnchor.constraint(equalToConstant: 100),
            
            starIconView.leadingAnchor.constraint(equalTo: tagView.leadingAnchor, constant: 8),
            starIconView.centerYAnchor.constraint(equalTo: tagView.centerYAnchor),
            starIconView.widthAnchor.constraint(equalToConstant: 16),
            starIconView.heightAnchor.constraint(equalToConstant: 16),
            
            tagLabel.leadingAnchor.constraint(equalTo: starIconView.trailingAnchor, constant: 4),
            tagLabel.centerYAnchor.constraint(equalTo: tagView.centerYAnchor)
        ])
    }
}

---

Props

All props are optional unless noted.

---

call

The incoming call object to display.

Type	Call
Default	Auto-detected

---

disableSoundForCalls

Disables the incoming call ringtone.

Type	Bool
Default	false

---

customSoundForCalls

Custom sound file URL for incoming calls.

Type	URL?
Default	nil

---

avatarStyle

Customizes the appearance of the caller’s avatar.

Type	AvatarStyle
Default	AvatarStyle()

import CometChatUIKitSwift

let customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor.systemPurple
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)

let incomingCall = CometChatIncomingCall()
incomingCall.avatarStyle = customAvatarStyle

---

Events

Events emitted by the Incoming Call component:

Event	Description
onIncomingCallAccepted	Triggers when the logged-in user accepts the incoming call
onIncomingCallRejected	Triggers when the logged-in user rejects the incoming call
onCallEnded	Triggers when the call ends

---

View Slots

Slot	Signature	Replaces
listItemView	(Call) -> UIView	Entire list item
leadingView	(Call) -> UIView	Avatar / left section
titleView	(Call) -> UIView	Name / title text
subtitleView	(Call) -> UIView	Subtitle text (call type)
trailingView	(Call) -> UIView	Right section

subtitleView

You can customize the subtitle view of an incoming call component using the property below.

Swift

cometChatIncomingCall.set(subtitleView: { call in
    let view = CustomSubtitleView()
    return view
})

trailingView

You can customize the trailing view of an incoming call component using the property below.

Swift

cometChatIncomingCall.set(trailingView: { call in
    let view = CustomTrailingView()
    return view
})

---

Common Patterns

Present Incoming Call Screen

Present the incoming call screen when a call is received:

Swift

// In your call listener
func onIncomingCallReceived(incomingCall: Call) {
    DispatchQueue.main.async {
        let incomingCallVC = CometChatIncomingCall()
        incomingCallVC.set(call: incomingCall)
        incomingCallVC.modalPresentationStyle = .fullScreen
        
        // Get the top view controller to present from
        if let topVC = UIApplication.shared.keyWindow?.rootViewController {
            topVC.present(incomingCallVC, animated: true)
        }
    }
}

Handle Call Accept and Navigate to Ongoing Call

Transition from incoming call to ongoing call when accepted:

Swift

let incomingCall = CometChatIncomingCall()
incomingCall.set(call: call)
incomingCall.set(onAcceptClick: { [weak self] acceptedCall, controller in
    // Dismiss incoming call screen
    controller.dismiss(animated: false) {
        // Present ongoing call screen
        let ongoingCall = CometChatOngoingCall()
        ongoingCall.set(sessionId: acceptedCall.sessionId ?? "")
        ongoingCall.modalPresentationStyle = .fullScreen
        self?.present(ongoingCall, animated: true)
    }
})

Custom Ringtone for Incoming Calls

Set a custom sound for incoming calls:

Swift

let incomingCall = CometChatIncomingCall()
incomingCall.set(call: call)

// Use custom ringtone
if let soundURL = Bundle.main.url(forResource: "custom_ringtone", withExtension: "mp3") {
    incomingCall.set(customSoundForCalls: soundURL)
}

---

Related Components

Outgoing Call

Display outgoing call interface

Ongoing Call

Display active call interface

Call Logs

Display call history