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" />
   <!-- 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>
...

Step: 2 Download the below asset file zip and extract. open ios project workspace in xcode. Right click on your project directory and select Add files into [your_project] ( or drag into it ). Select the extracted files. Check 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,
   }
   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
hasNativeBaseProvider	Whether or not you already have `NativebaseProvider` in the parent component	Boolean	false
jid	If you want to show only a specific user's chat screen, then you can pass the jid of the user.	String	false

Call Setup#

Call UIKit setup in Android#

Call UIKit setup in iOS#

Call UIKit setup in JS#

Sample code to setup index.js.#

Render Mirrorfly component#

note

Sample code to setup `index.js`.#