App.tsx - Listen for Group Changes

App.tsx

...
useEffect(() => {
  ...
  return () => {
    ...
    if (cometChat) {
      ...
      cometChat.removeGroupListener(groupListenerId);
    }
  }
}, []);

useEffect(() => {
  if (cometChat) {
    ...
    listenForGroupChanges();
  }
}, [cometChat]);

const listenForGroupChanges = () => {
  cometChat.addGroupListener(
    groupListenerId,
    new cometChat.GroupListener({
      onMemberAddedToGroup: (message: any, userAdded: any, userAddedBy: any, userAddedIn: any) => {
        alert(`${userAdded.name} was added to ${userAddedIn.name} by ${userAddedBy.name}`);
      },
      onGroupMemberKicked: (message: any, kickedUser: any, kickedBy: any, kickedFrom: any) => {
        alert(`${kickedUser.name} was removed from ${kickedFrom.name}`);
      },
      onGroupMemberLeft: (message: any, leavingUser: any, group: any) => {
        alert(`${leavingUser.name} has left the group ${group.name}`);
      },
      onGroupMemberJoined: (message: any, joinedUser: any, joinedGroup: any) => {
        alert(`${joinedUser.name} has joined the group ${joinedGroup.name}`);
      }
    })
  );
};
...