In this tutorial, I will walk you through the complete process of integrating the MirrorFly Chat SDK into your React Native app. With our React Native Chat SDK, you can create a real-time chat app within just 10 Mins.
Moving forward, we'll cover the following steps:
Before you begin, please ensure you have the following prerequisites:
Now, let's begin the integration.
{
"@react-native-async-storage/async-storage": "^1.17.7",//Any version
"react-native-get-random-values": "1.7.1",//must use version >=1.7.1
"react-native-document-picker" :"8.1.1",// must use version >=8.1.1
'realm': "^10.8.0",
'react-native-fs': "^2.18.0",
'@react-native-community/netinfo': "^8.0.0",
'moment': "2.29.4",
'rn-fetch-blob': "^0.12.0",
'react-native-compressor': "1.6.1",
'react-native-convert-ph-asset': "^1.0.3",
'react-native-mov-to-mp4' :"^0.2.2"
}
Now, the integration begins.
npm install
import './index';
const SDK = window.SDK;
export default SDK;
Now that you've successfully integrated the SDK into your project, it's time to initialize it.
const initializeObj = {
apiBaseUrl: `API_URL`,
licenseKey: `LICENSE_KEY`,
isTrialLicenseKey: `TRIAL_MODE`,
callbackListeners: {},
};
await SDK.initializeSDK(initializeObj);
To utilize the chat functionality, you must first register a user. Use the register method for this purpose:
await SDK.register(`USER_IDENTIFIER`);
Upon successful registration, you will receive a response containing a username and password, which are essential for connecting to the server.
Sample Response
{
statusCode: 200,
message: "Success",
data: {
username: "123456789",
password: "987654321"
}
}
Utilize the credentials acquired during registration to establish a connection to the MirrorFly server. You can achieve this by using the connect method:
await SDK.connect(`USERNAME`, `PASSWORD`);
Sample Response
{
message: "Login Success",
statusCode: 200
}
To send a message to another user, employ the sendTextMessage method:
await SDK.sendTextMessage(`TO_USER_JID`, `MESSAGE_BODY`,`MESSAGE_ID`,`REPLY_TO`);
Ensure that you provide the JID of the recipient, the message body, a unique message ID, and an optional reference to the message being replied to.
Sample Response
{
"message": "",// String - Success/Error Message
"statusCode": "" // Number - status code
}
To receive messages from other users, implement the messageListener function. This function will be triggered each time you receive a new message. You can add this callback method during the initialization process.
function messageListener(response) {
console.log("Message Listener", response);
}
To get the recent chat list on your app, you need to add the following code:
await SDK.getRecentChatsDB();
Sample Response
{
"message": "",// String - Success/Error Message
"statusCode": "" // Number - status code
"data": [
{
"chatType": "chat",
"createdAt": "2023-09-06 10:52:46",
"deleteStatus": 0,
"fromUserId": "", // String - fromUserId
"msgBody": {
"nickName": "",
"mid": "",// String - user mid
"message": "",// String - User Text Mesaage
"message_type": "",// String - User Text Mesaage Type
"replyTo": "",
"mentionedUsersIds": ""
},
"msgId": "",// String - user msgId
"msgStatus": 1,
"msgType": "",// String - msgType
"muteStatus": 0,
"publisherId": "",// String - user Number
"timestamp":"",// number timestamp
"toUserId": "",
"unreadCount": 0,
"userId": "",// String - userId
"userJid": "",// String - userJid
"profileDetails": {
"nickName": "",// String - User Name
"image": "",// String - image
"status": "",//String - User status
"colorCode": "#7b0b88",
"userId": "",// String - userId
"userJid": "",// String - userJid
"email": "",//String - User Email-Id
"mobileNumber": "",//String - User mobile number
"isAdminBlocked": 0
}
},
]
}
To get the message seen status, you’ll need to use the following method:
await SDK.sendSeenStatus(`TO_USER_JID`, `MESSAGE_ID`);
To delete a message sent from the sender’s end, you’ll need to use the following code:
await SDK.deleteMessagesForMe(`TO_JID`, `MESSAGE_IDS`);
Sample Response
{
statusCode: "", // Number - status code
message: "", // String - Success/Error Message
}
To delete a message sent from both the sender and recipient’s end, you’ll need to use the following code:
await SDK.deleteMessagesForEveryone(`TO_JID`, `MESSAGE_IDS`);
Sample Response
{
statusCode: "", // Number - status code
message: "", // String - Success/Error Message
}
To enable push notifications, you need to integrate Firebase into your app. Follow the steps below to achieve this:
Install the firebase package for react native using the following code:
Using NPM
npm install --save @react-native-firebase/app
@react-native-firebase/messaging
Using Yarn
yarn add @react-native-firebase/app
@react-native-firebase/messaging
You must enable the google-services plugin to allow Firebase to use the credentials in Android.
To do this, you’ll need to modify 2 files in the Android directory.
buildscript {
dependencies {
// ... other dependencies
classpath ("com.google.gms:google-services:4.3.15")
// Add me --- /\
}
}
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line
Lastly, Add the following to your AndroidManifest.xml file and execute the plugin.
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
import messaging from '@react-native-firebase/messaging';
const fcmToken = await messaging().getToken();
await SDK.register('USER_IDENTIFIER', 'FCM_TOKEN');
Sample Response
{
statusCode: 200,
message: "Success",
data: {
username: "123456789",
password: "987654321"
}
}
Add the following code to the index.js file.
import messaging from '@react-native-firebase/messaging';
const fcmToken = await messaging().getToken();
await SDK.register('USER_IDENTIFIER', 'FCM_TOKEN');
Sample Response
{
msgType: "", // String - value "receiveMessage"
chatType: "", // String - Chat Type - "chat" - Single
publisherJid: "", // String - Jid - One Who Sends the Message
publisherId: "", // String - Id - One Who Sends the Message
fromUserJid: "", // String - From User Jid -
// Will Be Same as PublisherJid in Case of Single Chat
fromUserId: "", // String - From User Id
toUserJid: "", // String - Jid - One Who Receives the Message
toUserId: "", // String - To User Id - One Who Receives the Message
metaData: {}, //Object - Meta data for the message
msgBody: {
message: "", // String - Message Body
message_type: "", // String - Message Type text, image, video, audio & file
nickName: "", // String - User Nickname
mentionedUsersIds: [] // Array - Mentioned Ids In case of Group
media: { // For Media Message Only
androidHeight: 0,
androidWidth: 0,
audioType: "" // String - "file" or "recording"
caption: "", // String - Media Caption
duration: "", // String - Duration - For Audio/Videos
fileName: "", // String - File Name
file_key: "", // String - File Key
file_size: "", // Number - File Size
file_url: "", // String - File Url
is_downloaded: "", // Number - Downloaded Status
is_uploading: "", // Number - Uploading Status
local_path: "", // String - Local Path
msgId: "", // String - Message Id
originalHeight: 0, // Number
originalWidth: 0, // Number
thumb_image: "", // Base64 - Thumb Image
webHeight: 0, // Number
webWidth: 0, // Number
}
},
msgId: "", // String - Message Id
topicId: "", //String - Topic Id for the message
msgStatus: "", // Number - Message Status
timestamp: 1681185232284, // Number - TimeStamp - Milliseconds
profileDetails:{
{
email: "", // String
fromUser: "", // String
image: "", // String - File Url
mobileNumber: "", // String
nickName: "", // String
status: "", // String
thumbImage: "", // Base64 - Thumb Image
userId: "", // String
}
}
Now, we’ve come to the end of this Tutorial. To give a quick recap, you came across the complete steps to add chat functionality to your React native app using MirrorFly SDK. Next, you’ve learnt the steps to add features like send/ receive messages, chat receipts and push notifications (by integrating firebase).
So yes, now you have all the steps to build a React Native chat app.
If you have any questions on these steps, you can directly contact our tech support team or you can refer to our Documentation.
Add chat features to your Flutter apps - in 10 minutes - with just a few lines of code.
Request Demo
The best chat SDK for React is MirrorFly as it offers seamless integration capabilities, low latency, and provides access to a wide range of features like instant messaging, one-to-one and group video calls, topic-based chats, multi-platform support, andaudio calling.
Plus, its low-code SDKs come packed with pre-built UI kits to create powerful chat app interfaces.
Follow the below steps to add chats in React Native:
Step 1 : Set up your IDE for React Native and install the required dependencies.
Step 2 : Upon installation, initialize the SDK.
Step 3 : Create user accounts for your chat app.
Step 4 : Design UI for your app or use pre-built UI kits.
Step 5 : Call methods to transfer messages between peers.
Step 6 : Add required features or customize the chat app.
Step 7 : Test and deploy.
React Native is a frontend framework that can be used to build cross-platform mobile apps using JS and React. While it is used to create stunning user interfaces and add specific features within apps, it can also interact with backend servers and APIs.
React Native has gained popularity among the developer community for its exquisite features like cross-platform compatibility, near-native performances, hot reloading, code reusability, and minimal load time.
Some of the disadvantages of React Native includes:
Step 1 : Limited API access
Step 2 : Performance limitations
Step 3 : Needs a learning curve
Step 4 : High-reliance on 3rd-party libraries
Step 5 : Platform-specific inconsistencies
Drive 1 billion + conversations on any Android, iOS, or Web app with 500+ chat features & 100+ UI components.