> ## 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.

# Groups

> Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatGroups",
    "package": "@cometchat/chat-uikit-react-native",
    "import": "import { CometChatGroups } from \"@cometchat/chat-uikit-react-native\";",
    "description": "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator.",
    "primaryOutput": {
      "prop": "onItemPress",
      "type": "(group: CometChat.Group) => void"
    },
    "props": {
      "data": {
        "groupsRequestBuilder": {
          "type": "CometChat.GroupsRequestBuilder",
          "default": "SDK default (30 per page)",
          "note": "Pass the builder, not the result of .build()"
        },
        "searchRequestBuilder": {
          "type": "CometChat.GroupsRequestBuilder",
          "default": "undefined"
        },
        "searchKeyword": {
          "type": "string",
          "default": "\"\""
        }
      },
      "callbacks": {
        "onItemPress": "(group: CometChat.Group) => void",
        "onItemLongPress": "(group: CometChat.Group) => void",
        "onBack": "() => void",
        "onSelection": "(list: Array<CometChat.Group>) => void",
        "onSubmit": "(list: Array<CometChat.Group>) => void",
        "onError": "(error: CometChat.CometChatException) => 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 },
        "hideSubmitButton": { "type": "boolean", "default": true },
        "hideLoadingState": { "type": "boolean", "default": false },
        "groupTypeVisibility": { "type": "boolean", "default": true }
      },
      "icons": {
        "privateGroupIcon": { "type": "ImageSourcePropType", "default": "built-in" },
        "passwordGroupIcon": { "type": "ImageSourcePropType", "default": "built-in" }
      },
      "menu": {
        "options": "(group: CometChat.Group) => MenuItemInterface[]",
        "addOptions": "(group: CometChat.Group) => MenuItemInterface[]"
      },
      "search": {
        "searchPlaceholderText": { "type": "string", "default": "\"Search\"" }
      },
      "selection": {
        "selectionMode": {
          "type": "SelectionMode",
          "values": ["single", "multiple", "none"],
          "default": "none"
        }
      },
      "viewSlots": {
        "ItemView": "(group: CometChat.Group) => JSX.Element",
        "LeadingView": "(group: CometChat.Group) => JSX.Element",
        "TitleView": "(group: CometChat.Group) => JSX.Element",
        "SubtitleView": "(group: CometChat.Group) => JSX.Element",
        "TrailingView": "(group: CometChat.Group) => JSX.Element",
        "LoadingView": "() => JSX.Element",
        "EmptyView": "() => JSX.Element",
        "ErrorView": "() => JSX.Element",
        "AppBarOptions": "() => JSX.Element"
      }
    },
    "events": [
      { "name": "ccGroupCreated", "payload": "CometChat.Group", "description": "Triggered when logged-in user creates a group" },
      { "name": "ccGroupDeleted", "payload": "CometChat.Group", "description": "Triggered when logged-in user deletes a group" },
      { "name": "ccGroupLeft", "payload": "{ leftGroup: CometChat.Group }", "description": "Triggered when logged-in user leaves a group" },
      { "name": "ccGroupMemberScopeChanged", "payload": "IGroupMemberScopeChanged", "description": "Triggered when logged-in user changes scope of another member" },
      { "name": "ccGroupMemberBanned", "payload": "IGroupMemberKickedBanned", "description": "Triggered when logged-in user bans a group member" },
      { "name": "ccGroupMemberKicked", "payload": "IGroupMemberKickedBanned", "description": "Triggered when logged-in user kicks a group member" },
      { "name": "ccGroupMemberUnbanned", "payload": "IGroupMemberUnBanned", "description": "Triggered when logged-in user unbans a group member" },
      { "name": "ccGroupMemberJoined", "payload": "IGroupMemberJoined", "description": "Triggered when logged-in user joins a group" },
      { "name": "ccGroupMemberAdded", "payload": "IGroupMemberAdded", "description": "Triggered when logged-in user adds members to a group" },
      { "name": "ccOwnershipChanged", "payload": "IOwnershipChanged", "description": "Triggered when logged-in user transfers group ownership" }
    ],
    "sdkListeners": [
      "onGroupMemberJoined",
      "onGroupMemberLeft",
      "onMemberAddedToGroup",
      "onGroupMemberKicked",
      "onGroupMemberBanned",
      "onGroupMemberScopeChanged"
    ],
    "compositionExample": {
      "description": "Group directory wired to message view",
      "components": [
        "CometChatGroups",
        "CometChatMessageHeader",
        "CometChatMessageList",
        "CometChatMessageComposer"
      ],
      "flow": "onItemPress emits CometChat.Group -> pass to MessageHeader, MessageList, MessageComposer"
    },
    "types": {
      "SelectionMode": {
        "single": "Select one group at a time",
        "multiple": "Select multiple groups",
        "none": "No selection mode"
      }
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatGroups` is a directory list component. It renders all available groups and emits the selected `CometChat.Group` via `onItemPress`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group chat layout.

```tsx lines theme={null}
import { useState } from "react";
import { View, Text, StyleSheet } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import {
  CometChatGroups,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function ChatApp() {
  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group>();

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <CometChatThemeProvider>
          <View style={styles.container}>
            <View style={styles.sidebar}>
              <CometChatGroups onItemPress={(group) => setSelectedGroup(group)} />
            </View>
            {selectedGroup ? (
              <View style={styles.chatArea}>
                <CometChatMessageHeader group={selectedGroup} />
                <CometChatMessageList group={selectedGroup} />
                <CometChatMessageComposer group={selectedGroup} />
              </View>
            ) : (
              <View style={styles.placeholder}>
                <Text>Select a group</Text>
              </View>
            )}
          </View>
        </CometChatThemeProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, flexDirection: "row" },
  sidebar: { width: 350 },
  chatArea: { flex: 1 },
  placeholder: { flex: 1, justifyContent: "center", alignItems: "center" },
});
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ubfBSdV1t6rmjxeA/images/8f0fe074-groups-876f11ccd26289efd7bd12d29a1bc205.png?fit=max&auto=format&n=ubfBSdV1t6rmjxeA&q=85&s=1b10ff54c2c34f69c7c2d96345435466" width="1280" height="800" data-path="images/8f0fe074-groups-876f11ccd26289efd7bd12d29a1bc205.png" />
</Frame>

***

## Minimal Render

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

function GroupsDemo() {
  return <CometChatGroups />;
}

export default GroupsDemo;
```

***

## Filtering Groups

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

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

function FilteredGroups() {
  return (
    <CometChatGroups
      groupsRequestBuilder={
        new CometChat.GroupsRequestBuilder().joinedOnly(true).setLimit(10)
      }
    />
  );
}
```

### Filter Recipes

| Recipe               | Code                                                              |
| -------------------- | ----------------------------------------------------------------- |
| Joined groups only   | `new CometChat.GroupsRequestBuilder().joinedOnly(true)`           |
| Limit to 10 per page | `new CometChat.GroupsRequestBuilder().setLimit(10)`               |
| Search by keyword    | `new CometChat.GroupsRequestBuilder().setSearchKeyword("design")` |
| Filter by tags       | `new CometChat.GroupsRequestBuilder().setTags(["vip"])`           |
| With tags data       | `new CometChat.GroupsRequestBuilder().withTags(true)`             |

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

A separate `searchRequestBuilder` can be passed to filter the search list independently from the main list.

Refer to [GroupsRequestBuilder](/sdk/react-native/retrieve-groups) for the full builder API.

***

## Actions and Events

### Callback Props

#### onItemPress

Fires when a group row is tapped. Primary navigation hook — set the active group and render the message view.

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

function GroupsWithPress() {
  const handleItemPress = (group: CometChat.Group) => {
    console.log("Selected:", group.getName());
  };

  return <CometChatGroups onItemPress={handleItemPress} />;
}
```

#### onItemLongPress

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

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

function GroupsWithLongPress() {
  const handleLongPress = (group: CometChat.Group) => {
    console.log("Long pressed:", group.getName());
  };

  return <CometChatGroups onItemLongPress={handleLongPress} />;
}
```

#### onSelection

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

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

function GroupsWithSelection() {
  const handleSelection = (list: Array<CometChat.Group>) => {
    console.log("Selected:", list.length);
  };

  return (
    <CometChatGroups
      selectionMode="multiple"
      onSelection={handleSelection}
    />
  );
}
```

#### onEmpty

Fires when the group list fetch returns zero results.

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

function GroupsWithEmptyHandler() {
  return (
    <CometChatGroups onEmpty={() => console.log("No groups available")} />
  );
}
```

#### onError

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

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

function GroupsWithErrorHandler() {
  return (
    <CometChatGroups
      onError={(error: CometChat.CometChatException) => {
        console.error("CometChatGroups error:", error);
      }}
    />
  );
}
```

#### onLoad

Fires when groups are successfully fetched and loaded.

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

function GroupsWithLoadHandler() {
  const handleLoad = (list: CometChat.GroupMember[]) => {
    console.log("Groups loaded:", list.length);
  };

  return <CometChatGroups onLoad={handleLoad} />;
}
```

### Global UI Events

`CometChatUIEventHandler` emits events subscribable from anywhere in the application. Subscribe in a `useEffect` and unsubscribe on cleanup.

| Event                       | Fires when                                         | Payload                          |
| --------------------------- | -------------------------------------------------- | -------------------------------- |
| `ccGroupCreated`            | The logged-in user creates a group                 | `CometChat.Group`                |
| `ccGroupDeleted`            | The logged-in user deletes a group                 | `CometChat.Group`                |
| `ccGroupLeft`               | The logged-in user leaves a group                  | `{ leftGroup: CometChat.Group }` |
| `ccGroupMemberScopeChanged` | The logged-in user changes scope of another member | `IGroupMemberScopeChanged`       |
| `ccGroupMemberBanned`       | The logged-in user bans a group member             | `IGroupMemberKickedBanned`       |
| `ccGroupMemberKicked`       | The logged-in user kicks a group member            | `IGroupMemberKickedBanned`       |
| `ccGroupMemberUnbanned`     | The logged-in user unbans a group member           | `IGroupMemberUnBanned`           |
| `ccGroupMemberJoined`       | The logged-in user joins a group                   | `IGroupMemberJoined`             |
| `ccGroupMemberAdded`        | The logged-in user adds members to a group         | `IGroupMemberAdded`              |
| `ccOwnershipChanged`        | The logged-in user transfers group ownership       | `IOwnershipChanged`              |

```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 useGroupEvents() {
  useEffect(() => {
    const listenerId = "GROUP_EVENTS_" + Date.now();
    
    CometChatUIEventHandler.addGroupListener(listenerId, {
      ccGroupCreated: (group: CometChat.Group) => {
        console.log("Group created:", group.getName());
      },
      ccGroupDeleted: (group: CometChat.Group) => {
        console.log("Group deleted:", group.getName());
      },
      ccGroupLeft: ({ leftGroup }: { leftGroup: CometChat.Group }) => {
        console.log("Left group:", leftGroup.getName());
      },
    });

    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                            |
| --------------------------- | -------------------------------------------- |
| `onGroupMemberJoined`       | Updates member count when a user joins       |
| `onGroupMemberLeft`         | Updates member count when a user leaves      |
| `onMemberAddedToGroup`      | Updates member count when members are added  |
| `onGroupMemberKicked`       | Updates member count when a member is kicked |
| `onGroupMemberBanned`       | Updates member count when a member is banned |
| `onGroupMemberScopeChanged` | Updates scope when a member's scope changes  |

***

## Custom View Slots

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

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

### ItemView

Replace the entire list item row.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2JiXkJ8lq6PmPGlJ/images/6c5fc063-groups_list_item_view-2567373b1b5f9faf6c29be8d07a1a274.png?fit=max&auto=format&n=2JiXkJ8lq6PmPGlJ&q=85&s=2acf97adad6e7f67cb107058d1ef714e" width="1280" height="800" data-path="images/6c5fc063-groups_list_item_view-2567373b1b5f9faf6c29be8d07a1a274.png" />
</Frame>

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

function CustomItemViewGroups() {
  const theme = useTheme();

  const getItemView = (group: CometChat.Group) => {
    return (
      <View
        style={{
          flexDirection: "row",
          flex: 1,
          paddingHorizontal: 16,
          paddingVertical: 12,
          alignItems: "center",
          borderWidth: 1,
          borderColor: theme.color.borderLight,
        }}>
        <CometChatAvatar
          name={group.getName()}
          image={{ uri: group.getIcon() }}
          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">
            {group.getName()}
          </Text>
          <Text style={{ color: theme.color.textSecondary, fontSize: 12 }}>
            {group.getMembersCount()} members
          </Text>
        </View>
      </View>
    );
  };

  return <CometChatGroups ItemView={getItemView} />;
}
```

### SubtitleView

Replace the member count subtitle.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/JSRiWiPGBHsJZFCg/images/9d2dd1ec-groups_subtitle_view-4257df0157253a4dca4cb83299b966a7.png?fit=max&auto=format&n=JSRiWiPGBHsJZFCg&q=85&s=ec23ccfb7f88cdaa0ad5dc14f61fcb20" width="1280" height="800" data-path="images/9d2dd1ec-groups_subtitle_view-4257df0157253a4dca4cb83299b966a7.png" />
</Frame>

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

function SubtitleViewGroups() {
  const getSubtitleView = (group: CometChat.Group) => {
    return (
      <Text style={{ fontSize: 12, color: "#727272" }}>
        {group.getMembersCount()} members • {group.getType()}
      </Text>
    );
  };

  return <CometChatGroups SubtitleView={getSubtitleView} />;
}
```

### AppBarOptions

Custom view for the header bar options.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2JiXkJ8lq6PmPGlJ/images/6f8b7200-groups_menu-abd299ecf561c71932941257525ea004.png?fit=max&auto=format&n=2JiXkJ8lq6PmPGlJ&q=85&s=7c1dd5b7b9eaead2f1ef39e6594092f8" width="1280" height="800" data-path="images/6f8b7200-groups_menu-abd299ecf561c71932941257525ea004.png" />
</Frame>

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

function AppBarOptionsGroups() {
  return (
    <CometChatGroups
      AppBarOptions={() => (
        <TouchableOpacity onPress={() => console.log("Create group")}>
          <Text style={{ color: "#6852D6", fontWeight: "500" }}>+ Create</Text>
        </TouchableOpacity>
      )}
    />
  );
}
```

### options

Custom context menu actions for each group item.

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

function OptionsGroups() {
  const getOptions = (group: CometChat.Group) => [
    {
      text: "Leave",
      onPress: () => console.log("Leave:", group.getName()),
    },
    {
      text: "Mute",
      onPress: () => console.log("Mute:", group.getName()),
    },
  ];

  return <CometChatGroups options={getOptions} />;
}
```

***

## Common Patterns

### Custom empty state with CTA

```tsx lines theme={null}
import { CometChatGroups } from "@cometchat/chat-uikit-react-native";
import { View, Text, TouchableOpacity } from "react-native";

function EmptyStateGroups() {
  return (
    <CometChatGroups
      EmptyView={() => (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center", padding: 40 }}>
          <Text style={{ fontSize: 16, marginBottom: 16 }}>No groups found</Text>
          <TouchableOpacity
            style={{ backgroundColor: "#6852D6", paddingHorizontal: 20, paddingVertical: 10, borderRadius: 8 }}
            onPress={() => console.log("Create group")}>
            <Text style={{ color: "white" }}>Create a group</Text>
          </TouchableOpacity>
        </View>
      )}
    />
  );
}
```

### Joined groups only

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

function JoinedGroupsOnly() {
  return (
    <CometChatGroups
      groupsRequestBuilder={
        new CometChat.GroupsRequestBuilder().joinedOnly(true).setLimit(15)
      }
    />
  );
}
```

### Multi-select with submit

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

function MultiSelectGroups() {
  const handleSubmit = (groups: Array<CometChat.Group>) => {
    console.log("Selected groups:", groups.length);
  };

  return (
    <CometChatGroups
      selectionMode="multiple"
      hideSubmitButton={false}
      onSubmit={handleSubmit}
    />
  );
}
```

### Hide all chrome — minimal list

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

function MinimalGroups() {
  return (
    <CometChatGroups
      hideSearch={true}
      groupTypeVisibility={false}
      hideHeader={true}
    />
  );
}
```

***

## Styling

The component uses the theme system from `CometChatThemeProvider`. Pass a `style` prop to customize the appearance.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/XgQ9DxAoWn0btB5m/images/5b3c1825-groups_styling-f8164f3a9b1247ad1db859328c199051.png?fit=max&auto=format&n=XgQ9DxAoWn0btB5m&q=85&s=241addf3bc97d623dfcb400b1825841e" width="1280" height="800" data-path="images/5b3c1825-groups_styling-f8164f3a9b1247ad1db859328c199051.png" />
</Frame>

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

function StyledGroups() {
  return (
    <CometChatGroups
      style={{
        titleStyle: {
          color: "#FBAA75",
        },
        titleSeparatorStyle: {
          borderBottomColor: "#FBAA75",
        },
        itemStyle: {
          avatarStyle: {
            containerStyle: {
              borderRadius: 8,
              backgroundColor: "#FBAA75",
            },
            imageStyle: {
              borderRadius: 8,
            },
          },
        },
      }}
    />
  );
}
```

### Style Properties

| Property         | Type        | Description                                                                  |
| ---------------- | ----------- | ---------------------------------------------------------------------------- |
| `containerStyle` | `ViewStyle` | Style for the root container                                                 |
| `headerStyle`    | `ViewStyle` | Style for the header section                                                 |
| `titleStyle`     | `TextStyle` | Style for the header title                                                   |
| `itemStyle`      | `object`    | Style for list items (includes `avatarStyle`, `titleStyle`, `subtitleStyle`) |
| `searchStyle`    | `object`    | Style for the search bar                                                     |

***

## Props

All props are optional unless noted.

### EmptyView

Custom component displayed when there are no groups.

|         |                      |
| ------- | -------------------- |
| Type    | `() => JSX.Element`  |
| Default | Built-in empty state |

***

### ErrorView

Custom component displayed when an error occurs.

|         |                      |
| ------- | -------------------- |
| Type    | `() => JSX.Element`  |
| Default | Built-in error state |

***

### groupsRequestBuilder

Controls which groups load and in what order.

|         |                                  |
| ------- | -------------------------------- |
| Type    | `CometChat.GroupsRequestBuilder` |
| Default | SDK default (30 per page)        |

Pass the builder instance, not the result of `.build()`.

***

### groupTypeVisibility

Shows/hides the group type icon (public/private/password).

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `true`    |

***

### hideError

Hides the error state view.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideHeader

Hides the entire header bar.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideLoadingState

Hides the loading state while fetching groups.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideSearch

Hides the search bar.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideSubmitButton

Hides the submit button when selection mode is enabled.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `true`    |

***

### ItemView

Custom renderer for the entire list item row.

|         |                                           |
| ------- | ----------------------------------------- |
| Type    | `(group: CometChat.Group) => JSX.Element` |
| Default | Built-in list item                        |

***

### LeadingView

Custom renderer for the avatar / left section.

|         |                                           |
| ------- | ----------------------------------------- |
| Type    | `(group: CometChat.Group) => JSX.Element` |
| Default | Built-in avatar                           |

***

### LoadingView

Custom component displayed during the loading state.

|         |                            |
| ------- | -------------------------- |
| Type    | `() => JSX.Element`        |
| Default | Built-in loading indicator |

***

### onBack

Callback fired when the back button is pressed.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `undefined`  |

***

### onEmpty

Callback fired when the group list is empty.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `undefined`  |

***

### onError

Callback fired when the component encounters an error.

|         |                                                 |
| ------- | ----------------------------------------------- |
| Type    | `(error: CometChat.CometChatException) => void` |
| Default | `undefined`                                     |

***

### onItemLongPress

Callback fired when a group row is long-pressed.

|         |                                    |
| ------- | ---------------------------------- |
| Type    | `(group: CometChat.Group) => void` |
| Default | `undefined`                        |

***

### onItemPress

Callback fired when a group row is tapped.

|         |                                    |
| ------- | ---------------------------------- |
| Type    | `(group: CometChat.Group) => void` |
| Default | `undefined`                        |

***

### onLoad

Callback fired when groups are loaded.

|         |                                           |
| ------- | ----------------------------------------- |
| Type    | `(list: CometChat.GroupMember[]) => void` |
| Default | `undefined`                               |

***

### onSelection

Callback fired when groups are selected/deselected. Requires `selectionMode` to be set.

|         |                                          |
| ------- | ---------------------------------------- |
| Type    | `(list: Array<CometChat.Group>) => void` |
| Default | `undefined`                              |

***

### onSubmit

Callback fired when the submit button is pressed. Requires `selectionMode` to be set.

|         |                                          |
| ------- | ---------------------------------------- |
| Type    | `(list: Array<CometChat.Group>) => void` |
| Default | `undefined`                              |

***

### searchKeyword

Pre-fills the search and filters the group list.

|         |          |
| ------- | -------- |
| Type    | `string` |
| Default | `""`     |

***

### searchRequestBuilder

Request builder with search parameters to fetch groups.

|         |                                  |
| ------- | -------------------------------- |
| Type    | `CometChat.GroupsRequestBuilder` |
| Default | `undefined`                      |

***

### selectionMode

Enables single or multi-select mode on list items.

|         |                                    |
| ------- | ---------------------------------- |
| Type    | `"single" \| "multiple" \| "none"` |
| Default | `"none"`                           |

***

### showBackButton

Shows the back button in the header.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### searchPlaceholderText

Placeholder text for the search input.

|         |            |
| ------- | ---------- |
| Type    | `string`   |
| Default | `"Search"` |

***

### privateGroupIcon

Custom icon for private groups.

|         |                       |
| ------- | --------------------- |
| Type    | `ImageSourcePropType` |
| Default | Built-in icon         |

***

### passwordGroupIcon

Custom icon for password-protected groups.

|         |                       |
| ------- | --------------------- |
| Type    | `ImageSourcePropType` |
| Default | Built-in icon         |

***

### addOptions

Function to append additional menu items to the default context menu.

|         |                                                   |
| ------- | ------------------------------------------------- |
| Type    | `(group: CometChat.Group) => MenuItemInterface[]` |
| Default | `undefined`                                       |

***

### options

Function to replace the default context menu items entirely.

|         |                                                   |
| ------- | ------------------------------------------------- |
| Type    | `(group: CometChat.Group) => MenuItemInterface[]` |
| Default | `undefined`                                       |

***

### SubtitleView

Custom renderer for the member count subtitle.

|         |                                           |
| ------- | ----------------------------------------- |
| Type    | `(group: CometChat.Group) => JSX.Element` |
| Default | Built-in subtitle                         |

***

### TitleView

Custom renderer for the name / title text.

|         |                                           |
| ------- | ----------------------------------------- |
| Type    | `(group: CometChat.Group) => JSX.Element` |
| Default | Built-in title                            |

***

### TrailingView

Custom renderer for the right section.

|         |                                           |
| ------- | ----------------------------------------- |
| Type    | `(group: CometChat.Group) => JSX.Element` |
| Default | Built-in trailing view                    |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Group Members" icon="users" href="/ui-kit/react-native/group-members">
    View and manage members of a group
  </Card>

  <Card title="Conversations" icon="comments" href="/ui-kit/react-native/conversations">
    Display and manage the list of recent chats
  </Card>

  <Card title="Message List" icon="message" href="/ui-kit/react-native/message-list">
    Display the full chat interface after selecting a group
  </Card>

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