Integrating Bluetooth Low Energy (BLE) with React Native: A Step-by-Step Guide

Unlocking Bluetooth Low Energy in React Native

In this tutorial, we will explore how to integrate Bluetooth Low Energy (BLE) into a React Native application. BLE is a version of Bluetooth that consumes less energy and is perfect for devices that require long battery life.

What is BLE?

BLE is a wireless personal area network technology that allows devices to communicate with each other over short distances. It is designed to consume low power and is commonly used in health, fitness, and security industries.

Prerequisites

Before we begin, make sure you have the following installed on your local computer:

• React Native
• npm (version 8 or higher)
• Node.js (version 18 or higher)
• A physical device (e.g., smartwatch, heart rate monitor)

Installing react-native-ble-manager

To install react-native-ble-manager, run the following command:

npm install react-native-ble-manager

Next, go to your AndroidManifest.xml file and add the following configuration:
xml
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

These permissions allow our application to connect to our phone’s location, scan for nearby BLE devices, and connect to them.

Building the BLE Manager

To build the BLE manager, we need to import the following modules:
jsx
import React, { useState, useEffect } from 'react';
import { Platform, NativeModules, NativeEventEmitter } from 'react-native';
import BleManager from 'react-native-ble-manager';

The BleManager module provides methods to interact with BLE devices.

Using the enableBluetooth() method

Before using the BleManager, we need to make sure our Bluetooth is turned on. We can use the enableBluetooth() method to do this:
jsx
BleManager.enableBluetooth()
.then(() => {
console.log('Bluetooth is enabled');
})
.catch((error) => {
console.log('Error enabling Bluetooth:', error);
});

Using the start() method

To start scanning for BLE devices, we need to call the start() method:
jsx
BleManager.start();

This method initializes the BleManager and starts scanning for devices.

Using the startScan() method

To start scanning for BLE devices, we can use the startScan() method:
jsx
BleManager.startScan(null, null, true)
.then(() => {
console.log('Scanning started');
})
.catch((error) => {
console.log('Error starting scan:', error);
});

This method scans for devices and returns a promise.

Connecting to a BLE device

To connect to a BLE device, we can use the createBond() method:
jsx
BleManager.createBond(deviceId)
.then(() => {
console.log('Connected to device');
})
.catch((error) => {
console.log('Error connecting to device:', error);
});

This method pairs with the device and connects to it.

Disconnecting from a BLE device

To disconnect from a BLE device, we can use the removeBond() method:
jsx
BleManager.removeBond(deviceId)
.then(() => {
console.log('Disconnected from device');
})
.catch((error) => {
console.log('Error disconnecting from device:', error);
});

This method removes the bond with the device and disconnects from it.

Utilizing event listeners

We can use event listeners to listen to events such as scanning stopped, device discovered, and device connected:
“`jsx
const bleManagerEmitter = new NativeEventEmitter(BleManager);

bleManagerEmitter.addListener(‘BleManagerStopScan’, () => {
console.log(‘Scanning stopped’);
});

bleManagerEmitter.addListener(‘BleManagerDiscoverPeripheral’, (device) => {
console.log(‘Device discovered:’, device);
});

bleManagerEmitter.addListener(‘BleManagerConnectPeripheral’, (device) => {
console.log(‘Connected to device:’, device);
});
“`
These event listeners allow us to perform actions when certain events occur.

Full Code

Here is the full code for the App.js file:
“`jsx
import React, { useState, useEffect } from ‘react’;
import { Platform, NativeModules, NativeEventEmitter } from ‘react-native’;
import BleManager from ‘react-native-ble-manager’;

const App = () => {
const [devices, setDevices] = useState([]);

useEffect(() => {
BleManager.enableBluetooth()
.then(() => {
console.log(‘Bluetooth is enabled’);
})
.catch((error) => {
console.log(‘Error enabling Bluetooth:’, error);
});

BleManager.start();

const bleManagerEmitter = new NativeEventEmitter(BleManager);

bleManagerEmitter.addListener('BleManagerStopScan', () => {
  console.log('Scanning stopped');
});

bleManagerEmitter.addListener('BleManagerDiscoverPeripheral', (device) => {
  console.log('Device discovered:', device);
  setDevices((prevDevices) => [...prevDevices, device]);
});

bleManagerEmitter.addListener('BleManagerConnect