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
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.
Step 1: Register here
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.
Note : Before installing the patch-package need to download the patch files and paste that files in root folder.
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.
Step 3: After installing the patch-package add the below lines in package.json under scripts
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.
Step 5: Open the
metro.config.js and update the code as mentioned below.
Step 6: Install required dependencies enter the following code on the command line for adding the below dependencies in
Note : email@example.com 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
Step 7: After adding all the dependencies need to do npm i -f in terminal
Step 8: Add the below lines in android app folder
build.gradle file under android defaultConfig.
Step 9: Change the below lines to your root
build.gradle file in your Android folder.
Step 10: Add the below lines in ios app folder
Podfile file under
target 'app_name' do.
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
Step 12: Import ChatApp component from the mirrorfly-uikit-react-native.
licenseKey details can get it from the 'Overview' section in the mirrorfly Console dashboard.
To initialize the mirrorfly, place the below code in your
App.js file inside
|LICENSE_KEY||set your licence key|
|API_URL||set your base url|
|callBack||Call back function|
Note : Great!!! We are now end of the Quick Start section. For Advanced options. Click Here