As a developer, manually writing code line by line to develop an app is a nightmare. The codes may work or end up in critical errors right before deployment, and no one really knows what happens after days and nights of effort. But what if there’s a fail-proof option?
This is where pre-built SDKs come into play.
In this sample project, I will show you how to build a whole new React Native app with custom messaging, video calling and voice calling features using SDKs. For this, I will use MirrorFly that supports WebRTC for real-time communication.
Let's get started!
Step 1: Make Sure Your Environment Is Ready
Before starting with the project, let’s check if the system meets all the necessary requirements.
Minimum Requirements
- React Native version between 0.73.0 and 0.79.5
- Node.js version 18.20.4 or above
- npm version 10.7.0
Important Note About New Architecture
If your React Native version is above 0.76, you need to disable the New Architecture after setup.
For iOS, open your Podfile and set:
ENV['RCT_NEW_ARCH_ENABLED'] = '0'
For Android, open gradle.properties and set:
newArchEnabled=false
I recommend doing this early. Why? so you do not have to debug native issues later.
Step 2: Get Your SDK License Key
You will need a license key to authenticate the SDK with the server.
Here is how I got mine:
- Contacted the Sales Team
- Got My Developer Account
- Log in to the dashboard
- Copy the license key from the application overview section
If you already have one, you can skip this step.
Step 3: Install the Chat SDK
Run this command in your React Native project:
npm i [email protected]
After installation, import the SDK wherever you want to initialize it, usually in App.js or App.tsx.
import { SDK } from "mirrorfly-reactnative-sdk";
Step 4: Install Required Dependencies
The chat and call features rely on a few native and JavaScript dependencies. Add them explicitly so you can avoid version conflicts.
{
"@react-native-community/netinfo": "^11.4.1",
"react-native-get-random-values": "1.11.0",
"realm": "^20.1.0",
"react-native-fs": "^2.20.0",
"moment": "2.30.1",
"react-native-webrtc": "124.0.4",
"react-native-background-timer": "^2.4.1",
"react-native-permissions": "^5.2.1"
}
The react-native-webrtc must be in version 124.0.4. I learned this the hard way after trying a newer version that broke call functionality.
Step 5: Initialize the Messaging SDK
Before initializing, I usually set up a connection listener. This helps me track if my app is connected to the server or not.
function connectionListener(response) {
if (response.status === "CONNECTED") {
console.log("Connection Established");
} else if (response.status === "DISCONNECTED") {
console.log("Disconnected");
}
}
Now create the initialization object:
const initializeObj = {
apiBaseUrl: "https://api-preprod-sandbox.mirrorfly.com/api/v1",
licenseKey: "YOUR_LICENSE_KEY",
isTrialLicenseKey: true,
callbackListeners: {
connectionListener
}
};
await SDK.initializeSDK(initializeObj);
If everything is set up correctly, you will be receiving a success response with status code 200.
Step 6: Register a User
In your app, a user needs to be registered before they make a call or start chatting. That’s what we’ll do in this step:
const registerObject = {
userIdentifier: "user_123",
fcmtoken: "FCM_TOKEN",
voipDeviceToken: "VOIP_TOKEN",
mode: false,
registerMetaData: {},
forceRegister: false
};
await SDK.register(registerObject);
If the user is registered successfully, the SDK will return a username and password.
Step 7: Connect to the Server
Once registered, connecting the user is simple.
await SDK.connect("USERNAME", "PASSWORD");
If the connection is successful, your connectionListener will also be triggered. This is how I usually confirm everything is working as I need it.
Step 8: Send Your First Message
To send a message, you require the recipient’s JID.
const userJid = SDK.getJid("OTHER_USERNAME");
Now send a message:
await SDK.sendTextMessage(
userJid,
"Hello, this is my first message",
"msg_001",
null
);
If the response status code is 200, it means your message has been sent successfully.
Step 9: Receive Messages
Your app will need a message listener to start receiving messages. Every time your app has an incoming message or any event related to messaging happens, this listener will be triggered.
function messageListener(response) {
console.log("New message received", response);
}
Make sure this listener is added during SDK initialization under callbackListeners.
Step 10: Enable Audio and Video Calls
Once chat is working, adding calls feels like a natural next step.
Initialize Call Listeners
Calls require more listeners since there are more events involved.
const incomingCallListener = res => {};
const callStatusListener = res => {};
const userTrackListener = res => {};
const missedCallListener = res => {};
Add these to the same initializeSDK call.
Step 11: Make a Voice Call
To make an audio call:
await SDK.makeVoiceCall(["USER_JID"]);
If the call is successful, you will receive a room ID and call status via the call status listener.
Step 12: Make a Video Call
Video calls work almost the same way.
await SDK.makeVideoCall(["USER_JID"]);
You will receive both audio and video tracks in the userTrackListener. Do not play your own audio track to avoid echo.
Step 13: Receive and Handle Incoming Calls
When another user calls you, the incomingCallListener fires with all call details.
To answer the call:
await SDK.answerCall();
To end the call:
await SDK.endCall();
To decline an incoming call:
await SDK.declineCall();
OK!! That was really quick. We completed building a whole new React Native app with chat and calling features. Now, as this article is getting too longer, I will recommend you to visit MirrorFly Docs to continue with adding more advanced features. I’ve mentioned the link below: MirrorFly API Documentation
Thanks for reading the article. I hope you learned something new. If you have any questions/feedback, feel free to leave a comment.
This article is published under HackerNoon's Business Blogging program.