What to Consider when Integrating BLE in your React Native App

What to Consider when Integrating BLE in your React Native App

Dmitriy Zasukha

Dmitriy Zasukha

Android | React Native Developer @ Stormotion

Andrii Bondarenko

Andrii Bondarenko

Content Team Lead @ Stormotion

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 integration of BLE devices in React Native. However, how is this technology different from classic Bluetooth? And what are its key concepts? A brief explanation is below!

📳 Bluetooth Low Energy: The Main Concepts and Difference from Classic Bluetooth

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.

  • Bluetooth Classic is often referred to as just Bluetooth. This technology can support continuous connections and transfer big amounts of data. This might include phone calls, audio streaming, and data.
  • Bluetooth Low Energy is also known as BLE. This is a version of Bluetooth that is adapted to low power sensors and accessories. Such devices don’t require continuous connection but depend on long battery life. They are especially popular in the fitness, healthcare, security, home entertainment industries, and beacons.

What are the main terms you need to know when working with this technology? Check below!

Key concepts for BLE 📖

Before you move on to the integration of BLE in a React Native App, 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 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](https://learn.adafruit.com/users/ktownsend){ rel="nofollow" .default-md}*)

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:

  • From that perspective, the peripheral device is known as the GATT Server that contains data.
  • The central device acts as the GATT Client that sends requests to the server.

The Client initiates all the transactions by asking the Server for data. There are 2 ways to transfer data from the Server to the Client: Notifications and Indications.

  • Notification is a one-way message. It's faster since it doesn’t ask the Client whether they've received the message.
  • Indication describes the system of two-way communication. The Server sends a message ➡️ the Client receives the message and sends a confirmation message back to the Server ➡️ thus, the Server knows that the initial message has reached the Client.

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](https://learn.adafruit.com/users/ktownsend){ rel="nofollow" .default-md}*)

The hierarchy of Profiles, Services and Characteristics (image by Kevin Townsend)

  • Profile is a predefined set of Services.
  • Services break up data into logic blocks that consist of Characteristics.
  • Characteristic is a single data point, including an array of related data like X/Y/Z values from a 3-axis accelerometer.

Here's an example of how it may look for a fitness tracking device:

Example of Profile structure (*image by [Mohammad Afaneh](https://www.novelbits.io/author/mafaneh/){ rel="nofollow" .default-md}*)

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
Blood Pressure Measurement
Blood Pressure Feature

Manufacturer Name String
Hardware Revision String
Model Number 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!

⚙️ 2 Main Libraries for BLE Integration in React Native

As of July 2020, there are 2 libraries that can be used to integrate BLE devices into your React Native application:

  • react-native-ble-plx
  • react-native-ble-manager

❗️ 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!

🛠 react-native-ble-plx

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:

  • observing the adapter state of the device’s Bluetooth;
  • connecting to peripherals;
  • scanning BLE devices;
  • discovering services;
  • discovering, reading and writing characteristics;
  • observing indications & notifications;
  • negotiating MTU;
  • reading RSSI;
  • working in background mode on iOS;
  • turning on the Bluetooth adapter of the device.

Yet, the library doesn’t support the following features:

  • peripheral support that enables the communication between phones through BLE;
  • creating bonds with peripheral devices;
  • working with Bluetooth Classic devices.

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+.

⚒ react-native-ble-manager

GitHub

This library is an alternative option you can use to integrate a BLE device into a React Native application.

Despite the fact that an explicit list of features isn’t provided, we have defined the key functionality based on the names of methods. It includes all the features react-native-ble-plx has and a few additional ones such as:

  • bonding peripherals;
  • requesting connection priority;
  • getting connected & bonding peripherals.

The latest version of the library supports RN 0.60 and newer. However, the older version of the library can be used with older RN versions:

  • React Native 0.40-0.59 is supported until 6.7.X
  • React Native 0.30-0.39 is supported until 2.4.3

As for OS versions, this library covers iOS 8+ and Android API 18+.

Read Also

React Native vs Flutter: Detailed Comparison

⚖ react-native-ble-plx vs react-native-ble-manager 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+

If we take a look at the features, it's noticeable that react-native-ble-manager provides a bit more possibilities for developers:

⚙️ 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:

lib-downloads-ble-rn

You can find even more smaller details on react-native-ble-plx here, and on react-native-ble-manager here.

✅ Apps to Test BLE Devices

When developing a React Native mobile app with BLE integration, you should test how it will actually function with such devices. Our team used the following apps:

These tools are quite similar and provide many options to test different features of BLE devices.

Read Also

18 Essential Tools For React Native Development

⚠️ Possible Pitfalls when Integrating BLE Devices

During BLE integration, our developers spotted a few pitfalls that can make the development process a lot trickier. Here are our recommendations on how you can make the development go smoother.

# 1: Turn on geolocation 🌍

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, we recommend using the react-native-android-location-enabler library.

# 2: Turn on Bluetooth 📳

Obviously, you need to turn on Bluetooth on the device before scanning. For this purpose you may use the methods of the mentioned libraries:

# 3: Change device name 📱

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.

# 4: Keep code quality high 🏆

Finally, here are a few general tips to improve the code quality:

  • Keep all of the characteristics and UUID services in one place.
  • Avoid magic numbers in characteristics. Instead, use constants.
  • Organize the logic structure into 2 separate files:
    • one file to keep the logic that contains code that isn't related to communication with a specific device (e.g. scanning, connection, disconnection);
    • another file for the code that contains communication with a specific device — discovering services/characteristics, observing notifications/indications, reading/writing characteristics, etc.

Read Also

11 Stories of How React Native Apps Have Changed the World

💡 Takeaways: So, Which One to Choose?

Simple but true: the best choice is always the one that matches your needs better than all the other options. Thus, we'd recommend you to consider things like:

  • the required features;
  • the RN version used in the project;
  • the OS versions you’d like to cover.

If you'll find out that both libraries suit you, we’d recommend choosing react-native-ble-plx, as it has a clearer and more structured documentation.

Get in touch!

Read also

End-to-end testing can be a game-changer for in-app purchases in React Native apps. Learn how to implement this testing method and ensure a seamless user experience for your customers.

End-to-end Testing In-App Purchases in React Native Apps: Everything You Need to Know

Building a React Native Chat App with PubNub and Gifted Chat

How to Localize your Mobile or Web App

How can we help you?

Our clients say

Stormotion client Pietro Saccomani, Founder from [object Object]

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