> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# All Real Time Listeners

> Complete reference for all CometChat real-time listeners in the React Native SDK including User, Group, Message, and Call listeners.

<Accordion title="AI Integration Quick Reference">
  ```javascript theme={null}
  // User Listener — online/offline presence
  CometChat.addUserListener("ID", new CometChat.UserListener({
    onUserOnline: (user) => { },
    onUserOffline: (user) => { }
  }));

  // Message Listener — messages, typing, receipts, reactions
  CometChat.addMessageListener("ID", new CometChat.MessageListener({
    onTextMessageReceived: (msg) => { },
    onMediaMessageReceived: (msg) => { },
    onTypingStarted: (indicator) => { },
    onMessagesRead: (receipt) => { }
  }));

  // Group Listener — member join/leave/kick/ban/scope changes
  CometChat.addGroupListener("ID", new CometChat.GroupListener({
    onGroupMemberJoined: (action, joinedUser, joinedGroup) => { },
    onGroupMemberLeft: (action, leftUser, leftGroup) => { }
  }));

  // Call Listener — incoming/outgoing call events
  CometChat.addCallListener("ID", new CometChat.CallListener({
    onIncomingCallReceived: (call) => { },
    onOutgoingCallAccepted: (call) => { }
  }));

  // Always clean up
  CometChat.removeUserListener("ID");
  CometChat.removeMessageListener("ID");
  CometChat.removeGroupListener("ID");
  CometChat.removeCallListener("ID");
  ```
</Accordion>

Real-time listeners let you receive live events — messages, presence changes, group updates, and call signals — as they happen. The pattern is the same for all four listener types:

1. Register a listener with a unique ID using `addXListener()`
2. Handle events in the callback methods
3. Remove the listener with `removeXListener()` when it's no longer needed

Each listener ID must be unique. Re-registering with the same ID replaces the previous listener. Always remove listeners on component unmount to prevent memory leaks.

<Warning>
  Always remove listeners when they're no longer needed (e.g., on component unmount). Failing to remove listeners can cause memory leaks and duplicate event handling. For React Native, use `useEffect` cleanup functions to handle listener removal automatically.
</Warning>

CometChat provides 4 listeners viz.

1. [User Listener](/sdk/react-native/real-time-listeners#user-listener)
2. [Group Listener](/sdk/react-native/real-time-listeners#group-listener)
3. [Message Listener](/sdk/react-native/real-time-listeners#message-listener)
4. [Call Listener](/sdk/react-native/real-time-listeners#call-listener)

## User Listener

Receive online/offline presence events for users.

| Method                                                                  | Information                                                                                                                                                                |
| ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **onUserOnline(user: [CometChat.User](/sdk/reference/entities#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](/sdk/reference/entities#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`:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const listenerID: string = "UNIQUE_LISTENER_ID";
    CometChat.addUserListener(
      listenerID,
      new CometChat.UserListener({
        onUserOnline: (onlineUser: CometChat.User) => {
          console.log("On User Online:", { onlineUser });
        },
        onUserOffline: (offlineUser: CometChat.User) => {
          console.log("On User Offline:", { offlineUser });
        },
      })
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    const 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 });
        },
      })
    );
    ```
  </Tab>
</Tabs>

Remove the listener when no longer needed:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let listenerID: string = "UNIQUE_LISTENER_ID";
    CometChat.removeUserListener(listenerID);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let listenerID = "UNIQUE_LISTENER_ID";
    CometChat.removeUserListener(listenerID);
    ```
  </Tab>
</Tabs>

## Group Listener

Receive events when group members join, leave, are kicked/banned, or have their scope changed.

| Method                                                                                                                                                                                                                                                                          | Information                                                                                                                                    |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| **onGroupMemberJoined(action: [CometChat.Action](/sdk/reference/messages#action), joinedUser: [CometChat.User](/sdk/reference/entities#user), joinedGroup: [CometChat.Group](/sdk/reference/entities#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](/sdk/reference/messages#action), leftUser: [CometChat.User](/sdk/reference/entities#user), leftGroup: [CometChat.Group](/sdk/reference/entities#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](/sdk/reference/messages#action), kickedUser: [CometChat.User](/sdk/reference/entities#user), kickedBy: [CometChat.User](/sdk/reference/entities#user), kickedFrom: [CometChat.Group](/sdk/reference/entities#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](/sdk/reference/messages#action), bannedUser: [CometChat.User](/sdk/reference/entities#user), bannedBy: [CometChat.User](/sdk/reference/entities#user), bannedFrom: [CometChat.Group](/sdk/reference/entities#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](/sdk/reference/messages#action), unbannedUser: [CometChat.User](/sdk/reference/entities#user), unbannedBy: [CometChat.User](/sdk/reference/entities#user), unbannedFrom: [CometChat.Group](/sdk/reference/entities#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](/sdk/reference/messages#action), changedUser: [CometChat.User](/sdk/reference/entities#user), newScope: string, oldScope: string, changedGroup: [CometChat.Group](/sdk/reference/entities#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](/sdk/reference/messages#action), userAdded: [CometChat.User](/sdk/reference/entities#user), addedBy: [CometChat.User](/sdk/reference/entities#user), addedTo: [CometChat.Group](/sdk/reference/entities#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`:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    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,
          });
        },
      })
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    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,
          });
        },
      })
    );
    ```
  </Tab>
</Tabs>

Remove the listener when no longer needed:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let listenerID: string = "UNIQUE_LISTENER_ID";
    CometChat.removeGroupListener(listenerID);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let listenerID = "UNIQUE_LISTENER_ID";
    CometChat.removeGroupListener(listenerID);
    ```
  </Tab>
</Tabs>

## Message Listener

Receive events for incoming messages, typing indicators, read/delivery receipts, message edits/deletes, reactions, and interactive messages.

| Method                                                                                                           | Information                                                                                             |
| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| **onTextMessageReceived(message: [CometChat.TextMessage](/sdk/reference/messages#textmessage))**                 | This event is triggered when a Text Message is received.                                                |
| **onMediaMessageReceived(message: [CometChat.MediaMessage](/sdk/reference/messages#mediamessage))**              | This event is triggered when a Media Message is received.                                               |
| **onCustomMessageReceived(message: [CometChat.CustomMessage](/sdk/reference/messages#custommessage))**           | This event is triggered when a Custom Message is received.                                              |
| **onTypingStarted(typingIndicator: [CometChat.TypingIndicator](/sdk/reference/auxiliary#typingindicator))**      | This event is triggered when a user starts typing in a user/group conversation                          |
| **onTypingEnded(typingIndicator: [CometChat.TypingIndicator](/sdk/reference/auxiliary#typingindicator))**        | This event is triggered when a user stops typing in a user/group conversation.                          |
| **onMessagesDelivered(messageReceipt: [CometChat.MessageReceipt](/sdk/reference/auxiliary#messagereceipt))**     | This event is triggered when a set of messages are marked as delivered for any particular conversation. |
| **onMessagesRead(messageReceipt: [CometChat.MessageReceipt](/sdk/reference/auxiliary#messagereceipt))**          | This event is triggered when a set of messages are marked as read for any particular conversation.      |
| **onMessageEdited(message: [CometChat.BaseMessage](/sdk/reference/messages#basemessage))**                       | This method is triggered when a particular message has been edited in a user/group conversation.        |
| **onMessageDeleted(message: [CometChat.BaseMessage](/sdk/reference/messages#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](/sdk/reference/auxiliary#transientmessage))** | This event is triggered when a Transient Message is received.                                           |
| **onMessageReactionAdded(receipt: [CometChat.ReactionEvent](/sdk/reference/auxiliary#reactionevent))**           | This event is triggered when a reaction is added to a message in a user/group conversation.             |
| **onMessageReactionRemoved(receipt: [CometChat.ReactionEvent](/sdk/reference/auxiliary#reactionevent))**         | This event is triggered when a reaction is removed from a message in a user/group conversation.         |

To add the `MessageListener`:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    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 Deleted", 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("Interaction goal completed", receipt);
        },
        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);
        },
      })
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    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 Deleted", message);
        },
        onMessageEdited: (message) => {
          console.log("Message Edited", message);
        },
        onInteractiveMessageReceived: (message) => {
          console.log("Interactive Message received", message);
        },
        onInteractionGoalCompleted: (receipt) => {
          console.log("Interaction goal completed", receipt);
        },
        onTransientMessageReceived: (message) => {
          console.log("Transient Message received", message);
        },
        onMessageReactionAdded: (reaction) => {
          console.log("Message Reaction added", reaction);
        },
        onMessageReactionRemoved: (reaction) => {
          console.log("Message Reaction removed", reaction);
        },
      })
    );
    ```
  </Tab>
</Tabs>

Remove the listener when no longer needed:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let listenerID: string = "UNIQUE_LISTENER_ID";
    CometChat.removeMessageListener(listenerID);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let listenerID = "UNIQUE_LISTENER_ID";
    CometChat.removeMessageListener(listenerID);
    ```
  </Tab>
</Tabs>

## Call Listener

Receive events for incoming and outgoing call state changes.

| Method                                                                            | Information                                                                                                                                                                                        |
| --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **onIncomingCallReceived(call: [CometChat.Call](/sdk/reference/messages#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](/sdk/reference/messages#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](/sdk/reference/messages#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](/sdk/reference/messages#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`:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    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);
        },
      })
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    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);
        },
      })
    );
    ```
  </Tab>
</Tabs>

Remove the listener when no longer needed:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let listenerID: string = "UNIQUE_LISTENER_ID";
    CometChat.removeCallListener(listenerID);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let listenerID = "UNIQUE_LISTENER_ID";
    CometChat.removeCallListener(listenerID);
    ```
  </Tab>
</Tabs>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="User Presence" icon="circle-dot" href="/sdk/react-native/user-presence">
    Track when users come online or go offline
  </Card>

  <Card title="Receive Messages" icon="inbox" href="/sdk/react-native/receive-messages">
    Handle incoming messages in real time
  </Card>

  <Card title="Typing Indicators" icon="keyboard" href="/sdk/react-native/typing-indicators">
    Show when users are typing
  </Card>

  <Card title="Connection Status" icon="signal" href="/sdk/react-native/connection-status">
    Monitor SDK connection state changes
  </Card>
</CardGroup>