> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-013b37f0.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Incoming Call ## Overview The `Incoming call` is a [Component](/ui-kit/ios/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. *** ## Usage ### Integration `CometChatIncomingCall` being a custom **view controller**, 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 theme={null} let cometChatIncomingCall = CometChatIncomingCall().set(call: call) 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](/ui-kit/ios/components-overview#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 theme={null} let cometChatIncomingCall = CometChatIncomingCall() .set(onAcceptClick: { call, controller in //Perform Your Action }) ``` ##### 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 theme={null} let cometChatIncomingCall = CometChatIncomingCall() .set(onCancelClick: { call, controller in //Perform Your Action }) ``` ##### 3. OnError You can customize this behavior by using the provided code snippet to override the `On Error` and improve error handling. ```swift theme={null} let incomingCallConfiguration = IncomingCallConfiguration() .set(onError:{ error in //Perform Your 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. Filters can be applied using RequestBuilders of Chat SDK. The IncomingCall component does not have any exposed filters. *** ### Events [Events](/ui-kit/ios/components-overview#events) are emitted by a `Component`. By using event 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 is as follows. | Event | Description | | -------------------------- | -------------------------------------------------------------------------- | | **onIncomingCallAccepted** | Triggers when the logged-in user accepts the incoming call. | | **onIncomingCallRejected** | This event is triggered when the logged-in user rejects the incoming call. | | **onCallEnded** | This event is triggered when the initiated call successfully ends. | ```swift theme={null} // View controller from your project where you want to listen events. public class ViewController: UIViewController { public override func viewDidLoad() { super.viewDidLoad() // Subscribing for the listener to listen events from user module CometChatCallEvents.addListener("UNIQUE_ID", self as CometChatCallEventListener) } } // Listener events from user module extension ViewController: CometChatCallEventListener { func onIncomingCallAccepted(call: Call) { // Do Stuff } func onIncomingCallRejected(call: Call){ // Do Stuff } func onCallEnded(call: Call) { // Do Stuff } } ``` ```swift Emitting Group Events theme={null} //emit this when logged in user accepts the incoming call CometChatCallEvents.emitOnIncomingCallAccepted(call: Call) //emit this when logged in user rejects the incoming call CometChatCallEvents.emitOnIncomingCallRejected(call: Call) //emit this when logged in user cancels a call CometChatCallEvents.emitOnCallEnded(call: Call) ``` *** ```swift View Controller theme={null} public override func viewWillDisappear(_ animated: Bool) { // Uncubscribing for the listener to listen events from user module 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 theme={null} let customAvatarStyle = AvatarStyle() customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75") customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8) 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 theme={null} var customAvatarStyle = AvatarStyle() customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75") customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20) 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) 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 theme={null} cometChatIncomingCall.set(listItemView: { call in let customView = CustomListItemView() return customView }) ``` Demonstration You can create a CustomListItemView as a custom `UIView`. ```swift swift theme={null} 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 a Incoming call component using the property below. ```swift theme={null} cometChatIncomingCall.set(leadingView: { call in let view = CustomLeadingView() return view }) ``` Demonstration You can create a CustomLeadingView as a custom `UIView`. ```swift theme={null} 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 text.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 a incoming call component using the property below. ```swift theme={null} 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 theme={null} 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) ]) } } ``` ***