> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Group Members

> Display and manage group members with CometChatGroupMembers component in React Native UI Kit, including member roles, permissions, and moderation actions.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatGroupMembers",
    "package": "@cometchat/chat-uikit-react-native",
    "import": "import { CometChatGroupMembers } from \"@cometchat/chat-uikit-react-native\";",
    "description": "Scrollable, searchable list of members in a specific group with roles, scopes, online status, and member management actions.",
    "primaryOutput": {
      "prop": "onItemPress",
      "type": "(groupMember: CometChat.GroupMember) => void"
    },
    "props": {
      "data": {
        "group": {
          "type": "CometChat.Group",
          "required": true,
          "note": "The group whose members are displayed"
        },
        "groupMemberRequestBuilder": {
          "type": "CometChat.GroupMembersRequestBuilder",
          "default": "SDK default (30 per page)",
          "note": "Pass the builder, not the result of .build()"
        },
        "searchRequestBuilder": {
          "type": "CometChat.GroupMembersRequestBuilder",
          "default": "undefined"
        },
        "searchKeyword": {
          "type": "string",
          "default": "\"\""
        }
      },
      "callbacks": {
        "onItemPress": "(groupMember: CometChat.GroupMember) => void",
        "onItemLongPress": "(groupMember: CometChat.GroupMember) => void",
        "onBack": "() => void",
        "onSelection": "(list: CometChat.GroupMember[]) => void",
        "onSubmit": "(list: Array<CometChat.Conversation>) => void",
        "onError": "() => void",
        "onEmpty": "() => void",
        "onLoad": "(list: CometChat.GroupMember[]) => void"
      },
      "visibility": {
        "hideHeader": { "type": "boolean", "default": false },
        "showBackButton": { "type": "boolean", "default": false },
        "hideSearch": { "type": "boolean", "default": false },
        "hideError": { "type": "boolean", "default": false },
        "hideLoadingState": { "type": "boolean", "default": false },
        "usersStatusVisibility": { "type": "boolean", "default": true },
        "hideKickMemberOption": { "type": "boolean", "default": false },
        "hideBanMemberOption": { "type": "boolean", "default": false },
        "hideScopeChangeOption": { "type": "boolean", "default": false },
        "excludeOwner": { "type": "boolean", "default": false },
        "hideSubmitButton": { "type": "boolean", "default": false }
      },
      "selection": {
        "selectionMode": {
          "type": "SelectionMode",
          "values": ["single", "multiple", "none"],
          "default": "none"
        }
      },
      "viewSlots": {
        "ItemView": "(groupMember: CometChat.GroupMember) => JSX.Element",
        "LeadingView": "(groupMember: CometChat.GroupMember) => JSX.Element",
        "TitleView": "(groupMember: CometChat.GroupMember) => JSX.Element",
        "SubtitleView": "(groupMember: CometChat.GroupMember) => JSX.Element",
        "TrailingView": "(groupMember: CometChat.GroupMember) => JSX.Element",
        "LoadingView": "() => JSX.Element",
        "EmptyView": "() => JSX.Element",
        "ErrorView": "() => JSX.Element",
        "AppBarOptions": "() => JSX.Element"
      }
    },
    "events": [
      {
        "name": "ccGroupMemberKicked",
        "payload": "IGroupMemberKickedBanned",
        "description": "Triggered when a group member is kicked"
      },
      {
        "name": "ccGroupMemberBanned",
        "payload": "IGroupMemberKickedBanned",
        "description": "Triggered when a group member is banned"
      },
      {
        "name": "ccGroupMemberScopeChanged",
        "payload": "IGroupMemberScopeChanged",
        "description": "Triggered when a group member's scope is changed"
      }
    ],
    "sdkListeners": [
      "onGroupMemberScopeChanged",
      "onGroupMemberKicked",
      "onGroupMemberBanned",
      "onMemberAddedToGroup",
      "onGroupMemberLeft",
      "onGroupMemberJoined"
    ],
    "compositionExample": {
      "description": "Group members panel wired to group chat view",
      "components": [
        "CometChatGroupMembers",
        "CometChatMessageHeader",
        "CometChatMessageList",
        "CometChatMessageComposer"
      ],
      "flow": "Fetch group -> pass to GroupMembers, MessageHeader, MessageList, MessageComposer"
    },
    "types": {
      "SelectionMode": {
        "single": "Select one member at a time",
        "multiple": "Select multiple members",
        "none": "No selection mode"
      }
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatGroupMembers` is a panel component that renders the member list for a specific group. It requires a `group` prop and provides built-in member management actions (kick, ban, scope change) based on the logged-in user's role. Typically rendered alongside the message view in a group chat layout.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/FGBCGWXGo5d9bVxR/images/c316bb0a-group_members-9849dc973b6addaffc0990af38520294.png?fit=max&auto=format&n=FGBCGWXGo5d9bVxR&q=85&s=2d5a862c1883d2ee4110d8dd5e12a2a2" width="1280" height="800" data-path="images/c316bb0a-group_members-9849dc973b6addaffc0990af38520294.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";

function GroupMembersDemo() {
  const [group, setGroup] = useState<CometChat.Group | undefined>(undefined);

  useEffect(() => {
    CometChat.getGroup("GROUP_GUID").then(setGroup);
  }, []);

  return group ? <CometChatGroupMembers group={group} /> : null;
}

export default GroupMembersDemo;
```

***

## Filtering Group Members

Pass a `CometChat.GroupMembersRequestBuilder` to `groupMemberRequestBuilder`. Pass the builder instance — not the result of `.build()`.

The [GroupMembersRequestBuilder](/sdk/react-native/retrieve-group-members) enables you to filter and customize the group members list based on available parameters. 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                                          |

```tsx lines theme={null}
import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";

function FilteredGroupMembers() {
  const [group, setGroup] = useState<CometChat.Group | undefined>(undefined);

  useEffect(() => {
    CometChat.getGroup("GROUP_GUID").then(setGroup);
  }, []);

  if (!group) return null;

  return (
    <CometChatGroupMembers
      group={group}
      groupMemberRequestBuilder={
        new CometChat.GroupMembersRequestBuilder(group.getGuid())
          .setScopes(["admin", "moderator"])
          .setLimit(10)
      }
    />
  );
}
```

### Filter Recipes

| Recipe                     | Code                                                                                 |
| -------------------------- | ------------------------------------------------------------------------------------ |
| Limit to 10 per page       | `new CometChat.GroupMembersRequestBuilder("GUID").setLimit(10)`                      |
| Search by keyword          | `new CometChat.GroupMembersRequestBuilder("GUID").setSearchKeyword("john")`          |
| Admins and moderators only | `new CometChat.GroupMembersRequestBuilder("GUID").setScopes(["admin", "moderator"])` |

Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.

### SearchRequestBuilder

The `searchRequestBuilder` prop accepts a separate `GroupMembersRequestBuilder` for filtering when the search bar is active. This allows you to keep uniformity between the displayed Group Members List and searched Group Members List.

```tsx lines theme={null}
import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";

function SearchGroupMembers() {
  const [group, setGroup] = useState<CometChat.Group | undefined>(undefined);

  useEffect(() => {
    CometChat.getGroup("GROUP_GUID").then(setGroup);
  }, []);

  if (!group) return null;

  const searchRequestBuilder = new CometChat.GroupMembersRequestBuilder(
    group.getGuid()
  )
    .setScopes(["admin"])
    .setSearchKeyword("custom-keyword");

  return (
    <CometChatGroupMembers
      group={group}
      searchRequestBuilder={searchRequestBuilder}
    />
  );
}
```

Refer to [GroupMembersRequestBuilder](/sdk/react-native/retrieve-group-members) for the full builder API.

***

## Actions and Events

### Callback Props

#### onItemPress

Fires when a member row is tapped.

```tsx lines theme={null}
onItemPress?: (groupMember: CometChat.GroupMember) => void
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function GroupMembersWithPress({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      onItemPress={(member: CometChat.GroupMember) => {
        console.log("Selected member:", member.getName());
      }}
    />
  );
}
```

#### onItemLongPress

Fires when a member item is long-pressed, allowing additional actions like delete or block.

```tsx lines theme={null}
onItemLongPress?: (groupMember: CometChat.GroupMember) => void
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function GroupMembersWithLongPress({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      onItemLongPress={(member: CometChat.GroupMember) => {
        console.log("Long pressed:", member.getName());
      }}
    />
  );
}
```

#### onBack

Fires when the back button in the app bar is pressed. Requires `showBackButton={true}`.

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";

function GroupMembersWithBack({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      showBackButton={true}
      onBack={() => {
        console.log("Back pressed");
      }}
    />
  );
}
```

#### onSelection

Fires when members are selected/deselected in selection mode. Requires `selectionMode` to be set.

```tsx lines theme={null}
onSelection?: (list: CometChat.GroupMember[]) => void
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function GroupMembersWithSelection({ group }: { group: CometChat.Group }) {
  const handleSelection = (list: CometChat.GroupMember[]) => {
    console.log("Selected:", list.length);
  };

  return (
    <CometChatGroupMembers
      group={group}
      selectionMode={"single"}
      onSelection={handleSelection}
    />
  );
}
```

#### onSubmit

Fires when the submit selection button is pressed. Requires `selectionMode` to be set.

```tsx lines theme={null}
onSubmit?: (list: Array<CometChat.Conversation>) => void
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function GroupMembersWithSubmit({ group }: { group: CometChat.Group }) {
  const handleSubmit = (list: Array<CometChat.Conversation>) => {
    console.log("Submit", list);
  };

  return <CometChatGroupMembers group={group} onSubmit={handleSubmit} />;
}
```

#### onError

Fires on internal errors (network failure, auth issue, SDK exception).

```tsx lines theme={null}
onError?: () => void
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function GroupMembersWithError({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      onError={() => {
        console.error("CometChatGroupMembers error occurred");
      }}
    />
  );
}
```

#### onLoad

Fires when the list is successfully fetched and loaded.

```tsx lines theme={null}
onLoad?: (list: CometChat.GroupMember[]) => void
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function GroupMembersWithLoad({ group }: { group: CometChat.Group }) {
  const handleLoad = (list: CometChat.GroupMember[]) => {
    console.log("Loaded members:", list.length);
  };

  return <CometChatGroupMembers group={group} onLoad={handleLoad} />;
}
```

#### onEmpty

Fires when the member list is empty.

```tsx lines theme={null}
onEmpty?: () => void
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";

function GroupMembersWithEmpty({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      onEmpty={() => {
        console.log("No group members found");
      }}
    />
  );
}
```

### Global UI Events

`CometChatUIEventHandler` emits events subscribable from anywhere in the application. Add listeners and remove them on cleanup.

| Event                       | Fires when                        | Payload                    |
| --------------------------- | --------------------------------- | -------------------------- |
| `ccGroupMemberKicked`       | A member is kicked from the group | `IGroupMemberKickedBanned` |
| `ccGroupMemberBanned`       | A member is banned from the group | `IGroupMemberKickedBanned` |
| `ccGroupMemberScopeChanged` | A member's scope is changed       | `IGroupMemberScopeChanged` |

When to use: sync external UI with group member state changes. For example, update a member list when a member is kicked, or refresh the UI when a member's scope changes.

```tsx lines theme={null}
import { useEffect } from "react";
import { CometChatUIEventHandler } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function useGroupMemberEvents() {
  useEffect(() => {
    const listenerId = "GROUP_MEMBER_EVENTS_" + Date.now();

    CometChatUIEventHandler.addGroupListener(listenerId, {
      ccGroupMemberKicked: ({
        message,
        kickedFrom,
      }: {
        message: CometChat.BaseMessage;
        kickedFrom: CometChat.Group;
      }) => {
        console.log("Member kicked from:", kickedFrom.getName());
      },
      ccGroupMemberBanned: ({
        message,
        kickedUser,
        kickedBy,
        kickedFrom,
      }: {
        message: CometChat.BaseMessage;
        kickedUser: CometChat.User;
        kickedBy: CometChat.User;
        kickedFrom: CometChat.Group;
      }) => {
        console.log("Member banned:", kickedUser.getName());
      },
      ccGroupMemberScopeChanged: ({
        action,
        updatedUser,
        scopeChangedTo,
        scopeChangedFrom,
        group,
      }) => {
        console.log("Scope changed:", updatedUser.getName(), "to", scopeChangedTo);
      },
    });

    return () => {
      CometChatUIEventHandler.removeGroupListener(listenerId);
    };
  }, []);
}
```

### SDK Events (Real-Time, Automatic)

The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.

| SDK Listener                | Internal behavior                         |
| --------------------------- | ----------------------------------------- |
| `onGroupMemberScopeChanged` | Updates the member's scope in the list    |
| `onGroupMemberKicked`       | Removes the kicked member from the list   |
| `onGroupMemberBanned`       | Removes the banned member from the list   |
| `onMemberAddedToGroup`      | Appends the new member to the list        |
| `onGroupMemberLeft`         | Removes the member who left from the list |
| `onGroupMemberJoined`       | Appends the joined member to the list     |

<Note>
  In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the `useEffect` return function to avoid duplicate event handling.
</Note>

***

## Custom View Slots

Each slot replaces a section of the default UI. Slots that accept a member parameter receive the `CometChat.GroupMember` object for that row.

| Slot            | Signature                                             | Replaces                              |
| --------------- | ----------------------------------------------------- | ------------------------------------- |
| `ItemView`      | `(groupMember: CometChat.GroupMember) => JSX.Element` | Entire list item row                  |
| `LeadingView`   | `(groupMember: CometChat.GroupMember) => JSX.Element` | Avatar / left section                 |
| `TitleView`     | `(groupMember: CometChat.GroupMember) => JSX.Element` | Name / title text                     |
| `SubtitleView`  | `(groupMember: CometChat.GroupMember) => JSX.Element` | Subtitle text                         |
| `TrailingView`  | `(groupMember: CometChat.GroupMember) => JSX.Element` | Right section (scope badge / actions) |
| `LoadingView`   | `() => JSX.Element`                                   | Loading spinner                       |
| `EmptyView`     | `() => JSX.Element`                                   | Empty state                           |
| `ErrorView`     | `() => JSX.Element`                                   | Error state                           |
| `AppBarOptions` | `() => JSX.Element`                                   | Header bar options                    |

### LoadingView

Custom view displayed when data is being fetched.

```tsx lines theme={null}
LoadingView?: () => JSX.Element
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";

const getLoadingView = (): JSX.Element => {
  return <Text>Loading group members...</Text>;
};

return <CometChatGroupMembers group={group} LoadingView={getLoadingView} />;
```

### EmptyView

Custom view displayed when there are no group members.

```tsx lines theme={null}
EmptyView?: () => JSX.Element
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";

const getEmptyView = (): JSX.Element => {
  return <Text>No members in this group yet.</Text>;
};

return <CometChatGroupMembers group={group} EmptyView={getEmptyView} />;
```

### ErrorView

Custom view displayed when an error occurs.

```tsx lines theme={null}
ErrorView?: () => JSX.Element
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";

const getErrorView = (): JSX.Element => {
  return <Text>Failed to load members. Please try again.</Text>;
};

return <CometChatGroupMembers group={group} ErrorView={getErrorView} />;
```

### LeadingView

Custom view for the avatar / left section of each member item.

```tsx lines theme={null}
LeadingView?: (groupMember: CometChat.GroupMember) => JSX.Element
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

const getLeadingView = (groupMember: CometChat.GroupMember): JSX.Element => {
  return (
    <View style={{ width: 40, height: 40, borderRadius: 20, backgroundColor: '#6852D6' }}>
      <Text style={{ color: 'white', textAlign: 'center', lineHeight: 40 }}>
        {groupMember.getName().charAt(0)}
      </Text>
    </View>
  );
};

return <CometChatGroupMembers group={group} LeadingView={getLeadingView} />;
```

### TitleView

Custom view for the name / title text.

```tsx lines theme={null}
TitleView?: (groupMember: CometChat.GroupMember) => JSX.Element
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

const getTitleView = (groupMember: CometChat.GroupMember): JSX.Element => {
  return (
    <Text style={{ fontWeight: 'bold', fontSize: 16 }}>
      {groupMember.getName()}
    </Text>
  );
};

return <CometChatGroupMembers group={group} TitleView={getTitleView} />;
```

### SubtitleView

Custom view for the subtitle text.

```tsx lines theme={null}
SubtitleView?: (groupMember: CometChat.GroupMember) => JSX.Element
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/TO10Bmu50bb5qPTI/images/2b73a513-group_members_subtitle_view-b0b1463389d35067432eaf60d8418ffe.png?fit=max&auto=format&n=TO10Bmu50bb5qPTI&q=85&s=d446a5580c6ba96b8a17b175638191bb" width="1280" height="800" data-path="images/2b73a513-group_members_subtitle_view-b0b1463389d35067432eaf60d8418ffe.png" />
</Frame>

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

const getSubtitleView = (groupMember: CometChat.GroupMember): JSX.Element => {
  return (
    <Text style={{ fontSize: 12, color: '#727272' }}>
      {groupMember.getScope()}
    </Text>
  );
};

return <CometChatGroupMembers group={group} SubtitleView={getSubtitleView} />;
```

### TrailingView

Custom view for the right section (scope badge / actions).

```tsx lines theme={null}
TrailingView?: (groupMember: CometChat.GroupMember) => JSX.Element
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mNTojjz_O28of40c/images/fb7e32ac-group_members_tail_view-19ea33e3931012467d4df750210007fe.png?fit=max&auto=format&n=mNTojjz_O28of40c&q=85&s=6b641f77c2560e2a8619ed2725d3879c" width="1280" height="800" data-path="images/fb7e32ac-group_members_tail_view-19ea33e3931012467d4df750210007fe.png" />
</Frame>

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

const getTrailingView = (groupMember: CometChat.GroupMember): JSX.Element => {
  return (
    <TouchableOpacity onPress={() => { /* action */ }}>
      <Text style={{ color: '#6852D6' }}>{groupMember.getScope()}</Text>
    </TouchableOpacity>
  );
};

return <CometChatGroupMembers group={group} TrailingView={getTrailingView} />;
```

### ItemView

Custom view for the entire list item row.

```tsx lines theme={null}
ItemView?: (groupMember: CometChat.GroupMember) => JSX.Element
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/506c713b-group_members_list_item_view-7db7e3429ec8898cb29e584a459ec43f.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=eec71550d02fe9c9704dacd1df12e00e" width="1280" height="800" data-path="images/506c713b-group_members_list_item_view-7db7e3429ec8898cb29e584a459ec43f.png" />
</Frame>

```tsx lines theme={null}
import {
  CometChatGroupMembers,
  CometChatAvatar,
  useTheme,
} from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

const theme = useTheme();

const getItemView = (groupMember: CometChat.GroupMember): JSX.Element => {
  return (
    <View
      style={{
        flexDirection: 'row',
        flex: 1,
        paddingHorizontal: 16,
        paddingVertical: 12,
        alignItems: 'center',
        borderWidth: 1,
        borderColor: theme.color.borderLight,
      }}>
      <CometChatAvatar
        name={groupMember.getName()}
        image={{ uri: groupMember.getAvatar() }}
        style={{
          containerStyle: { borderRadius: 8 },
          imageStyle: { borderRadius: 8 },
        }}
      />
      <View style={{ flex: 1, marginLeft: 12 }}>
        <Text
          style={{
            color: theme.color.textPrimary,
            fontSize: 16,
            fontWeight: '500',
          }}
          numberOfLines={1}
          ellipsizeMode="tail">
          {groupMember.getName()}
        </Text>
        <Text style={{ color: theme.color.textSecondary, fontSize: 12 }}>
          {groupMember.getScope()}
        </Text>
      </View>
    </View>
  );
};

return <CometChatGroupMembers group={group} ItemView={getItemView} />;
```

### AppBarOptions

Custom view for the header bar options.

```tsx lines theme={null}
AppBarOptions?: () => JSX.Element
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";

return (
  <CometChatGroupMembers
    group={group}
    AppBarOptions={() => {
      return (
        <TouchableOpacity onPress={() => { /* handle click */ }}>
          <Text>Custom App Bar Options</Text>
        </TouchableOpacity>
      );
    }}
  />
);
```

### options

Custom context menu actions for each member item.

```tsx lines theme={null}
options?: (groupMember: CometChat.GroupMember, group: CometChat.Group) => MenuItemInterface[]
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

const setMyOptions = (member: CometChat.GroupMember, group: CometChat.Group) => {
  return [
    {
      text: "View Profile",
      onPress: () => { /* view profile logic */ },
    },
    {
      text: "Remove",
      onPress: () => { /* remove logic */ },
    },
  ];
};

return <CometChatGroupMembers group={group} options={setMyOptions} />;
```

### addOptions

Extends the default context menu actions with additional options.

```tsx lines theme={null}
addOptions?: (groupMember: CometChat.GroupMember, group: CometChat.Group) => MenuItemInterface[]
```

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

const addOptions = (member: CometChat.GroupMember, group: CometChat.Group) => {
  return [
    {
      text: "Report Member",
      onPress: () => { /* report logic */ },
    },
  ];
};

return <CometChatGroupMembers group={group} addOptions={addOptions} />;
```

***

## Styling

Using Style you can customize the look and feel of the component in your app. Pass a styling object as a prop to the `CometChatGroupMembers` component.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7emVxEQ5MCxvzC60/images/1bd5a982-group_members_styling-ee7427e23be4ccf40776d8b1df1342f4.png?fit=max&auto=format&n=7emVxEQ5MCxvzC60&q=85&s=49a4d4a702b6c223714ab18696132cb8" width="1280" height="800" data-path="images/1bd5a982-group_members_styling-ee7427e23be4ccf40776d8b1df1342f4.png" />
</Frame>

```tsx lines theme={null}
import {
  CometChatGroupMembers,
  useTheme,
} from "@cometchat/chat-uikit-react-native";

const theme = useTheme();

return (
  <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",
        },
      },
    }}
  />
);
```

### Visibility Props

| Property                | Description                                           | Code                              |
| ----------------------- | ----------------------------------------------------- | --------------------------------- |
| `hideHeader`            | Toggle visibility for the toolbar/header              | `hideHeader?: boolean`            |
| `showBackButton`        | Toggle visibility for back button                     | `showBackButton?: boolean`        |
| `hideSearch`            | Toggle visibility for search box                      | `hideSearch?: boolean`            |
| `hideError`             | Hide error on fetching group members                  | `hideError?: boolean`             |
| `hideLoadingState`      | Toggle visibility for Loading state                   | `hideLoadingState?: boolean`      |
| `usersStatusVisibility` | Toggle visibility for user status indicators          | `usersStatusVisibility?: boolean` |
| `hideKickMemberOption`  | Hide the "Remove" (Kick) option from the default menu | `hideKickMemberOption?: boolean`  |
| `hideBanMemberOption`   | Hide the "Ban" option from the default menu           | `hideBanMemberOption?: boolean`   |
| `hideScopeChangeOption` | Hide the "Change Scope" option from the default menu  | `hideScopeChangeOption?: boolean` |
| `excludeOwner`          | Exclude the group owner from the members list         | `excludeOwner?: boolean`          |

### Selection Mode

| Property                | Description                                     | Code                             |
| ----------------------- | ----------------------------------------------- | -------------------------------- |
| `selectionMode`         | Determines the selection mode for group members | `selectionMode?: SelectionMode`  |
| `searchKeyword`         | Keyword used to fetch initial member list       | `searchKeyword?: string`         |
| `searchPlaceholderText` | Placeholder text for search input               | `searchPlaceholderText?: string` |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Groups" icon="user-group" href="/ui-kit/react-native/groups">
    Display and manage group conversations
  </Card>

  <Card title="Add Members" icon="user-plus" href="/ui-kit/react-native/group-members">
    Add new members to a group
  </Card>

  <Card title="Banned Members" icon="ban" href="/ui-kit/react-native/group-members">
    View and manage banned group members
  </Card>

  <Card title="Component Styling" icon="paintbrush" href="/ui-kit/react-native/component-styling">
    Customize the appearance of UI Kit components
  </Card>
</CardGroup>