Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Built With React Native: Create Real-Time Communication Functionality for Mobile Medical Apps

DZone's Guide to

Built With React Native: Create Real-Time Communication Functionality for Mobile Medical Apps

Learn about creating a healthcare coordination mobile app with a live chat feature, and how the React Native framework can help make it easier.

· Mobile Zone
Free Resource

The mobile/web app market 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 a care coordination React Native-based mobile app (and a React Native real-time chat for audio and video calls), how we at Apiko.com have 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 take among other app categories.

For iOS:

Built-With-React-Native-Real-time-Mobile-Medical-App-Development-stats-1

Source: Statista.com.

For Android:

Built-With-React-Native-Real-time-Mobile-Medical-App-Development-stats-2

Source: Statista.com.

Healthcare mobile apps for iOS are in the top 10 of the most downloadable apps in the App Store. In 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 record data.

A Mobile Medical App Built With React Native

Here's 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 that we develop Bluetooth integration with the weight scales using React Native and WebRTC. The same is planned with other devices which track patient’s health data, like blood pressure measurement devices.

We’re expanding the 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 mobile medical 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. Briefly, 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 an open-source 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, and 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 a medical live chat application development 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 security and establish a completely secured any sort of communication between peers the way no, let’s say, "3rd 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 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;
    }

The 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 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 are online:

Built-With-React-Native-Real-time-Mobile-Medical-App-Development-bluetooth-integration-connection

Built-With-React-Native-Real-time-Mobile-Medical-App-Development-peers-view

3) Chat window where you can also 4) search for Bluetooth devices (BT is on),
hold calls:

Built-With-React-Native-Real-time-Mobile-Medical-App-Development-chat

Built-With-React-Native-Real-time-Mobile-Medical-App-Development-bluetooth-scanning

5) React Native Bluetooth integration module in action, detecting 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 an instant result. Data received can be shared between a doctor and patient who are online, or copied and sent in a separate message.

Built-With-React-Native-Real-time-Mobile-Medical-App-Development-weight-results

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 process and promises to bring its users even more pleasing surprises, about which you’ll know a bit later.

Topics:
react native ,mobile ,mobile app development ,healthcare ,webrtc

Published at DZone with permission of Mykola Striletskyy. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}