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! Let's get started! Step 1: Make Sure Your Environment Is Ready 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 Minimum Requirements React Native version between 0.73.0 and 0.79.5Node.js version 18.20.4 or abovenpm version 10.7.0 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 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: For iOS, open your Podfile and set: ENV['RCT_NEW_ARCH_ENABLED'] = '0' ENV['RCT_NEW_ARCH_ENABLED'] = '0' For Android, open gradle.properties and set: For Android, open gradle.properties and set: newArchEnabled=false 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 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: Here is how I got mine: Contacted the Sales TeamGot My Developer AccountLog in to the dashboardCopy the license key from the application overview section 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 Step 3: Install the Chat SDK Run this command in your React Native project: npm i mirrorfly-reactnative-sdk@2.4.1 npm i mirrorfly-reactnative-sdk@2.4.1 After installation, import the SDK wherever you want to initialize it, usually in App.js or App.tsx. import { SDK } from "mirrorfly-reactnative-sdk"; import { SDK } from "mirrorfly-reactnative-sdk"; Step 4: Install Required Dependencies 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"

} {

  "@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 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");

  }

} 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); 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 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); 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 Step 7: Connect to the Server Once registered, connecting the user is simple. await SDK.connect("USERNAME", "PASSWORD"); 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 Step 8: Send Your First Message To send a message, you require the recipient’s JID. const userJid = SDK.getJid("OTHER_USERNAME"); const userJid = SDK.getJid("OTHER_USERNAME"); Now send a message:

await SDK.sendTextMessage(

  userJid,

  "Hello, this is my first message",

  "msg_001",

  null

); 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 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);

} 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 Step 10: Enable Audio and Video Calls Once chat is working, adding calls feels like a natural next step. Initialize Call Listeners 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 => {}; 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 Step 11: Make a Voice Call To make an audio call: To make an audio call: await SDK.makeVoiceCall(["USER_JID"]); 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 Step 12: Make a Video Call Video calls work almost the same way. await SDK.makeVideoCall(["USER_JID"]); 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 Step 13: Receive and Handle Incoming Calls When another user calls you, the incomingCallListener fires with all call details. To answer the call: To answer the call: await SDK.answerCall(); await SDK.answerCall(); To end the call: To end the call: await SDK.endCall(); await SDK.endCall(); To decline an incoming call: To decline an incoming call: await SDK.declineCall(); 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 MirrorFly API Documentation 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. This article is published under HackerNoon's Business Blogging program. Business Blogging program

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Hot off the press! This story contains factual information about a recent event.

How I Built a React Native App With In-App Chat and Calls

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Best Selling Online Personalized Recommendation Engines

54 Stories To Learn About React Native Development

A Guide to Embedding and Playing YouTube Videos in React Native Apps

Amazon UI Clone with React Native #1 : Setting up Menu Bar

Amazon UI Clone with React Native #2 : Recommendations View

Checkers on React - Part 3 - Figure

10 Best Selling Online Personalized Recommendation Engines

54 Stories To Learn About React Native Development

A Guide to Embedding and Playing YouTube Videos in React Native Apps

Amazon UI Clone with React Native #1 : Setting up Menu Bar

Amazon UI Clone with React Native #2 : Recommendations View

Checkers on React - Part 3 - Figure

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps