Skip to main content
CometChatContacts is a versatile UI component specifically designed to facilitate the display and management of users and groups within chat applications. It streamlines the process of showcasing all app users and available chat groups in a user-friendly interface, making it easier for users to connect and communicate effectively. Key Features:
  1. User List View: CometChatContacts presents a comprehensive list of all registered users within the application. This list allows users to quickly find and select specific individuals they wish to interact with.
  2. Group List View: The component also offers a dedicated view to showcase all the available chat groups. This simplifies the process of joining or creating new group conversations.
  3. Smart Search Functionality: Users can utilize the powerful search feature to quickly locate specific users or groups by typing names or keywords. This ensures seamless navigation, even in applications with a large user base.
  4. Selection Mode: CometChatContacts supports a selection mode, enabling users to pick multiple contacts or groups simultaneously. This feature proves useful for creating group chats or forwarding messages to multiple recipients.
  5. Customizable Tab Layout: Developers can easily customize the appearance of the tabs, including text colors, indicator color, and background, to match the app’s branding and aesthetics.
  6. Selection Limit Control: Developers have the flexibility to set a selection limit, restricting the number of contacts or groups a user can select during the selection mode. This helps maintain messaging policies and optimize user experience.
  7. User-Friendly Close Button: The component provides a convenient close button feature, allowing users to exit the Contacts view and return to their previous screen or chat interface effortlessly.

​
How to integrate CometChatContacts ?

CometChatContacts is a component. CometChatContacts includes various attributes and methods to customize its UI.
  • TypeScript
<CometChatContacts
  hideSubmit={true}
  onItemPress={({ user, group }) => {}}
  {...startConversationConfiguration}
  onClose={() => {}}
/>

​
Properties

PropertiesTypeDescription
usersConfigurationUsersConfigurationused as a custom request for user request builder protocol
onItemPress(param: { user?:User, group?:Group })callback triggered on tapping a user or group item tab
groupsConfigurationGroupsConfigurationused as a custom request for group request builder protocol
backIconImageused to set the back icon
contactsStyleContactsStyleInterfaceused to set the contact styles
onCloseFunctionused to set the close icon function when the tapped on close icon
selectionModeSelectionModeused to set the number of groups that can be selected if activateSelection is not null. SelectionMode can be single, multiple .
submitIconImageused to set submit button icon
titleStringused to set title
userTabTitleStringused to set users tab title
groupTabTitleStringused to set groups tab title
onSubmitIconClick(props: { users: Array<User>, groups: Array<Group> })triggered when clicked on submit icon
tabVisibility’user’ | ‘groups’ | ‘usersAndGroup’parameter to alter visibility of different tabs between users and group
selectionLimitnumberused to set the selection limit
hideSubmitbooleanused to hide submit icons

​
contactStyle

PropertiesTypeDescription
widthstring | numberused to set width
heightstring | numberused to set height
backgroundStringused to set background color
borderBorderStyleused to set border
borderRadiusnumberused to set corner radius
titleTextFontFontStyleused to set title font
titleTextColorStringused to set a text color
backIconTintStringused to set a back icon tint
tabWidthstring | numberused to set a tab width
tabHeightstring | numberused to set a tab height
tabBorderBorderStyleused to set a tab border
tabBorderRadiusNumberused to set tab border radius
tabBackgroundColorStringused to set tab background color
tabTitleTextFontFontStyleused to set tab title text font
tabTitleTextColorStringused to set tab title text color
activeTabTitleTextColorStringused to set active tab title text color
activeTabBackgroundColorStringused to set active tab background color
activeTabBorderBorderStyleused to set active tab border
selectionIconTintStringused to set selected icon color

​
How to integrate ContactStyles ?

  • TypeScript
// create a MediaRecorderStyle object
const contactsStyle = new ContactsStyleInterface({
        titleTextColor = "rgb(51, 153, 255)",
        tabHeight = 40
    });

// pass that MediaRecorderStyle object to CometChatMediaRecorder
<CometChatContacts
  ...
  contactsStyle={contactsStyle}
  ...
/>