Skip to main content
Quick Reference - Generate token and start a call session:
// Generate call token
const callToken = await CometChatCalls.generateToken(sessionId, userAuthToken);

// Configure and render
const callSettings = new CometChatCalls.CallSettingsBuilder()
  .enableDefaultLayout(true)
  .setIsAudioOnlyCall(false)
  .build();

// <CometChatCalls.Component callSettings={callSettings} callToken={callToken} />

Overview

This section demonstrates how to start a call session in a React Native application. Previously known as Direct Calling.
Available via: SDK | UI Kits
Before you begin, we strongly recommend you read the calling setup guide.
If you want to implement a complete calling experience with ringing functionality (incoming/outgoing call UI), follow the Ringing guide first. Once the call is accepted, return here to start the call session.

Generate Call Token

A call token is required for secure access to a call session. Each token is unique to a specific session and user combination, ensuring that only authorized users can join the call. You can generate the token just before starting the call, or generate and store it ahead of time based on your use case. Use the generateToken() method to create a call token:
const loggedInUser = await CometChat.getLoggedinUser();
const userAuthToken = loggedInUser.getAuthToken();
const sessionId = "SESSION_ID"; // Random or from Call object in ringing flow

CometChatCalls.generateToken(sessionId, userAuthToken).then(
  (callToken) => {
    console.log("Call token generated:", callToken.token);
    // Use callToken to start the session
  },
  (error) => {
    console.log("Token generation failed:", error);
  }
);
ParameterDescription
sessionIdThe unique random session ID. In case you are using the ringing flow, the session ID is available in the Call object.
userAuthTokenThe user auth token is the logged-in user auth token which you can get by calling CometChat Chat SDK method CometChat.getLoggedinUser().getAuthToken()
On SuccessgenerateToken() returns a GenerateToken object containing the session ID and JWT token:GenerateToken Object:
ParameterTypeDescriptionSample Value
sessionIdstringUnique identifier for the call session"v1.in.2748663902141719.1772095292a49c6a5198e07f9096447749e87124204d95cfc8"
tokenstringJWT token for authenticating the call session"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6ImNjcHJvX2p3dF9yczI1Nl9rZXkxIn0..."

Start Call Session

Use the CometChatCalls.Component to render the call UI. This component requires a call token (generated in the previous step) and a CallSettings object that configures the call UI and behavior. The CallSettings class configures the call UI and behavior. Use CallSettingsBuilder to create a CallSettings instance.
const callListener = new CometChatCalls.OngoingCallListener({
  onUserJoined: (user) => {
    console.log("User joined:", user);
  },
  onUserLeft: (user) => {
    console.log("User left:", user);
  },
  onUserListUpdated: (userList) => {
    console.log("User list updated:", userList);
  },
  onCallEnded: () => {
    console.log("Call ended");
     // Clear Active Call and End Session -  see End Call Session section
  },
  onCallEndButtonPressed: () => {
    console.log("End call button pressed");
    // Handle end call - see End Call Session section
  },
  onError: (error) => {
    console.log("Call error:", error);
  },
  onAudioModesUpdated: (audioModes) => {
    console.log("Audio modes updated:", audioModes);
  },
  onCallSwitchedToVideo: (event) => {
    console.log("Call switched to video:", event);
  },
  onUserMuted: (event) => {
    console.log("User muted:", event);
  },
  onSessionTimeout: () => {
    console.log("Session timed out");
  }
});

const callSettings = new CometChatCalls.CallSettingsBuilder()
  .enableDefaultLayout(true)
  .setIsAudioOnlyCall(false)
  .setCallEventListener(callListener)
  .build();

// In your render method
return (
  <View style={{ height: '100%', width: '100%', position: 'relative' }}>
    <CometChatCalls.Component callSettings={callSettings} callToken={callToken} />
  </View>
);
ParameterDescription
callTokenThe GenerateToken object received from generateToken() onSuccess
callSettingsObject of CallSettings class configured via CallSettingsBuilder

Call Settings

Configure the call experience using the following CallSettingsBuilder methods:
MethodDescription
enableDefaultLayout(boolean)Enables or disables the default call UI layout with built-in controls. true shows the default layout with end call, mute, video toggle buttons. false hides the button layout. Default: true
setIsAudioOnlyCall(boolean)Sets whether the call is audio-only or audio-video. true for audio-only, false for audio-video. Default: false
setCallEventListener(OngoingCallListener)Sets the listener to receive call events. See Call Listeners for available callbacks.
setMode(string)Sets the call UI layout mode. Available: CometChat.CALL_MODE.DEFAULT (grid), CometChat.CALL_MODE.SPOTLIGHT (active speaker), CometChat.CALL_MODE.SINGLE (one participant). Default: DEFAULT
setAvatarMode(string)Sets how avatars are displayed when video is off. Available: circle, square, fullscreen. Default: circle
setDefaultAudioMode(string)Sets the initial audio output device. Available: SPEAKER, EARPIECE, BLUETOOTH, HEADPHONES
startWithAudioMuted(boolean)Starts the call with the microphone muted. Default: false
startWithVideoMuted(boolean)Starts the call with the camera turned off. Default: false
showEndCallButton(boolean)Shows or hides the end call button in the default layout. Default: true
showSwitchCameraButton(boolean)Shows or hides the switch camera button (front/back). Default: true
showMuteAudioButton(boolean)Shows or hides the mute audio button. Default: true
showPauseVideoButton(boolean)Shows or hides the pause video button. Default: true
showAudioModeButton(boolean)Shows or hides the audio mode selection button. Default: true
showSwitchToVideoCallButton(boolean)Shows or hides the button to upgrade an audio call to video. Default: true
setMainVideoContainerSetting(MainVideoContainerSetting)Customizes the main video container. See Video View Customization.
enableVideoTileClick(boolean)Enables or disables click interactions on video tiles in Spotlight mode. Default: true
enableVideoTileDrag(boolean)Enables or disables drag functionality for video tiles in Spotlight mode. Default: true
setIdleTimeoutPeriod(number)Sets idle timeout in seconds. Warning appears 60 seconds before auto-termination. Default: 180 seconds. v4.2.0+

Call Listeners

The OngoingCallListener provides real-time callbacks for call session events, including participant changes, call state updates, and error conditions. You can register listeners in two ways:
  1. Via CallSettingsBuilder: Use .setCallEventListener(listener) when building call settings
  2. Via addCallEventListener: Use CometChatCalls.addCallEventListener(listenerId, listener) to add multiple listeners
Each listener requires a unique listenerId string. This ID is used to:
  • Prevent duplicate registrations — Re-registering with the same ID replaces the existing listener
  • Enable targeted removal — Remove specific listeners without affecting others
useEffect(() => {
  const listenerId = "UNIQUE_LISTENER_ID";
  
  CometChatCalls.addCallEventListener(listenerId, {
    onUserJoined: (user) => {
      console.log("User joined:", user);
    },
    onUserLeft: (user) => {
      console.log("User left:", user);
    },
    onUserListUpdated: (userList) => {
      console.log("User list updated:", userList);
    },
    onCallEnded: () => {
      console.log("Call ended");
    },
    onCallEndButtonPressed: () => {
      console.log("End call button pressed");
    },
    onError: (error) => {
      console.log("Call error:", error);
    },
    onAudioModesUpdated: (audioModes) => {
      console.log("Audio modes updated:", audioModes);
    },
    onCallSwitchedToVideo: (event) => {
      console.log("Call switched to video:", event);
    },
    onUserMuted: (event) => {
      console.log("User muted:", event);
    },
    onSessionTimeout: () => {
      console.log("Session timed out");
    }
  });

  // Cleanup on unmount
  return () => CometChatCalls.removeCallEventListener(listenerId);
}, []);
Always remove call event listeners when the component unmounts using CometChatCalls.removeCallEventListener(listenerId). Failing to remove listeners can cause memory leaks and duplicate event handling.

Events

EventDescription
onCallEnded()Invoked when the call session terminates for a 1:1 call. Both participants receive this callback. Only fires for calls with exactly 2 participants.
onSessionTimeout()Invoked when the call is auto-terminated due to inactivity (default: 180 seconds). Warning appears 60 seconds before. v4.2.0+
onCallEndButtonPressed()Invoked when the local user taps the end call button. For ringing flow, call CometChat.endCall(). For standalone, call CometChatCalls.endSession().
onUserJoined(user)Invoked when a remote participant joins. The user contains UID, name, and avatar.
onUserLeft(user)Invoked when a remote participant leaves the call session.
onUserListUpdated(userList)Invoked whenever the participant list changes (join or leave events).
onAudioModesUpdated(audioModes)Invoked when available audio devices change (e.g., Bluetooth connected).
onCallSwitchedToVideo(event)Invoked when an audio call is upgraded to a video call.
onUserMuted(event)Invoked when a participant’s mute state changes.
onScreenShareStarted()Invoked when the local user starts sharing a screen.
onScreenShareStopped()Invoked when the local user stops sharing a screen.
onError(error)Invoked when an error occurs during the call session.
On EventonUserJoined returns a user object when a participant joins the call:User Object:
ParameterTypeDescriptionSample Value
uidstringUnique identifier of the user"cometchat-uid-6"
namestringDisplay name of the user"Ronald Jerry"
avatarstringURL to user’s avatar image"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"
idstringInternal session participant ID"cd530243"
joinedAtstringUnix timestamp when user joined (as string)"1772095303043"
isVideoMutedbooleanWhether user’s video is mutedtrue
isAudioMutedbooleanWhether user’s audio is mutedfalse
isLocalUserbooleanWhether this is the local userfalse
On EventonUserLeft returns a user object when a participant leaves the call:User Object:
ParameterTypeDescriptionSample Value
uidstringUnique identifier of the user"cometchat-uid-6"
namestringDisplay name of the user"Ronald Jerry"
avatarstringURL to user’s avatar image"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"
idstringInternal session participant ID"cd530243"
joinedAtstringUnix timestamp when user joined (as string)"1772095303043"
isVideoMutedbooleanWhether user’s video was mutedtrue
isAudioMutedbooleanWhether user’s audio was mutedfalse
On EventonUserListUpdated returns an array of all current participants in the call:User Array:
ParameterTypeDescriptionSample Value
(array)arrayArray of user objectsSee below ↓
User Object (each item in array):
ParameterTypeDescriptionSample Value
uidstringUnique identifier of the user"cometchat-uid-7"
namestringDisplay name of the user"Henry Marino"
avatarstringURL to user’s avatar image"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"
On EventonAudioModesUpdated returns an array of available audio output modes:Audio Modes Array:
ParameterTypeDescriptionSample Value
(array)arrayArray of audio mode objectsSee below ↓
Audio Mode Object (each item in array):
ParameterTypeDescriptionSample Value
typestringType of audio output device"SPEAKER"
selectedbooleanWhether this mode is currently selectedtrue
On EventonCallSwitchedToVideo is invoked when an audio call is upgraded to video. This event may not include additional data.

End Call Session

Ending a call session properly is essential to release media resources (camera, microphone, network connections) and update call state across all participants. The termination process differs based on whether you’re using the Ringing flow or Session Only flow.

Ringing Flow

When using the Ringing flow, you must coordinate between the CometChat Chat SDK and the Calls SDK to properly terminate the call and notify all participants.
The Ringing flow requires calling methods from both the Chat SDK (CometChat.endCall()) and the Calls SDK (CometChatCalls.endSession()) to ensure proper call termination and participant notification.
User who initiates the end call: When the user presses the end call button in the UI, the onCallEndButtonPressed() callback is triggered. You must call CometChat.endCall() inside this callback to properly terminate the call and notify other participants. On success, call CometChat.clearActiveCall() and CometChatCalls.endSession() to release resources.
onCallEndButtonPressed: () => {
  CometChat.endCall(sessionId).then(
    (call) => {
      console.log("Call ended successfully");
      CometChat.clearActiveCall();
      CometChatCalls.endSession();
      // Close the calling screen
    },
    (error) => {
      console.log("End call failed:", error);
    }
  );
}
On SuccessCometChat.endCall() returns a Call object with the final call status:Call Object (Root Level):
ParameterTypeDescriptionSample Value
reactionsarrayList of reactions on the call[]
mentionedUsersarrayList of mentioned users[]
mentionedMebooleanWhether current user was mentionedfalse
receiverIdstringUID of the call receiver"cometchat-uid-6"
typestringType of call"audio"
receiverTypestringType of receiver"user"
categorystringMessage category"call"
actionstringCall action"ended"
sessionIdstringUnique session identifier"v1.in.2748663902141719.1772095292a49c6a5198e07f9096447749e87124204d95cfc8"
statusstringCurrent call status"ended"
metadataobjectCustom metadata attached to the call{"new": "metajson"}
initiatedAtnumberUnix timestamp when call was initiated1772095292
idstringUnique message ID"25424"
conversationIdstringUnique conversation identifier"cometchat-uid-6_user_cometchat-uid-7"
senderobjectUser who initiated the callSee below ↓
receiverobjectUser receiving the callSee below ↓
dataobjectAdditional call dataSee below ↓
sentAtnumberUnix timestamp when call message was sent1772095553
updatedAtnumberUnix timestamp of last update1772095553
callInitiatorobjectUser who initiated the callSee below ↓
callReceiverobjectUser receiving the callSee below ↓

sender Object:
ParameterTypeDescriptionSample Value
hasBlockedMebooleanWhether this user has blocked the current userfalse
blockedByMebooleanWhether the current user has blocked this userfalse
deactivatedAtnumberTimestamp when user was deactivated (0 if active)0
uidstringUnique user identifier"cometchat-uid-7"
namestringDisplay name of the user"Henry Marino"
avatarstringURL to user’s avatar image"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"
lastActiveAtnumberUnix timestamp of last activity1772094890
rolestringUser’s role"default"
statusstringUser’s online status"online"
tagsarrayTags associated with the user[]

receiver Object:
ParameterTypeDescriptionSample Value
hasBlockedMebooleanWhether this user has blocked the current userfalse
blockedByMebooleanWhether the current user has blocked this userfalse
deactivatedAtnumberTimestamp when user was deactivated (0 if active)0
uidstringUnique user identifier"cometchat-uid-6"
namestringDisplay name of the user"Ronald Jerry"
avatarstringURL to user’s avatar image"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"
lastActiveAtnumberUnix timestamp of last activity1772094886
rolestringUser’s role"default"
statusstringUser’s online status"online"
tagsarrayTags associated with the user[]

data Object:
ParameterTypeDescriptionSample Value
actionstringCall action type"ended"
entitiesobjectEntity details for the callSee below ↓
resourcestringSDK resource identifier"REACT_NATIVE-4_0_14-3e152d60-8e2b-435b-86cd-0c0fe3bbc6e1-1772094888945"
data.entities Object:
ParameterTypeDescriptionSample Value
byobjectUser who performed the actionSee below ↓
forobjectUser the action was performed forSee below ↓
onobjectThe call entitySee below ↓
data.entities.by Object:
ParameterTypeDescriptionSample Value
entityobjectUser entity detailsSee below ↓
entityTypestringType of entity"user"
data.entities.by.entity Object:
ParameterTypeDescriptionSample Value
uidstringUnique user identifier"cometchat-uid-7"
namestringDisplay name of the user"Henry Marino"
avatarstringURL to user’s avatar image"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"
statusstringUser’s online status"online"
rolestringUser’s role"default"
lastActiveAtnumberUnix timestamp of last activity1772094890
tagsarrayTags associated with the user[]
data.entities.for Object:
ParameterTypeDescriptionSample Value
entityobjectUser entity detailsSee below ↓
entityTypestringType of entity"user"
data.entities.for.entity Object:
ParameterTypeDescriptionSample Value
uidstringUnique user identifier"cometchat-uid-6"
namestringDisplay name of the user"Ronald Jerry"
avatarstringURL to user’s avatar image"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"
statusstringUser’s online status"online"
rolestringUser’s role"default"
lastActiveAtnumberUnix timestamp of last activity1772094886
conversationIdstringConversation ID for this user"cometchat-uid-6_user_cometchat-uid-7"
tagsarrayTags associated with the user[]
data.entities.on Object:
ParameterTypeDescriptionSample Value
entityobjectCall entity detailsSee below ↓
entityTypestringType of entity"call"
data.entities.on.entity Object:
ParameterTypeDescriptionSample Value
sessionidstringUnique session identifier"v1.in.2748663902141719.1772095292a49c6a5198e07f9096447749e87124204d95cfc8"
conversationIdstringConversation ID"cometchat-uid-6_user_cometchat-uid-7"
senderstringUID of the call sender"cometchat-uid-7"
receiverTypestringType of receiver"user"
receiverstringUID of the call receiver"cometchat-uid-6"
statusstringCall status"ended"
typestringType of call"audio"
dataobjectNested call data{...}
initiatedAtnumberUnix timestamp when call was initiated1772095292
startedAtnumberUnix timestamp when call started1772095302
endedAtnumberUnix timestamp when call ended1772095553
durationnumberCall duration in seconds251

callInitiator Object:
ParameterTypeDescriptionSample Value
hasBlockedMebooleanWhether this user has blocked the current userfalse
blockedByMebooleanWhether the current user has blocked this userfalse
deactivatedAtnumberTimestamp when user was deactivated (0 if active)0
uidstringUnique user identifier"cometchat-uid-7"
namestringDisplay name of the user"Henry Marino"
avatarstringURL to user’s avatar image"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"
lastActiveAtnumberUnix timestamp of last activity1772094890
rolestringUser’s role"default"
statusstringUser’s online status"online"
tagsarrayTags associated with the user[]

callReceiver Object:
ParameterTypeDescriptionSample Value
hasBlockedMebooleanWhether this user has blocked the current userfalse
blockedByMebooleanWhether the current user has blocked this userfalse
deactivatedAtnumberTimestamp when user was deactivated (0 if active)0
uidstringUnique user identifier"cometchat-uid-6"
namestringDisplay name of the user"Ronald Jerry"
avatarstringURL to user’s avatar image"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"
lastActiveAtnumberUnix timestamp of last activity1772094886
rolestringUser’s role"default"
statusstringUser’s online status"online"
tagsarrayTags associated with the user[]
Remote participant (receives the onCallEnded() callback): Call CometChat.clearActiveCall() to clear the local call state, then call CometChatCalls.endSession() to release media resources.
onCallEnded: () => {
  CometChat.clearActiveCall();
  CometChatCalls.endSession();
  // Close the calling screen
}

Session Only Flow

When using the Session Only flow (direct call without ringing), you only need to call the Calls SDK method to end the session. There’s no need to notify the Chat SDK since no call signaling was involved. Call CometChatCalls.endSession() in the onCallEndButtonPressed() callback to release all media resources and disconnect from the call session.
onCallEndButtonPressed: () => {
  CometChatCalls.endSession();
  // Close the calling screen
}

Methods

These methods are available for performing custom actions during an active call session. Use them to build custom UI controls or implement specific behaviors based on your use case.
These methods can only be called when a call session is active.

Switch Camera

Toggles between the front and rear camera during a video call. Useful for allowing users to switch their camera view without leaving the call.
CometChatCalls.switchCamera();

Mute Audio

Controls the local audio stream transmission. When muted, other participants cannot hear the local user.
  • true — Mutes the microphone, stops transmitting audio
  • false — Unmutes the microphone, resumes audio transmission
CometChatCalls.muteAudio(true);

Pause Video

Controls the local video stream transmission. When paused, other participants see a frozen frame or avatar instead of live video.
  • true — Pauses the camera, stops transmitting video
  • false — Resumes the camera, continues video transmission
CometChatCalls.pauseVideo(true);

Set Audio Mode

Routes the audio output to a specific device. Use this to let users choose between speaker, earpiece, or connected audio devices. Available modes:
  • CometChat.AUDIO_MODE.SPEAKER — Device speaker (loudspeaker)
  • CometChat.AUDIO_MODE.EARPIECE — Phone earpiece
  • CometChat.AUDIO_MODE.BLUETOOTH — Connected Bluetooth device
  • CometChat.AUDIO_MODE.HEADPHONES — Wired headphones
CometChatCalls.setAudioMode(CometChat.AUDIO_MODE.EARPIECE);

Switch To Video Call

Upgrades an ongoing audio call to a video call. This enables the camera and starts transmitting video to other participants. The remote participant receives the onCallSwitchedToVideo() callback.
CometChatCalls.switchToVideoCall();

Get Audio Output Modes

Returns the list of available audio output devices. Use this to display audio options to the user and then set the selected mode using setAudioMode().
CometChatCalls.getAudioOutputModes().then(
  (modes) => {
    console.log("Available audio modes:", modes);
    // Each mode has: mode (string) and isSelected (boolean)
  },
  (error) => {
    console.log("Failed to get audio modes:", error);
  }
);
On SuccessgetAudioOutputModes() returns an object containing an array of available audio modes:Response Object:
ParameterTypeDescriptionSample Value
modesarrayArray of available audio output modesSee below ↓
Mode Object (each item in modes array):
ParameterTypeDescriptionSample Value
typestringType of audio output device"SPEAKER"
selectedbooleanWhether this mode is currently selectedtrue

End Call

Terminates the current call session and releases all media resources (camera, microphone, network connections). After calling this method, the call view should be closed.
CometChatCalls.endSession();

Best Practices

Call tokens are session-specific and time-limited. Generate them right before starting the call session rather than caching them for extended periods. This ensures the token is fresh and reduces the chance of token expiry errors.
When using the Ringing flow, remember to call both CometChat.endCall() and CometChatCalls.endSession(). Missing either call can leave the session in an inconsistent state — the Chat SDK may still show the call as active, or media resources may not be released properly.
Always remove call event listeners in your component’s cleanup function (e.g., the return function of useEffect). Orphaned listeners can cause memory leaks, duplicate event handling, and unexpected behavior when navigating between screens.
The CometChatCalls.Component should be rendered inside a View with height: '100%', width: '100%', and position: 'relative'. This ensures the call UI fills the screen correctly and overlays render in the right position.
When registering call event listeners with addCallEventListener, use a unique listenerId per component instance. This prevents one component from accidentally overwriting another component’s listener, especially in navigation stacks where multiple screens may be mounted simultaneously.

Troubleshooting

Ensure the user is logged in and the auth token is valid. Call CometChat.getLoggedinUser() to verify the user session is active. If the auth token has expired, re-authenticate the user before generating a call token.
Verify that the CometChatCalls.Component is wrapped in a View with explicit dimensions (height: '100%', width: '100%'). The component requires a sized container to render. Also confirm that both callSettings and callToken props are provided and not null or undefined.
Check that the listener is registered before the call session starts. If using addCallEventListener, ensure the listenerId is unique and hasn’t been overwritten by another registration. Also verify that the Calls SDK has been initialized via CometChatCalls.init().
The onCallEnded callback only fires for 1:1 calls (exactly 2 participants). For group calls, use onUserLeft and onUserListUpdated to track when participants leave, and handle session cleanup based on your app’s logic.
Check device permissions for camera and microphone. On React Native, you need to request CAMERA and RECORD_AUDIO permissions on Android, and add NSCameraUsageDescription and NSMicrophoneUsageDescription to Info.plist on iOS. Also verify that setIsAudioOnlyCall matches your intended call type.

Next Steps