Let's Integrate our React Native Chat SDK in a Few Minutes

Chat SDKs for React Native#

MirrorFly React Native Chat SDK makes the integration quick and easy for every client app & web, with its robust features and functionalities.

On client-side implementation, our chat SDK allows you to initialize and configure the messaging features easily. On server-side implementation, we ensure the most reliable infra-management services for chat features in the react native web & mobile app.

This guided documentation demonstrates how to integrate MirrorFly React Native Chat Messaging SDK in your app in simple steps, so that you can send and receive the messages without any interruption.

note

MirrorFly Chat SDKs use the fastest way in action, to experience the same you must use our trial app to enhance your existing real-time react native messaging app. Download our sample app and make a start with your app development. Click here to download the sample app.

MirrorFly Chat SDK is your go-to solution to quickly build, deploy, and manage in-app chat into your react native messaging apps. Quick start your development by downloading our sample app. Click here

Requirements#

With MirrorFly React Native, make sure that you install all the below mentioned peer dependencies with their specific versions.

  • Node >= 18.20.4
  • npm - 10.7.0
  • react-native >= 0.73.0 <=0.75.4

Things To Be Noted Before You Get Started#

SDK License Key#
caution

Skip this part if you are already having your license key.

To integrate MirrorFly Chat SDK into your app, you will need a SDK License Key. The MirrorFly server will use this license key to authenticate the SDK in your application.

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

Integrate the Chat SDK#

Step 1: Update all your packages.json files.

Step 2: Check your packages files have any duplicate if it is not working in iOS.

Integrate Using Npm package#

note

Install mirrorfly-reactnative-sdk (https://www.npmjs.com/package/mirrorfly-reactnative-sdk/v/2.0.0) npm package by using the below command

Step 3: Install MirrorFly SDK in your React Native app.

npm i mirrorfly-reactnative-sdk@2.0.0

Step 4: Import the SDK into your application where you want

import { SDK } from "mirrorfly-reactnative-sdk";

Adding NPM package dependencies to Integrate the Chat SDK#

{
'@react-native-community/netinfo' : '^11.4.1',
"react-native-get-random-values": "1.11.0", //must use version >=1.7.1
'realm': "^20.1.0",
'react-native-fs': "^2.20.0",
'moment': "2.30.1",
//add the below calls related dependencies
"react-native-webrtc": "124.0.4" // must use version "124.0.4"
"react-native-background-timer": "^2.4.1",
'react-native-permissions':'^5.2.1'
}

Initialize the React Native Messaging SDK#

Before you initialize the real-time React Native Chat SDK, you should have the data which responds to the changes in the connection status of the client app.

Now, paste the license key on the licensekey param and use the below given method to pass these data through the SDK for further processing.

In your App file (e.g., App.tsx or App.js), import the SDK and call the initializeSDK function with the appropriate parameters:

note

You can find the sandbox server details in the further Sandbox section for testing purposes.

const initializeObj = {
apiBaseUrl: `API_URL`,
licenseKey: `LICENSE_KEY`,
isTrialLicenseKey: `TRIAL_MODE`,
callbackListeners: {},
};
await SDK.initializeSDK(initializeObj);

Request Params#

ArgumentsDescriptionTypeRequired
apiBaseUrlAPI Base URL for BackendStringtrue
licenseKeyMirrorfly's License KeyStringtrue
isTrialLicenseKeyif true Trial Mode will be EnabledBooleanfalse
callbackListenersCheck here for callback listernersObjecttrue

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString

Sandbox Details#

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

license-key

function connectionListener(response) {
if (response.status === "CONNECTED") {
console.log("Connection Established");
} else if (response.status === "DISCONNECTED") {
console.log("Disconnected");
}
}
const initializeObj = {
apiBaseUrl: "https://api-preprod-sandbox.mirrorfly.com/api/v1",
licenseKey: "XXXXXXXXXXXXXXXXX",
isTrialLicenseKey: true,
callbackListeners: {
connectionListener
},
};
await SDK.initializeSDK(initializeObj);
note

To learn more about callback listeners, go to the Callback Event Listener Section.

Example Response#

{
"statusCode": 200,
"message": "Success"
}

Register User#

Step 1: You can use the below given method to register a new user.

Step 2: Once you are registered, you will be provided with a username and password that you can utilize to make the connection with the server via connect method.

await SDK.register(USER_IDENTIFIER, FCE_TOKEN, VOIP_DEVICE_TOKEN, MODE, REGISTER_META_DATA, FORCE_REGISTER);

Request Params#

StatusDescriptionTypeRequired
USER_IDENTIFIERUnique Id to Register the User. SDK only accepts the AlphaNumeric String, hyphens(-) and underscores(_)Stringtrue
FCE_TOKENA registration token that is generated by FCM SDK for the user's app instance to send message for freeStringtrue
VOIP_DEVICE_TOKENToken to register VoIP device (optional)Stringtrue
MODEDetermines the build environment for VoIP push notifications. Set to true in production mode and false in development mode.Stringtrue
REGISTER_META_DATAlist of key - value pair of metadata object. Maximum size is 3Stringtrue
FORCE_REGISTERdefault value true provide true to force the logout of the old session If the registered user has reached the maximum no of multi-sessions or provide false to allow registration till the maximum no of multi-sessionsStringtrue
KeywordDescription
USER_IDENTIFIERUnique ID assigned for each user Ex: 12345678 (any alphanumeric). The below characters is not allowed in userId: U+0022 (") U+0026 (&) U+0027 (') U+002F (/) U+003A (:) U+003C (<) U+003E (>) U+0040 (@) userID should follow below specification: https://xmpp.org/extensions/xep-0106.html

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString
dataUsername and PasswordObject

Sample Response:#

{
statusCode: 200,
message: "Success",
data: {
username: "123456789",
password: "987654321"
}
}
caution

username is the unique id that allows you to connect with other users to send or receive messages.

Connect to MirrorFly Server#

Step 1: You can use the credentials that you have obtained while registration to make the connection with the server.

Step 2: Once you have created the connection successfully, you will be responded with an approval message as ‘statusCode of 200’ or else will get an execution error.

Step 3: With this you can also trace the connection status that you receive in connectionListener callback function.

Step 4: If you face any error while making a connection with the server, you will receive an error message with callback.

await SDK.connect(`USERNAME`, `PASSWORD`);

Request Params#

StatusDescriptionTypeRequired
USERNAMEUsernameStringtrue
PASSWORDPasswordStringtrue

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString

Sample Response:#

{
message: "Login Success",
statusCode: 200
}
note

To learn more about all possible logins and profile related setup, go to Profile Section.

Send a Message#

Finally, to send a message to another user you can use the below given method,

note

You can use the const userJid = SDK.getJid(USER_ID) method, to generate a JID for any user.

await SDK.sendTextMessage(`TO_USER_JID`, `MESSAGE_BODY`,`MESSAGE_ID`,`REPLY_TO`);

Request Param#

StatusDescriptionTypeRequired
TO_USER_JIDJID of the To User. username + "@" + xmppSocketHostJID Stringtrue
MESSAGE_BODYText Message BodyStringtrue
MESSAGE_IDText Message IdStringtrue
REPLY_TOSpecifies the Message ID of replied message (Optional)Stringtrue

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString

Response Format:#

{
"message": "",// String - Success/Error Message
"statusCode": "" // Number - status code
}

Receive a Message#

To receive a message from another user you must implement the messageListener function. It’s a function that will be triggered whenever you receive a new message or related event in one-to-one or group chat. Further to initialize the SDK, you need to add the below callback method during the process.

function messageListener(response) {
console.log("Message Listener", response);
}
note

To learn more on 'message listener callbacks,' see the Message Callback Event Listener Section