> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-restapi-chatapi-eng-38785.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Calls SDK

> Use CometChat Calls SDK v5 for React Native to add voice and video calling, call sessions, participants, layouts, and in-call features.

The CometChat Calls SDK enables real-time voice and video calling capabilities in your React Native application. Built on top of WebRTC, it provides a complete calling solution with built-in UI components and extensive customization options.

## Prerequisites

Before integrating the Calls SDK, ensure you have:

1. **CometChat Account**: [Sign up](https://app.cometchat.com/signup) and create an app to get your App ID, Region, and API Key
2. **CometChat Users**: Users must exist in CometChat to use calling features. For testing, create users via the [Dashboard](https://app.cometchat.com) or [REST API](/rest-api/users/create). Authentication is handled by the Calls SDK - see [Authentication](/calls/react-native/authentication)
3. **React Native Requirements**:
   * React Native 0.71 or later (works with both the old architecture and the [New Architecture](/calls/react-native/setup#react-native-new-architecture), including bridgeless mode)
   * Node.js 18 or later
   * iOS: Minimum iOS 13.0, Xcode 14.0+
   * Android: Minimum SDK API Level 24 (Android 7.0)
4. **Permissions**: Camera and microphone permissions for video/audio calls

## Call Flow

```mermaid theme={null}
sequenceDiagram
    participant App
    participant CometChatCalls
    participant Component
    
    App->>CometChatCalls: init()
    App->>CometChatCalls: login()
    App->>CometChatCalls: generateToken()
    App->>Component: Render with callToken
    Component-->>App: Event callbacks
    App->>CometChatCalls: Actions (mute, pause, etc.)
    App->>CometChatCalls: leaveSession()
```

## Features

<CardGroup cols={2}>
  <Card title="Ringing" icon="phone" href="/calls/react-native/ringing">
    Incoming and outgoing call notifications with accept/reject functionality
  </Card>

  <Card title="Call Layouts" icon="grid-2" href="/calls/react-native/call-layouts">
    Tile, Sidebar, and Spotlight view modes for different call scenarios
  </Card>

  <Card title="Audio Modes" icon="volume-high" href="/calls/react-native/audio-modes">
    Switch between speaker, earpiece, Bluetooth, and headphones
  </Card>

  <Card title="Recording" icon="circle-dot" href="/calls/react-native/recording">
    Record call sessions for later playback
  </Card>

  <Card title="Call Logs" icon="clock-rotate-left" href="/calls/react-native/call-logs">
    Retrieve call history and details
  </Card>

  <Card title="Participant Management" icon="users" href="/calls/react-native/participant-management">
    Mute, pin, and manage call participants
  </Card>

  <Card title="Screen Sharing" icon="display" href="/calls/react-native/screen-sharing">
    View screen shares from other participants
  </Card>

  <Card title="Picture-in-Picture" icon="window-restore" href="/calls/react-native/picture-in-picture">
    Continue calls while using other apps
  </Card>

  <Card title="Raise Hand" icon="hand" href="/calls/react-native/raise-hand">
    Signal to get attention during calls
  </Card>

  <Card title="Idle Timeout" icon="timer" href="/calls/react-native/idle-timeout">
    Automatic session termination when alone in a call
  </Card>
</CardGroup>

## Architecture

The SDK is organized around these core components:

| Component                         | Description                                                                             |
| --------------------------------- | --------------------------------------------------------------------------------------- |
| `CometChatCalls`                  | Main entry point for SDK initialization, authentication, and session management         |
| Init settings object              | Plain object (`{ appId, region }`) passed to `init()` to configure the SDK              |
| `sessionSettings` object          | Plain object passed to `CometChatCalls.Component` to configure individual call sessions |
| `CometChatCalls.Component`        | React component that renders the call UI                                                |
| `CometChatCalls.addEventListener` | Subscribe to call events; returns an unsubscribe function                               |

## Single Active Session

`CometChatCalls` is a singleton, and it tracks one active call session at a time. Every session method acts on that current session, which is why methods like `leaveSession()` take no session ID:

```tsx theme={null}
// Acts on whatever session is currently active - no session ID needed
CometChatCalls.leaveSession();
```

| Behavior                            | Detail                                                                                                                     |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| One session at a time               | The SDK does not support being connected to two sessions simultaneously. Leave the current session before joining another. |
| One `Component` at a time           | Render a single `CometChatCalls.Component` for the active call. Mounting two at once is not supported.                     |
| Session methods take no session ID  | `leaveSession()` and the other [actions](/calls/react-native/actions) apply to the active session only.                    |
| Actions apply to the active session | `muteAudio()`, `pauseVideo()`, `switchCamera()`, and similar methods target the session currently in progress.             |
| Events are not session-scoped       | Listeners registered with `addEventListener` fire for the active session.                                                  |

To move a user from one call to another, leave the current session, wait for the `onSessionLeft` event, then generate a token for the new session and render the component with the new token:

```tsx theme={null}
CometChatCalls.addEventListener('onSessionLeft', async () => {
  const { token } = await CometChatCalls.generateToken(nextSessionId);
  setCallToken(token); // Re-renders CometChatCalls.Component with the new session
}, { signal });

CometChatCalls.leaveSession();
```

## Related Documentation

* [Setup](/calls/react-native/setup) - Install and configure the SDK
* [Authentication](/calls/react-native/authentication) - Initialize and authenticate users
* [Join Session](/calls/react-native/join-session) - Start and join calls

## Sample App

<CardGroup cols={2}>
  <Card title="Sample App" icon="github" href="https://github.com/cometchat/calls-sdk-react-native/tree/v5/sample-apps/cometchat-calls-sample-app-react-native">
    Explore the React Native Calls SDK sample app on GitHub
  </Card>

  <Card title="Changelog" icon="list-check" href="https://github.com/cometchat/calls-sdk-react-native/releases">
    View the latest releases and changes
  </Card>
</CardGroup>