What to Consider when Integrating BLE in your React Native App
Content:
  • 1. 📳 Bluetooth Low Energy: 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. In Stormotion, we have already worked with them in a few projects: one regarding vaping and another — fitness tracking devices.

    In this article, we specifically focus on the integration of BLE devices in React Native. Yet, how is this technology different from classic Bluetooth? And what are its key concepts? A brief explanation is below!



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

    We all know what Bluetooth is — a short-range wireless networking protocol to quickly connect 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 may include phone calls, audio streaming, 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 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 to BLE integration in a React Native App, it’s important to know how this technology works. We won’t focus on that much but will still refresh 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 peripherals:

    ble-connections
    Connection between a central and peripheral devices (image by Kevin Townsend)

    Since we’re talking about GATT, let’s take a bit closer look at the server/client relationship:

    • From that perspective, a peripheral device is known as the GATT Server that contains data.
    • A central device acts as the GATT Client that sends requests to this 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 goes faster since it doesn’t ask the Client whether it has received the message or not.
    • Indication describes a system of two-way communication. The Server sends a message ➡️ the Client receives the message and sends a confirmation message back to the Server ➡️ 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.

    ble-profile-service-characteristic
    The hierarchy of Profiles, Services and Characteristics (image by Kevin Townsend)
    • Profile is a predefined set of Services.
    • Services break data up 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:

    ble-structure-example
    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, Profile, Services and Characteristics here, and on Notifications & Indications — here.

    But let’s get back to our core 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 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 the 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. Yet, 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 in a React Native application.

    Despite the explicit list of features isn’t provided, we defined key functionality based on the names of methods. It includes all the features react-native-ble-plx does and a few additional ones like:

    • bonding peripherals;
    • request connection priority;
    • get connected & bonded 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, react-native-ble-manager provides a bit more possibilities to 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)
    get connected peripherals
    refresh cache ✅ (Android only) ✅ (Android only)
    request 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'll probably need to test how it really works such devices. Our team used the following apps:

    The 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 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 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 geolocation is enabled and turn it on in case its not, 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 methods of the mentioned libraries:



    # 3: Change device name 📱

    When using react-native-ble-plx you may stumble upon a bug when the device name wouldn’t change. That happens because name is cached. This issue is tracked here.



    # 4: Keep code quality high 🏆

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

    • Keep all the characteristics and services UUID in one place.
    • Avoid magic numbers in characteristic. Instead, use constants.
    • Organize the logic structure into 2 separate files:
      • one file to keep logic that contains code that is not related to communication with a specific device (e.g. scanning, connection, disconnection);
      • another file for code that contains communication with a specific device — discovering services/characteristics, observing notifications/indications, reading/writing characteristics and others.
    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 other options. Thus, we’d recommend you to consider things like:

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

    If both libraries suit you from this perspective, we’d choose react-native-ble-plx as it has clearer and better structured documentation.

    quote
    Get in touch!
    {"value":[4.1,4.8],"count":[3,63],"from":"2020-07-13"}
    Rate this Article:
    (17 ratings, average: 4.27 out of 5)
    Thank you for your vote!
    What to Consider when Integrating BLE in your React Native App
    8 min read

    Bluetooth Low Energy (or simply BLE) devices are extremely popular these days. In Stormotion, we have already worked with them in a few projects: one regarding vaping and another — fitness tracking devices. In this article, we specifically focus on the integration of BLE devices in React Native. Yet, how is

    Digital Transformation Guide: Milestones and Examples
    23 min read

    Cover image by Dmitrij Everybody’s talking about the digital transformation of business these days. Many business have already switched their products, services, and internal processes to digital; even more are going through this process now. You’re probably thinking about moving in this direction, too. Yet, it leaves you

    Custom Software Development for Manufacturing Company: How to Build and How It Helps
    18 min read

    Cover image by Nimasha Perera At first glance, mobile and web technologies don’t seem vital for manufacturing companies. That’s why some businesses underestimate the importance of custom manufacturing software development. Yet, the after-COVID reality shows us that things are quite different. The PWC’s 23rd Annual Global CEO

    How can we help you?

    If we can't do it, no one else can.

    Name*
    Email*
    Please tell us about your project*

    Thanks!

    We'll come back to you regarding your project within 24 hours. Meanwhile, please check some insights from our blog:

    What to Consider when Integrating BLE in your React Native App
    8 min read

    Bluetooth Low Energy (or simply BLE) devices are extremely popular these days. In Stormotion, we have already worked with them in a few projects: one regarding vaping and another — fitness tracking devices. In this article, we specifically focus on the integration of BLE devices in React Native. Yet, how is

    Digital Transformation Guide: Milestones and Examples
    23 min read

    Cover image by Dmitrij Everybody’s talking about the digital transformation of business these days. Many business have already switched their products, services, and internal processes to digital; even more are going through this process now. You’re probably thinking about moving in this direction, too. Yet, it leaves you

    Custom Software Development for Manufacturing Company: How to Build and How It Helps
    18 min read

    Cover image by Nimasha Perera At first glance, mobile and web technologies don’t seem vital for manufacturing companies. That’s why some businesses underestimate the importance of custom manufacturing software development. Yet, the after-COVID reality shows us that things are quite different. The PWC’s 23rd Annual Global CEO

    Search

    0 results. Try changing your query.