Built With React Native: How to Create Real-Time Communication Functionality for the Medical Mobile App

Built With React Native: How to Create Real-Time Communication Functionality for the Medical Mobile App

Mobile/web apps market nowadays consists of not only random games and for-fun applications. The niche-oriented real-time and live chat mobile applications development, especially the creation of products meant for the internal corporate use, have a special purpose of simplifying the branch workers’ job and creating new opportunities with its functionality.

In this article we’ll talk about how to create care coordination React Native-based mobile app (and a React Native real-time chat for audio and video calls), how we’ve managed to build one and what features apart from Bluetooth integration with medical devices we’ve included there.

The importance of healthcare mobile app development

Here we would like to provide you with some statistics on what place healthcare and care coordination mobile apps category takes among other app classes.

For iOS:


Source: Statista.com

For Android:


Source: Statista.com

As it’s seen, healthcare mobile apps for iOS are placed in the top 10 of the most downloadable apps in the App Store. As of Google play, the abundance of, for the most part, entertaining apps leaves medical mobile apps slightly trailing behind.

Care coordination and healthcare mobile apps could be an inalienable part of apps for doctors and for patients. These allow medical workers to conduct a real-time communication between each other and their patients with the opportunity to do it remotely.

Such apps are aimed to provide all the necessary information about patient’s health. Every change in patient’s health can be tracked and investigated. That’s the great advantage of healthcare mobile apps development and utilizing mobile devices in medicine.

Special integrations are a must for healthcare real-time mobile app development. This, for instance, includes Bluetooth integration with clinic tools, like weight scales or other various devices aimed to provide patient’s key health records (data).

Read also: Doctor Booking App Development: Here`s What Your Users Need

Medical mobile app built with React Native

Another React Native development case Apiko team has had experience with. We’ve assisted with the creation of one care coordination mobile app that would enable chatting and audio messaging, video calls between both medical staff and between a doctor and a patient. Apart from this, the client requested to develop Bluetooth integration with the weight scales using React Native and WebRTC. The same is planned to be done with other devices which track patient’s health data, like blood pressure measurement device and others.

We’re expanding React Native Showcase list

Our client and us both agreed on React Native app development. Why? Below you’ll find the list of benefits we’ve got by planning this medical mobile app and to be built with React Native:

  • Effortless integration of the app with Bluetooth using React Native Bluetooth Low Energy library;
  • Rapid process of React Native real-time chat functionality development and the overall app in general.
  • UX-friendly, fresh, robust and plain native look and feel;

WebRTC and React Native real-time chat app creation

To enable real-time video/audio communication via chat, we’ve implemented WebRTC technology. Shortly on its pros :

  • Ability to power-up an app with the secured peer-to-peer audio/video connection in a real-time mode.
  • WebRTC real-time communication technology is open-source tech solution which makes its implementation and contribution to this technology easier
  • To initiate and run live audio-video chatting, and messaging, file sharing/transferring, screen sharing, web camera, microphone access there’s no need to install internal or external plugins or any additional tools for your browser

All of the solutions mentioned are open-source. Is it secure to use them?

Such medical live chat application development require the implementation of class AAA security measures. There’s no reason to worry, though, WebRTC technology automatically encrypts information by using Datagram Transport Layer Security (DTLS) , based on Transport Layer Security (TLS) method to avoid any kind of data leakage. Also WebRTC allows to get the most of the security and establish a completely secured any sort of communication between peers the way no, let’s say, ‘3-rd party’ server could decode the transmitted data.

As the additional security measures you can also combine the technology with the personal/identity verification solutions, like OAuth.

Now the very meat (in the shape of code)

Among our other React Native app development cases, this real-time communication project turned to be special. Below we’ll try to explain why by means of code.

The first thing we’ve dealt with was the way to get local stream with the further opportunity to transmit the data (video/audio) to the remote interlocutor’s device.

To make it possible, we’ve created the following method using webRTC technology:

    static getLocalStream(isFront, callback) {
       let videoSourceId;

// on android, you don't have to specify sourceId manually, just use facingMode // uncomment it if you want to specify if (Platform.OS === 'ios') { MediaStreamTrack.getSources(sourceInfos => { console.log('sourceInfos: ', sourceInfos);

for (let i = 0; i < sourceInfos.length; i += 1) { const sourceInfo = sourceInfos[i];

if (sourceInfo.kind === 'video' && sourceInfo.facing === (isFront ? 'front' : 'back')) { videoSourceId = sourceInfo.id; } } }); }

getUserMedia({ audio: true, video: { mandatory: { minWidth: 640, minHeight: 360, minFrameRate: 30, }, facingMode: (isFront ? 'user' : 'environment'), optional: (videoSourceId ? [{ sourceId: videoSourceId }] : []), }, }, (stream) => { callback(stream); }, logError); }

Given the fact that the real-time communication functionality, like in-app messaging (video/audio) is one of the development requirements, here’s the method to enable secured and private peer-to-peer connection:

    createPC(socketId, isOffer) {
      const pc = new RTCPeerConnection(configuration);

const dataChannel = pc.createDataChannel('text'); dataChannel.onmessage = event => { const msg = JSON.parse(event.data);

this.dispatch(newIncomingMessage(msg)); }; dataChannel.onopen = () => { this.dispatch(connectionEstablished()); }; pc.textDataChannel = dataChannel;

this.pcPeers[socketId] = pc;

pc.onicecandidate = event => { if (event.candidate) { this.socket.emit('exchange', { to: socketId, candidate: event.candidate }); } };

const createOffer = () => { pc.createOffer(desc => { pc.setLocalDescription(desc, () => { this.socket.emit('exchange', { to: socketId, sdp: pc.localDescription }); }, logError); }, logError); };

pc.onnegotiationneeded = () => { if (isOffer) { createOffer(); } };

pc.oniceconnectionstatechange = event => { if (event.target.iceConnectionState === 'completed') { setTimeout(() => { this.getStats(); }, 1000); } };

return pc; }

Method to send messages via text channel which is secured by WebRTC protocol:

    sendMessage(message) {
      const stringifiedMessage = JSON.stringify(message);



for (const key in this.pcPeers) { const pc = this.pcPeers[key];

pc.textDataChannel.send(stringifiedMessage); } }

As it was mentioned above, the other task of high importance for this React Native healthcare mobile app development, was to integrate weight scales with the app via Bluetooth. We’ve created the integration. But in the process we’ve faced the need to convert different weight items. What to do in this case?

The algorithm below represents how to convert weight info (items) (chinese units to kilograms), received from the weight scales:

    function getWeightFromScale(charValue, callback) {
     const charHexValue = base64ToHex(charValue);

const weightBytes = charHexValue.split(' ');

// scales stabilized if (weightBytes[0] === '22') { callback(); }

const hexWeight = weightBytes[1] + weightBytes[2];

const data = hexWeight.match(/../g);

const buf = new ArrayBuffer(4); const view = new DataView(buf);


data.forEach((b, i) => { view.setUint8(i, parseInt(b, 16)); });

const num = view.getInt32(0, 1);

// convert to kilograms from chineese units return num / 200; }

The outcome

What is the result of combining React Native app development + WebRTC technology for the healthcare mobile product? Done talking, let’s take a look:

1) Start screen


2) Peers view. List of users who’re online


3) Chat window where you can also hold calls


4) Searching for Bluetooth devices (BT is on)


5) React Native Bluetooth integration module in action. Detected weight scales to which you can connect via Bluetooth


6) Now that we’ve chosen the detected weight scales, we can take our weight measurements. We get the instant result. Data received can be shared between doctor and patient who are online or copied and sent in a separate message.


Summing up

It’s too early to pat our backs for the good work, since the React Native real-time chat project for medicine is still in the process and promises to bring its users even more pleasing surprises about which you’ll know a bit later ;)

Considering the React Native healthcare mobile app development but having some doubts whether to use it or not? Our React Native specialists will consult you and assist with making the final and successful decision.