Group Members - CometChat Docs

AI Integration Quick Reference

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

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.

Minimal Render

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 enables you to filter and customize the group members list based on available parameters. The following are the parameters available in GroupMembersRequestBuilder:

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

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.

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 for the full builder API.

Actions and Events

Callback Props

onItemPress

Fires when a member row is tapped.

onItemPress?: (groupMember: CometChat.GroupMember) => void

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.

onItemLongPress?: (groupMember: CometChat.GroupMember) => void

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

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.

onSelection?: (list: CometChat.GroupMember[]) => void

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.

onSubmit?: (list: Array<CometChat.Conversation>) => void

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

onError?: () => void

import { CometChatGroupMembers } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

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

onLoad

Fires when the list is successfully fetched and loaded.

onLoad?: (list: CometChat.GroupMember[]) => void

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.

onEmpty?: () => void

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.

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

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.

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.

LoadingView?: () => JSX.Element

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.

EmptyView?: () => JSX.Element

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.

ErrorView?: () => JSX.Element

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.

LeadingView?: (groupMember: CometChat.GroupMember) => JSX.Element

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.

TitleView?: (groupMember: CometChat.GroupMember) => JSX.Element

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.

SubtitleView?: (groupMember: CometChat.GroupMember) => JSX.Element

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

TrailingView?: (groupMember: CometChat.GroupMember) => JSX.Element

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.

ItemView?: (groupMember: CometChat.GroupMember) => JSX.Element

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.

AppBarOptions?: () => JSX.Element

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.

options?: (groupMember: CometChat.GroupMember, group: CometChat.Group) => MenuItemInterface[]

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.

addOptions?: (groupMember: CometChat.GroupMember, group: CometChat.Group) => MenuItemInterface[]

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.

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

Groups

Display and manage group conversations

Add Members

Add new members to a group

Banned Members

View and manage banned group members

Component Styling

Customize the appearance of UI Kit components

​Where It Fits

​Minimal Render

​Filtering Group Members

​Filter Recipes

​SearchRequestBuilder

​Actions and Events

​Callback Props

​onItemPress

​onItemLongPress

​onBack

​onSelection

​onSubmit

​onError

​onLoad

​onEmpty

​Global UI Events

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​LoadingView

​EmptyView

​ErrorView

​LeadingView

​TitleView

​SubtitleView

​TrailingView

​ItemView

​AppBarOptions

​options

​addOptions

​Styling

​Visibility Props

​Selection Mode

​Next Steps

Groups

Add Members

Banned Members

Component Styling

Where It Fits

Minimal Render

Filtering Group Members

Filter Recipes

SearchRequestBuilder

Actions and Events

Callback Props

onItemPress

onItemLongPress

onBack

onSelection

onSubmit

onError

onLoad

onEmpty

Global UI Events

SDK Events (Real-Time, Automatic)

Custom View Slots

LoadingView

EmptyView

ErrorView

LeadingView

TitleView

SubtitleView

TrailingView

ItemView

AppBarOptions

options

addOptions

Styling

Visibility Props

Selection Mode

Next Steps