Incoming Call

Display and handle incoming voice and video calls

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 Agent Component Spec

{
  "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"
  }
}

---

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)
        ])
    }
}

---

Related Components

• Outgoing Call - Display outgoing call interface
• Ongoing Call - Display active call interface
• Call Logs - Display call history