Let's integrate our UIKIT in few minutes

Quick Start#

SDK UIKit for React Native#

Mirrorfly UIKit Sdk is a set of prebuilt UI components that allows you to easily integrate an in-app chat with all the essential messaging features.

Requirements#

The requirements for chat SDK for React Native Mobile App are:

React-Native >= 0.73.0 <=0.75.4
Node Version >= 18.20.4
npm - 10.7.0

Things to be Noted Before Making a Start#

SDK License Key#

Before integrating CONTUS MirrorFly Chat SDK, you need to have a SDK license key for your MirrorFly application. This SDK needs to be authenticated by the MirrorFly server using the license key for further processing.

To get the License Key,#

Step 1: Register here to get a MirrorFly User account. Registration is subject to verification and would take up to 24 hours.

Step 2: Login to your Account

Step 3: Get the License key from the application Info’ section

license-key

Integration#

Install mirrorfly-uikit-react-native (https://www.npmjs.com/package/mirrorfly-uikit-react-native) npm package by terminal command 'npm i mirrorfly-uikit-react-native'. Now the node_modules will have a mirrorfly-uikit-react-native folder and package.json is added with the mirrorfly-uikit-react-native dependency.

Step 1: Create a new React Native project or Open an existing project.

Adding dependencies#

Note : Before installing the patch-package need to download the patch files and paste that files in root folder.

Download Patch Files

Download

Step 2: Open terminal and install patch-package with npm command 'npm i patch-package -f' and check package.json whether the dependency is added.

"dependencies": {
 "patch-package": "^8.0.0",
}

Step 3: After installing the patch-package add the below lines in package.json under scripts

"scripts": {
 ...
 "prepare": "patch-package"
}

Step 4: Open terminal and install mirrorfly-uikit-react-native with npm command 'npm i mirrorfly-uikit-react-native' and check package.json whether the dependency is added.

"dependencies": {
 "mirrorfly-uikit-react-native": "^1.4.8",
 "mirrorfly-reactnative-sdk": “^1.0.19”,
 "react-native": >= 0.73.0 <=0.75.4,
 }

Step 5: Open the metro.config.js and update the code as mentioned below.

   const {getDefaultConfig} = require('metro-config');
   module.exports = (async () => {
   const {
     resolver: {sourceExts, assetExts},
   } = await getDefaultConfig();
   return {
     transformer: {
       getTransformOptions: async () => ({
         transform: {
           experimentalImportSupport: false,
           inlineRequires: true,
         },
       }),
     },
     resolver: {
       assetExts: assetExts.filter(ext => ext !== 'svg'),
       sourceExts: [...sourceExts, 'svg', 'cjs'],
     },
   };
   })();

Step 6: Install required dependencies enter the following code on the command line for adding the below dependencies in package.Json.

Note : realm@10.8.0 must use the realm version 10.8.0 in v 0.69.12,
if errors occurs like this > Task :realm:send FAILED, Add the following line in this file <app>/android/settings.gradle
startParameter.excludedTaskNames.add(':realm:send');

Note : if errors occurs like this > could not invoke RNAndroidLocationEnabler.promptForEnableLocationIfNeeded. found interface com.google.android.gms.location.settingsclient, but class was expected (declaration of 'com.google.android.gms.location.SettingsClient' appears in /data/app/~~dQIJYPyV_0zb5PG-2RsSMg==/applicationId-s0 mk9yoRtp0KWm9j-w-wQ==/ base.apk),

Add the following line in this file <app>/android/build.gradle

allprojects {
   repositories {
     ...
     //** add this line
     configurations.all {
         resolutionStrategy {
             force "com.google.android.gms:play-services-location:21.0.1"
         }
     }
   }
}

Step 7: Install all the dependencies in terminal

  npm i @notifee/react-native@9.1.3 \
    @react-native-camera-roll/camera-roll@7.8.4 \
    @react-native-clipboard/clipboard@1.15.0 \
    @react-native-community/checkbox@0.5.17 \
    @react-native-community/netinfo@11.4.1 \
    @react-native-firebase/app@21.6.0 \
    @react-native-firebase/messaging@21.6.0 \
    @react-navigation/native@6.1.17 \
    @react-navigation/native-stack@6.9.26 \
    @reduxjs/toolkit@2.2.3 \
    emoji-datasource@15.1.2 \
    mirrorfly-reactnative-sdk@1.0.19 \
    moment@2.30.1 \
    react-native-camera@4.2.1 \
    react-native-compressor@1.9.0 \
    react-native-contacts@8.0.4 \
    react-native-convert-ph-asset@1.0.3 \
    react-native-create-thumbnail@2.0.0 \
    react-native-document-picker@9.3.1 \
    react-native-file-viewer@2.1.5 \
    react-native-fs@2.20.0 \
    react-native-gesture-handler@2.21.2 \
    react-native-get-random-values@1.11.0 \
    react-native-heic-converter@1.3.3 \
    react-native-image-crop-picker@0.41.5 \
    react-native-maps@1.7.1 \
    react-native-pager-view@6.4.1 \
    react-native-permissions@5.2.1 \
    react-native-progress@5.0.1 \
    react-native-safe-area-context@4.14.0 \
    react-native-screens@4.3.0 \
    react-native-simple-toast@3.3.1  \
    react-native-sound@0.11.2 \
    react-native-svg@15.9.0 \
    react-native-svg-transformer@1.3.0 \
    react-native-tab-view@3.5.2 \
    react-native-video@5.2.1 \
    react-redux@9.1.2 \
    rn-fetch-blob@0.12.0 \
    realm@20.1.0 \
    react-native-image-zoom-viewer@3.0.1 \
    @react-native-community/checkbox@0.5.17 \
    react-native-incall-manager@4.1.0 \
    react-native-webrtc@124.0.4 \
    react-native-keep-awake@4.0.0 \
    react-native-raw-bottom-sheet@2.2.1 \
    react-native-background-timer@2.4.1 \
    react-native-headphone-detection \
    react-native-voip-push-notification@3.3.2 \
    react-native-material-menu@2.0.0 \
    react-native-keyevent@0.3.2 \
    react-native-ringer-mode@2.0.1 \
    react-native-simple-toast@3.3.1 \
    react-native-geolocation-service@5.3.1 \
    react-native-geocoder@0.5.0 --legacy-peer-deps

Note: Follow the installation instruction for the @react-native-firebase package

Step 8: You can check here about what are the permissions.

Change Android dependency#

Step 9: Add the below lines in android app folder build.gradle file under android defaultConfig.

android {
   ...
   defaultConfig {
      ...
      //Add these below lines
      missingDimensionStrategy 'react-native-camera', 'general'
      multiDexEnabled true
   }
}

Change iOS dependency#

Step 11: Add the below lines in ios app folder Podfile file under target 'app_name' do.

  config = use_native_modules!
  $RNFirebaseAsStaticFramework = true <== Add this line
  use_frameworks! :linkage => :static <== Add this line

  # :flipper_configuration => FlipperConfiguration.enabled, <== if this line exists comment it

Step 12: After installing the react-native-permissions add the below lines in package.json and run the command npx react-native setup-ios-permissions

"reactNativePermissionsIOS": [
    "AppTrackingTransparency",
    "BluetoothPeripheral",
    "Calendars",
    "Camera",
    "Contacts",
    "FaceID",
    "LocationAccuracy",
    "LocationAlways",
    "LocationWhenInUse",
    "MediaLibrary",
    "Microphone",
    "Motion",
    "Notifications",
    "PhotoLibrary",
    "PhotoLibraryAddOnly",
    "Reminders",
    "Siri",
    "SpeechRecognition",
    "StoreKit"
  ],

Step 13: Import ChatApp component from the mirrorfly-uikit-react-native.

The apiUrl and licenseKey details can get it from the 'Overview' section in the mirrorfly Console dashboard.

license-key

Initialize MirrorFly React Native UIKit#

To initialize the mirrorfly, place the below code in your App.js file inside useEffect.

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

   function App() {

      React.useEffect(() => {
         (async () => {
            const initializeResponse = await mirrorflyInitialize({
              apiBaseUrl: API_URL,
              licenseKey: LICENSE_KEY,
              isSandbox: true,
              callBack: res => {
                console.log(res);
              },
            });
         })();
      }, []);
    
    return(
      <>
        <YourComponent/>
      </>
    )
   }

  export default App;

Argument	Type	Description
LICENSE_KEY	`String`	set your licence key
API_URL	`String`	set your base url
callBack	`function`	Call back function

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

function YourComponent() {

  return (
      <MirrorflyComponent />;
    );
  }
export default YourComponent;

Note : Great!!! We are now end of the Quick Start section. For Advanced options. Click Here