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.


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

  • React Version 17.0 or above
  • React-Native 0.69.0
  • Node Version v14.17.4 or above

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



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

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": {
"postinstall": "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.0.8",
"react-native": "0.69.12",
"react": "^17.0.0",

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

npm i react-redux@8.0.5 \
react-native-fs@2.18.0 \
rn-fetch-blob@0.12.0 \
realm@10.8.0 \
fbjs@3.0.5 \
native-base@3.4.28 \
@react-native-camera-roll/camera-roll@6.0.2 \
@react-native-community/checkbox@0.5.16 \
react-native-svg@13.10.0 \
react-native-video@5.2.1 \
react-native-sound@0.11.0 \
moment@2.29.4 \
react-native-screens@3.14.1 \
prop-types@15.8.1 \
react-native-camera@4.2.1 \
react-native-image-zoom-viewer@2.2.14 \
react-native-compressor@1.6.1 \
react-native-document-picker@9.0.1 \
@react-navigation/native@6.0.8 \
emoji-datasource@15.0.1 \
@react-navigation/native-stack@6.9.13 \
@react-native-async-storage/async-storage@1.17.7 \
react-native-mov-to-mp4@0.2.2 \
react-native-image-crop-picker@0.38.0 \
react-native-safe-area-context@4.3.1 \
@react-native-community/netinfo@8.0.0 \
react-native-permissions@3.8.0 \
@react-native-clipboard/clipboard@1.11.2 \
@react-native-firebase/messaging@18.3.0 \
@react-native-firebase/app@18.3.0 \
@types/react@18.0.24 \
react-native-convert-ph-asset@1.0.3 \
react-native-create-thumbnail@1.6.4 \
react-native-file-viewer@2.1.5 \
react-native-get-random-values@1.8.0 \
react-native-push-notification@8.1.1 \
react-native-slider@0.11.0 \
react-native-svg-transformer@1.1.0 \
@react-native-community/push-notification-ios@1.11.0 \
react-native-maps@1.7.1 \
react-native-geolocation-service@5.3.1 \
react-native-geocoder@0.5.0 \
react-native-pager-view@6.2.0 \
react-native-tab-view@3.5.1 \
@notifee/react-native@7.8.0 \
react-native-audio-recorder-player@3.6.0 \
react-native-gesture-handler@2.9.0 \
react-native-progress@5.0.0 \
react-native-geocoding@0.5.0 -f

Step 7: After adding all the dependencies need to do npm i -f in terminal

Change Android dependency#

Step 8: 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

Step 9: Change the below lines to your root build.gradle file in your Android folder.

buildscript {
ext {
//Update the existing value of the below properties
buildToolsVersion = "33.0.0"
compileSdkVersion = 33
targetSdkVersion = 33

Change iOS dependency#

Step 10: 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 11: After installing the react-native-permissions add the below lines in package.json and run the command npx react-native setup-ios-permissions

"reactNativePermissionsIOS": [

Step 12: 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.


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 => {
}, []);
export default App;
LICENSE_KEYStringset your licence key
API_URLStringset your base url
callBackfunctionCall back function
import { ChatApp } from "mirrorfly-uikit-react-native"
function YourComponent() {
return (
<ChatApp />
export default YourComponent;

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