Modify the Conversations Component
This documentation provides an outline of how to modify the Conversations component to return a subset of users.
Guide Details:
Language/Framework: React Native
SDK and UI Kit Versions:
"@cometchat/calls-sdk-react-native": "^4.0.4",
"@cometchat/chat-sdk-react-native": "^4.0.6",
"@cometchat/chat-uikit-react-native": "^4.3.2"
SDK Documentation: React Native SDK
UI Kit Documentation: React Native UI Kit
Render the Default Component
By default, both of our Conversations components - Conversations and Conversations with Messages - display all conversations for the user in your app. For instance, when we render the CometChatConversationsWithMessages component, it lists every conversation for the logged in user. This includes 1-1 and group conversations.
<CometChatConversationsWithMessages />
Modify the component
One of the properties in our CometChatConversationsWithMessages component is conversationsConfiguration, which is of type ConversationsConfigurationInterface. We can utilize the ConversationsConfiguration class to pass in a new ConversationsRequestBuilder to define a custom conversation request builder that fetches a specific subset of conversations for this user.
There are several properties available for setting in a ConversationsRequestBuilder. For instance, we can use .setUserTags([“admin”]) to retrieve conversations with those users tagged “admin”. Refer to the SDK documentation to look at the additional filtering available.
List groups only
In our scenario, we aim to list only groups the logged-in user is a part of. To achieve this, we use the .setConversationType() method to set the type to “group”.
let limit = 30;
let conversationType = "group";
let conversationRequest = new CometChat.ConversationsRequestBuilder()
.setLimit(limit)
.setConversationType(conversationType);
We can then pass in our conversationRequest into a ConversationsConfigurationInterface object and then our component.
let conversationsConfiguration: ConversationsConfigurationInterface = {
conversationsRequestBuilder: conversationRequest,
};
<CometChatConversationsWithMessages
conversationsConfiguration={conversationsConfiguration}
/>;
The result is a subset of only groups fetched in my component.
