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

# Groups

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

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Component | `CometChatGroups` |
  | Package | `@cometchat/chat-uikit-react-native` |
  | Import | `import { CometChatGroups } from "@cometchat/chat-uikit-react-native";` |
  | Purpose | Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator. |
  | Data props | `groupsRequestBuilder` · `searchRequestBuilder` · `searchKeyword` |
  | Primary output | `onItemPress(group)` — opens the selected group chat |
  | 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 | `ccGroupCreated` · `ccGroupDeleted` · `ccGroupLeft` · `ccGroupMemberScopeChanged` · `ccGroupMemberBanned` · `ccGroupMemberKicked` · `ccGroupMemberUnbanned` · `ccGroupMemberJoined` · `ccGroupMemberAdded` · `ccOwnershipChanged` |
  | Styling | `style` prop — [tokens and overrides](#styling) |
  | Prerequisites | `CometChatUIKit.init()` completed and a user logged in |
  | Stitching | onItemPress emits CometChat.Group -> pass to MessageHeader, MessageList, MessageComposer (with `CometChatMessageHeader` · `CometChatMessageList` · `CometChatMessageComposer`) |
  | Full props | See [Props](#props) |
</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-llms-scoped-indexes/-nSFFcS2LLIkMyn9/images/8f0fe074-groups-876f11ccd26289efd7bd12d29a1bc205.png?fit=max&auto=format&n=-nSFFcS2LLIkMyn9&q=85&s=51a1295c8df2b35154ca78f7a10d0f71" 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-llms-scoped-indexes/tnRwSf4FQ-xb187R/images/6c5fc063-groups_list_item_view-2567373b1b5f9faf6c29be8d07a1a274.png?fit=max&auto=format&n=tnRwSf4FQ-xb187R&q=85&s=1c2ebef11e265dcb6abf45fa236dc39d" 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-llms-scoped-indexes/ClCiUg6GWgwjwm9f/images/9d2dd1ec-groups_subtitle_view-4257df0157253a4dca4cb83299b966a7.png?fit=max&auto=format&n=ClCiUg6GWgwjwm9f&q=85&s=1c4707d7477991a62a8939ce84c20353" 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-llms-scoped-indexes/tnRwSf4FQ-xb187R/images/6f8b7200-groups_menu-abd299ecf561c71932941257525ea004.png?fit=max&auto=format&n=tnRwSf4FQ-xb187R&q=85&s=8b45c64bc6b540dc800240895167ec1f" 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-llms-scoped-indexes/zeinwsYvDYBDwir-/images/5b3c1825-groups_styling-f8164f3a9b1247ad1db859328c199051.png?fit=max&auto=format&n=zeinwsYvDYBDwir-&q=85&s=81b9d6671f6bd50a4eb0017fb30bfc34" 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>


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