Groups - CometChat Docs

AI Integration Quick Reference

{
  "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"
    }
  }
}

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.

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" },
});

Minimal Render

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().

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

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.

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.

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.

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

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.

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`

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.

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.

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.

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.

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

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

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

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

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.

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

Group Members

View and manage members of a group

Conversations

Display and manage the list of recent chats

Message List

Display the full chat interface after selecting a group

Component Styling

Customize the appearance of UI Kit components

​Where It Fits

​Minimal Render

​Filtering Groups

​Filter Recipes

​Actions and Events

​Callback Props

​onItemPress

​onItemLongPress

​onSelection

​onEmpty

​onError

​onLoad

​Global UI Events

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​ItemView

​SubtitleView

​AppBarOptions

​options

​Common Patterns

​Custom empty state with CTA

​Joined groups only

​Multi-select with submit

​Hide all chrome — minimal list

​Styling

​Style Properties

​Props

​EmptyView

​ErrorView

​groupsRequestBuilder

​groupTypeVisibility

​hideError

​hideHeader

​hideLoadingState

​hideSearch

​hideSubmitButton

​ItemView

​LeadingView

​LoadingView

​onBack

​onEmpty

​onError

​onItemLongPress

​onItemPress

​onLoad

​onSelection

​onSubmit

​searchKeyword

​searchRequestBuilder

​selectionMode

​showBackButton

​searchPlaceholderText

​privateGroupIcon

​passwordGroupIcon

​addOptions

​options

​SubtitleView

​TitleView

​TrailingView

​Next Steps

Group Members

Conversations

Message List

Component Styling

Where It Fits

Minimal Render

Filtering Groups

Filter Recipes

Actions and Events

Callback Props

onItemPress

onItemLongPress

onSelection

onEmpty

onError

onLoad

Global UI Events

SDK Events (Real-Time, Automatic)

Custom View Slots

ItemView

SubtitleView

AppBarOptions

options

Common Patterns

Custom empty state with CTA

Joined groups only

Multi-select with submit

Hide all chrome — minimal list

Styling

Style Properties

Props

EmptyView

ErrorView

groupsRequestBuilder

groupTypeVisibility

hideError

hideHeader

hideLoadingState

hideSearch

hideSubmitButton

ItemView

LeadingView

LoadingView

onBack

onEmpty

onError

onItemLongPress

onItemPress

onLoad

onSelection

onSubmit

searchKeyword

searchRequestBuilder

selectionMode

showBackButton

searchPlaceholderText

privateGroupIcon

passwordGroupIcon

addOptions

options

SubtitleView

TitleView

TrailingView

Next Steps