Let's integrate our UIKIT in few minutes

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 PropertiesDescriptionTypeRequired
remoteMessageMessage data received from the firebase message listenerObjecttrue
apiBaseUrlAPI Base URL for BackendStringtrue
licenseKeyMirrorfly's License KeyStringtrue
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

ArgumentsDescriptionTypeRequired
jidIf you want to show only a specific user's chat screen, then you can pass the jid of the user.Stringfalse