> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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">
  | Field | Value |
  | - | - |
  | Component | `CometChatGroupMembers` |
  | Package | `@cometchat/chat-uikit-react-native` |
  | Import | `import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";` |
  | Purpose | Scrollable, searchable list of members in a specific group with roles, scopes, online status, and member management actions. |
  | Data props | `group` · `groupMemberRequestBuilder` · `searchRequestBuilder` · `searchKeyword` |
  | Primary output | `onItemPress(member)` — opens the member's profile/actions |
  | Other actions | `onItemLongPress` · `onBack` · `onSelection` · `onSubmit` · `onError` · `onEmpty` · `onLoad` — [details](#actions-and-events) |
  | View slots | `ItemView` · `LeadingView` · `TitleView` · `SubtitleView` · `TrailingView` · `LoadingView` · +3 more — [details](#custom-view-slots) |
  | UI events | `ccGroupMemberKicked` · `ccGroupMemberBanned` · `ccGroupMemberScopeChanged` |
  | Styling | `style` prop — [tokens and overrides](#styling) |
  | Prerequisites | `CometChatUIKit.init()` completed and a user logged in |
  | Stitching | Fetch group -> pass to GroupMembers, MessageHeader, MessageList, MessageComposer (with `CometChatMessageHeader` · `CometChatMessageList` · `CometChatMessageComposer`) |
</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-llms-scoped-indexes/egNZF-iXldTS9vDi/images/c316bb0a-group_members-9849dc973b6addaffc0990af38520294.png?fit=max&auto=format&n=egNZF-iXldTS9vDi&q=85&s=f9e485fa4a1c55ad22b9bf949ad89b17" 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?: (error: CometChat.CometChatException) => 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={(error: CometChat.CometChatException) => {
        console.error("GroupMembers error:", error);
      }}
    />
  );
}
```

#### 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-llms-scoped-indexes/2jSVlYXfUL_4P-jB/images/2b73a513-group_members_subtitle_view-b0b1463389d35067432eaf60d8418ffe.png?fit=max&auto=format&n=2jSVlYXfUL_4P-jB&q=85&s=0e0ddd01449582c65ec9c348ab748e6c" 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-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/fb7e32ac-group_members_tail_view-19ea33e3931012467d4df750210007fe.png?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=6790cb0de7533694f92f30a25f08a8fd" 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-llms-scoped-indexes/4bjA68wl0wrynpsh/images/506c713b-group_members_list_item_view-7db7e3429ec8898cb29e584a459ec43f.png?fit=max&auto=format&n=4bjA68wl0wrynpsh&q=85&s=9601ffbbfb7d628233749ac094aff1f8" 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-llms-scoped-indexes/K_p4Iy5Yo4hNoo1I/images/1bd5a982-group_members_styling-ee7427e23be4ccf40776d8b1df1342f4.png?fit=max&auto=format&n=K_p4Iy5Yo4hNoo1I&q=85&s=40bbab891d3aa4d4b6026d9cb4b185f8" 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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.