Bluetooth Low Energy Mobile App Development: A Comparison of Kotlin Multiplatform Mobile, React Native, and iOS

Summary

Team BLERN, an internal learning team, was formed to develop a mobile application with the ability to communicate with Bluetooth Low Energy (BLE) health devices. Specifically, we were tasked with reading the heart rate and oxygen saturation levels provided by a pulse oximeter and displaying the data within the app.

To diversify our learning, we formed three sub-teams with different tech stacks, each working on the same app. Two teams worked with multi-platform tech stacks that deployed to iOS and Android: the first team used Kotlin Multiplatform Mobile (KMM) and the second used React Native. The third team used native iOS with Swift.

ATC Insight

BLE Programming

There were major differences among the three platforms when developing the apps to connect to and read from the BLE devices. The KMM team was unable to find a third-party BLE library that allowed code reuse, so the Bluetooth-specific code was written natively for both platforms. The React Native team found a third-party library (react-native-ble-manager) that worked but was complex to set up. The iOS

team was able to successfully use the mature Core Bluetooth framework. However, Core Bluetooth is an older Apple framework from 2013 and is beginning to show weaknesses with age.

BLE mobile development is challenging. iOS simulators and Android emulators do not support Bluetooth, so development and testing had to be done on physical devices. This also made it difficult to run end-to-end tests in our code pipelines. For the React Native team, using the popular build platform Expo was not an option, because Expo does not support Bluetooth.

Creating a mock Bluetooth device was essential since not every team member was provided with a physical device. We started with LightBlue, a free BLE emulator. LightBlue works by causing a MacBook to emit a signal like that of a real BLE device, allowing us to rapidly develop a prototype app. With LightBlue, we loosely emulated our physical health device, but it was not programmable. We later transitioned to using the Bleno library to program a mock device. Bleno is a Node.js module for implementing BLE peripherals. Using Bleno, we programmed a mock BLE peripheral with the exact same services, characteristics, and data format as our real device. We also programmed it to emit a random heart rate and oxygen level readings.

For those unfamiliar with Bluetooth, we recommend reading the specification documentation provided by Bluetooth before getting started. If the manufacturer provides developer docs for the Bluetooth device, be sure to read over those carefully as well. It is also useful to familiarize oneself with bitwise operations because the data returned from BLE devices is sometimes encoded. For more information about the challenges associated with BLE app development, please see this article written by our Quality Advocate (QA ), Dane Nye.

User Interface (UI ) Programming

All three platforms featured robust support for UI programming, allowing each team to style the app easily. The KMM team decided to style the app at the platform layer. This meant they had to style the app twice, but it allowed the iOS and Android apps to have a more native feel.

The iOS team found that SwiftUI worked well, but they had to work through some challenges to make the views performant. For example, it was difficult to render substantial amounts of health data in a list without a performance hit until a workaround was found. These hiccups are not surprising, given that SwiftUI is a newer library. The React Native team used mostly built-in components with StyleSheets, as well as a couple of third party libraries for charts and tables. Despite only writing the UI once, the React Native team was able to make the app look and feel like native iOS and Android apps. In that sense, React Native lived up to its promise of creating "truly native apps."

Conclusions

For an app that only needs to be deployed to iOS, native Swift code is the natural choice. For an app that needs to be deployed to iOS and Android, we recommend React Native over KMM. While React Native still has not seen a Version 1.0 release and is rough around the edges in some areas, the amount of time saved by not writing an app twice is well worth the cost, in most cases.

KMM is a newer platform that is still in Alpha and has lower adoption rates than React Native, so we recommend it should only be used by teams willing to take on that risk.

Takeaways:

• Due to iOS constraints, all three teams relied on having Mac hardware to develop and deploy to iOS devices.
• The React Native team recommends using TypeScript; it is easy to set up and provides type-checking that can reduce runtime errors. If you are tired of seeing "Cannot read property of undefined..." errors, use TypeScript!
• User Authentication using biometrics (fingerprints and facial recognition) was easy to implement for the React Native and iOS teams.

Technologies Under Test

React Native, Kotlin Multiplatform Mobile, iOS

Documentation

Software and Libraries

React Native

• Visual Studio Code for majority of coding.
• XCode for deployment.
• React-native version 0.63
• Modules: View, SafeAreaView, Text, FlatList, TouchableOpacity, Animated, Alert, etc.
• react-native-ble-manager to connect to Bluetooth Low Energy devices.
• react-native-paper "DataTable" to render a table showing health measurements.
• react-native-chart-kit to render a graph of health measurements over time.
• react-native-app-auth for Azure Active Directory B2C user authentication.
• react-native-biometrics for fingerprint and facial recognition.
• react-redux, redux-persist, and @reduxjs/toolkit for data storage and persistence.
• eslint and typescript for code analysis and type checking.
• @testing-library/react-native and jest for testing.
• @apollo/client for API calls

iOS

• XCode for coding and deployment.
• MSAL (Microsoft Authentication Library) for authentication.
• Apollo iOS - GraphQL client for API (Application Programming Interface) calls
• AAInfographics for charts

KMM

• XCode and Android Studio for coding and deployment.

Hardware

• MacBook Pros
• Various iPhones and Android phones
• Bluetooth Pulse Oximeter (Sorry, we cannot reveal the model!)