> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Group Members

## Overview

`CometChatGroupMembers` is a versatile [Component](/ui-kit/react-native/components-overview#components) designed to showcase all users who are either added to or invited to a group, thereby enabling them to participate in group discussions, access shared content, and engage in collaborative activities. Group members have the capability to communicate in real-time through messaging, voice and video calls, and various other interactions. Additionally, they can interact with each other, share files, and join calls based on the permissions established by the group administrator or owner.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/195oxTVcmj5zqz-a/images/c316bb0a-group_members-9849dc973b6addaffc0990af38520294.png?fit=max&auto=format&n=195oxTVcmj5zqz-a&q=85&s=08069e687497c40456fba48a06d2ba46" width="1280" height="800" data-path="images/c316bb0a-group_members-9849dc973b6addaffc0990af38520294.png" />
</Frame>

***

## Usage

### Integration

`CometChatGroupMembers`, as a Composite Component, offers flexible integration options, allowing it to be launched directly via button clicks or any user-triggered action. Additionally, it seamlessly integrates into tab view controllers. With group members, users gain access to a wide range of parameters and methods for effortless customization of its user interface.

The following code snippet exemplifies how you can seamlessly integrate the GroupMembers component into your application.

If you're defining the Group members within the XML code, you'll need to extract them and set them on the Group object using the appropriate method.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import { CometChatGroupsMembers } from "@cometchat/chat-uikit-react-native";

    function App(): React.JSX.Element {
      const [group, setGroup] = useState<CometChat.Group | undefined>(undefined);

      const getGroup = async () => {
        const group = await CometChat.getGroup("guid");
        setGroup(group);
      };

      useEffect(() => {
        //login
        getGroup();
      });

      return (
        <>
          {group && <CometChatGroupsMembers group={group} />}
        </>
      );
    }
    ```
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/react-native/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

##### onItemPress

Function invoked when a user item is clicked, typically used to open a user profile or chat screen.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";

    const onPressHandler = (groupMember: CometChat.GroupMember) => {
      //code
    };

    return <CometChatGroupMembers onItemPress={onPressHandler} />;
    ```
  </Tab>
</Tabs>

***

##### onnItemLongPress

Function executed when a user item is long-pressed, allowing additional actions like delete or block.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";

    const onLongPressHandler = (groupMember: CometChat.GroupMember) => {
      //code
    };

    return <CometChatGroupMembers onItemLongPress={onLongPressHandler} />;
    ```
  </Tab>
</Tabs>

***

##### onBack

`OnBackPressListener` is triggered when you press the back button in the app bar. It has a predefined behavior; when clicked, it navigates to the previous activity. However, you can override this action using the following code snippet.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";

    const onBackHandler = () => {
      //code
    };

    return <CometChatGroupMembers showBackButton={true} onBack={onBackHandler} />;
    ```
  </Tab>
</Tabs>

***

##### onSelection

Called when a item from the fetched list is selected, useful for multi-selection features.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";

    const onSelectionHandler = (selection: Array<CometChat.GroupMember>) => {
      //code
    };

    return (
      <CometChatGroupMembers
        selectionMode={"single"}
        onSelection={onSelectionHandler}
      />
    );
    ```
  </Tab>
</Tabs>

***

##### onError

This action doesn't change the behavior of the component but rather listens for any errors that occur in the Users component.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";

    const onErrorHandler = (error: CometChat.CometChatException) => {
      console.log("Error");
    };

    return <CometChatGroupMembers onError={onErrorHandler} />;
    ```
  </Tab>
</Tabs>

***

### Filters

**Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.

##### 1. GroupsRequestBuilder

The [GroupMembersRequestBuilder](/sdk/react-native/retrieve-group-members) enables you to filter and customize the group members list based on available parameters in GroupMembersRequestBuilder. This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupMembersRequestBuilder](/sdk/react-native/retrieve-group-members)

| Methods              | Type           | Description                                                                                       |
| -------------------- | -------------- | ------------------------------------------------------------------------------------------------- |
| **setLimit**         | number         | sets the number of group members that can be fetched in a single request, suitable for pagination |
| **setSearchKeyword** | string         | used for fetching group members matching the passed string                                        |
| **setScopes**        | Array\<string> | used for fetching group members based on multiple scopes                                          |

**Example**

In the example below, we are applying a filter to the Group List based on limit and scope.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import { CometChatGroupsMembers } from "@cometchat/chat-uikit-react-native";

    function App(): React.JSX.Element {
      const [group, setGroup] = useState<CometChat.Group | undefined>(undefined);
      let groupMemberRequestBuilder;

      const getGroup = async () => {
        const group = await CometChat.getGroup("mrc-uid");
        groupMemberRequestBuilder = new CometChat.GroupMembersRequestBuilder(
          group.getGuid()
        ).setScopes(["admin"]);
        setGroup(group);
      };

      useEffect(() => {
        //login
        getGroup();
      });

      const onErrorHandler = (error: CometChat.CometChatException) => {
        //code
      };

      return (
        <>
          {group && (
            <CometChatGroupsMembers
              group={group}
              groupMemberRequestBuilder={groupMemberRequestBuilder}
            />
          )}
        </>
      );
    }
    ```
  </Tab>
</Tabs>

***

##### 2. SearchRequestBuilder

The SearchRequestBuilder uses [GroupMembersRequestBuilder](/sdk/react-native/retrieve-group-members) enables you to filter and customize the search list based on available parameters in GroupMembersRequestBuilder. This feature allows you to keep uniformity between the displayed Group Members List and searched Group Members List.

**Example**

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import { CometChatGroupsMembers } from "@cometchat/chat-uikit-react-native";

    function App(): React.JSX.Element {
      const [group, setGroup] = useState<CometChat.Group | undefined>(undefined);
      let searchRequestBuilder;

      const getGroup = async () => {
        const group = await CometChat.getGroup("mrc-uid");
        searchRequestBuilder = new CometChat.GroupMembersRequestBuilder(
          group.getGuid()
        )
          .setScopes(["admin"])
          .setSearchKeyword("some-search-keyword");
        setGroup(group);
      };

      useEffect(() => {
        //login
        getGroup();
      });

      return (
        <>
          {group && (
            <CometChatGroupsMembers
              group={group}
              groupMemberRequestBuilder={searchRequestBuilder}
            />
          )}
        </>
      );
    }
    ```
  </Tab>
</Tabs>

***

### Events

[Events](/ui-kit/react-native/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

Events emitted by the Group Members component is as follows.

| Event                         | Description                                                       |
| ----------------------------- | ----------------------------------------------------------------- |
| **ccGroupMemberBanned**       | Triggers when the group member banned from the group successfully |
| **ccGroupMemberKicked**       | Triggers when the group member kicked from the group successfully |
| **ccGroupMemberScopeChanged** | Triggers when the group member scope is changed in the group      |

<Tabs>
  <Tab title="Adding Listeners">
    ```tsx theme={null}
    import { CometChatUIEventHandler } from "@cometchat/chat-uikit-react-native";

    CometChatUIEventHandler.addGroupListener("GROUP_LISTENER_ID", {
      ccGroupMemberBanned: ({
        message,
        kickedUser,
        kickedBy,
        kickedFrom,
      }: {
        message: CometChat.BaseMessage,
        kickedUser: CometChat.User,
        kickedBy: CometChat.User,
        kickedFrom: CometChat.Group,
      }) => {
        //code
      },
      ccGroupMemberKicked: ({
        message,
        kickedFrom,
      }: {
        message: CometChat.BaseMessage,
        kickedFrom: CometChat.Group,
      }) => {
        //code
      },
      ccGroupMemberScopeChanged: ({
        action,
        updatedUser,
        scopeChangedTo,
        scopeChangedFrom,
        group,
      }) => {
        //code
      },
    });
    ```
  </Tab>
</Tabs>

***

<Tabs>
  <Tab title="Removing Listeners">
    ```tsx theme={null}
    import { CometChatUIEventHandler } from "@cometchat/chat-uikit-react-native";

    CometChatUIEventHandler.removeGroupListener("GROUP_LISTENER_ID");
    ```
  </Tab>
</Tabs>

***

## Customization

To fit your app's design requirements, you can customize the appearance of the Groups component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

### Style

Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/j9rC5KDHdwR7G4nu/images/1bd5a982-group_members_styling-ee7427e23be4ccf40776d8b1df1342f4.png?fit=max&auto=format&n=j9rC5KDHdwR7G4nu&q=85&s=a3f45e06d367bb58dd3b78ee78c81817" width="1280" height="800" data-path="images/1bd5a982-group_members_styling-ee7427e23be4ccf40776d8b1df1342f4.png" />
</Frame>

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import {
      CometChatGroupMembers,
      useTheme,
    } from "@cometchat/chat-uikit-react-native";
    //other imports
    const theme: CometChatTheme = useTheme();
    //code
    return (
      group && (
        <CometChatGroupMembers
          group={group}
          style={{
            titleSeparatorStyle: {
              borderBottomColor: "#F76808",
            },
            titleStyle: {
              color: "#F76808",
            },
            backButtonIconStyle: {
              tintColor: "#F76808",
            },
            ownerBadgeStyle: {
              containerStyle: {
                backgroundColor: "#F76808",
                borderColor: "#F76808",
              },
              textStyle: {
                ...theme.typography.caption1.regular,
                color: theme.color.staticWhite,
              },
            },
            adminBadgeStyle: {
              containerStyle: {
                backgroundColor: "#FEEDE1",
                borderColor: "#F76808",
              },
              textStyle: {
                ...theme.typography.caption1.regular,
                color: "#F76808",
              },
            },
            moderatorBadgeStyle: {
              containerStyle: {
                backgroundColor: "#FEEDE1",
              },
              textStyle: {
                ...theme.typography.caption1.regular,
                color: "#F76808",
              },
            },
          }}
        />
      )
    );
    ```
  </Tab>
</Tabs>

***

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can toggle the visibility of UI elements.

Below is a list of customizations along with corresponding code snippets

| Property                  | Description                                                                                          | Code                                                   |
| ------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| **showBackButton**        | Used to show or hide back button                                                                     | `showBackButton={true}?: boolean`                      |
| **hideError**             | Used to hide error on fetching groups                                                                | `hideError?: boolean`                                  |
| **hideSearch**            | Used to toggle visibility for search box                                                             | `hideSearch?: boolean`                                 |
| **searchPlaceholderText** | Used to set custom search placeholder text                                                           | `searchPlaceholderText='Custom Search PlaceHolder'`    |
| **selectionMode**         | set the number of group members that can be selected, SelectionMode can be single, multiple or none. | `selectionMode?: 'none'` \| `'single'` \| `'multiple'` |
| **group**                 | Used to pass group object of which group members will be shown                                       | `group: CometChat.Group`                               |
| **hideHeader**            | Used to toggle visibility for the toolbar/header                                                     | `hideHeader?: boolean`                                 |

***

### Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your own views, layouts, and UI elements and then incorporate those into the component.

The `Group Memebers` component does not provide additional functionalities beyond this level of customization.

***

#### LoadingView

Displays a custom loading view while group members are being fetched.

Use Cases:

* Show a loading spinner with "Fetching group members...".
* Implement a skeleton loader for a smoother UI experience.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    //code
    const getLoadingView = (): JSX.Element => {
      //your custom loading view
      //return jsx;
    };
    return (
      <CometChatGroupMembers
        group={group}
        LoadingView={getLoadingView}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### EmptyView

Configures a view to be displayed when no group members are found.

Use Cases:

* Display a message like "No members in this group yet.".
* Show a button to Invite Members.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    //code
    const getEmptyView = (): JSX.Element => {
      //your custom Empty view
      //return jsx;
    };
    return (
      <CometChatGroupMembers
        group={group}
        EmptyView={getEmptyView}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### ErrorView

Defines a custom error state view when there is an issue loading group members.

Use Cases:

* Display a retry button with "Failed to load members. Tap to retry.".
* Show an illustration for a better user experience.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    //code
    const getErrorView = (): JSX.Element => {
      //your custom Error view
      //return jsx;
    };
    return (
      <CometChatGroupMembers
        group={group}
        ErrorView={getErrorView}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### LeadingView

Sets a custom leading view for each group member item, usually used for profile images or avatars.

Use Cases:

* Show a circular avatar with an online/offline indicator.
* Add a role-based badge (Admin, Moderator, Member).

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const getLeadingView = (groupMember: CometChat.GroupMember): JSX.Element => {
      //your custom Leading view
      //return jsx;
    };
    return (
      <CometChatGroupMembers
        group={group}
        LeadingView={getLeadingView}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### TitleView

Customizes the title view, typically displaying the member's name.

Use Cases:

* Customize fonts, colors, or styles for usernames.
* Add role-specific indicators like "(Group Admin)".

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const getTitleView = (groupMember: CometChat.GroupMember): JSX.Element => {
      //your custom title view
      //return jsx;
    };
    return (
      <CometChatGroupMembers
        group={group}
        TitleView={getTitleView}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### ItemView

Assigns a fully custom ListItem layout to the Group Members Component, replacing the default structure.

Use Cases:

* Include additional member details like joined date, bio, or status.
* Modify layout based on user roles.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const getItemView = (groupMember: CometChat.GroupMember): JSX.Element => {
      //your custom item view
      //return jsx;
    };
    return (
      <CometChatGroupMembers
        group={group}
        ItemView={getItemView}
      />
    );
    ```
  </Tab>
</Tabs>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/-G4WbAhFV_nFm5lW/images/506c713b-group_members_list_item_view-7db7e3429ec8898cb29e584a459ec43f.png?fit=max&auto=format&n=-G4WbAhFV_nFm5lW&q=85&s=b05b5e28520ef0bd73c0a8f3a534614a" width="1280" height="800" data-path="images/506c713b-group_members_list_item_view-7db7e3429ec8898cb29e584a459ec43f.png" />
</Frame>

***

#### SubtitleView

Customizes the subtitle view for each group member, typically used for extra details.

Use Cases:

* Show "Last Active" time.
* Display a custom status message.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const getSubtitleView = (groupMember: CometChat.GroupMember): JSX.Element => {
      //your custom Subtitle view
      //return jsx;
    };
    return (
      <CometChatGroupMembers
        group={group}
        SubtitleView={getSubtitleView}
      />
    );
    ```
  </Tab>
</Tabs>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/V0K7cPlfehMN11ku/images/2b73a513-group_members_subtitle_view-b0b1463389d35067432eaf60d8418ffe.png?fit=max&auto=format&n=V0K7cPlfehMN11ku&q=85&s=20343ae01ad99f7b5dc34a86f1f145b7" width="1280" height="800" data-path="images/2b73a513-group_members_subtitle_view-b0b1463389d35067432eaf60d8418ffe.png" />
</Frame>

***

#### TrailingView

Customizes the trailing (right-end) section of each member item, typically used for action buttons.

Use Cases:

* Show quick actions like Mute, Remove, or Promote.
* Display a "Last Active" timestamp.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const getTrailingView = (groupMember: CometChat.GroupMember): JSX.Element => {
      //your custom Trailing view
      //return jsx;
    };
    return (
      <CometChatGroupMembers
        group={group}
        TrailingView={getTrailingView}
      />
    );
    ```
  </Tab>
</Tabs>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/FOTukDN54hvEwBMP/images/fb7e32ac-group_members_tail_view-19ea33e3931012467d4df750210007fe.png?fit=max&auto=format&n=FOTukDN54hvEwBMP&q=85&s=75afe8d45a78a7b937ebd14dd7d7892b" width="1280" height="800" data-path="images/fb7e32ac-group_members_tail_view-19ea33e3931012467d4df750210007fe.png" />
</Frame>

#### AppBarOptions

Allows customization of the overflow menu (three-dot ⋮ icon) with additional options.

Use Cases:

* Add extra actions like "Report Member", "Restrict from Posting".
* Provide group admins with moderation options.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const getTrailingView = (groupMember: CometChat.GroupMember): JSX.Element => {
      //your custom Trailing view
      //return jsx;
    };
    return (
      <CometChatGroupMembers
        group={group}
        AppBarOptions={() => {
          return (
            <TouchableOpacity
              onPress={() => {
                //do something
              }}
            >
              <Text>Custom App Bar Options</Text>
            </TouchableOpacity>
          );
        }}
      />
    );
    ```
  </Tab>
</Tabs>

#### options

Defines a set of available actions that users can perform when they interact with a group member item.

* Provide actions like "View Profile", "Send Message", "Remove from Group".
* Restrict certain actions to admins (e.g., "Promote to Admin", "Ban User").

By customizing these options, developers can provide a streamlined and contextually relevant user experience

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroups } from "@cometchat/chat-uikit-react-native";
    //code

    const setMyOptions = (_member: any, _group: any) => {
        return [
          //options
        ];
      };


    return (
      <CometChatGroupMembers
        options={setMyOptions}
      />
    );
    ```
  </Tab>
</Tabs>

#### addOptions

This method extends the existing set of actions available when users long press a group item. Unlike setOptionsDefines, which replaces the default options, addOptionsAdds allows developers to append additional actions without removing the default ones. Example use cases include:

* Adding a "Report Spam" action
* Introducing a "Save to Notes" option
* Integrating third-party actions such as "Share to Cloud Storage"

This method provides flexibility in modifying user interaction capabilities.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatGroups } from "@cometchat/chat-uikit-react-native";
    //code

    const addOptions = (_member: any, _group: any) => {
        return [
          //options
        ];
      };


    return (
      <CometChatGroupMembers
        addOptions={addOptions}
      />
    );
    ```
  </Tab>
</Tabs>