Overview
This section demonstrates how to start a call session in a React Native application. Previously known as Direct Calling.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 thegenerateToken() method to create a call token:
- JavaScript
- TypeScript
Response
Response
generateToken() returns a GenerateToken object containing the session ID and JWT token:GenerateToken Object:Start Call Session
Use theCometChatCalls.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.
- JavaScript
- TypeScript
Call Settings
Configure the call experience using the followingCallSettingsBuilder methods:
Call Listeners
TheOngoingCallListener provides real-time callbacks for call session events, including participant changes, call state updates, and error conditions.
You can register listeners in two ways:
- Via CallSettingsBuilder: Use
.setCallEventListener(listener)when building call settings - Via addCallEventListener: Use
CometChatCalls.addCallEventListener(listenerId, listener)to add multiple listeners
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
- JavaScript
- TypeScript
Events
onUserJoined Response
onUserJoined Response
onUserJoined returns a user object when a participant joins the call:User Object:onUserLeft Response
onUserLeft Response
onUserLeft returns a user object when a participant leaves the call:User Object:onUserListUpdated Response
onUserListUpdated Response
onUserListUpdated returns an array of all current participants in the call:User Array:onAudioModesUpdated Response
onAudioModesUpdated Response
onAudioModesUpdated returns an array of available audio output modes:Audio Modes Array:onCallSwitchedToVideo Response
onCallSwitchedToVideo Response
onCallSwitchedToVideo 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.CometChat.endCall()) and the Calls SDK (CometChatCalls.endSession()) to ensure proper call termination and participant notification.
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.
- JavaScript
- TypeScript
Response
Response
CometChat.endCall() returns a Call object with the final call status:Call Object (Root Level):sender Object:receiver Object:data Object:data.entities Object:data.entities.by Object:data.entities.by.entity Object:data.entities.for Object:data.entities.for.entity Object:data.entities.on Object:data.entities.on.entity Object:callInitiator Object:callReceiver Object:onCallEnded() callback):
Call CometChat.clearActiveCall() to clear the local call state, then call CometChatCalls.endSession() to release media resources.
- JavaScript
- TypeScript
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. CallCometChatCalls.endSession() in the onCallEndButtonPressed() callback to release all media resources and disconnect from the call session.
- JavaScript
- TypeScript
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.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.- JavaScript
- TypeScript
Mute Audio
Controls the local audio stream transmission. When muted, other participants cannot hear the local user.true— Mutes the microphone, stops transmitting audiofalse— Unmutes the microphone, resumes audio transmission
- JavaScript
- TypeScript
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 videofalse— Resumes the camera, continues video transmission
- JavaScript
- TypeScript
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 earpieceCometChat.AUDIO_MODE.BLUETOOTH— Connected Bluetooth deviceCometChat.AUDIO_MODE.HEADPHONES— Wired headphones
- JavaScript
- TypeScript
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 theonCallSwitchedToVideo() callback.
- JavaScript
- TypeScript
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 usingsetAudioMode().
- JavaScript
- TypeScript
Response
Response
getAudioOutputModes() returns an object containing an array of available audio modes:Response Object:modes array):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.- JavaScript
- TypeScript
Best Practices
Generate call tokens just before use
Generate call tokens just before use
Always handle call end in both flows
Always handle call end in both flows
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.Clean up listeners on component unmount
Clean up listeners on component unmount
useEffect). Orphaned listeners can cause memory leaks, duplicate event handling, and unexpected behavior when navigating between screens.Wrap the call component in a full-screen container
Wrap the call component in a full-screen container
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.Use unique listener IDs per component instance
Use unique listener IDs per component instance
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
Call token generation fails
Call token generation fails
CometChat.getLoggedinUser() to verify the user session is active. If the auth token has expired, re-authenticate the user before generating a call token.Call UI does not render
Call UI does not render
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.Listeners not firing
Listeners not firing
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().onCallEnded not triggered in group calls
onCallEnded not triggered in group calls
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.Audio or video not working after call starts
Audio or video not working after call starts
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.