> ## 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.

# Calling Integration

> Add voice and video calling to your React Native UI Kit application

## Overview

This guide walks you through adding voice and video calling capabilities to your React Native application using the CometChat UI Kit.

<Info>
  Make sure you've completed the [Getting Started](/ui-kit/react-native/react-native-cli-integration) guide before proceeding.
</Info>

## Add the Calls SDK

Install the CometChat Calls SDK:

```bash theme={null}
npm install @cometchat/calls-sdk-react-native
```

Once added, the React Native UI Kit will automatically detect it and enable calling features. The [CallButtons](/ui-kit/react-native/call-buttons) component will appear within the [MessageHeader](/ui-kit/react-native/message-header) component.

<Tabs>
  <Tab title="iOS">
    <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>
  </Tab>

  <Tab title="Android">
    <Frame>
      <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/bae9d77f-call_overview_cometchat_screens-a20afca1663c9bd893005bd9bb0fffeb.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=1d06f748907844194dc3d537f5f6f296" width="4498" height="3120" data-path="images/bae9d77f-call_overview_cometchat_screens-a20afca1663c9bd893005bd9bb0fffeb.png" />
    </Frame>
  </Tab>
</Tabs>

## Add Permissions

### Android

Add the following permissions to `android/app/src/main/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>
        <!-- ... -->
    </application>
</manifest>
```

### iOS

Add the following entries to `ios/{appname}/Info.plist`:

```xml theme={null}
<key>NSCameraUsageDescription</key>
<string>Access camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>Access Microphone</string>
```

## Set Up Minimum Versions

### Android

In `android/app/build.gradle`, set the SDK versions:

```groovy theme={null}
android {
    compileSdkVersion 33

    defaultConfig {
        minSdkVersion 24
        targetSdkVersion 33
    }
}
```

### iOS

In Xcode, set `IPHONEOS_DEPLOYMENT_TARGET` to 12.0, or add to your 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
```

<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>

## Set Up Call Listeners

Register a call listener to receive call events in your component:

```tsx theme={null}
import React, { useEffect, useRef, useState } from "react";
import { SafeAreaView } from "react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react-native";

const App = (): React.ReactElement => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [callReceived, setCallReceived] = useState(false);
  const incomingCall = useRef<CometChat.Call | null>(null);
  const listenerID = "UNIQUE_LISTENER_ID";

  useEffect(() => {
    CometChat.addCallListener(
      listenerID,
      new CometChat.CallListener({
        onIncomingCallReceived: (call: CometChat.Call) => {
          incomingCall.current = call;
          setCallReceived(true);
        },
        onOutgoingCallRejected: () => {
          incomingCall.current = null;
          setCallReceived(false);
        },
        onIncomingCallCancelled: () => {
          incomingCall.current = null;
          setCallReceived(false);
        },
      })
    );

    return () => {
      CometChat.removeCallListener(listenerID);
    };
  }, [loggedIn]);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      {loggedIn && callReceived && incomingCall.current ? (
        <CometChatIncomingCall
          call={incomingCall.current}
          onDecline={() => {
            incomingCall.current = null;
            setCallReceived(false);
          }}
        />
      ) : null}
    </SafeAreaView>
  );
};
```