Call Setup

Call UIKit setup in Android

Step 1: Download the below zip file and extract. Copy all the files inside the extracted folder and paste it inside project/android/app/src/main/java/com/[packageName]. After pasted all the files add the MFModule in MainApplication.java file as mentioned in the below code snippet.

Download Android native module files

Download

public class MainApplication extends Application implements ReactApplication {

...

private final ReactNativeHost mReactNativeHost =

new ReactNativeHost(this) {

...

@Override

protected List<ReactPackage> getPackages() {

...

packages.add(new MFModule()); // <- Add this line

return packages;

}

};

}

Step 2: Update the package name in the first line of all the pasted files (extracted files from the zip) to your app package name/folder name as mentioned below.

- package com.mirrorfly_rn;

+ package [your_package_name]; // For Example -> package com.contusapp;

...

Step 3: Add the below permissions in android/app/src/main/AndroidManifest.xml file.

<manifest ... >

...

<!-- Calls permission starts here-->

<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

<uses-permission android:name="android.permission.VIBRATE" />

<uses-permission android:name="android.permission.WAKE_LOCK" />

<uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

<uses-permission android:name="android.permission.RECORD_AUDIO" />

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.BLUETOOTH" />

<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />

<uses-feature

android:name="android.hardware.bluetooth"

android:required="true" />

<uses-feature

android:name="android.hardware.bluetooth_le"

android:required="true" />

<uses-feature

android:glEsVersion="0x00020000"

android:required="true" />

<!-- Calls permission ends here-->

...

</manifest>

Step 4: Open android/app/src/main/AndroidManifest.xml file and add the below intent-filter inside MainActivity tag as mentioned below

<manifest ...>

...

<application ...>

...

<activity

android:name=".MainActivity"

...

>

...

<!-- Add the below intent filter section -->

<intent-filter>

<action android:name="android.intent.action.VIEW" />

<category android:name="android.intent.category.DEFAULT" />

<category android:name="android.intent.category.BROWSABLE" />

<data android:scheme="[your_scheme]" />

</intent-filter>

</activity>

...

</application>

</manifest>

Note: replace [your_scheme] with the scheme name you want for your application.

Step 5: Add the call screen activity code after the main activity as below code in android/app/src/main/AndroidManifest.xml file.

<manifest ... >

...

<!-- after MainActivity tag paste the below activity code -->

<activity

android:name=".CallScreenActivity"

android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation|keyboard|keyboardHidden|uiMode"

android:excludeFromRecents="true"

android:exported="false"

android:launchMode="singleTask"

android:lockTaskMode="if_whitelisted"

android:resizeableActivity="false"

android:screenOrientation="portrait"

android:showOnLockScreen="true"

android:showWhenLocked="true"

android:supportsPictureInPicture="true"

android:turnScreenOn="true"

android:windowSoftInputMode="stateHidden" />

...

</manifest>

Step 6: Download the below asset file zip and extract. Copy the ic_call_notification.png & ic_notification.png & ic_video_call.png files and paste it inside android/app/src/main/res/drawable/ folder. Copy the fly_reconnecting_tone.mp3 & incallmanager_ringback.mp3 files and paste it inside android/app/src/main/res/raw/ folder.

Download Android assets

Download

Call UIKit setup in iOS

Step 1: Add the microphone and camera permission code in Info.plist file as below.

...

<key>NSMicrophoneUsageDescription</key>

<string>This app require your microphone</string>

<key>NSCameraUsageDescription</key>

<string>This is app require your camera</string>

...

Note :Click here to check if you have already declared information in the Notification Configuration. After configuring this, only the CallKit will work. If you have already done so, please disregard this message.

Step: 2 Download the provided module file ZIP, extract its contents, open your iOS project workspace in Xcode, right-click on your project directory, select Add files into [your_project] (or drag the files into your project directory), Select the extracted files, check the copy file if needed checkbox, And then click Ok.

Download IOS native module files

Download

Step: 3 Download the provided asset file ZIP, extract its contents, open your iOS project workspace in Xcode, right-click on your project directory, select Add files into [your_project] (or drag the files into your project directory), Select the extracted files, check the copy file if needed checkbox, And then click Ok.

Download iOS assets

Download

Call UIKit setup in JS

Open the index.js file in the root of your project. Import mirrorflyNotificationHandler and setupCallScreen from mirrorfly-uikit-react-native package. Add notification background and foreground event listeners and pass the remoteMessage to the mirrorflyNotificationHandler. Call the setupCallScreen function.

let API_URL = 'API_URL';

let lisenceKey = 'lisenceKey' ;

let remoteMessageData = {

remoteMessage: message,

apiBaseurl: API_URL,

licenseKey: lisenceKey,

}

mirrorflyNotificationHandler(remoteMessageData);

Param Object

Object Properties	Description	Type	Required
remoteMessage	Message data received from the firebase message listener	Object	true
apiBaseUrl	API Base URL for Backend	String	true
licenseKey	Mirrorfly's License Key	String	true

setupCallScreen();

Sample code to setup index.js.

import {AppResgistry} from 'react-native';

...

// add the below imports

import { mirrorflyNotificationHandler, setupCallScreen } from 'mirrorfly-uikit-react-native';

import messaging from '@react-native-firebase/messaging';

// add setBackgroundMessageHandler for background/killed state notification

messaging().setBackgroundMessageHandler(message => {

let API_URL = 'API_URL';

let lisenceKey = 'lisenceKey' ;

let remoteMessageData = {

remoteMessage: message,

apiBaseurl: API_URL,

licenseKey: lisenceKey,

}

mirrorflyNotificationHandler(remoteMessageData);

});

// add onMessage for foreground state notification

messaging().onMessage(message => {

let API_URL = 'API_URL';

let lisenceKey = 'lisenceKey' ;

let remoteMessageData = {

remoteMessage: message,

apiBaseurl: API_URL,

licenseKey: lisenceKey,

}

if (message?.data.type === 'mediacall') {

mirrorflyNotificationHandler(remoteMessageData);

}

});

// call setupCallScreen for setup call related modules

setupCallScreen();

...

Render Mirrorfly component

You can import the MirrorflyComponent from mirrorfly-uikit-react-native package. This component will render both chat and call. You can render the component as mentioned in the code below.

note

You should have called the mirrorflyInitialize function as mentioned here before rendering the component

import { MirrorflyComponent } from "mirrorfly-uikit-react-native"

function YourComponent() {

return <MirrorflyComponent />;

}

Props for the MirrorflyComponent component

Arguments	Description	Type	Required
jid	If you want to show only a specific user's chat screen, then you can pass the jid of the user.	String	false