Skip to main content

​
Introduction

The CometChat v5 iOS UI Kit streamlines the integration of in-app chat functionality into your iOS applications. Packed with prebuilt, modular UI components built natively in Swift, it supports essential messaging features for both one-to-one and group conversations. With built-in theming options, including light and dark modes, customizable fonts, colors, and extensive configuration possibilities, developers can create chat experiences tailored to their application’s needs.

​
Integration

In v4, integration was straightforward due to the availability of composite components like CometChatConversationsWithMessages. This single component provided end-to-end functionality, including listing conversations, handling conversation clicks, loading messages (message header, list, composer), displaying user or group details, and supporting threaded messages. Developers could achieve all these features with minimal setup. However, customization posed significant challenges. Customizing the UI or adding custom views required a deep understanding of the internal flow of the composite component. Additionally, configurations were a mix of custom view props, behavioral props, and style props, which often led to confusion. Styling deeply nested components also proved cumbersome, limiting the developer’s ability to make meaningful changes. With v5, composite components have been replaced with smaller, modular components, such as CometChatConversations, CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer. This modular approach makes integration more flexible and easier to understand. Each component has a well-defined purpose, allowing developers to use them in ways that suit their specific requirements. The need for complex configurations has been eliminated, as developers can now customize behavior and styling directly via component properties and Swift APIs. To support the transition from v4 to v5, CometChat has built a sample app that replicates the functionality of v4’s composite components. This sample app serves as a reference for developers looking to build additional features such as user/group details, call log details, threaded messages, and advanced messaging capabilities. By following this approach, developers can take full advantage of v5’s modular design while implementing complex functionality in an organized manner.
Learn how to build a complete messaging UI using the v5 UI Kit by following the step-by-step guide here.

​
Components

The v4 UI Kit provided composite components like CometChatConversationsWithMessages, which offered end-to-end functionality. These components integrated features such as conversation lists, message views (header, list, composer), user/group details, and threaded messages into a single unit. However, customization of deeply nested components through configuration was challenging and resulted in a suboptimal developer experience.
Components in v4 UI Kit:
CometChatConversationsWithMessagesCometChatUsersWithMessagesCometChatGroupsWithMessages
CometChatMessagesCometChatMessageHeaderCometChatMessageList
CometChatMessageComposerCometChatThreadedMessagesCometChatConversations
CometChatUsersCometChatGroupsCometChatContacts
CometChatDetailsCometChatGroupMembersCometChatAddMembers
CometChatBannedMembersCometChatTransferOwnershipCometChatMessageInformation
CometChatIncomingCallCometChatOngoingCallCometChatOutgoingCall
CometChatCallButtonsCometChatCallLogsCometChatCallLogDetails
CometChatCallLogHistory
In v5, the composite approach is replaced with smaller, modular components like CometChatConversations, CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer. Developers now need to stitch these components together to build the desired functionality. This change allows for greater flexibility and easier customization via properties, significantly improving the developer experience while maintaining functionality.
Components in v5 UI Kit:
CometChatConversationsCometChatUsersCometChatGroups
CometChatGroupMembersCometChatMessageHeaderCometChatMessageList
CometChatMessageComposerCometChatThreadedMessageHeaderCometChatIncomingCall
CometChatOutgoingCallCometChatCallButtonsCometChatCallLogs

​
Theming

In v4, theming was managed using the CometChatTheme class along with the Palette and Typography classes. The Palette class provided methods like set(background:), set(accent:), set(primary:), and similar setters for configuring colors and themes. While this approach worked, it required instantiating multiple objects and passing them through constructors, which added complexity to the theming process. Developers had to create palette and typography instances, configure them with various color and font settings, and then pass them to create a theme object.
App.delegate
let palette = Palette()
palette.set(background: .purple)
palette.set(accent: .cyan)
palette.set(primary: .green)
palette.set(error: .red)
palette.set(success: .yellow)
palette.set(secondary: .orange)

let family = CometChatFontFamily(
    regular: "CourierNewPSMT",
    medium: "CourierNewPS-BoldMT",
    bold: "CourierNewPS-BoldMT"
)
var typography = Typography()
typography.overrideFont(family: family)

let theme = CometChatTheme(typography: typography, palatte: palette)
In v5, theming has been completely revamped for simplicity and directness. The complex theming classes and object instantiation have been replaced with direct static property assignment on CometChatTheme and CometChatTypography. This means every design token, such as colors and typography, can now be set directly as static properties. Changing the primary color, for instance, is as simple as assigning a value to CometChatTheme.primaryColor — no need to interact with complex theming logic or instantiate multiple objects. The new theming approach is declarative and lightweight, significantly enhancing both performance and developer experience. By providing direct access to theme properties, developers can now customize the look and feel of their application with minimal code and maximum clarity.
App.delegate
// Apply the global theme - typically in AppDelegate or SceneDelegate
CometChatTheme.primaryColor = UIColor.red
CometChatTheme.backgroundColor01 = .brown
CometChatTheme.backgroundColor02 = .green

// Apply custom typography
CometChatTypography.Body.regular = UIFont.systemFont(ofSize: 18, weight: .bold)
This architectural redesign makes theming more intuitive and aligns with modern iOS development practices. Developers now have a more powerful and straightforward toolset to customize and manage themes effectively.
For detailed guidance on theming and customizing colors in the CometChat iOS UI Kit, refer to the following resources:

​
Properties

In v5, the approach to properties has been significantly refined to improve clarity and ease of use. All style-related properties, previously used to customize components, have been replaced by a more efficient and native theming system based on direct property access and configuration classes. This change ensures a seamless and flexible styling process without requiring verbose or redundant setup within component properties. Configuration properties, which were widely used in v4, have also been removed. With v5’s modular architecture, components are no longer deeply nested or dependent on complex configuration objects. Developers now have direct control over each component, reducing complexity and increasing flexibility in how components are customized, styled, and composed. Custom view properties have been restructured to ensure consistency and uniformity across all components. For instance, components that represent list items or visual elements now share a unified set of customizable properties, allowing developers to adopt a standardized approach to component customization. These properties include itemView, leadingView, trailingView, subtitleView, and titleView. This consistent naming convention provides developers with a predictable customization model across multiple components, simplifying the development process and ensuring UI consistency throughout the app. For a comprehensive overview of newly added, renamed, and removed properties, refer to the Property Changes documentation.