react-native-voip-call

Getting started

Npm

1$ npm install react-native-voip-call --save

Yarn

1$ yarn add react-native-voip-call

Mostly automatic installation RN < 0.60.x

$ react-native link react-native-voip-call

ios Installation

1$ cd ios && pod install

Link required libraries Click on Build Phases tab, then open Link Binary With Libraries.

Add CallKit.framework and Intents.framework (and mark it Optional).

Usage of RNVoip Call

import this package as your needed places

1  import RNVoipCall  from 'react-native-voip-call';

1. initialize Call (IOS Required)

1    let options = {
2      appName:'RNVoip App', // Required
3      imageName:  'logo',  //string (optional) in ios Resource Folder
4      ringtoneSound : '', //string (optional) If provided, it will be played when incoming calls received
5      includesCallsInRecents: false, // boolean (optional) If provided, calls will be shown in the recent calls 
6      supportsVideo : true //boolean (optional) If provided, whether or not the application supports video calling (Default: true)
7    }
8    // Initlize Call Kit IOS is Required
9    RNVoipCall.initializeCall(options).then(()=>{
10     //Success Call Back
11    }).catch(e=>console.log(e));
12

2. display Incomming Call

1
2    let callOptions = {
3      callerId:'825f4094-a674-4765-96a7-1ac512c02a71', // Important uuid must in this format
4       ios:{
5        phoneNumber:'12344', // Caller Mobile Number
6        name:'RNVoip', // caller Name
7        hasVideo:true
8       },
9       android:{
10        ringtuneSound: true, // defualt true
11        ringtune: 'ringtune', // add file inside Project_folder/android/app/res/raw
12        duration: 20000, // defualt 30000
13        vibration: true, // defualt is true
14        channel_name: 'call1asd', // 
15        notificationId: 1121,
16        notificationTitle: 'Incomming Call',
17        notificationBody: 'Some One is Calling...',
18        answerActionTitle: 'Answer',
19        declineActionTitle: 'Decline',
20       }
21     }
22
23     RNVoipCall.displayIncomingCall(callOptions).then((data)=>{
24       console.log(data)
25     }).catch(e=>console.log(e))
26

3. call End

1  RNVoipCall.endCall(uuid); // End specific Call
2  RNVoipCall.endAllCalls(); // End All Calls

4. Call Answer Event

1      RNVoipCall.onCallAnswer(data => {
2          console.log(data);
3    });
4

5. Call End Event

1      RNVoipCall.onEndCall(data => {
2          console.log(data);
3    });
4

6.Check Call Active (Ios Only)

1  RNVoipCall.isCallActive(uuid);

7. Event Listener (Ios only)

1  RNVoipCall.addEventListener('didDisplayIncomingCall', ({ error, callUUID, handle, localizedCallerName, hasVideo, fromPushKit, payload }) => {
2  
3});
4
5RNVoipCall.addEventListener('didActivateAudioSession', () => {
6  // you might want to do following things when receiving this event:
7  // - Start playing ringback if it is an outgoing call
8});
9
10RNVoipCall.addEventListener('didPerformSetMutedCallAction', ({ muted, callUUID }) => {
11
12});
13

8. call back on android app in background state (Android only)

1RNVoipCall.getInitialNotificationActions().then(data=>console.log(data))
2 .catch(e=>console.log(e));

9. Event Listener (Android only)

1
2    //app open Automatically when Call recived
3    RNVoipCall.onCallOpenAppEvent(event => {
4    
5    });
6    // on click call Notification
7    RNVoipCall.onCallNotificationOpen(event => {
8     
9    });
10    missed call notification taped
11    RNVoipCall.onMissedCallOpen(event => {
12      
13    });
14

10. Play and stop ringtune (Android only)

1       RNVoipCall.playRingtune("ringtune",true); // param1 -> name of the ringtune in inside Project_folder/android/app/res/raw , param2 -> play ringtune as loop 
2       RNVoipCall.stopRingtune();
3

Usage (Background Integration)

1. IOS

1.1 Configure Voip Service to App

1. please Refer and Configure Apple Voice Over IP

2. Make sure you enabled the folowing in Xcode -> Signing & Capabilities:

2.1) Background Modes -> Voice over IP enabled
2.2 )Capability -> Push Notifications 2.3) Add PushKit.framework

3. Add Following Code to Xcode -> project_folder -> AppDelegate.m

1
2...
3
4#import "RNVoipCall.h"                          /* <------ add this line */  
5#import <PushKit/PushKit.h>                    /* <------ add this line */
6#import "RNVoipPushKit.h"                     /* <------ add this line */
7
8@implementation AppDelegate
9
10....
11
12- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
13{
14    ....
15}
16
17
18// --- Handle updated push credentials
19- (void)pushRegistry:(PKPushRegistry *)registry didUpdatePushCredentials:(PKPushCredentials *)credentials forType:(PKPushType)type {
20  // Register VoIP push token (a property of PKPushCredentials) with server
21  [RNVoipPushKit didUpdatePushCredentials:credentials forType:(NSString *)type];
22}
23
24- (void)pushRegistry:(PKPushRegistry *)registry didInvalidatePushTokenForType:(PKPushType)type
25{
26  // --- The system calls this method when a previously provided push token is no longer valid for use. No action is necessary on your part to reregister the push type. Instead, use this method to notify your server not to send push notifications using the matching push token.
27}
28
29
30// --- Handle incoming pushes (for ios <= 10)
31- (void)pushRegistry:(PKPushRegistry *)registry didReceiveIncomingPushWithPayload:(PKPushPayload *)payload forType:(PKPushType)type {
32   NSLog(@"Ajith");
33  
34  
35  
36  [RNVoipPushKit didReceiveIncomingPushWithPayload:payload forType:(NSString *)type];
37}
38
39// --- Handle incoming pushes (for ios >= 11)
40- (void)pushRegistry:(PKPushRegistry *)registry didReceiveIncomingPushWithPayload:(PKPushPayload *)payload forType:(PKPushType)type withCompletionHandler:(void (^)(void))completion {
41  
42  
43  
44  NSString *callerName = @"RNVoip is Calling";
45  NSString *callerId = [[[NSUUID UUID] UUIDString] lowercaseString];
46  NSString *handle = @"1234567890";
47  NSString *handleType = @"generic";
48  BOOL hasVideo = false;
49  
50  
51  @try {
52    if([payload.dictionaryPayload[@"data"] isKindOfClass:[NSDictionary class]]){
53      NSDictionary *dataPayload = payload.dictionaryPayload[@"data"];
54      
55      callerName = [dataPayload[@"name"] isKindOfClass:[NSString class]] ?  [NSString stringWithFormat: @"%@ is Calling", dataPayload[@"name"]] : @"RNVoip is Calling";
56      
57      callerId = [dataPayload[@"uuid"] isKindOfClass:[NSString class]] ?  dataPayload[@"uuid"] : [[[NSUUID UUID] UUIDString] lowercaseString];
58      
59      handle = [dataPayload[@"handle"] isKindOfClass:[NSString class]] ?  dataPayload[@"handle"] : @"1234567890";
60      
61      handleType = [dataPayload[@"handleType"] isKindOfClass:[NSString class]] ?  dataPayload[@"handleType"] : @"generic";
62      
63      hasVideo = dataPayload[@"hasVideo"] ? true : false;
64      
65    }
66  } @catch (NSException *exception) {
67    
68    NSLog(@"Error PushKit payload %@", exception);
69    
70  } @finally {
71    
72    
73    NSLog(@"RNVoip caller id ===> %@    callerNAme  ==> %@ handle  ==> %@",callerId, callerName, hasVideo ? @"true": @"false");
74    
75    NSDictionary *extra = [payload.dictionaryPayload valueForKeyPath:@"data"];
76    
77    [RNVoipCall reportNewIncomingCall:callerId handle:handle handleType:handleType hasVideo:hasVideo localizedCallerName:callerName fromPushKit: YES payload:extra withCompletionHandler:completion];
78    
79    [RNVoipPushKit didReceiveIncomingPushWithPayload:payload forType:(NSString *)type];
80    
81  }
82}
83
84@end
85

4. Add Following Code to Xcode -> project_folder -> info.plist

1<key>UIBackgroundModes</key>
2<array>
3    <string>audio</string>
4    <string>voip</string>
5    <string>fetch</string>
6    <string>remote-notification</string>
7</array>

5. IosPushKitHandler.js

1import React, {useEffect, useState } from 'react';
2import {
3  View,
4  Text,
5  Platform,
6  Button
7} from 'react-native';
8import RNVoipCall, { RNVoipPushKit } from 'react-native-voip-call';
9
10const IsIos = Platform.OS === 'ios';
11
12const log = (data) => console.log('RNVoipCall===> ',data);
13
14const IosPushKitHandler = () => { 
15   const [pushkitToken, setPushkitToken] = useState(''); 
16
17   useEffect(()=>{  
18    iosPushKit(); 
19  },[])
20  
21   const iosPushKit = () => {
22    if(IsIos){
23      //For Push Kit
24      RNVoipPushKit.requestPermissions();  // --- optional, you can use another library to request permissions
25      
26       //Ios PushKit device token Listner
27      RNVoipPushKit.getPushKitDeviceToken((res) => {
28        if(res.platform === 'ios'){
29            setPushkitToken(res.deviceToken)
30        }
31       });
32       
33       //On Remote Push notification Recived in Forground
34       RNVoipPushKit.RemotePushKitNotificationReceived((notification)=>{
35           log(notification);
36       });
37    }
38  }
39  
40    return (
41      <View>
42        <Text>
43          {"push kit token:" + pushkitToken}
44        </Text>
45      </View>
46  );
47};
48
49}
50export default IosPushKitHandler;
51

6. Create pem file for push please Refer generate Cretificate , convert p12 to pem

7. send push sendPush.php

2. Android

Configure and install below 2 packages

1# Install & setup the app module
2yarn add @react-native-firebase/app
3
4# Install the messaging module
5yarn add @react-native-firebase/messaging
6
7# If you're developing your app using iOS, run this command
8cd ios/ && pod install
9

Installation

1. @react-native-firebase/app
2. @react-native-firebase/messaging

Add the below code to index.js in Root folder

1
2import messaging from '@react-native-firebase/messaging';
3import RNVoipCall from 'react-native-voip-call';
4
5messaging().setBackgroundMessageHandler(async remoteMessage => {
6  console.log('Message handled in the background!', remoteMessage);
7  if(Platform.OS === 'android'){
8    let data;
9    if(remoteMessage.data){
10      data = remoteMessage.data;
11    }
12   if(data && data.type === 'call' && data.uuid){
13      let callOptions = {
14         callerId:data.uuid, // Important uuid must in this format
15         ios:{
16          phoneNumber:'12344', // Caller Mobile Number
17          name: data.name, // caller Name
18          hasVideo:true
19         },
20         android:{
21          ringtuneSound: true, // defualt true
22          ringtune: 'ringtune', // add file inside Project_folder/android/app/res/raw --Formats--> mp3,wav
23          duration: 30000, // defualt 30000
24          vibration: true, // defualt is true
25          channel_name: 'call', // 
26          notificationId: 1123,
27          notificationTitle: 'Incomming Call',
28          notificationBody: data.name + ' is Calling...',
29          answerActionTitle: 'Answer',
30          declineActionTitle: 'Decline',
31         }
32       }
33       RNVoipCall.displayIncomingCall(callOptions).then((data)=>{
34        console.log(data)
35      }).catch(e=>console.log(e))
36    }
37  }
38});
39
40

push payload

1{
2  "to":"asgvdsdjhsfdsfd....", //device token
3  "data":{
4    "priority":"high", // Android required for background Notification
5     "uuid":"uuid of user",
6     "name":"RNVoip",
7     "type":"call" // to identify reciving call Notification
8     
9  }
10  
11}

Demo

ios	Android	android( Lockscreen)

Donate

Author

Ajith A B

licenses

MIT