Call

npm install @cometchat/calls-sdk-react-native

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

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

android {
    namespace "com.org.name_of_your_app"

    compileSdkVersion 33

    defaultConfig {

        minSdkVersion 24

        targetSdkVersion 33

    }

}

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

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>
  );
};