All Real Time Listeners

Learn how to register and manage all real-time listeners in the CometChat React Native SDK, including User, Group, Message, and Call listeners.

Quick Reference

// Register listeners
CometChat.addUserListener("id", new CometChat.UserListener({ ... }));
CometChat.addGroupListener("id", new CometChat.GroupListener({ ... }));
CometChat.addMessageListener("id", new CometChat.MessageListener({ ... }));
CometChat.addCallListener("id", new CometChat.CallListener({ ... }));

// Remove listeners
CometChat.removeUserListener("id");
CometChat.removeGroupListener("id");
CometChat.removeMessageListener("id");
CometChat.removeCallListener("id");

CometChat provides 4 listeners viz.

1. User Listener
2. Group Listener
3. Message Listener
4. Call Listener

Always remove all listeners when the component unmounts to prevent memory leaks. Ensure each listener has a unique ID — using duplicate IDs can lead to unexpected behavior and loss of events.

User Listener

The UserListener class provides you with live events related to users. Below are the callback methods provided by the UserListener class.

Method	Information
onUserOnline(user: CometChat.User)	This method is triggered when a user comes online and is available to chat. The details of the user can be obtained from the user object received as the method parameter.
onUserOffline(user: CometChat.User)	This method is triggered when a user goes offline. The details of the user can be obtained from the User object received as the parameter.

To add the UserListener, you need to use the addUserListener() method provided by the CometChat class.

JavaScript

var listenerID = "UNIQUE_LISTENER_ID";
CometChat.addUserListener(
  listenerID,
  new CometChat.UserListener({
    onUserOnline: (onlineUser) => {
      console.log("On User Online:", { onlineUser });
    },
    onUserOffline: (offlineUser) => {
      console.log("On User Offline:", { offlineUser });
    },
  })
);

TypeScript

var listenerID: string = "UNIQUE_LISTENER_ID";
CometChat.addUserListener(
  listenerID,
  new CometChat.UserListener({
    onUserOnline: (onlineUser: CometChat.User) => {
      /* when someuser/friend comes online, user will be received here */
      console.log("On User Online:", { onlineUser });
    },
    onUserOffline: (offlineUser: CometChat.User) => {
      /* when someuser/friend went offline, user will be received here */
      console.log("On User Offline:", { offlineUser });
    },
  })
);

where UNIQUE_LISTENER_ID is the unique identifier for the listener. Please make sure that no two listeners are added with the same listener id as this could lead to unexpected behavior resulting in loss of events.

Once the UserListener is not in use, you need to remove the listener using the removeUserListener() method which takes the id of the listener to be removed as the parameter.

JavaScript

CometChat.removeUserListener(UNIQUE_LISTENER_ID);

TypeScript

let listenerID: string = "UNIQUE_LISTENER_ID";
CometChat.removeUserListener(listenerID);

Group Listener

The GroupListener class provides you with all the real-time events related to groups. Below are the callback methods provided by the GroupListener class.

Method	Information
onGroupMemberJoined(action: CometChat.Action, joinedUser: CometChat.User, joinedGroup: CometChat.Group)	This method is triggered when a user joins any group. All the members present in the group will receive this event.
onGroupMemberLeft(action: CometChat.Action, leftUser: CometChat.User, leftGroup: CometChat.Group)	This method is triggered when a user who was a member of any group leaves the group. All the members of the group receive this event.
onGroupMemberKicked(action: CometChat.Action, kickedUser: CometChat.User, kickedBy: CometChat.User, kickedFrom: CometChat.Group)	This method is triggered when a user is kicked from a group. All the members including the user receive this event
onGroupMemberBanned(action: CometChat.Action, bannedUser: CometChat.User, bannedBy: CometChat.User, bannedFrom: CometChat.Group)	This method is triggered when a user is banned from a group. All the members including the user receive this event
onGroupMemberUnbanned(action: CometChat.Action, unbannedUser: CometChat.User, unbannedBy: CometChat.User, unbannedFrom: CometChat.Group)	This method is triggered when a user is unbanned from a group. All the members of the group receive this event.
onGroupMemberScopeChanged(action: CometChat.Action, changedUser: CometChat.User, newScope: string, oldScope: string, changedGroup: CometChat.Group)	This method is triggered when the scope of any Group Member has been changed. All the members that are a part of that group receive this event
onMemberAddedToGroup(action: CometChat.Action, userAdded: CometChat.User, addedBy: CometChat.User, addedTo: CometChat.Group)	This method is triggered when a user is added to any group. All the members including the user himself receive this event.

To add the GroupListener, you need to use the addGroupListener() method provided by the CometChat class.

JavaScript

CometChat.addGroupListener(
  "UNIQUE_LISTENER_ID",
  new CometChat.GroupListener({
    onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
      console.log("onGroupMemberJoined", { message, joinedUser, joinedGroup });
    },
    onGroupMemberLeft: (message, leftUser, leftGroup) => {
      console.log("onGroupMemberLeft", { message, leftUser, leftGroup });
    },
    onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
      console.log("onGroupMemberKicked", {
        message,
        kickedUser,
        kickedBy,
        kickedFrom,
      });
    },
    onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
      console.log("onGroupMemberBanned", {
        message,
        bannedUser,
        bannedBy,
        bannedFrom,
      });
    },
    onGroupMemberUnbanned: (
      message,
      unbannedUser,
      unbannedBy,
      unbannedFrom
    ) => {
      console.log("onGroupMemberUnbanned", {
        message,
        unbannedUser,
        unbannedBy,
        unbannedFrom,
      });
    },
    onGroupMemberScopeChanged: (
      message,
      changedUser,
      newScope,
      oldScope,
      changedGroup
    ) => {
      console.log("onGroupMemberScopeChanged", {
        message,
        changedUser,
        newScope,
        oldScope,
        changedGroup,
      });
    },
    onMemberAddedToGroup: (message, userAdded, addedby, addedTo) => {
      console.log("onMemberAddedToGroup", {
        message,
        userAdded,
        addedby,
        addedTo,
      });
    },
  })
);

TypeScript

CometChat.addGroupListener(
  "UNIQUE_LISTENER_ID",
  new CometChat.GroupListener({
    onGroupMemberJoined: (
      message: CometChat.Action,
      joinedUser: CometChat.User,
      joinedGroup: CometChat.Group
    ) => {
      console.log("onGroupMemberJoined", { message, joinedUser, joinedGroup });
    },
    onGroupMemberLeft: (
      message: CometChat.Action,
      leftUser: CometChat.User,
      leftGroup: CometChat.Group
    ) => {
      console.log("onGroupMemberLeft", { message, leftUser, leftGroup });
    },
    onGroupMemberKicked: (
      message: CometChat.Action,
      kickedUser: CometChat.User,
      kickedBy: CometChat.User,
      kickedFrom: CometChat.Group
    ) => {
      console.log("onGroupMemberKicked", {
        message,
        kickedUser,
        kickedBy,
        kickedFrom,
      });
    },
    onGroupMemberBanned: (
      message: CometChat.Action,
      bannedUser: CometChat.User,
      bannedBy: CometChat.User,
      bannedFrom: CometChat.Group
    ) => {
      console.log("onGroupMemberBanned", {
        message,
        bannedUser,
        bannedBy,
        bannedFrom,
      });
    },
    onGroupMemberUnbanned: (
      message: CometChat.Action,
      unbannedUser: CometChat.User,
      unbannedBy: CometChat.User,
      unbannedFrom: CometChat.Group
    ) => {
      console.log("onGroupMemberUnbanned", {
        message,
        unbannedUser,
        unbannedBy,
        unbannedFrom,
      });
    },
    onGroupMemberScopeChanged: (
      message: CometChat.Action,
      changedUser: CometChat.User,
      newScope: string,
      oldScope: string,
      changedGroup: CometChat.Group
    ) => {
      console.log("onGroupMemberScopeChanged", {
        message,
        changedUser,
        newScope,
        oldScope,
        changedGroup,
      });
    },
    onMemberAddedToGroup: (
      message: CometChat.Action,
      userAdded: CometChat.User,
      addedby: CometChat.User,
      addedTo: CometChat.Group
    ) => {
      console.log("onMemberAddedToGroup", {
        message,
        userAdded,
        addedby,
        addedTo,
      });
    },
  })
);

where UNIQUE_LISTENER_ID is the unique identifier for the listener. Please make sure that no two listeners are added with the same listener id as this could lead to unexpected behavior resulting in loss of events.

Once the GroupListener is not in use, you need to remove the listener using the removeGroupListener() method which takes the id of the listener to be removed as the parameter.

JavaScript

CometChat.removeGroupListener(UNIQUE_LISTENER_ID);

TypeScript

let listenerID: string = "UNIQUE_LISTENER_ID";
CometChat.removeGroupListener(listenerID);

Message Listener

The MessageListener class provides you with live events related to messages. Below are the callback methods provided by the MessageListener class.

Method	Information
onTextMessageReceived(message: CometChat.TextMessage)	This event is triggered when a Text Message is received.
onMediaMessageReceived(message: CometChat.MediaMessage)	This event is triggered when a Media Message is received.
onCustomMessageReceived(message: CometChat.CustomMessage)	This event is triggered when a Custom Message is received.
onTypingStarted(typingIndicator: CometChat.TypingIndicator)	This event is triggered when a user starts typing in a user/group conversation
onTypingEnded(typingIndicator: CometChat.TypingIndicator)	This event is triggered when a user stops typing in a user/group conversation.
onMessagesDelivered(messageReceipt: CometChat.MessageReceipt)	This event is triggered when a set of messages are marked as delivered for any particular conversation.
onMessagesRead(messageReceipt: CometChat.MessageReceipt)	This event is triggered when a set of messages are marked as read for any particular conversation.
onMessageEdited(message: CometChat.BaseMessage)	This method is triggered when a particular message has been edited in a user/group conversation.
onMessageDeleted(message: CometChat.BaseMessage)	This event is triggered when a particular message is deleted in a user/group conversation.
onInteractiveMessageReceived(message: CometChat.InteractiveMessage)	This event is triggered when an Interactive Message is received.
onInteractionGoalCompleted(receipt: CometChat.InteractionReceipt)	This event is triggered when an interaction Goal is achieved.
onTransientMessageReceived(receipt: CometChat.TransientMessage)	This event is triggered when a Transient Message is received.
onMessageReactionAdded(receipt: CometChat.ReactionEvent)	This event is triggered when a reaction is added to a message in a user/group conversation.
onMessageReactionRemoved(receipt: CometChat.ReactionEvent)	This event is triggered when a reaction is removed from a message in a user/group conversation.

To add the MessageListener, you need to use the addMessageListener() method provided by the CometChat class.

JavaScript

CometChat.addMessageListener(
  "UNIQUE_LISTENER_ID",
  new CometChat.MessageListener({
    onTextMessageReceived: (textMessage) => {
      console.log("Text message received successfully", textMessage);
    },
    onMediaMessageReceived: (mediaMessage) => {
      console.log("Media message received successfully", mediaMessage);
    },
    onCustomMessageReceived: (customMessage) => {
      console.log("Custom message received successfully", customMessage);
    },
    onMessagesDelivered: (messageReceipt) => {
      console.log("Message Delivered", messageReceipt);
    },
    onMessagesRead: (messageReceipt) => {
      console.log("Message Read", messageReceipt);
    },
    onTypingStarted: (typingIndicator) => {
      console.log("Typing Started", typingIndicator);
    },
    onTypingEnded: (typingIndicator) => {
      console.log("Typing Ended", typingIndicator);
    },
    onMessageDeleted: (message) => {
      console.log("Message Delted", message);
    },
    onMessageEdited: (message) => {
      console.log("Message Edited", message);
    },
    onInteractiveMessageReceived: (message) => {
      console.log("interactive Message received", message);
    },
    onInteractionGoalCompleted: (message) => {
      console.log("Message interaction goal completed", message);
    },
    onTransientMessageReceived: (message) => {
      console.log("Transient Message received", message);
    },
    onMessageReactionAdded: (reaction) => {
      console.log("Message Reaction added", reaction);
    },
    onMessageReactionRemoved: (reaction) => {
      console.log("Message Reaction removed", reaction);
    },
  })
);

TypeScript

CometChat.addMessageListener(
  "UNIQUE_LISTENER_ID",
  new CometChat.MessageListener({
    onTextMessageReceived: (textMessage: CometChat.TextMessage) => {
      console.log("Text message received successfully", textMessage);
    },
    onMediaMessageReceived: (mediaMessage: CometChat.MediaMessage) => {
      console.log("Media message received successfully", mediaMessage);
    },
    onCustomMessageReceived: (customMessage: CometChat.CustomMessage) => {
      console.log("Custom message received successfully", customMessage);
    },
    onMessagesDelivered: (messageReceipt: CometChat.MessageReceipt) => {
      console.log("Message Delivered", messageReceipt);
    },
    onMessagesRead: (messageReceipt: CometChat.MessageReceipt) => {
      console.log("Message Read", messageReceipt);
    },
    onTypingStarted: (typingIndicator: CometChat.TypingIndicator) => {
      console.log("Typing Started", typingIndicator);
    },
    onTypingEnded: (typingIndicator: CometChat.TypingIndicator) => {
      console.log("Typing Ended", typingIndicator);
    },
    onMessageDeleted: (message: CometChat.BaseMessage) => {
      console.log("Message Delted", message);
    },
    onMessageEdited: (message: CometChat.BaseMessage) => {
      console.log("Message Edited", message);
    },
    onInteractiveMessageReceived: (message: CometChat.InteractiveMessage) => {
      console.log("interactive Message received", message);
    },
    onInteractionGoalCompleted: (receipt: CometChat.InteractionReceipt) => {
      console.log("Message interaction goal completed", message);
    },
    onTransientMessageReceived: (message: CometChat.TransientMessage) => {
      console.log("Transient Message received", message);
    },
    onMessageReactionAdded: (reaction: CometChat.ReactionEvent) => {
      console.log("Message Reaction added", reaction);
    },
    onMessageReactionRemoved: (reaction: CometChat.ReactionEvent) => {
      console.log("Message Reaction removed", reaction);
    },
  })
);

where UNIQUE_LISTENER_ID is the unique identifier for the listener. Please make sure that no two listeners are added with the same listener id as this could lead to unexpected behavior resulting in loss of events.

Once the MessageListener is not in use, you need to remove the listener using the removeMessageListener() method which takes the id of the listener to be removed as the parameter.

JavaScript

CometChat.removeMessageListener(UNIQUE_LISTENER_ID);

TypeScript

let listenerID: string = "UNIQUE_LISTENER_ID";
CometChat.removeMessageListener(listenerID);

Call Listener

The CallListener class provides you with live events related to calls. Below are the callback methods provided by the CallListener class.

Method	Information
onIncomingCallReceived(call: CometChat.Call)	This event is triggered when the logged-in user receives an incoming call. The details of the call can be obtained from the Call object received as the method parameter.
onOutgoingCallAccepted(call: CometChat.Call)	This event is triggered when the call initiated by the logged-in user is accepted by the recipient. The details of the call can be obtained from the Call object received as the method parameter.
onOutgoingCallRejected(call: CometChat.Call)	This event is triggered when the call initiated by the logged-in user is rejected by the recipient. The details of the call can be obtained from the Call object received as the method parameter
onIncomingCallCancelled(call: CometChat.Call)	This event is triggered when an incoming call is canceled by the initiator of the call. The details of the call can be obtained from the Call object received as the method parameter

To add the CallListener, you need to use the addCallListener() method provided by the CometChat class.

JavaScript

CometChat.addCallListener(
  "UNIQUE_LISTENER_ID",
  new CometChat.CallListener({
    onIncomingCallReceived(call) {
      console.log("Incoming call:", call);
    },
    onOutgoingCallAccepted(call) {
      console.log("Outgoing call accepted:", call);
    },
    onOutgoingCallRejected(call) {
      console.log("Outgoing call rejected:", call);
    },
    onIncomingCallCancelled(call) {
      console.log("Incoming call canceled:", call);
    },
  })
);

TypeScript

CometChat.addCallListener(
  "UNIQUE_LISTENER_ID",
  new CometChat.CallListener({
    onIncomingCallReceived: (call: CometChat.Call) => {
      console.log("Incoming call:", call);
    },
    onOutgoingCallAccepted: (call: CometChat.Call) => {
      console.log("Outgoing call accepted:", call);
    },
    onOutgoingCallRejected: (call: CometChat.Call) => {
      console.log("Outgoing call rejected:", call);
    },
    onIncomingCallCancelled: (call: CometChat.Call) => {
      console.log("Incoming call canceled:", call);
    },
  })
);

where UNIQUE_LISTENER_ID is the unique identifier for the listener. Please make sure that no two listeners are added with the same listener id as this could lead to unexpected behavior resulting in loss of events.

Once the CallListener is not in use, you need to remove the listener using the removeCallListener() method which takes the id of the listener to be removed as the parameter.

JavaScript

CometChat.removeCallListener(UNIQUE_LISTENER_ID);

TypeScript

let listenerID: string = "UNIQUE_LISTENER_ID";
CometChat.removeCallListener(listenerID);

Best Practices

• Register listeners as early as possible in your app lifecycle (e.g., after successful login) to avoid missing events
• Use unique, descriptive listener IDs (e.g., "CHAT_SCREEN_MESSAGE_LISTENER") to make debugging easier
• Always remove listeners when the component unmounts or the user logs out
• Avoid registering the same listener ID multiple times — this overwrites the previous listener silently
• For React Native, use useEffect cleanup functions to handle listener removal automatically

Troubleshooting

• Events not firing: Ensure the listener is registered with a unique ID and that you’re handling the correct callback method for the event type.
• Duplicate events: Check that you’re not registering the same listener multiple times without removing the previous one first.
• Events stop after navigation: If you remove listeners on screen unmount, re-register them when the screen mounts again.
• Missing group events: Group listeners only fire for groups the logged-in user is a member of. Verify group membership.
• Call events not received: Ensure the CometChat Calling SDK is properly initialized alongside the Chat SDK.

Next Steps

User Presence

Track when users come online or go offline

Receive Messages

Handle incoming messages in real time

Typing Indicators

Show when users are typing

Default Call

Implement voice and video calling