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

# Call

> Integrate one-on-one and group audio/video calling into your React Native app using CometChat's Calls SDK and prebuilt UI components.

<Info>
  **Quick Reference for AI Agents & Developers**

  ```bash theme={null}
  # Install the Calls SDK (required for calling features)
  npm install @cometchat/calls-sdk-react-native
  ```

  ```tsx theme={null}
  import { CometChat } from "@cometchat/chat-sdk-react-native";
  import { CometChatIncomingCall } from "@cometchat/chat-uikit-react-native";

  // Register a call listener to handle incoming calls
  CometChat.addCallListener(
    "call-listener-id",
    new CometChat.CallListener({
      onIncomingCallReceived: (call: CometChat.Call) => {
        console.log("Incoming call:", call);
      },
    })
  );
  ```

  * **Incoming Call** → [CometChatIncomingCall](/ui-kit/react-native/incoming-call)
  * **Outgoing Call** → [CometChatOutgoingCall](/ui-kit/react-native/outgoing-call)
  * **Call Buttons** → [CometChatCallButtons](/ui-kit/react-native/call-buttons)
  * **Call Logs** → [CometChatCallLogs](/ui-kit/react-native/call-logs)
</Info>

CometChat's Calls feature offers advanced functionality for seamlessly integrating one-on-one and group audio/video calling into your application. This document provides a technical overview of how these features are implemented using the React Native UI Kit.

<Note>
  **Calling features** require installing `@cometchat/calls-sdk-react-native` separately. The UI Kit auto-detects it and enables call UI components.
</Note>

## Integration

First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to the [Getting Started](/ui-kit/react-native/react-native-cli-integration) guide.

Once you've successfully integrated the UI Kit, the next step is to add the CometChat Calls SDK to your project. This is necessary to enable the calling features in the UI Kit:

<Tabs>
  <Tab title="Bash">
    ```sh theme={null}
    npm install @cometchat/calls-sdk-react-native
    ```
  </Tab>
</Tabs>

Once the dependency is added, the React Native UI Kit will automatically detect it and enable calling features. Your application will now support both audio and video calls, and the [CallButtons](/ui-kit/react-native/call-buttons) component will appear within the [MessageHeader](/ui-kit/react-native/message-header) component.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/81959c4b-Calling-ee689247c8cdd512c520b85f30683ad8.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=670936936a9978d89c39d3820707d3ae" width="1440" height="833" data-path="images/81959c4b-Calling-ee689247c8cdd512c520b85f30683ad8.png" />
</Frame>

## Add Necessary Permissions

### Android

Open `AndroidManifest.xml` located at `android/app/src/main` in your React Native project and add the following permissions:

<Tabs>
  <Tab title="AndroidManifest.xml">
    ```xml theme={null}
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.org.name_of_your_app" >

        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.CAMERA" />
        <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
        <uses-permission android:name="android.permission.RECORD_AUDIO" />
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

        <application>
            <activity>
            </activity>
            <meta-data />
        </application>
    </manifest>
    ```
  </Tab>
</Tabs>

### iOS

Open `Info.plist` located at `ios/{appname}` in your React Native project and add the following entries:

<Tabs>
  <Tab title="info.plist">
    ```xml theme={null}
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
      <dict>
        <key>NSCameraUsageDescription</key>
        <string>Access camera</string>
        <key>NSMicrophoneUsageDescription</key>
        <string>Access Microphone</string>
      </dict>
    </plist>
    ```
  </Tab>
</Tabs>

## Setup Minimum Android and iOS Versions

For Android, open the app-level `build.gradle` and set `minSdkVersion` to 24, and both `targetSdkVersion` and `compileSdkVersion` to 33.

<Tabs>
  <Tab title="Gradle">
    ```gradle theme={null}
    android {
        namespace "com.org.name_of_your_app"

        compileSdkVersion 33

        defaultConfig {

            minSdkVersion 24

            targetSdkVersion 33

        }

    }
    ```
  </Tab>
</Tabs>

For iOS, open the `.xcworkspace` in Xcode and set `IPHONEOS_DEPLOYMENT_TARGET` to 12.0.

Alternatively, you can specify it in the `post_install` hook of the Podfile:

<Tabs>
  <Tab title="Podfile">
    ```ruby theme={null}
    post_install do |installer|
      installer.pods_project.targets.each do |target|
        target.build_configurations.each do |build_configuration|
          build_configuration.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0'
          build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386'
          build_configuration.build_settings['ENABLE_BITCODE'] = 'NO'
        end
      end
    end
    ```
  </Tab>
</Tabs>

<Warning>
  **Apple Silicon (M1/M2/M3) users:** Excluding `arm64` from the simulator build prevents the app from running natively on Apple Silicon Macs. If you are developing on an Apple Silicon Mac, consider excluding only `i386` instead of `arm64 i386` to enable native simulator builds.
</Warning>

## Add the Call Listeners

In addition to CallButtons, the Calls UI Kit offers fully functional UI components for handling Incoming, Outgoing, and Ongoing calls. To receive call events in your desired component or screen, you must register a call listener using the `addCallListener()` method. The `onIncomingCallReceived()` event is triggered whenever an incoming call is received.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React, { useEffect, useRef, useState } from "react";
    import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import { CometChatIncomingCall, CometChatUIEventHandler } from "@cometchat/chat-uikit-react-native";

    // Track whether the user is logged in
    const [loggedIn, setLoggedIn] = useState(false);
    // Track if there is an incoming call to display
    const [callReceived, setCallReceived] = useState(false);
    // Store the incoming call object for use in the UI
    const incomingCall = useRef<CometChat.Call | CometChat.CustomMessage | null>(
      null
    );
    // Unique ID for registering and removing the call listener
    var listenerID: string = "UNIQUE_LISTENER_ID";

    const App = (): React.ReactElement => {
      useEffect(() => {
        // Register the call listener when the component mounts or when login state changes
        CometChat.addCallListener(
          listenerID,
          new CometChat.CallListener({
            // Fired when an incoming call is received
            onIncomingCallReceived: (call: CometChat.Call) => {
              // Store the incoming call and update state.
              incomingCall.current = call;
              // Trigger UI to show incoming call screen
              setCallReceived(true);
            },
            // Fired when an outgoing call is rejected by the recipient
            onOutgoingCallRejected: () => {
              // Clear the call state if outgoing call is rejected.
              incomingCall.current = null; // Clear the call object
              setCallReceived(false); // Hide any call UI
            },
            onIncomingCallCancelled: () => {
              // Clear the call state if the incoming call is cancelled.
              incomingCall.current = null;
              setCallReceived(false);
            },
          })
        );

        // Register UI Kit-level call listener to handle call end events
        CometChatUIEventHandler.addCallListener(listenerID, {
          ccCallEnded: () => {
            incomingCall.current = null;
            setCallReceived(false);
          },
        });

        // Cleanup: remove both listeners when the component unmounts or before re-running
        return () => {
          CometChat.removeCallListener(listenerID);
          CometChatUIEventHandler.removeCallListener(listenerID);
        };
      }, [loggedIn]); // Re-run effect if the login state changes

      return (
        <SafeAreaProvider>
        <SafeAreaView style={{ flex: 1 }}>
          {/* Render the incoming call UI when logged in and a call has been received */}
          {loggedIn && callReceived && incomingCall.current ? (
            <CometChatIncomingCall
              call={incomingCall.current}
              onDecline={() => {
                // Handle call decline by clearing the incoming call state.
                incomingCall.current = null; // Clear the call object
                setCallReceived(false); // Hide the incoming call UI
              }}
            />
          ) : null}
        </SafeAreaView>
        </SafeAreaProvider>
      );
    };
    ```
  </Tab>
</Tabs>

## Features

### Incoming Call

The [Incoming Call](/ui-kit/react-native/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app.

When a call is made to a user, the Incoming Call component triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d32cebe8-Incoming_callModal-060686ee2b9aa89ad7c163fc8290d390.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=1234f4ad4d442de3c96c72d4610c704d" width="360" height="720" data-path="images/d32cebe8-Incoming_callModal-060686ee2b9aa89ad7c163fc8290d390.png" />
</Frame>

### Outgoing Call

The [Outgoing Call](/ui-kit/react-native/outgoing-call) component of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this component displays an outgoing call screen, showcasing information about the recipient and the call status.

The Outgoing Call component automatically transitions into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2JiXkJ8lq6PmPGlJ/images/703120eb-outgoing_call-c24eb1936c04bb40ea873ac19b973b56.png?fit=max&auto=format&n=2JiXkJ8lq6PmPGlJ&q=85&s=fc41a9e26489f6706d5933679236d06b" width="1440" height="833" data-path="images/703120eb-outgoing_call-c24eb1936c04bb40ea873ac19b973b56.png" />
</Frame>

### Call Logs

The [Call Logs](/ui-kit/react-native/call-logs) component provides records of call events such as who called whom, the time of the call, and the duration. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/7fe2a6db-call_logs-7b4f502153923374898f3887441ab8d2.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=14435b9084f986487b17304c759a86a2" width="1280" height="800" data-path="images/7fe2a6db-call_logs-7b4f502153923374898f3887441ab8d2.png" />
</Frame>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Incoming Call" icon="phone-arrow-down-left" href="/ui-kit/react-native/incoming-call">
    Handle incoming audio and video calls
  </Card>

  <Card title="Outgoing Call" icon="phone-arrow-up-right" href="/ui-kit/react-native/outgoing-call">
    Manage outgoing call screens and transitions
  </Card>

  <Card title="Call Buttons" icon="phone" href="/ui-kit/react-native/call-buttons">
    Add call action buttons to your chat header
  </Card>

  <Card title="Call Logs" icon="clock-rotate-left" href="/ui-kit/react-native/call-logs">
    Display call history and past call activities
  </Card>
</CardGroup>