Published: May 2, 2022
9 min read
In this article, you'll learn:
1
📳 Bluetooth Low Energy: The Main Concepts and Difference from Classic Bluetooth
2
⚙️ 2 Main Libraries for BLE Integration in React Native
3
⚖ react-native-ble-plx vs react-native-ble-manager Comparison
4
✅ Apps to Test BLE Devices
5
⚠️ Possible Pitfalls when Integrating BLE Devices
6
💡 Takeaways: So, Which One to Choose?
Bluetooth Low Energy (or simply BLE) devices are extremely popular these days. We, at Stormotion, we have already worked on a few projects involving BLE devices: one regarding vaping and another — fitness tracking devices.
In this article, we will specifically focus on the React Native BLE integration. However, how is this technology different from classic Bluetooth? And what are its key concepts? A brief explanation is below!
We all know what Bluetooth is — a short-range wireless networking protocol that quickly connects devices. Currently, it has 2 versions: Bluetooth Classic and Bluetooth Low Energy.
Read also our guide on how to integrate BLE-Based Fitness Devices into your App.
What are the main terms you need to know when working with this technology? Check below!
Before diving into BLE React Native integration for companion mobile app development, it’s important to know how this technology works. We won’t focus on that too much but will still review some key concepts.
GATT stands for Generic Attribute Profile that defines how BLE devices transfer data. To make data transfer possible, devices should have a dedicated connection.
BLE devices are often referred to as peripheral devices, while smartphones, tablets, and other similar gadgets — as central devices. Every specific BLE device, referred to as a peripheral device, can have an exclusive connection with one central device at a time, while the central device can be simultaneously connected to multiple other peripherals:
Connection between a central and peripheral devices (image by Kevin Townsend)
Since we’re talking about GATT, let’s take a closer look at the server/client relationship:
The Client initiates all the transactions by asking the Server, which could also be a remote device, for data. There are 2 ways to transfer data from the Server to the Client: Notifications and Indications.
Data transfer itself is based on a few high-level objects: Profiles, Services, and Characteristics.
The hierarchy of Profiles, Services and Characteristics (image by Kevin Townsend)
Here's an example of how it may look for a fitness tracking device:
Example of Profile structure (image by Mohammad Afaneh)
If we break down the example above into smaller pieces:
Profile | Blood Pressure | |
Services | Blood Pressure Service | Device Information Service |
Characteristics | Intermediate Cuff Pressure | Manufacturer Name String |
You can read a bit more on GATT, Profiles, Services and Characteristics here, and on Notifications & Indications — here.
Nevertheless, let’s get back to today's main topic!
As of July 2020, there are 2 libraries that can be used for Bluetooth Low Energy React Native integration:
❗️ Important note: this article is based on v.7.3.0 of react-native-ble-manager and v.2.0 of react-native-ble-plx
Let’s take a closer look!
GitHub | Documentation | Wiki
React Native BLE PLX is one of the 2 libraries you can use to work with this technology. It supports all the key features:
Yet, the library doesn’t support the following features:
The new (2.x) version of the library supports all the latest RN versions starting from 0.60. However, you can still use the old version of the library even up to 0.60.5 RN version, but with additional changes.
As for OS versions, the library works on iOS 9+ and Android API 19+.
This library offers an alternative for integrating BLE in React Native applications.
Despite the absence of an explicit features list, we have identified the key BLE functionality based on method names. It includes all the features react-native-ble-plx has and a few additional ones such as:
The latest version of the BLE manager React Native library supports RN 0.60 and newer. However, the older version of the library can be used with older RN versions:
As for OS versions, this library covers iOS 8+ and Android API 18+.
Read Also
React Native vs Flutter: Detailed Comparison
We’ve also made a few comparison tables to cover the main differences between the two libraries:
✅ Compatibility | ||
---|---|---|
react-native-ble-plx | react-native-ble-manager | |
🚀 RN version | 0.60+ | 0.60+ |
🍎 iOS version | 9+ | 8+ |
🤖 Android version | 19+ | 18+ |
A closer examination of features reveals that, by importing ble-manager, developers gain access to additional possibilities:
⚙️ Features | ||
---|---|---|
Feature | react-native-ble-plx | react-native-ble-manager |
observing device's Bluetooth adapter state | ✅ | ✅ |
scanning BLE devices | ✅ | ✅ |
making connections to peripherals | ✅ | ✅ |
discovering services/characteristics | ✅ | ✅ |
reading/writing characteristics | ✅ | ✅ |
observing characteristic notifications/indications | ✅ | ✅ |
reading RSSI | ✅ | ✅ |
negotiating MTU | ✅ | ✅ |
background mode on iOS | ✅ | ✅ |
turning the device's Bluetooth adapter on | ✅ | ✅ |
communicating between phones using BLE (Peripheral support) | ❌ | ❌ |
bonding peripherals | ❌ | ✅ (Android only) |
checking if specific peripheral is connected | ✅ | ✅ |
getting bonded peripherals | ❌ | ✅ (Android only) |
getting connected peripherals | ❌ | ✅ |
refreshing cache | ✅ (Android only) | ✅ (Android only) |
requesting connection priority | ❌ | ✅ (Android API 21+ only) |
Written in TypeScript | ✅ | ✅ |
Finally, we can also compare some GitHub stats:
📊 GitHub Stats (on 12.06.20 | ||
---|---|---|
Stats | react-native-ble-plx | react-native-ble-manager |
⭐️ Stars | 1.8k | 1.1k |
⚠️ Issues | 19 | 51 |
🍴 Forks | 281 | 443 |
👨💻 Contributors | 34 | 79 |
👩💻 Used by | 662 | 505 |
💻 Commits | 672 | 583 |
In general, react-native-ble-plx is more popular among developers:
You can find even more smaller details on react-native-ble-plx here, and on react-native-ble-manager here.
When developing a mobile appication with BLE integration using a React Native BLE library, it's crucial to test how it will function with such devices.Our team used the following apps:
These tools are quite similar and provide many options to test different features of Bluetooth Low Energy devices.
Read Also
18 Essential Tools For React Native Development
During BLE integration, our developers identified several pitfalls, including the underutilization of event listeners, which can streamline the handling of BLE events and make the development process smoother and potentially increase the IoT software development cost. Here are our recommendations on how you can make the development go smoother.
If you’re developing an Android application, this one will be important. As written in this documentation: “Starting from Android API 23+, to access the hardware identifiers of nearby external devices via Bluetooth and Wi-Fi scans, your app must now have the geolocation enabled”.
To check whether the geolocation is enabled and turn it on in case it isn't, which is crucial for accessing the hardware identifiers (such as the device identifier) of nearby external devices via Bluetooth, we recommend using the react-native-android-location-enabler library.
Obviously, you need to turn on Bluetooth on the mobile device before scanning. For this purpose you may use the methods of the mentioned libraries:
When using react-native-ble-plx, you may stumble upon a bug which will prevent you from being able to change the device name. That can happen in case the name is cached. This issue is tracked here.
Finally, here are a few general tips to improve the code quality:
Read Also
11 Stories of How React Native Apps Have Changed the World
Simple but true: the best choice, as illustrated in our react native BLE examples, is always the one that matches your needs better than all the other options. Thus, we'd recommend you to consider things like:
Got questions about integrating React Native BLE? We'll help clarify everything for you! Send us a message and we'll solve your problem.
Was it helpful?
Read also
How to Make your React Native Application Accessible to ALL, not just to MANY
Which Payment Providers should I use for my SaaS Product?
What makes React the best option for SaaS Apps?
Our clients say
They make the whole business work for us, and their improvements are fundamental to our operations. They’re reliable, honest, and willing to try new things that will help us. We appreciate how flexible and easygoing they are.
Pietro Saccomani, Founder
MobiLoud