Create a Video Chat App in React Native with Pre-built API

Question

Want to create a video chat app like Zoom, Google Meet or MS Teams for your business? In this tutorial, we'll walk through how to build a 1:1 video calling app.

We will start with creating a video call feature where one user can initiate a video call and the other can receive, accept or reject it.

The app will be built in React Native and we'll use a pre-built video call solution from MirrorFly.
If you already have an app, you can use the below steps to add the video chat feature. If not, you can use this sample app, upon which you'll add the video calling features as instructed below.

Since we'll build the app in React Native, we'll need the below pre-requisites:

1. Node.js: >= 18.20.4
2. npm: >= 10.7.0
3. React Native: >= 0.73.0 and <=0.75.4
4. SDK License Key Firebase Cloud Messaging (FCM) setup for Android
5. VOIP push notification support for iOS

Note: This post assumes you have the basic understanding on handling React Native.

Step 1: Install the SDK

Install the SDK from npm:

npm install mirrorfly-reactnative-sdk

The SDK will have all the methods to initialize the call, register the user, connect and make calls.

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

After installation, this line imports the SDK to get the methods initializeSDK, register, connect, getJid, into your project

Step 2: Adding Peer Dependencies

{

"react-native-webrtc": "124.0.4",
"react-native-background-timer": "^2.4.1",
"react-native-permissions": "^5.2.1"
}

To support the SDK to run without any errors, you'll need the following npm packages:

1. react-native-webrtc: This package provides the JavaScript access to
   native WebRTC APIs for enabling real-time audio and video streams on
   your app. It exports objects like RTCPeerConnection, MediaStream,
   MediaDevices, etc.
2. react-native-background-timer: This keeps your app awake when calls
   are ongoing. This package is the one that provides Methods like
   setInterval, setTimeout, clearInterval, etc., that continue to work
   even when the app is minimized.
3. react-native-permissions: This package is responsible for initiating
   requests for mic, camera, and notification permissions from the OS.
   It checks and asks for runtime permissions with methods like
   check(), request(), and openSettings().

Step 3: Initializing the SDK

When you initialize the SDK, you need it to listen to the connection status. For this you'll need to define a callback as mentioned below.

const connectionListener = (response) => {

if (response.status === "CONNECTED") {

console.log("Connected to MirrorFly");

} else if (response.status === "DISCONNECTED") {

console.log("Disconnected from MirrorFly");

}
};

This line logs a message when the client connects or disconnects from the server.

const initializeObj = {

apiBaseUrl: "https://api-preprod-sandbox.mirrorfly.com/api/v1",
licenseKey: "YOUR_LICENSE_KEY_HERE",
isTrialLicenseKey: true,
callbackListeners: {

connectionListener,
// Add more listeners if needed (e.g., incomingCallListener)

},
};

• apiBaseUrl: URL of the backend you are connecting to.
• licenseKey: Your SDK key for authentication.
• isTrialLicenseKey: Boolean to indicate trial mode.

• callbackListeners: List of event listeners your app reacts to.

await SDK.initializeSDK(initializeObj);

Now, this line initializes the SDK with your configuration and sets up event listeners. Most importantly, this must be called before you use other functions in the SDK like register() or connect().

Step 4: Registering a New User

You'll need to import modules for:

• FCM (Android push token)
• VOIP push notifications (iOS)

For this, use this line:

import messaging from '@react-native-firebase/messaging';

import RNVoipPushNotification from 'react-native-voip-push-notification';

Here,
addEventListener('register', callback): Listens for the VOIP token from iOS.
messaging().getToken(): Gets the FCM token from Firebase for Android.
SDK.register(...): Registers a new user using:

1. user123: Unique user ID
2. fcmToken: Required for push calls on Android
3. voipToken: Required for VOIP on iOS

DEV ? false : true: Sets IS_PRODUCTION based on dev or release mode

RNVoipPushNotification.addEventListener('register', async (voipToken) => {

const fcmToken = await messaging().getToken();
await SDK.register('user123', fcmToken, voipToken, DEV ? false : true);
});

Next, to receive VoIP push notification on iOS, you need to trigger the registration process by adding this line:

RNVoipPushNotification.registerVoipToken();

Step 5: Connecting the User

Using the credentials obtained from the register() step, this line logs the registered user into the server.

await SDK.connect("user123", "securePassword123");

Once connected, the user will be able to start or receive calls. The connection listeners will start monitoring the connection status.

Step 6: Getting User JID

Next, add this line:

const userJid = SDK.getJid("user123");

This will return the Jabber ID (JID) of a user. JID is an identification system used internally by the XMPP system to uniquely identify users. You can therefore use userJid when initiating or accepting calls.

With these steps, you’ve built the core structure of a one-on-one video calling app. You now have

1. Real-time communication between users
2. Customizable call UI
3. Call control features (answer, decline, hang up)
4. SDK-level connection and call event tracking

From here, you can implement beyond the basics like outgoing and incoming call UI, Audio controls (mute/unmute), and analytics.

Got queries? Feel free to add your questions in the comments. I'd be more than happy to join a healthy discussion on the technologies.

Learn more in this video tutorial, How to build a video chat app with React Native?

Comments

Great write-up, super easy to follow for anyone adding video calls to their app—thanks for breaking it down so clearly! Just wondering, how well does MirrorFly scale if we want to move from 1:1 to group calls later on?

---

Hi James Dayal,

Glad you liked my article. MirrorFly is highly flexible when it comes to scalability. If you need to expand to group calling from 1:1 video calls, you now need to rework your app architecture completely. Our SDK supports both peer-to-peer and selective forwarding units that can handle any size of calls and conferencing.

Plus, MirrorFly supports dynamic bandwidth management, adaptive frame bitrate, and data sovereignty, so scaling up will not compromise on the performance or quality of calls anytime.

If you'd like to discuss this more narrowly, we'd be glad to connect. Please fill out this quick form So we'll understand your project and get in touch at your convenience!