Modify the Users Component
This guide provides an outline of how to modify the Users 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 Users components - Users and Users with Messages - display all users in your app. For instance, when we render the CometChatUsersWithMessages component, it lists every user in our app.
<CometChatUsersWithMessages />
Modify the component
One of the properties in our CometChatUsersWithMessages component is usersConfiguration, which is of type UsersConfigurationInterface. We can utilize the userConfiguration class to pass in a new usersRequestBuilder to define a custom users request builder that fetches a specific subset of users in our app.
If you are using the ComerChatUsers component, you can simply pass in the new custom User request builder into the component.
There are several properties available for setting in a UsersRequestBuilder. For instance, we can use .setUIDs([“uid1”]) to retrieve specific users by their IDs or .setRoles([“subscriber”]) to fetch users with a specific role.
List friends only
In our scenario, we aim to list only the users who are friends with the logged-in user. To achieve this, we add .friendsOnly(true) to set the required property.
let usersRequestBuilder = new CometChat.UsersRequestBuilder()
.setLimit(limit)
.friendsOnly(true);
We can then pass in our usersRequestBuilder into our component.
<CometChatUsersWithMessages
usersConfiguration={{ usersRequestBuilder: usersRequestBuilder }}
/>
The result is a subset of users fetched in my component.
List users based off role
Let’s say we want our patients to only view other support users and for our support users to only view patients to message.
We will first have to ensure that every user in my app has the approrpriate role. The role can be given when you create the CometChat users via the dashboard or API endpoint create users. You must ensure the roles are created first (via API or dashboard).
In our examples, we are assume to have roles ‘patients’ and ‘support’.
To list users based on a specific role, we can use the .setRoles([]) method.
We will create 2 different UsersRequestBuilder objects, one to fetch support users and one to fetch patient users.
// get the role of the logged in user
let userRoleID = await CometChatUIKit.getLoggedInUser().getRole();
let usersRequestBuilderGetPatients = new CometChat.UsersRequestBuilder()
.setLimit(limit)
.setRoles(["patients"])
.friendsOnly(true); // only set this to fetch friends only
let usersRequestBuilderGetSupport = new CometChat.UsersRequestBuilder()
.setLimit(limit)
.setRoles(["support"])
.friendsOnly(true);
//if the role is 'support' we fetch only the 'patient' users
// otherwise, we assume the role is 'patient' and we fetch only the 'support' users
export const UsersWithMessages =
userRoleID === "support" ? (
<CometChatUsersWithMessages
usersConfiguration={{
usersRequestBuilder: usersRequestBuilderGetPatients,
}}
/>
) : (
<CometChatUsersWithMessages
usersConfiguration={{
usersRequestBuilder: usersRequestBuilderGetSupport,
}}
/>
);