> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# 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.
```json theme={null}
{
"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 lines theme={null}
// 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](/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 lines theme={null}
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 lines theme={null}
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 lines theme={null}
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](/ui-kit/ios/components-overview#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 |
```swift lines theme={null}
// 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
}
}
```
```swift lines theme={null}
// 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)
```
***
```swift lines theme={null}
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 lines theme={null}
// 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 lines theme={null}
// 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 lines theme={null}
cometChatIncomingCall.set(listItemView: { call in
let customView = CustomListItemView()
return customView
})
```
Demonstration:
You can create a CustomListItemView as a custom `UIView`:
```swift lines 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 an Incoming call component using the property below.
```swift lines theme={null}
cometChatIncomingCall.set(leadingView: { call in
let view = CustomLeadingView()
return view
})
```
Demonstration:
You can create a CustomLeadingView as a custom `UIView`:
```swift lines 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
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 lines 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 lines 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)
])
}
}
```
***
## 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()` |
```swift lines theme={null}
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 lines theme={null}
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 lines theme={null}
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 lines theme={null}
// 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 lines theme={null}
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 lines theme={null}
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
Display outgoing call interface
Display active call interface
Display call history