Built With React Native: How We Created Real-time Mobile Medical App

House M.D.

Mobile/web apps market nowadays consists of not only random games and for-fun applications. The niche-oriented real-time and live chat 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 React Native real-time chat for audio and video calls)
• And 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 products 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 solutions 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 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 JSSolutions 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;

In case you’re interested: Benefits and Drawbacks of React Native Development: Business Point of View.

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?

The development of such medical live chat application requires 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 during the 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 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 specifyif (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 stabilizedif (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 unitsreturn 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:

Start screen

Peers view. List of users who’re online

Chat window where you can also hold calls

Searching for Bluetooth devices (Bluetooth is on)

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

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

Originally published at apiko.com on October 19, 2017.