The Good Tech Companies - How I Built a React Native App With In-App Chat and Calls

Episode Date: January 16, 2026

This story was originally published on HackerNoon at: https://hackernoon.com/how-i-built-a-react-native-app-with-in-app-chat-and-calls. Learn how to build a React Native app with chat, voice, and video calling using prebuilt SDKs and WebRTC—step by step. Check more stories related to programming at: https://hackernoon.com/c/programming. You can also check exclusive content about #react-native-development, #react-native-chat-app, #create-react-native-app, #react-native-video-calling, #react-native-voice-calling, #messaging-sdk, #webrtc-react-native, #good-company, and more. This story was written by: @sam. Learn more about this writer by checking @sam's about page, and for more stories, please visit hackernoon.com. This guide walks developers through building a React Native app with messaging, voice calls, and video calls using a prebuilt SDK, avoiding the complexity of manual WebRTC implementation.

This audio is presented by Hacker Noon, where anyone can learn anything about any technology. How I built a React Native app with an app chat and calls by Alex Sam. 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.

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 i.f your React Native version is above 0.76. You need to disable the new architecture after setup. For iOS, open your pod file and set. For Android, open Gradle. Properties and set. 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. 1. Contacted the sales team. 2.

Got my developer account. 3. Log in to the dashboard. 4. Copy the license key from the application overview section. If you already have 1, you can skip this step. Step 3. Install the chat SDK.

Run this command in your React Native project. After installation, import the SDK wherever you want to initialize it, usually an app. js or app.tskx. 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. The React Native WebRTC must be in version 124.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. Now create the initialization object. 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. 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. If the connection is successful, your connection listener 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. 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. Make sure this listener is added during SDK initialization under call back listeners. 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. Add these to the same initialize SDK call. Step 11. Make a voice call. To make an audio call, 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. You will receive both audio and video tracks in the user track listener. Do not play your own audio.

track to avoid echo. Step 13. Receive and handle incoming calls. When another user calls you, the incoming call listener fires with all call details. To answer the call, to end the call, to decline an incoming call, okay. 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. Mirror Fly 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 Hacker Noon's business blogging program. Thank you for listening to this Hackernoon story,

read by artificial intelligence. Visit Hackernoon.com to read, write, learn and publish.