Contacts - CometChat Docs

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:

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

Properties	Type	Description
usersConfiguration	UsersConfiguration	used 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
groupsConfiguration	GroupsConfiguration	used as a custom request for group request builder protocol
backIcon	Image	used to set the back icon
contactsStyle	ContactsStyleInterface	used to set the contact styles
onClose	Function	used to set the close icon function when the tapped on close icon
selectionMode	SelectionMode	used to set the number of groups that can be selected if activateSelection is not null. SelectionMode can be single, multiple .
submitIcon	Image	used to set submit button icon
title	String	used to set title
userTabTitle	String	used to set users tab title
groupTabTitle	String	used 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
selectionLimit	number	used to set the selection limit
hideSubmit	boolean	used to hide submit icons

contactStyle

Properties	Type	Description
width	string \| number	used to set width
height	string \| number	used to set height
background	String	used to set background color
border	BorderStyle	used to set border
borderRadius	number	used to set corner radius
titleTextFont	FontStyle	used to set title font
titleTextColor	String	used to set a text color
backIconTint	String	used to set a back icon tint
tabWidth	string \| number	used to set a tab width
tabHeight	string \| number	used to set a tab height
tabBorder	BorderStyle	used to set a tab border
tabBorderRadius	Number	used to set tab border radius
tabBackgroundColor	String	used to set tab background color
tabTitleTextFont	FontStyle	used to set tab title text font
tabTitleTextColor	String	used to set tab title text color
activeTabTitleTextColor	String	used to set active tab title text color
activeTabBackgroundColor	String	used to set active tab background color
activeTabBorder	BorderStyle	used to set active tab border
selectionIconTint	String	used 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}
  ...
/>

​How to integrate CometChatContacts ?

​Properties

​contactStyle

​How to integrate ContactStyles ?

How to integrate CometChatContacts ?

Properties

contactStyle

How to integrate ContactStyles ?