Group Chat - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react-native`
Key components	`CometChatGroups`, `CometChatGroupMembers`, `CometChatUsers`, `CometChatConfirmDialog`, `CometChatGroupsEvents`
Init	`CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
Features	Create public/private/password-protected groups, manage members, roles, ownership transfer
Sample app	GitHub
Related	Groups · Group Members · All Guides

This guide covers the full group lifecycle: creating groups, joining them, managing members, changing roles, and transferring ownership. Before starting, complete the Getting Started guide.

Components

Component / Class	Role
`CometChatGroups`	Displays list of groups with join/create options
`CometChatGroupMembers`	Displays and manages group member lists
`CometChatUsers`	User selection for adding members
`CometChatConfirmDialog`	Confirmation dialogs for destructive actions
`CometChatGroupsEvents`	Events for group-related actions

Integration Steps

1. Display Groups List

Render CometChatGroups with custom app bar options for creating new groups. Handle item press to either open chat (if joined) or trigger join flow.

import React, { useState } from 'react';
import { View, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import {
  CometChatGroups,
  CometChatUIEventHandler,
  CometChatUIEvents,
  CometChatUIKit,
} from '@cometchat/chat-uikit-react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';

const GroupsScreen = () => {
  const navigation = useNavigation();
  const [isCreateGroupVisible, setCreateGroupVisible] = useState(false);

  const handleGroupItemPress = (group: CometChat.Group) => {
    if (group.getHasJoined()) {
      // Navigate to messages
      navigation.navigate('Messages', { group });
      return;
    }

    if (group.getType() === CometChat.GROUP_TYPE.PUBLIC) {
      joinPublicGroup(group);
    } else if (group.getType() === CometChat.GROUP_TYPE.PASSWORD) {
      // Show password input modal
      setGroupToJoin(group);
      setJoinGroupVisible(true);
    }
  };

  const joinPublicGroup = async (group: CometChat.Group) => {
    try {
      const joinedGroup = await CometChat.joinGroup(
        group.getGuid(),
        group.getType() as CometChat.GroupType,
        ''
      );
      
      navigation.navigate('Messages', { group: joinedGroup });
      
      CometChatUIEventHandler.emitGroupEvent(
        CometChatUIEvents.ccGroupMemberJoined,
        {
          joinedUser: CometChatUIKit.loggedInUser,
          joinedGroup: joinedGroup,
        }
      );
    } catch (error) {
      console.log('Error joining public group:', error);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <CometChatGroups
        onItemPress={handleGroupItemPress}
        AppBarOptions={() => (
          <TouchableOpacity onPress={() => setCreateGroupVisible(true)}>
            {/* Add icon */}
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

2. Create Group

Build a form that collects group name, type, and optional password. Call CometChat.createGroup() and emit ccGroupCreated.

import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text } from 'react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';
import {
  CometChatUIEventHandler,
  CometChatGroupsEvents,
} from '@cometchat/chat-uikit-react-native';

interface CreateGroupProps {
  onGroupCreated: (group: CometChat.Group) => void;
  onClose: () => void;
}

const CreateGroupForm: React.FC<CreateGroupProps> = ({ onGroupCreated, onClose }) => {
  const [groupName, setGroupName] = useState('');
  const [groupType, setGroupType] = useState<string>(CometChat.GROUP_TYPE.PUBLIC);
  const [password, setPassword] = useState('');

  const handleCreateGroup = async () => {
    const GUID = `group_${new Date().getTime()}`;
    const group = new CometChat.Group(GUID, groupName, groupType, password);

    try {
      const createdGroup = await CometChat.createGroup(group);
      
      CometChatUIEventHandler.emitGroupEvent(
        CometChatGroupsEvents.ccGroupCreated,
        { group: createdGroup }
      );
      
      onGroupCreated(createdGroup);
      onClose();
    } catch (error) {
      console.error('Group creation failed:', error);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Group Name"
        value={groupName}
        onChangeText={setGroupName}
      />
      
      {/* Group type selector */}
      <View style={{ flexDirection: 'row', marginVertical: 10 }}>
        <TouchableOpacity onPress={() => setGroupType(CometChat.GROUP_TYPE.PUBLIC)}>
          <Text>Public</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setGroupType(CometChat.GROUP_TYPE.PRIVATE)}>
          <Text>Private</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setGroupType(CometChat.GROUP_TYPE.PASSWORD)}>
          <Text>Password</Text>
        </TouchableOpacity>
      </View>
      
      {groupType === CometChat.GROUP_TYPE.PASSWORD && (
        <TextInput
          placeholder="Password"
          secureTextEntry
          value={password}
          onChangeText={setPassword}
        />
      )}
      
      <TouchableOpacity onPress={handleCreateGroup}>
        <Text>Create Group</Text>
      </TouchableOpacity>
    </View>
  );
};

3. Add Members to Group

Use CometChatUsers with selectionMode="multiple" to select users, then call CometChat.addMembersToGroup().

import React, { useState, useCallback } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';
import {
  CometChatUsers,
  CometChatUIEventHandler,
  CometChatGroupsEvents,
  CometChatUIKit,
  CometChatUiKitConstants,
} from '@cometchat/chat-uikit-react-native';

interface AddMemberProps {
  group: CometChat.Group;
  onBack: () => void;
}

const AddMemberScreen: React.FC<AddMemberProps> = ({ group, onBack }) => {
  const [selectedUsers, setSelectedUsers] = useState<CometChat.User[]>([]);

  const addMembersToGroup = useCallback(async () => {
    try {
      const membersList = selectedUsers.map((user) => {
        const groupMember = new CometChat.GroupMember(
          user.getUid(),
          CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT
        );
        groupMember.setName(user.getName());
        return groupMember;
      });

      const guid = group.getGuid();
      const response = await CometChat.addMembersToGroup(guid, membersList, []);

      const addedUIDs = Object.entries(response)
        .filter(([_, status]) => status === 'success')
        .map(([uid]) => uid);

      if (addedUIDs.length > 0) {
        // Emit event for each added member
        membersList
          .filter((member) => addedUIDs.includes(member.getUid()))
          .forEach((member) => {
            CometChatUIEventHandler.emitGroupEvent(
              CometChatGroupsEvents.ccGroupMemberAdded,
              {
                addedBy: CometChatUIKit.loggedInUser,
                usersAdded: [member],
                userAddedIn: group,
              }
            );
          });
        
        onBack();
      }
    } catch (error) {
      console.error('Failed to add members:', error);
    }
  }, [group, selectedUsers, onBack]);

  return (
    <View style={{ flex: 1 }}>
      <CometChatUsers
        hideHeader={true}
        selectionMode="multiple"
        onSelection={setSelectedUsers}
      />
      
      <TouchableOpacity onPress={addMembersToGroup}>
        <Text>Add Members</Text>
      </TouchableOpacity>
    </View>
  );
};

4. View and Manage Group Members

Use CometChatGroupMembers to display members. Owners, admins and moderators get options to change a member’s scope, remove them, or ban them.

import React from 'react';
import { View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { CometChatGroupMembers } from '@cometchat/chat-uikit-react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';

interface ViewMembersProps {
  group: CometChat.Group;
}

const ViewMembersScreen: React.FC<ViewMembersProps> = ({ group }) => {
  const navigation = useNavigation();

  const handleMemberPress = (member: CometChat.GroupMember) => {
    // Navigate to member profile or show options
    console.log('Member pressed:', member.getName());
  };

  return (
    <View style={{ flex: 1 }}>
      <CometChatGroupMembers
        group={group}
        onItemPress={handleMemberPress}
        onBack={() => navigation.goBack()}
      />
    </View>
  );
};

The UI Kit has no screen for listing banned members or unbanning them. To undo a ban from your app, use the Chat SDK: fetch banned members with BannedMembersRequestBuilder, then unban with CometChat.unbanGroupMember(). To remove the Ban option instead, set hideBanMemberOption.

5. Transfer Ownership

Let the current owner select a member and transfer ownership via CometChat.transferGroupOwnership().

import React, { useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';
import {
  CometChatGroupMembers,
  CometChatUIEventHandler,
  CometChatGroupsEvents,
} from '@cometchat/chat-uikit-react-native';

interface TransferOwnershipProps {
  group: CometChat.Group;
  onClose: () => void;
}

const TransferOwnershipScreen: React.FC<TransferOwnershipProps> = ({ group, onClose }) => {
  const [selectedMember, setSelectedMember] = useState<CometChat.GroupMember | null>(null);

  const transferOwnership = async () => {
    if (!selectedMember) return;

    try {
      await CometChat.transferGroupOwnership(group.getGuid(), selectedMember.getUid());
      
      CometChatUIEventHandler.emitGroupEvent(
        CometChatGroupsEvents.ccOwnershipChanged,
        {
          group: group,
          newOwner: selectedMember,
        }
      );
      
      onClose();
    } catch (error) {
      console.error('Ownership transfer failed:', error);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <CometChatGroupMembers
        group={group}
        selectionMode="single"
        onSelection={(members) => setSelectedMember(members[0] || null)}
      />
      
      <TouchableOpacity onPress={transferOwnership} disabled={!selectedMember}>
        <Text>Transfer Ownership</Text>
      </TouchableOpacity>
    </View>
  );
};

Feature Matrix

Feature	Component / Method
Display groups	`CometChatGroups`
Create group	`CometChat.createGroup()`
Join group	`CometChat.joinGroup()`
View members	`CometChatGroupMembers`
Add members	`CometChat.addMembersToGroup()`
Remove member	`CometChat.kickGroupMember()`
Ban member	`CometChat.banGroupMember()`
Unban member	`CometChat.unbanGroupMember()`
List banned members	`CometChat.BannedMembersRequestBuilder`
Change scope	`CometChat.updateGroupMemberScope()`
Transfer ownership	`CometChat.transferGroupOwnership()`
Group events	`CometChatGroupsEvents`

Next Steps

Groups

Display and manage group lists.

Group Members

Display and manage group member lists.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.

​Components

​Integration Steps

​1. Display Groups List

​2. Create Group

​3. Add Members to Group

​4. View and Manage Group Members

​5. Transfer Ownership

​Feature Matrix

​Next Steps