> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Conversations

## Overview

The Conversations is a [Component](/ui-kit/ios/components-overview#components), That shows all conversations related to the currently logged-in user,

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/45sEoks_X3i4sdzA/images/a64b9191-Conversation-b61978dd3caa80a24c801de3492fe2b5.png?fit=max&auto=format&n=45sEoks_X3i4sdzA&q=85&s=bf7a2d51757e2475c6a88e3ea4069950" width="1280" height="800" data-path="images/a64b9191-Conversation-b61978dd3caa80a24c801de3492fe2b5.png" />
</Frame>

## Usage

### Integration

As CometChatConversations is a custom view controller, it can be initiated either by tapping a button or through the trigger of any event. It offers multiple parameters and methods for tailoring its user interface.

```ruby swift theme={null}
let cometChatConversations = CometChatConversations()
self.navigationController.pushViewController(cometChatConversations, animated: true)
```

* Integration (With Custom Request Builder)

During the initialization of **CometChatConversations,** users can provide this custom request builder.

```ruby swift theme={null}
// You can create ConversationRequestBuilder as per your requirement
let conversationRequestBuilder = ConversationRequest.ConversationRequestBuilder(limit: 20).set(conversationType: .both)

let cometChatConversations = CometChatConversations(conversationRequestBuilder: conversationRequestBuilder)
self.navigationController.pushViewController(cometChatConversations, animated: true)
```

<Tip>
  If a navigation controller is already in use, opt for the `pushViewController` method instead of presenting the view controller.
</Tip>

### 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. ##### set(onItemClick:)

`set(OnItemClick:)` is triggered when you click on a ListItem of the Conversations component. This `set(OnItemClick:)` method proves beneficial when a user intends to customize the on-click behavior in CometChatConversations.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(onItemClick: @escaping ((_ conversation: Conversation, _ indexPath: IndexPath) -> Void))
    cometChatConversations.set(onItemClick: { conversation, indexPath in
        // Override on item click
    })
    ```
  </Tab>
</Tabs>

***

2. ##### set(OnItemLongClick:)

`set(OnItemLongClick:)` is triggered when you long press on a ListItem of the Conversations component. This `set(OnItemLongClick:)` method proves beneficial when a user intends to additional functionality on long press on list item in CometChatConversations.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(onItemLongClick: @escaping ((_ conversation: Conversation, _ indexPath: IndexPath) -> Void))
    cometChatConversations.set(onItemLongClick: { conversation, indexPath in
        // Override on item click
    })
    ```
  </Tab>
</Tabs>

***

##### 3. set(onBack:)

This `set(onBack:)` method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatConversations.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(onBack: @escaping () -> Void)
    cometChatConversations.set(onBack: {
        // Override on back
    })
    ```
  </Tab>
</Tabs>

***

##### 4. set(onSelection:)

The `set(onSelection:)` only gets trigger when selection mode is set to multiple of single. And this gets trigger on every selection, and returns the list of selected conversations.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}

    conversations.set(onSelection: { conversations in
         //Handle action
    })
    ```
  </Tab>
</Tabs>

***

##### 5. set(onError:)

This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatConversations.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(onError: @escaping ((_ error: CometChatException) -> Void))
    cometChatConversations.set(onError: { error in
        // Override on error
    })
    ```
  </Tab>
</Tabs>

***

##### 6. set(onEmpty:)

This `set(onEmpty:)` method is triggered when the conversations list is empty in CometChatConversations.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(onEmpty: @escaping () -> Void)
    cometChatConversations.set(onEmpty: {
        // Handle empty state
    })
    ```
  </Tab>
</Tabs>

***

##### 7. setOnLoad

This set(onLoad:) gets triggered when a conversation list is fully fetched and going to displayed on the screen, this return the list of conversations to get displayed on the screen.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(onLoad: @escaping ((_ conversations: [Conversation]) -> Void))
    cometChatConversations.set(onLoad: { conversations in
        // Handle loaded conversations
    })
    ```
  </Tab>
</Tabs>

***

### Filters

You can set `ConversationsRequestBuilder` in the Conversations Component to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/ios/retrieve-conversations).

You can set filters using the following parameters.

1. **Conversation Type:** Filters on type of Conversation, `User` or `Groups`
2. **Limit:** Number of conversations fetched in a single request.
3. **WithTags:** Filter on fetching conversations containing tags
4. **Tags:** Filters on specific `Tag`
5. **UserTags:** Filters on specific User `Tag`
6. **GroupTags:** Filters on specific Group `Tag`

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // You can create ConversationRequestBuilder as per your requirement
    let conversationRequestBuilder = ConversationRequest.ConversationRequestBuilder(limit: 20).set(conversationType: .both)

    let cometChatConversations = CometChatConversations(conversationRequestBuilder: conversationRequestBuilder)
    self.navigationController.pushViewController(cometChatConversations, animated: true)
    ```
  </Tab>
</Tabs>

<Tip>
  If a navigation controller is already in use, opt for the `pushViewController` method instead of presenting the view controller.
</Tip>

***

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

##### 1. ConversationDeleted

This event will be emitted when the user deletes a conversation

<Tabs>
  <Tab title="Swift">
    ```swift Add Listener 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 conversation module
             CometChatConversationEvents.addListener("UNIQUE_ID", self as CometChatConversationEventListener)
        }

    }

     // Listener events from conversation module
    extension  ViewController: CometChatConversationEventListener {

        func ccConversationDelete(conversation: Conversation) {
            // Do Stuff
        }

    }
    ```

    ```ruby Remove Listener theme={null}
    public override func viewWillDisappear(_ animated: Bool) {
        // Uncubscribing for the listener to listen events from conversation module
        CometChatConversationEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
    }
    ```
  </Tab>
</Tabs>

## Customization

To align with your app's design specifications, you have the flexibility to customize the appearance of the conversation component. We offer accessible methods that empower you to tailor the experience and functionality to meet your unique requirements.

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

The CometChatConversation component allows developers to customize its appearance through the ConversationStyle class. This enables global-level or instance-specific styling.

**Global level styling**

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let customAvatarStyle = AvatarStyle()
    customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
    customAvatarStyle.cornerRadius = 8

    let customReceiptStyle = ReceiptStyle()
    customReceiptStyle.backgroundColor = UIColor(hex: "#F76808")

    var customBadgeStyle = BadgeStyle()
    customBadgeStyle.backgroundColor = UIColor(hex: "#F76808")

    CometChatConversation.style.backgroundColor = CometChatTheme.backgroundColor01
    CometChatConversation.style.avatarStyle = customAvatarStyle
    CometChatConversation.style.receiptStyle = customReceiptStyle
    CometChatConversation.style.badgeStyle = customBadgeStyle
    ```
  </Tab>
</Tabs>

**Instance level styling**

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let conversationStyle = ConversationsStyle()
    conversationStyle.backgroundColor = CometChatTheme.backgroundColor01
            
    let customAvatarStyle = AvatarStyle()
    customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
    customAvatarStyle.cornerRadius = 8

    let customReceiptStyle = ReceiptStyle()
    customReceiptStyle.backgroundColor = UIColor(hex: "#F76808")

    let customBadgeStyle = BadgeStyle()
    customBadgeStyle.backgroundColor = UIColor(hex: "#F76808")

    let customConversation = CometChatConversation()
    customConversation.avatarStyle = customAvatarStyle
    customConversation.receiptStyle = customReceiptStyle
    customConversation.badgeStyle = customBadgeStyle
    customConversation.style = conversationStyle
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/yJmnm403_SpqIPxu/images/1f71c314-Conversation20-20Styling-0828b09802274067ea4d10f601f24626.png?fit=max&auto=format&n=yJmnm403_SpqIPxu&q=85&s=41d0e18ec288421ab14396bbecdceb4b" width="1280" height="800" data-path="images/1f71c314-Conversation20-20Styling-0828b09802274067ea4d10f601f24626.png" />
</Frame>

List of properties exposed by ConversationStyle

| **Property**                    | **Description**                                                              | **Code**                                                                                      |
| ------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| **Background Color**            | Used to set the background color of the conversation screen.                 | `CometChatConversation.style.backgroundColor = UIColor.white`                                 |
| **Background Drawable**         | Used to set a background image for the conversation screen.                  | `CometChatConversation.style.backgroundDrawable = UIImage(named: "background")`               |
| **Border Width**                | Used to set the border width of the conversation UI.                         | `CometChatConversation.style.borderWidth = 2.0`                                               |
| **Border Color**                | Used to set the border color of the conversation UI.                         | `CometChatConversation.style.borderColor = UIColor.gray`                                      |
| **Corner Radius**               | Used to set the corner radius of the conversation UI.                        | `CometChatConversation.style.cornerRadius = 10.0`                                             |
| **Back Icon Tint**              | Used to set the tint color of the back icon in the conversation UI.          | `CometChatConversation.style.backIconTint = UIColor.blue`                                     |
| **Back Icon**                   | Used to set a custom back icon for the conversation UI.                      | `CometChatConversation.style.backIcon = UIImage(named: "customBackIcon")`                     |
| **Separator Color**             | Used to set the color of separators in the conversation list.                | `CometChatConversation.style.separatorColor = UIColor.lightGray`                              |
| **Separator Width**             | Used to set the width of separators in the conversation list.                | `CometChatConversation.style.separatorWidth = 1.0`                                            |
| **Error Text Color**            | Used to set the color of error messages in the conversation UI.              | `CometChatConversation.style.errorTextColor = UIColor.red`                                    |
| **Last Message Text Color**     | Used to set the color of the last message text in the conversation list.     | `CometChatConversation.style.lastMessageTextColor = UIColor.darkGray`                         |
| **Typing Indicator Color**      | Used to set the color of the typing indicator in the conversation UI.        | `CometChatConversation.style.typingIndicatorColor = UIColor.green`                            |
| **Title Appearance**            | Used to customize the appearance of the conversation screen's title.         | `CometChatConversation.style.titleAppearance = UIFont.boldSystemFont(ofSize: 18.0)`           |
| **Last Message Appearance**     | Used to customize the appearance of the last message text in the list.       | `CometChatConversation.style.lastMessageAppearance = UIFont.italicSystemFont(ofSize: 14.0)`   |
| **Thread Indicator Appearance** | Used to customize the appearance of thread indicators in the list.           | `CometChatConversation.style.threadIndicatorTextAppearance = UIFont.systemFont(ofSize: 12.0)` |
| **Avatar Style**                | Used to customize the appearance of avatars in the conversation list.        | `CometChatConversation.style.avatarStyle = customAvatarStyle`                                 |
| **Status Indicator Style**      | Used to customize the style of status indicators for online/offline members. | `CometChatConversation.style.statusIndicatorStyle = customStatusIndicatorStyle`               |
| **Date Style**                  | Used to customize the appearance of date labels in the conversation list.    | `CometChatConversation.style.dateStyle = customDateStyle`                                     |
| **Badge Style**                 | Used to customize the appearance of badges in the conversation list.         | `CometChatConversation.style.badgeStyle = customBadgeStyle`                                   |
| **List Item Style**             | Used to customize the appearance of the list items in the conversation list. | `CometChatConversation.style.listItemStyle = customListItemStyle`                             |

##### 2. Avatar Style

To apply customized styles to the `Avatar` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Avatar Styles](/ui-kit/ios/component-styling#avatar).

**Global level styling**

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    CometChatAvatar.style.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
    CometChatAvatar.style.backgroundColor = UIColor(hex: "#F76808")
    ```
  </Tab>
</Tabs>

**Instance level styling**

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    var customAvatarStyle = AvatarStyle()
    customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
    customAvatarStyle.backgroundColor = UIColor(hex: "#F76808")

    let customAvatar = CometChatAvatar()
    customAvatar.style = customAvatarStyle
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/FOTukDN54hvEwBMP/images/f7fe143f-avatar_style-6fbf0de696ce6a51c3014489a8e9a04a.png?fit=max&auto=format&n=FOTukDN54hvEwBMP&q=85&s=ec8d24c5aa972ea9e8c55559c59193dc" width="1280" height="240" data-path="images/f7fe143f-avatar_style-6fbf0de696ce6a51c3014489a8e9a04a.png" />
</Frame>

##### 3. StatusIndicator Style

To apply customized styles to the Status Indicator component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Indicator Styles](/ui-kit/ios/status-indicator).

**Global level styling**

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    CometChatStatusIndicator.style.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
    CometChatStatusIndicator.style.backgroundColor = UIColor(hex: "#F76808")
    ```
  </Tab>
</Tabs>

**Instance level styling**

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    var customStatusIndicatorStyle = StatusIndicatorStyle()
    customStatusIndicatorStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
    customStatusIndicatorStyle.backgroundColor = UIColor(hex: "#F76808")

    CometChatStatusIndicator.style = customStatusIndicatorStyle
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/XcwAaJKArqtIMRe3/images/ba26ed3a-status_indicator_style-98efbbf25bcaf52d6b27b5edc20b2825.png?fit=max&auto=format&n=XcwAaJKArqtIMRe3&q=85&s=e8cf6b75c45164c1c50fd27c00c70129" width="1280" height="240" data-path="images/ba26ed3a-status_indicator_style-98efbbf25bcaf52d6b27b5edc20b2825.png" />
</Frame>

##### 4. Badge Style

To apply customized styles to the `Badge` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Badge Styles](https://www.cometchat.com/docs/ui-kit/ios/component-styling#badge)

**Global level styling**

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    CometChatBadge.style.backgroundColor = UIColor(hex: "#F44649")
    CometChatBadge.style.cornerRadius = CometChatCornerStyle(cornerRadius: 4)
    ```
  </Tab>
</Tabs>

**Instance level styling**

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let customBadgeStyle = BadgeStyle()
    customBadgeStyle.backgroundColor = UIColor(hex: "#F44649")
    customBadgeStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 4)
            
    CometChatBadge.style = customBadgeStyle
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/0XxgOJWFEp0qOHuU/images/fe55ecf9-badge_style-983479e988eb0ee92ab0080f2979e984.png?fit=max&auto=format&n=0XxgOJWFEp0qOHuU&q=85&s=8af299493de2eca782a65333ffd5019f" width="1280" height="240" data-path="images/fe55ecf9-badge_style-983479e988eb0ee92ab0080f2979e984.png" />
</Frame>

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

Below is a list of customizations along with corresponding code snippets

| Property                     | Description                                | Code                                  |
| ---------------------------- | ------------------------------------------ | ------------------------------------- |
| hideErrorView                | Hides the error state view.                | `hideErrorView = true`                |
| hideNavigationBar            | Hides or shows the navigation bar.         | `hideNavigationBar = true`            |
| hideSearch                   | Hides the search bar.                      | `hideSearch = true`                   |
| hideBackButton               | Hides the back button.                     | `hideBackButton = true`               |
| hideLoadingState             | Hides the loading state indicator.         | `hideLoadingState = true`             |
| hideReceipts                 | Hides message read/delivery receipts.      | `hideReceipts = true`                 |
| hideDeleteConversationOption | Hides the option to delete a conversation. | `hideDeleteConversationOption = true` |
| hideUserStatus               | Hides the online/offline status of users.  | `hideUserStatus = true`               |
| hideGroupType                | Hides the group type (private/public).     | `hideGroupType = true`                |

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

***

#### Date Time Formatter

The **CometChatConversations** component supports full customization of how date and time are displayed using the [CometChatDateTimeFormatter](/ui-kit/ios/localize#datetimeformatter).

This enables developers to localize, format, or personalize the date and time strings shown next to each conversation—such as “Today”, “Yesterday”, “12:45 PM”, etc.

1. Component-Level (Global)

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    CometChatConversations.dateTimeFormatter.time = { timestamp in
        return "at " + DateFormatter.localizedString(from: Date(timeIntervalSince1970: TimeInterval(timestamp)), dateStyle: .none, timeStyle: .short)
    }

    CometChatConversations.dateTimeFormatter.today = { timestamp in
        return "Today • \(formattedTime(from: timestamp))"
    }

    CometChatConversations.dateTimeFormatter.otherDay = { timestamp in // This will display older dates as "24 Apr 2025" instead of the default relative format.
        let formatter = DateFormatter()
        formatter.dateFormat = "dd MMM yyyy"
        return formatter.string(from: Date(timeIntervalSince1970: TimeInterval(timestamp)))
    }
    ```
  </Tab>
</Tabs>

2. Instance-Level (Local)

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let conversations = CometChatConversations()
    conversations.dateTimeFormatter.yesterday = { timestamp in
        return "Yesterday at " + formattedTime(from: timestamp)
    }
    ```
  </Tab>
</Tabs>

##### Available closures

| Property  | Description                                                         | Code                                                           |
| --------- | ------------------------------------------------------------------- | -------------------------------------------------------------- |
| time      | Called to format a timestamp as a standard time (e.g., "12:30 PM"). | `CometChatConversations.dateTimeFormatter.time = { ... }`      |
| today     | Called when rendering messages sent today.                          | `CometChatConversations.dateTimeFormatter.today = { ... }`     |
| yesterday | Called for yesterday's messages.                                    | `CometChatConversations.dateTimeFormatter.yesterday = { ... }` |
| lastweek  | Called for messages within the last week.                           | `CometChatConversations.dateTimeFormatter.lastweek = { ... }`  |
| otherDay  | Called for dates older than last week.                              | `CometChatConversations.dateTimeFormatter.otherDay = { ... }`  |
| minute    | Called when referring to "a minute ago".                            | `CometChatConversations.dateTimeFormatter.minute = { ... }`    |
| minutes   | Called for "x minutes ago".                                         | `CometChatConversations.dateTimeFormatter.minutes = { ... }`   |
| hour      | Called for "an hour ago".                                           | `CometChatConversations.dateTimeFormatter.hour = { ... }`      |
| hours     | Called for "x hours ago".                                           | `CometChatConversations.dateTimeFormatter.hours = { ... }`     |

Each closure receives a timestamp (Int, representing UNIX time) and must return a String representing the formatted time.

***

#### SetTextFormatters

You can modify the text formatters by using .set(textFormatters:). This method accepts an array of CometChatTextFormatter, allowing you to apply multiple text formatters to the conversation text.

<Tabs>
  <Tab title="Swift">
    cometChatConversations.set(textFormatters: \[CometChatTextFormatter])
  </Tab>
</Tabs>

***

#### SetDatePattern

You can modify the date pattern to your requirement using .set(datePattern:). This method accepts a function with a return type String. Inside the function, you can create your own pattern and return it as a String.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    cometChatConversations.set(datePattern: { conversation in  
        if let time = conversation.lastMessage?.sentAt {   
        let date = Date(timeIntervalSince1970: TimeInterval(time))  
        let dateFormatter = DateFormatter()  
        dateFormatter.dateFormat = "dd MMM, hh:mm a"  
        dateFormatter.amSymbol = "AM"  
        dateFormatter.pmSymbol = "PM"  
        return dateFormatter.string(from: date) 
        } 
        return ""
    })  
    ```
  </Tab>
</Tabs>

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/zd9jYi4xvTDJ3vRH/images/b659f57e-conversation_date_pattern-d54e21d8caa2b67605a4394275dd7a9c.png?fit=max&auto=format&n=zd9jYi4xvTDJ3vRH&q=85&s=87fd6e14dca9732f310251707e0fb7fb" width="1280" height="800" data-path="images/b659f57e-conversation_date_pattern-d54e21d8caa2b67605a4394275dd7a9c.png" />
</Frame>

***

#### SetOptions

You can define custom options for each conversation using .set(options:). This method allows you to return an array of CometChatConversationOption based on the conversation object.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    cometChatConversations.set(options: { conversation in  
        return [MuteOption(), DeleteOption()]  
    })  
    ```
  </Tab>
</Tabs>

***

#### AddOptions

You can dynamically add options to conversations using .add(options:). This method lets you return additional CometChatConversationOption elements.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    cometChatConversations.add(options: { conversation in  
        return [ArchiveOption()]  
    })  
    ```
  </Tab>
</Tabs>

***

#### SetCustomSoundForMessages

You can customize the notification sound for incoming messages using .set(customSoundForMessages:). This method accepts a URL pointing to the audio file.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let soundURL = Bundle.main.url(forResource: "notification_sound", withExtension: "mp3")  
    cometChatConversations.set(customSoundForMessages: soundURL!)  
    ```
  </Tab>
</Tabs>

***

#### SetListItemView

With this function, you can assign a custom ListItem view to the Conversations Component.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    cometChatConversations.set(listItemView: { conversation in
        let customListItem = CustomListItem()
        customListItem.set(conversation: conversation)
        return customListItem
    })
    ```
  </Tab>
</Tabs>

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/G5i-Yehfyg9oyBQO/images/e8e36448-conversation_list_item_view-e46f2aada81d9289166eda7a54fcc04d.png?fit=max&auto=format&n=G5i-Yehfyg9oyBQO&q=85&s=81a2e193f863d39128bfe656b2a1bcb7" width="1280" height="800" data-path="images/e8e36448-conversation_list_item_view-e46f2aada81d9289166eda7a54fcc04d.png" />
</Frame>

You can create a `CustomListItemView` as a custom `UIView`. Which we will inflate in `setListItemView()`

```swift swift theme={null}

import UIKit
import CometChatUIKitSwift

class CustomListItem: UIView {
    // Initialize UI components
    private var profileImageView: CometChatAvatar = {
        let imageView = CometChatAvatar(image: UIImage())
        imageView.translatesAutoresizingMaskIntoConstraints = false // Important for manual layout
        return imageView
    }()

    private var nameLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false // Important for manual layout
        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupUI() {
        addSubview(profileImageView)
        addSubview(nameLabel)

        NSLayoutConstraint.activate([
            // Profile image constraints
            profileImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
            profileImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
            profileImageView.widthAnchor.constraint(equalToConstant: 40),
            profileImageView.heightAnchor.constraint(equalToConstant: 40),

            nameLabel.leadingAnchor.constraint(equalTo: profileImageView.trailingAnchor, constant: 8),
            nameLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
            nameLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }

    func set(conversation: Conversation) {
        var avatarURL: String?
        if let group = conversation.conversationWith as? Group {
            nameLabel.text = group.name
            avatarURL = group.icon
        }

        if let user = conversation.conversationWith as? User {
            nameLabel.text = user.name
            avatarURL = user.avatar
        }




    self.profileImageView.setAvatar(avatarUrl: avatarURL, with: nameLabel.text)
    }
}
```

***

#### SetLeadingView

You can modify the leading view of a conversation cell using .set(leadingView:).

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    cometChatConversations.set(leadingView: { conversation in  
        let view = CustomLeadingView()
        return view  
    })  
    ```
  </Tab>
</Tabs>

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/9lHiRWz053XfUHU4/images/80140776-conversationLeading-e018d03b1b8ee27723a66f84498fcb2f.png?fit=max&auto=format&n=9lHiRWz053XfUHU4&q=85&s=e601b431725f3d8f17ae6305128f32a1" width="1280" height="800" data-path="images/80140776-conversationLeading-e018d03b1b8ee27723a66f84498fcb2f.png" />
</Frame>

You can create a `CustomLeadingView` as a custom `UIView`. Which we will inflate in `setLeadingView()`

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    import UIKit

    class CustomLeadingView: UIView {
        
        private let chatIcon: UIImageView = {
            let imageView = UIImageView()
            let config = UIImage.SymbolConfiguration(pointSize: 20, weight: .bold)
            imageView.image = UIImage(systemName: "bubble.left.and.bubble.right.fill", withConfiguration: config)
            imageView.tintColor = .black
            imageView.translatesAutoresizingMaskIntoConstraints = false
            return imageView
        }()
        
        init() {
            super.init(frame: .zero)
            setupUI()
        }
        
        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
        
        private func setupUI() {
            backgroundColor = UIColor.purple.withAlphaComponent(0.2)
            layer.cornerRadius = 8
            layer.borderWidth = 2
            layer.borderColor = UIColor.orange.cgColor
            translatesAutoresizingMaskIntoConstraints = false
            
            addSubview(chatIcon)
            
            NSLayoutConstraint.activate([
                chatIcon.centerXAnchor.constraint(equalTo: centerXAnchor),
                chatIcon.centerYAnchor.constraint(equalTo: centerYAnchor)
            ])
        }
    }
    ```
  </Tab>
</Tabs>

***

#### SetTitleView

You can customize the title view of a conversation cell using .set(titleView:).

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    cometChatConversations.set(titleView: { conversation in  
        let view = CustomTitleView()
        return view
    })  
    ```
  </Tab>
</Tabs>

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/_heqVKMNlvrPCGxI/images/620d9f31-conversationTitle-fe945c2ae3b5eeefa783171905f51d2c.png?fit=max&auto=format&n=_heqVKMNlvrPCGxI&q=85&s=e1501edbac083bb5d8b82a6b338749a0" width="1280" height="800" data-path="images/620d9f31-conversationTitle-fe945c2ae3b5eeefa783171905f51d2c.png" />
</Frame>

You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    import UIKit

    class CustomTitleView: UIView {
        
        private let avatarImageView: UIView = {
            let view = UIView()
            view.backgroundColor = UIColor.purple.withAlphaComponent(0.3)
            view.layer.cornerRadius = 20
            view.translatesAutoresizingMaskIntoConstraints = false
            
            let initialsLabel = UILabel()
            initialsLabel.text = "GA"
            initialsLabel.font = UIFont.boldSystemFont(ofSize: 16)
            initialsLabel.textColor = .white
            initialsLabel.translatesAutoresizingMaskIntoConstraints = false
            
            view.addSubview(initialsLabel)
            NSLayoutConstraint.activate([
                initialsLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
                initialsLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor)
            ])
            
            return view
        }()
        
        private let onlineIndicator: UIView = {
            let view = UIView()
            view.backgroundColor = .green
            view.layer.cornerRadius = 5
            view.translatesAutoresizingMaskIntoConstraints = false
            return view
        }()
        
        private let nameLabel: UILabel = {
            let label = UILabel()
            label.text = "George Alan"
            label.font = UIFont.boldSystemFont(ofSize: 14)
            label.translatesAutoresizingMaskIntoConstraints = false
            return label
        }()
        
        private let statusLabel: UILabel = {
            let label = UILabel()
            label.text = "📅 In meeting"
            label.textColor = .systemBlue
            label.font = UIFont.systemFont(ofSize: 14)
            label.translatesAutoresizingMaskIntoConstraints = false
            return label
        }()
        
        private let timestampLabel: UILabel = {
            let label = UILabel()
            label.text = "07:35 PM"
            label.textColor = .gray
            label.font = UIFont.systemFont(ofSize: 12)
            label.translatesAutoresizingMaskIntoConstraints = false
            return label
        }()
        
        private let messageLabel: UILabel = {
            let label = UILabel()
            label.text = "I'll take it. Can you ship it?"
            label.textColor = .darkGray
            label.font = UIFont.systemFont(ofSize: 14)
            label.translatesAutoresizingMaskIntoConstraints = false
            return label
        }()
        
        init() {
            super.init(frame: .zero)
            setupUI()
        }
        
        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
        
        private func setupUI() {
            addSubview(avatarImageView)
            addSubview(onlineIndicator)
            addSubview(nameLabel)
            addSubview(statusLabel)
            addSubview(timestampLabel)
            addSubview(messageLabel)
            
            NSLayoutConstraint.activate([
                avatarImageView.leadingAnchor.constraint(equalTo: leadingAnchor),
                avatarImageView.topAnchor.constraint(equalTo: topAnchor),
                avatarImageView.widthAnchor.constraint(equalToConstant: 40),
                avatarImageView.heightAnchor.constraint(equalToConstant: 40),
                
                onlineIndicator.bottomAnchor.constraint(equalTo: avatarImageView.bottomAnchor, constant: -2),
                onlineIndicator.trailingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: -2),
                onlineIndicator.widthAnchor.constraint(equalToConstant: 10),
                onlineIndicator.heightAnchor.constraint(equalToConstant: 10),
                
                nameLabel.leadingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: 8),
                nameLabel.topAnchor.constraint(equalTo: topAnchor),
                
                statusLabel.leadingAnchor.constraint(equalTo: nameLabel.trailingAnchor, constant: 4),
                statusLabel.centerYAnchor.constraint(equalTo: nameLabel.centerYAnchor),
                
                timestampLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
                timestampLabel.topAnchor.constraint(equalTo: topAnchor),
                
                messageLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor),
                messageLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 2),
                messageLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
                messageLabel.bottomAnchor.constraint(equalTo: bottomAnchor)
            ])
        }
    }
     
    ```
  </Tab>
</Tabs>

***

#### SetTrailView

You can modify the trailing view of a conversation cell using .set(trailView:).

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    cometChatConversations.set(trailView: { conversation in  
        let view = CustomTrailView() 
        return view  
    })  
    ```
  </Tab>
</Tabs>

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/V0K7cPlfehMN11ku/images/2c5eb324-conversationTrail-8720dcd27f842e30acdbe58a25291aaa.png?fit=max&auto=format&n=V0K7cPlfehMN11ku&q=85&s=69fbfa42a1463e9308d2623523fe6a18" width="1280" height="800" data-path="images/2c5eb324-conversationTrail-8720dcd27f842e30acdbe58a25291aaa.png" />
</Frame>

You can create a `CustomTrailView` as a custom `UIView`. Which we will inflate in `setTrailView()`

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    import UIKit

    class CustomTrailView: UIView {
        
        private let timeLabel: UILabel = {
            let label = UILabel()
            label.text = "10"
            label.font = UIFont.boldSystemFont(ofSize: 20)
            label.textColor = .purple
            label.translatesAutoresizingMaskIntoConstraints = false
            return label
        }()
        
        private let subtextLabel: UILabel = {
            let label = UILabel()
            label.text = "Mins ago"
            label.font = UIFont.systemFont(ofSize: 14)
            label.textColor = .purple
            label.translatesAutoresizingMaskIntoConstraints = false
            return label
        }()
        
        init() {
            super.init(frame: .zero)
            setupUI()
        }
        
        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
        
        private func setupUI() {
            backgroundColor = UIColor.purple.withAlphaComponent(0.2)
            layer.cornerRadius = 8
            translatesAutoresizingMaskIntoConstraints = false
            
            addSubview(timeLabel)
            addSubview(subtextLabel)
            
            NSLayoutConstraint.activate([
                timeLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
                timeLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
                
                subtextLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
                subtextLabel.topAnchor.constraint(equalTo: timeLabel.bottomAnchor, constant: 4),
                subtextLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
            ])
        }
    }
     
    ```
  </Tab>
</Tabs>

***

#### SetSubtitleView

You can customize the subtitle view for each conversation item to meet your requirements

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    cometChatConversations.set(subtitleView: { conversation in
        let customSubtitleView = CustomSubtitleView()
        customSubtitleView.set(conversation: conversation)
        return customSubtitleView
    })
    ```
  </Tab>
</Tabs>

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/Jekl0sHaq-tRog2V/images/5b269588-conversation_subtitle_view-29b032d100a8cd1fd5e76a0e814fe306.png?fit=max&auto=format&n=Jekl0sHaq-tRog2V&q=85&s=4bcf6e4d988cee4459a538d0253ec295" width="1280" height="800" data-path="images/5b269588-conversation_subtitle_view-29b032d100a8cd1fd5e76a0e814fe306.png" />
</Frame>

You need to create a `SubtitleView` a custom `UIView` `cocoa touch file` and inflate it in the setSubtitleView apply function. Then, you can define individual actions depending on your requirements.

* `SubtitleView` file should should appear as follows:

```swift swift theme={null}
import UIKit
import CometChatUIKitSwift
import CometChatSDK

class CustomSubtitleView: UIView {
    
    // MARK: - Properties
    private let subtitleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = UIFont.systemFont(ofSize: 14, weight: .regular) // Customize font
        label.textColor = .darkGray // Customize text color
        label.numberOfLines = 1 // Single line
        label.textAlignment = .left // Align to the left
        return label
    }()
    
    // MARK: - Initializers
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }
    
    // MARK: - Setup
    private func setupView() {
        addSubview(subtitleLabel)
        
        // Constraints
        NSLayoutConstraint.activate([
            subtitleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
            subtitleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
            subtitleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 4),
            subtitleLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -4)
        ])
    }
    
    // MARK: - Configuration
    func set(conversation: Conversation) {
        subtitleLabel.text = conversation.lastMessage
    }
}
```

***

#### SetLoadingView

You can set a custom loading view using .set(loadingView:). This method accepts a UIView to display while data is being fetched.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let loadingIndicator = UIActivityIndicatorView(style: .medium)  
    loadingIndicator.startAnimating()  
    cometChatConversations.set(loadingView: loadingIndicator)  
    ```
  </Tab>
</Tabs>

***

#### SetErrorView

You can customize the error view using .set(errorView:). This method accepts a UIView that appears when an error occurs.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let errorLabel = UILabel()  
    errorLabel.text = "Something went wrong!"  
    errorLabel.textColor = .red  
    cometChatConversations.set(errorView: errorLabel)  
    ```
  </Tab>
</Tabs>

***

#### SetEmptyView

You can customize the empty state view using .set(emptyView:). This method accepts a UIView that appears when no conversations are available.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let emptyLabel = UILabel()  
    emptyLabel.text = "No conversations found"  
    emptyLabel.textColor = .gray  
    emptyLabel.textAlignment = .center  
    cometChatConversations.set(emptyView: emptyLabel)  
    ```
  </Tab>
</Tabs>

***