> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup

> CometChat Calling SDK v4 - Stable Release - Setup for React Native

<Info>
  **Quick Reference** - Install and initialize the Calls SDK:

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

  // Initialize on app startup
  import { CometChatCalls } from "@cometchat/calls-sdk-react-native";
  const callAppSettings = new CometChatCalls.CallAppSettingsBuilder()
    .setAppId("APP_ID")
    .setRegion("REGION")
    .build();
  await CometChatCalls.init(callAppSettings);
  ```
</Info>

## Get your Application Keys

[Signup for CometChat](https://app.cometchat.com) and then:

1. Create a new app
2. Head over to the **API & Auth Keys** section and note the **Auth Key**, **App ID** & **Region**

## Add the CometChatCalls Dependency

Install the package as NPM module:

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

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @cometchat/calls-sdk-react-native
    ```
  </Tab>
</Tabs>

The CometChat Calls SDK also requires the below dependencies to be installed.

<Tabs>
  <Tab title="package.json">
    ```json theme={null}
    {
      "@cometchat/chat-sdk-react-native": "^4.0.18",
      "@react-native-async-storage/async-storage": "^1.23.1",
      "@react-native-community/netinfo": "^11.3.1", // for react-native 0.63 & above.
      "@react-native-community/netinfo": "6.1.0", // for react-native below 0.63
      "react-native-background-timer": "^2.4.1",
      "react-native-callstats": "^3.73.7",
      "react-native-webrtc": "^1.106.1"
    }
    ```
  </Tab>
</Tabs>

## Permissions

<Note>
  If you're using Expo, please refer to the [Expo Integration Guide](/calls/v4/react-native/expo-integration-guide) for setting up permissions.
</Note>

### Android

You need to add the below in your App's `AndroidManifest.xml` file.

<Tabs>
  <Tab title="AndroidManifest.xml">
    ```xml theme={null}
    <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" />
    ```
  </Tab>
</Tabs>

Also in the same file in `buildscript` section in `ext` block make sure you have set **minSdkVersion** to **24.**

<Tabs>
  <Tab title="build.gradle">
    ```gradle theme={null}
    buildscript {
      ext {
          buildToolsVersion = "29.0.2"
          minSdkVersion = 24
          compileSdkVersion = 29
          targetSdkVersion = 29
      }
    }
    ```
  </Tab>
</Tabs>

### iOS

You need to add the below in your App's `Info.plist` file.

<Tabs>
  <Tab title="Info.plist">
    ```xml theme={null}
    <key>NSCameraUsageDescription</key>
    <string>This is for Camera permission</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>This is for Mic permission</string>
    ```
  </Tab>
</Tabs>

Also, update the minimum target version in the Podfile. Goto `./ios` folder and open the `Podfile`. In the Podfile update the platform version to `12.0.`

<Tabs>
  <Tab title="Podfile">
    ```
    platform :ios, '12.0'
    ```
  </Tab>
</Tabs>

Open the `ios/App` folder and run `pod install` this will create an `App.xcworkspace` open this and run the app.

## Initialize CometChatCalls

The init() method initialises the settings required for CometChatCalls. The init() method takes a single paramater, that is the instance of CallAppSettingsBuilder class.

The `CallAppSettings` class allows you to configure three settings:

* **App ID**: CometChat app ID.
* **Region**: The region where you app was created.
* **Host(host: string)**: This method takes the client URL as input and uses this client URL instead of the default client URL. This can be used in case of dedicated deployment of CometChat.

You need to call `init()` before calling any other method from CometChatCalls. We suggest you call the `init()` method on app startup, preferably in the `App.tsx` file.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import { CometChatCalls } from "@cometchat/calls-sdk-react-native";

    let appID = "APP_ID";
    let region = "REGION";

    const callAppSettings = new CometChatCalls.CallAppSettingsBuilder()
      .setAppId(appID)
      .setRegion(region)
      .build();

    CometChatCalls.init(callAppSettings).then(
      () => {
        console.log("CometChatCalls initialization completed successfully");
      },
      (error) => {
        console.log("CometChatCalls initialization failed with error:", error);
      }
    );
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    import { CometChatCalls } from "@cometchat/calls-sdk-react-native";

    let appID = "APP_ID";
    let region = "REGION";

    const callAppSetting = new CometChatCalls.CallAppSettingsBuilder()
      .setAppId(appID)
      .setRegion(region)
      .build();

    CometChatCalls.init(callAppSetting).then(
      () => {
        console.log("CometChatCalls initialization completed successfully");
      },
      (error) => {
        console.log("CometChatCalls initialization failed with error:", error);
      }
    );
    ```
  </Tab>
</Tabs>

<Warning>
  Make sure you replace the `APP_ID` with your CometChat `AppID` and `REGION` with your **App Region** in the above code.
</Warning>

| Parameter         | Description                              |
| ----------------- | ---------------------------------------- |
| `callAppSettings` | An object of the `CallAppSettings` class |

<AccordionGroup>
  <Accordion title="Best Practices">
    * Initialize `CometChatCalls` right after `CometChat.init()` on app startup
    * Always call `CometChatCalls.init()` before using any calling methods
    * Request camera and microphone permissions at runtime before initiating calls
    * Use the correct `netinfo` version based on your React Native version (0.63+ vs below)
    * Run `pod install` after adding dependencies to ensure iOS native modules are linked
  </Accordion>

  <Accordion title="Troubleshooting">
    * **Initialization fails:** Verify your App ID and Region match the values in your CometChat Dashboard
    * **Android build fails:** Ensure `minSdkVersion` is set to 24 or higher in `build.gradle`
    * **iOS build fails:** Run `pod install` in the `ios` directory and open the `.xcworkspace` file (not `.xcodeproj`)
    * **Permission denied errors:** Confirm camera and microphone permissions are declared in `AndroidManifest.xml` and `Info.plist`
    * **Module not found:** Make sure all required peer dependencies are installed — check the dependency list above
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Calling Overview" icon="phone" href="/calls/v4/react-native/overview">
    Choose the right calling implementation for your use case.
  </Card>

  <Card title="Ringing Flow" icon="phone-volume" href="/calls/v4/react-native/ringing">
    Implement the complete incoming/outgoing call experience.
  </Card>

  <Card title="Call Session" icon="video" href="/calls/v4/react-native/call-session">
    Manage call sessions with custom initiation logic.
  </Card>

  <Card title="Recording" icon="circle-dot" href="/calls/v4/react-native/recording">
    Record audio and video calls for playback or compliance.
  </Card>
</CardGroup>