npm install @throttlecode/react-native-drago-callkit
# or
yarn add @throttlecode/react-native-drago-callkit

# Run postinstall script (required)
node node_modules/@throttlecode/react-native-drago-callkit/scripts/postinstall.js

iOS Setup

cd ios && pod install && cd ..

Android Setup

No additional steps required - auto-linking handles everything!

🔧 Configuration

1. Push Notification Setup (Optional)

DragoCallKit works standalone, but for remote notifications you'll need a push notification service like:

Firebase Cloud Messaging (FCM)
OneSignal
AWS SNS
Custom push server

🤖 Android Permissions

Add required permissions to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
<uses-permission android:name="android.permission.MANAGE_OWN_CALLS" />

🍎 iOS Configuration

1. Info.plist Configuration

Add required permissions and background modes to ios/YourApp/Info.plist:

<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
    <string>voip</string>
    <string>remote-notification</string>
    <string>fetch</string>
</array>

<key>NSCameraUsageDescription</key>
<string>This app needs camera access for video calls</string>

<key>NSMicrophoneUsageDescription</key>
<string>This app needs microphone access for voice and video calls</string>

2. AppDelegate.swift Setup (Optional - for push notifications)

If using push notifications, update ios/YourApp/AppDelegate.swift:

import UIKit
import UserNotifications
import PushKit
import CallKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate, UNUserNotificationCenterDelegate, PKPushRegistryDelegate {
  
  var window: UIWindow?
  
  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    
    // Setup notification center delegate
    UNUserNotificationCenter.current().delegate = self
    
    // Request notification permissions
    UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .sound, .badge]) { granted, error in
      if granted {
        DispatchQueue.main.async {
          application.registerForRemoteNotifications()
        }
      }
    }
    
    // Setup VoIP push notifications (optional)
    setupVoIPPushNotifications()
    
    return true
  }
  
  // MARK: - VoIP Push Setup (Optional)
  func setupVoIPPushNotifications() {
    let voipRegistry = PKPushRegistry(queue: DispatchQueue.main)
    voipRegistry.delegate = self
    voipRegistry.desiredPushTypes = [.voIP]
  }
  
  // MARK: - PKPushRegistryDelegate
  func pushRegistry(_ registry: PKPushRegistry, didUpdate pushCredentials: PKPushCredentials, for type: PKPushType) {
    let token = pushCredentials.token.map { String(format: "%02x", $0) }.joined()
    print("VoIP Push Token: \(token)")
    // Send token to your server
  }
  
  func pushRegistry(_ registry: PKPushRegistry, didReceiveIncomingPushWith payload: PKPushPayload, for type: PKPushType, completion: @escaping () -> Void) {
    print("Incoming VoIP push received: \(payload.dictionaryPayload)")
    // Handle incoming call
    completion()
  }
  
  // MARK: - UNUserNotificationCenterDelegate
  func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
    completionHandler([.banner, .sound, .badge])
  }
  
  func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
    completionHandler()
  }
}

💻 Code Implementation

1. Initialize DragoCallKit

In your index.js:

import DragoCallKit from '@throttlecode/react-native-drago-callkit';
import { AppRegistry } from 'react-native';

// Setup DragoCallKit immediately
DragoCallKit.setup({
  ios: {
    appName: 'YourApp',
    supportsVideo: true,
    includesCallsInRecents: true,
  },
  android: {
    alertTitle: 'Phone Account Permission',
    alertDescription: 'This app needs permission to manage phone calls',
    cancelButton: 'Cancel',
    okButton: 'OK',
  },
})
  .then(() => console.log('✅ DragoCallKit Setup complete'))
  .catch((error) => console.error('❌ DragoCallKit Setup failed:', error));

AppRegistry.registerComponent('YourApp', () => App);

🎯 API Reference

Core Methods

Display Incoming Call

DragoCallKit.displayIncomingCall({
  uuid: string;                    // UUID format: 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
  handle: string;                  // Phone number
  localizedCallerName: string;     // Caller name
  hasVideo: boolean;               // true for video, false for audio
});

End Call

DragoCallKit.endCall(callUUID: string);

Show Ongoing Notification (Android)

After accepting a call, show persistent notification:

DragoCallKit.showOngoingNotification(
  callUUID: string,      // Call UUID
  callerName: string,    // Caller name
  callType: 'audio' | 'video'
);

Example:

// After call is answered
DragoCallKit.addEventListener('answerCall', async (data) => {
  // For Android - show ongoing notification
  if (Platform.OS === 'android') {
    await DragoCallKit.showOngoingNotification(
      data.callUUID,
      'John Doe',
      'video'
    );
  }
  
  // Navigate to call screen
  navigation.navigate('VideoCall', { callUUID: data.callUUID });
});

Events

// Call answered
DragoCallKit.addEventListener('answerCall', (data) => {
  console.log(data.callUUID);
});

// Call ended
DragoCallKit.addEventListener('endCall', (data) => {
  console.log(data.callUUID);
});

// Mute toggled
DragoCallKit.addEventListener('didPerformSetMutedCallAction', (data) => {
  console.log(data.muted, data.callUUID);
});

🐛 Troubleshooting

CallKit not showing:

Ensure UUID is in proper format: xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
Check permissions are granted
Use localizedCallerName not callerName (iOS)

Permissions denied:

import { PermissionsAndroid } from 'react-native';

await PermissionsAndroid.requestMultiple([
  PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
  PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE,
]);

📝 Important Notes

UUID Format: Always use UUID v4 format: xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
Testing: Use real devices for best results
Permissions: Request at runtime for Android 13+

📄 License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

See LICENSE file for more details.