Bluetooth Low Energy (BLE) with React Native and Arduino

Bluetooth Low Energy (BLE) with React Native and Arduino - Blog - Josh Martin's Website

1
2
3
4
#include <BLEDevice.h>
#include <BLEUtils.h>
#include <BLEServer.h>
#include <BLE2902.h>

1
2
3
4
5
6
7
8
9
10
11
12
13
#include <BLEDevice.h>
#include <BLEUtils.h>
#include <BLEServer.h>
#include <BLE2902.h>

BLEServer *pServer;
#define DEVICE_NAME "MyESP32"
#define SERVICE_UUID "ab49b033-1163-48db-931c-9c2a3002ee1d"


void setup() {
// ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#include <BLEDevice.h>
#include <BLEUtils.h>
#include <BLEServer.h>
#include <BLE2902.h>

BLEServer *pServer;
#define DEVICE_NAME "MyESP32"
#define SERVICE_UUID "ab49b033-1163-48db-931c-9c2a3002ee1d"

void setup() {
  // put your setup code here, to run once:
  BLEDevice::init(DEVICE_NAME);
  pServer = BLEDevice::createServer();
  BLEService *pService = pServer->createService(SERVICE_UUID);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#include <BLEDevice.h>
#include <BLEUtils.h>
#include <BLEServer.h>
#include <BLE2902.h>

BLEServer *pServer;
#define DEVICE_NAME "MyESP32"
#define SERVICE_UUID "ab49b033-1163-48db-931c-9c2a3002ee1d"

void setup() {
  // put your setup code here, to run once:
  BLEDevice::init(DEVICE_NAME);
  pServer = BLEDevice::createServer();
  BLEService *pService = pServer->createService(SERVICE_UUID);

    //start the service
  pService->start();
  //start advertising service
  BLEAdvertising *pAdvertising = pServer->getAdvertising();
  pAdvertising->addServiceUUID(SERVICE_UUID);
// helps with IPhone pairing
  pAdvertising->setScanResponse(true);
  pAdvertising->setMinPreferred(0x06);
  pAdvertising->setMinPreferred(0x12);
  BLEDevice::startAdvertising();
  Serial.println("Ready! For your bits!");
}

void loop() {
  // put your main code here, to run repeatedly:

}

1
2
BLECharacteristic *pStepCountCharacteristic;
#define STEPCOUNT_CHARACTERISTIC_UUID "fbb6411e-26a7-44fb-b7a3-a343e2b011fe"

1
2
3
4
class MyCallbacks: public BLECharacteristicCallbacks {
    void onWrite(BLECharacteristic *pCharacteristic) {
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
BLECharacteristic* createCharacteristic(std::string characteristicUuid, BLEService *pService)
{
  BLECharacteristic *characteristic = pService->createCharacteristic( 
                                         characteristicUuid,
                                         BLECharacteristic::PROPERTY_READ |
                                         BLECharacteristic::PROPERTY_NOTIFY |
                                         BLECharacteristic::PROPERTY_WRITE
                                       );
  characteristic->addDescriptor(new BLE2902());
  characteristic->setCallbacks(new MyCallbacks());
  return characteristic;
}

1
pStepCountCharacteristic = createCharacteristic(STEPCOUNT_CHARACTERISTIC_UUID, pService);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#include <BLEDevice.h>
#include <BLEUtils.h>
#include <BLEServer.h>
#include <BLE2902.h>

BLEServer *pServer;
#define DEVICE_NAME "MyESP32"
#define SERVICE_UUID "ab49b033-1163-48db-931c-9c2a3002ee1d"

BLECharacteristic *pStepCountCharacteristic;
#define STEPCOUNT_CHARACTERISTIC_UUID "fbb6411e-26a7-44fb-b7a3-a343e2b011fe"

class MyCallbacks: public BLECharacteristicCallbacks {
    void onWrite(BLECharacteristic *pCharacteristic) {
    }
    
    void onConnect(BLEServer* pServer) {
      }

    void onDisconnect(BLEServer* pServer){
      }
};

BLECharacteristic* createCharacteristic(std::string characteristicUuid, BLEService *pService)
{
  BLECharacteristic *characteristic = pService->createCharacteristic( 
                                         characteristicUuid,
                                         BLECharacteristic::PROPERTY_READ |
                                         BLECharacteristic::PROPERTY_NOTIFY |
                                         BLECharacteristic::PROPERTY_WRITE
                                       );
  characteristic->addDescriptor(new BLE2902());
  characteristic->setCallbacks(new MyCallbacks());
  return characteristic;
}

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  while(!Serial);
  BLEDevice::init(DEVICE_NAME);
  pServer = BLEDevice::createServer();
  BLEService *pService = pServer->createService(SERVICE_UUID);

    //start the service
  pService->start();
  //start advertising service
  BLEAdvertising *pAdvertising = pServer->getAdvertising();
  pAdvertising->addServiceUUID(SERVICE_UUID);
  // helps with IPhone pairing
  pAdvertising->setScanResponse(true);
  pAdvertising->setMinPreferred(0x06);
  pAdvertising->setMinPreferred(0x12);
  BLEDevice::startAdvertising();
  Serial.println("Ready! For your bits!");
}

void loop() {
  // put your main code here, to run repeatedly:
}

1
2
3
4
5
6
7
8
9
10
void loop() {
  // put your main code here, to run repeatedly:
  stepCount = random(30);
  String stepData = String(stepCount);
  pStepDataCharacteristic->setValue(stepData.c_str());
  pStepDataCharacteristic->notify();

  Serial.print("Value is: ");
  Serial.println(stepCount);
}

1
npx create-expo-app -t expo-template-blank-typescript BLETest

1
npm i -g expo

1
rm -rf node_modules && npm i

1
2
3
4
5
const PERMISSIONS_REQUEST = [
  PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
  PermissionsAndroid.PERMISSIONS.BLUETOOTH_CONNECT,
  PermissionsAndroid.PERMISSIONS.BLUETOOTH_SCAN,
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { Button, Platform, Text, View } from 'react-native';
import { useAndroidPermissions } from './useAndroidPermissions';

export default function App() {
  const [hasPermissions, setHasPermissions] = useState<boolean>(Platform.OS == 'ios');
  const [waitingPerm, grantedPerm] = useAndroidPermissions();

  useEffect(() => {
    if (!(Platform.OS == 'ios')){
      setHasPermissions(grantedPerm);
    }
  }, [grantedPerm])

  return (
    <View
    style={{flex: 1, alignItems: 'center', justifyContent:'center'}}
    >
    {
      !hasPermissions && (
        <View> 
          <Text>Looks like you have not enabled Permission for BLE</Text>
        </View>
      )
    }
    {hasPermissions &&(
      <Text>BLE Premissions enabled!</Text>
    )
    }
      <StatusBar style="auto" />
    </View>
  );
}

1
expo install react-native-ble-plx

1
2
3
import { BleManager } from 'react-native-ble-plx';

const bleManager = new BleManager();

1
2
3
4
5
import { BleManager } from 'react-native-ble-plx';
const bleManager = new BleManager();

const DEVICE_NAME = "MyESP32";
const SERVICE_UUID = "ab49b033-1163-48db-931c-9c2a3002ee1d";

1
2
const [connectionStatus, setConnectionStatus] = useState("Searching...");
const [isConnected, setIsConnected] = useState<boolean>(false);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const [waitingPerm, grantedPerm] = useAndroidPermissions();
 const [hasPermissions, setHasPermissions] = useState<boolean>(Platform.OS == 'ios');

  useEffect(() => {
    if (!(Platform.OS == 'ios')){
      setHasPermissions(grantedPerm);
    }
  }, [grantedPerm])

  useEffect(() => {
    if(hasPermissions){
      searchAndConnectToDevice();
    }
  }, [hasPermissions]);

const searchAndConnectToDevice = () =>
    bleManager.startDeviceScan(null, null, (error, device) => {
      if (error) {
        console.error(error);
        setIsConnected(false);
        setConnectionStatus("Error searching for devices");
        return;
      }
      if (device?.name === DEVICE_NAME) {
        bleManager.stopDeviceScan();
        setConnectionStatus("Connecting...");
        connectToDevice(device);
      }
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const [device, setDevice] = useState<Device | null>(null);

    const connectToDevice = async (device: Device) => {
      try {
      const _device = await device.connect(); 
       // require to make all services and Characteristics accessable
      await _device.discoverAllServicesAndCharacteristics();
      setConnectionStatus("Connected");
      setIsConnected(true);
      setDevice(_device);
      } catch (error){
          setConnectionStatus("Error in Connection");
          setIsConnected(false);
      }
    };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
useEffect(() => {
      if (!device) {
        return;
      }

      const subscription = bleManager.onDeviceDisconnected(
        device.id,
        (error, device) => {
          if (error) {
            console.log("Disconnected with error:", error);
          }
          setConnectionStatus("Disconnected");
          setIsConnected(false);
          console.log("Disconnected device");
          if (device) {
            setConnectionStatus("Reconnecting...");
            connectToDevice(device)
              .then(() => {
                setConnectionStatus("Connected");
                setIsConnected(true);
              })
              .catch((error) => {
                console.log("Reconnection failed: ", error);
                setConnectionStatus("Reconnection failed");
                setIsConnected(false);
                setDevice(null);
              });
          }
        }
      );

      return () => subscription.remove();
    }, [device]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
return (
    <View
    style={{flex: 1, alignItems: 'center', justifyContent:'center'}}
    >
    {
      !hasPermissions && (
        <View> 
          <Text>Looks like you have not enabled Permission for BLE</Text>
        </View>
      )
    }
    {hasPermissions &&(
      <View>
      <Text>BLE Premissions enabled!</Text>
      <Text>The connection status is: {connectionStatus}</Text>
      <Button 
      disabled={!isConnected} 
      onPress={() => {}}
      title={`The button is ${isConnected ? "enabled" : "disabled"}`}
      />
      </View>
    )
    }
      <StatusBar style="auto" />
    </View>
  );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { Button, Platform, Text, View } from 'react-native';
import { BleManager, Device } from 'react-native-ble-plx';
import { useAndroidPermissions } from './useAndroidPermissions';

const bleManager = new BleManager();

const DEVICE_NAME = "MyESP32";
const SERVICE_UUID = "ab49b033-1163-48db-931c-9c2a3002ee1d";

export default function App() {
  const [hasPermissions, setHasPermissions] = useState<boolean>(Platform.OS == 'ios');
  const [waitingPerm, grantedPerm] = useAndroidPermissions();

  const [connectionStatus, setConnectionStatus] = useState("Searching...");
  const [isConnected, setIsConnected] = useState<boolean>(false);

  useEffect(() => {
    if (!(Platform.OS == 'ios')){
      setHasPermissions(grantedPerm);
    }
  }, [grantedPerm])

  useEffect(() => {
    if(hasPermissions){
      searchAndConnectToDevice();
    }
  }, [hasPermissions]);

  const searchAndConnectToDevice = () =>
    bleManager.startDeviceScan(null, null, (error, device) => {
      if (error) {
        console.error(error);
        setIsConnected(false);
        setConnectionStatus("Error searching for devices");
        return;
      }
      if (device?.name === DEVICE_NAME) {
        bleManager.stopDeviceScan();
        setConnectionStatus("Connecting...");
        connectToDevice(device);
      }
    });


    const [device, setDevice] = useState<Device | null>(null);

    const connectToDevice = async (device: Device) => {
      try {
      const _device = await device.connect(); 
       // require to make all services and Characteristics accessable
      await _device.discoverAllServicesAndCharacteristics();
      setConnectionStatus("Connected");
      setIsConnected(true);
      setDevice(_device);
      } catch (error){
          setConnectionStatus("Error in Connection");
          setIsConnected(false);
      }
    };

    useEffect(() => {
      if (!device) {
        return;
      }

      const subscription = bleManager.onDeviceDisconnected(
        device.id,
        (error, device) => {
          if (error) {
            console.log("Disconnected with error:", error);
          }
          setConnectionStatus("Disconnected");
          setIsConnected(false);
          console.log("Disconnected device");
          if (device) {
            setConnectionStatus("Reconnecting...");
            connectToDevice(device)
              .then(() => {
                setConnectionStatus("Connected");
                setIsConnected(true);
              })
              .catch((error) => {
                console.log("Reconnection failed: ", error);
                setConnectionStatus("Reconnection failed");
                setIsConnected(false);
                setDevice(null);
              });
          }
        }
      );

      return () => subscription.remove();
    }, [device]);
  

  return (
    <View
    style={{flex: 1, alignItems: 'center', justifyContent:'center'}}
    >
    {
      !hasPermissions && (
        <View> 
          <Text>Looks like you have not enabled Permission for BLE</Text>
        </View>
      )
    }
    {hasPermissions &&(
      <View>
      <Text>BLE Premissions enabled!</Text>
      <Text>The connection status is: {connectionStatus}</Text>
      <Button 
      disabled={!isConnected} 
      onPress={() => {}}
      title={`The button is ${isConnected ? "enabled" : "disabled"}`}
      />
      </View>
    )
    }
      <StatusBar style="auto" />
    </View>
  );
}

1
const STEPCOUNT_CHARACTERISTIC_UUID = "fbb6411e-26a7-44fb-b7a3-a343e2b011fe";

1
expo install react-native-quick-base64

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {  atob } from "react-native-quick-base64";
//...

 const [stepCount, setStepCount] = useState(-1);
      useEffect(() => {
      if(!device || !device.isConnected) {
        return
      }
      const sub = device.monitorCharacteristicForService(
        SERVICE_UUID,
        STEPCOUNT_CHARACTERISTIC_UUID,
        (error, char) => {
          if (error || !char) {
            return;
          }

          const rawValue = parseInt(atob(char?.value ?? ""));
          setStepCount(rawValue);
        }
      )
      return () => sub.remove()
    }, [device])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { Button, Platform, Text, View } from 'react-native';
import { BleManager, Device } from 'react-native-ble-plx';
import { useAndroidPermissions } from './useAndroidPermissions';
import {  atob } from "react-native-quick-base64";

const bleManager = new BleManager();

const DEVICE_NAME = "MyESP32";
const SERVICE_UUID = "ab49b033-1163-48db-931c-9c2a3002ee1d";
const STEPCOUNT_CHARACTERISTIC_UUID = "fbb6411e-26a7-44fb-b7a3-a343e2b011fe";

export default function App() {
  const [hasPermissions, setHasPermissions] = useState<boolean>(Platform.OS == 'ios');
  const [waitingPerm, grantedPerm] = useAndroidPermissions();

  const [connectionStatus, setConnectionStatus] = useState("Searching...");
  const [isConnected, setIsConnected] = useState<boolean>(false);

  const [device, setDevice] = useState<Device | null>(null);

  const [stepCount, setStepCount] = useState(-1);

  useEffect(() => {
    if (!(Platform.OS == 'ios')){
      setHasPermissions(grantedPerm);
    }
  }, [grantedPerm])

  useEffect(() => {
    if(hasPermissions){
      searchAndConnectToDevice();
    }
  }, [hasPermissions]);

  const searchAndConnectToDevice = () =>
    bleManager.startDeviceScan(null, null, (error, device) => {
      if (error) {
        console.error(error);
        setIsConnected(false);
        setConnectionStatus("Error searching for devices");
        return;
      }
      if (device?.name === DEVICE_NAME) {
        bleManager.stopDeviceScan();
        setConnectionStatus("Connecting...");
        connectToDevice(device);
      }
    });

    const connectToDevice = async (device: Device) => {
      try {
      const _device = await device.connect(); 
       // require to make all services and Characteristics accessable
      await _device.discoverAllServicesAndCharacteristics();
      setConnectionStatus("Connected");
      setIsConnected(true);
      setDevice(_device);
      } catch (error){
          setConnectionStatus("Error in Connection");
          setIsConnected(false);
      }
    };

    useEffect(() => {
      if (!device) {
        return;
      }

      const subscription = bleManager.onDeviceDisconnected(
        device.id,
        (error, device) => {
          if (error) {
            console.log("Disconnected with error:", error);
          }
          setConnectionStatus("Disconnected");
          setIsConnected(false);
          console.log("Disconnected device");
          if (device) {
            setConnectionStatus("Reconnecting...");
            connectToDevice(device)
              .then(() => {
                setConnectionStatus("Connected");
                setIsConnected(true);
              })
              .catch((error) => {
                console.log("Reconnection failed: ", error);
                setConnectionStatus("Reconnection failed");
                setIsConnected(false);
                setDevice(null);
              });
          }
        }
      );

      return () => subscription.remove();
    }, [device]);
  
    useEffect(() => {
      if(!device || !device.isConnected) {
        return
      }
      const sub = device.monitorCharacteristicForService(
        SERVICE_UUID,
        STEPCOUNT_CHARACTERISTIC_UUID,
        (error, char) => {
          if (error || !char) {
            return;
          }

          const rawValue = parseInt(atob(char?.value ?? ""));
          setStepCount(rawValue);
        }
      )
      return () => sub.remove()
    }, [device])


  return (
    <View
    style={{flex: 1, alignItems: 'center', justifyContent:'center'}}
    >
    {
      !hasPermissions && (
        <View> 
          <Text>Looks like you have not enabled Permission for BLE</Text>
        </View>
      )
    }
    {hasPermissions &&(
      <View>
      <Text>BLE Premissions enabled!</Text>
      <Text>The connection status is: {connectionStatus}</Text>
      <Button 
      disabled={!isConnected} 
      onPress={() => {}}
      title={`The button is ${isConnected ? "enabled" : "disabled"}`}
      />
      <Text>The current Step count is: {stepCount}</Text>
      </View>
    )
    }
      <StatusBar style="auto" />
    </View>
  );
}

1
2
3
int heartRate = 0;
BLECharacteristic *pHeartRateCharacteristic;
# define HEARTRATE_CHARACTERISTIC_UUID "c58b67c8-f685-40d2-af4c-84bcdaf3b22e"

1
2
3
4
5
void setup() {
// ...
pHeartRateCharacteristic = createCharacteristic(HEARTRATE_CHARACTERISTIC_UUID, pService);
//...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
int readValue(BLECharacteristic *characteristic) {
  if (characteristic == NULL) {
    return -1;
  }
  std::string value = std::string(
      (
        characteristic->getValue()
      ).c_str()
    );

  try{
    return stoi(value);
  } catch(...) {
    return -1;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
void loop() {
// ...
  heartRate = readValue(pHeartRateCharacteristic);
  Serial.print("heart rate value is: ");
  if (heartRate > 0){
    Serial.println(heartRate);
  }
  else {
    Serial.println("No Heart rate value received");
  }
// ...
}

1
const  HEARTRATE_CHARACTERISTIC_UUID = "c58b67c8-f685-40d2-af4c-84bcdaf3b22e";

1
2
3
4
5
6
7
8
9
10
useEffect(() => {
    if(!device || !device.isConnected){
      return;
    }
    device.writeCharacteristicWithResponseForService(
      SERVICE_UUID,
      HEARTRATE_CHARACTERISTIC_UUID,
      btoa(String(heartRate))
    ).catch(e => {})
  }, [heartRate])

1
2
3
4
5
6
7
8
9
10
<View style={{margin: 10}}>
            <Text style={{ fontWeight: "500", margin: 5 }}>
              Heart Rate value is: {heartRate}
            </Text>
            <Button
              onPress={() => setHeartRate(heartRate + 1)}
              title="Increase User's heart rate"
              color="red"
            />
          </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
bool deviceConnected = false;
bool oldDeviceConnected = false;

class MyServerCallbacks: public BLEServerCallbacks {
    void onConnect(BLEServer* pServer) {
      deviceConnected = true;
      Serial.println("Connected from device");
    };

    void onDisconnect(BLEServer* pServer) {
      deviceConnected = false;
      Serial.println("Disconnected from device");
    }
};

1
2
3
4
5
void setup() {
//...
pServer->setCallbacks(new MyServerCallbacks());
//...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
void loop() {
// ...   
// disconnecting
  if (!deviceConnected && oldDeviceConnected) {
    delay(500); // give the bluetooth stack the chance to get things ready
    pServer->startAdvertising(); // restart advertising
    Serial.println("start advertising");
    oldDeviceConnected = deviceConnected;
  }
  // connecting
  if (deviceConnected && !oldDeviceConnected) {
    // do stuff here on connecting
    oldDeviceConnected = deviceConnected;
  }

     if(!deviceConnected){
    return;
  }
// ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const devicesRef = useRef({});
  const devicesRefreshIntervalRef = useRef(0);

  const searchAndConnectToDevice = () => {
    bleManager.startDeviceScan([], {allowDuplicates: false}, (error, device) => {

      if (error) {
        console.error(error);
        setIsConnected(false);
        setConnectionStatus("Error searching for devices");
        return;
      }
      if (device?.name){
        devicesRef.current
        if(!devicesRef.current) {
          devicesRef.current = {};
        }
        else {
          //@ts-ignore
          devicesRef.current[device.name] = device
        }
      }
    });
    
    const id = setInterval(() => {
          console.log('refreshing list to be: ', Object.keys(devicesRef?.current))
          setDevices(devicesRef?.current);
        }, 3000)
    //@ts-ignore
      devicesRefreshIntervalRef.current = id;
  }

1
bleManager.startDeviceScan([SERVICE_UUID], {allowDuplicates: false}, (error, device) => {})

1
2
3
4
5
6
7
8
const connectToDevice = async (device: Device) => {
      bleManager.stopDeviceScan();
      clearInterval(devicesRefreshIntervalRef.current);
      devicesRefreshIntervalRef.current = 0;
      try {
      const _device = await bleManager.connectToDevice(device.id, undefined); 
// ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Item (props: Device){
      return (
        <Pressable key={props.id}
          onPress={() =>{
                setConnectionStatus("Connecting...");
                connectToDevice(props);
          }}
          style={{
            backgroundColor: '#2596be',
            padding: 16,
            marginBottom: 10,
            borderRadius: 20
          }}
        >
          <Text
            style={{
              color: 'white',
              fontWeight: '500',
              fontSize: 16
            }}
          >{props.name} // {props.rssi}</Text>
        </Pressable>
      );
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{hasPermissions && !isConnected && (
        <SafeAreaView
          style={{
            flex: 1,
            //@ts-ignore
            marginTop: 50,
          }}
        >
          <Text style={{ fontWeight: "600", fontSize: 24, marginBottom: 14 }}>
            Device connection list
          </Text>
          <ScrollView>
            {Object.values(devices)
              //@ts-ignore
              .sort((a, b) => Number(b.rssi) - Number(a.rssi))
              .filter((value, i) => i < 20)
              .map((item: any) => (
                <Item key={item.id + (item.rssi ?? "")} {...item} />
              ))}
          </ScrollView>
        </SafeAreaView>
      )}

1
setIsOn(Boolean((props.value & props.mask)  == props.mask))

1
2
const value = props.value ^ props.mask;
  setIsOn(Boolean(value == props.mask))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
std::string value = readValue(pAllLotCharacteristic, true);
  JsonDocument doc;
  DeserializationError error = deserializeJson(doc, value);

  // Test if parsing succeeds.
  if (error) {
    Serial.print(F("deserializeJson() failed: "));
    Serial.println(error.f_str());
    return;
  }

  int v1 = doc[0];
  int v2 = doc[1];
  int v3 = doc[2];
  int v4 = doc[3];

  Serial.print("JSON Values: [");
  Serial.print(v1);
  Serial.print(",");
  Serial.print(v2);
  Serial.print(",");
  Serial.print(v3);
  Serial.print(",");
  Serial.print(v4);
  Serial.println("]");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const testData = JSON.stringify([
        adj1,
        adj2,
        adj3,
        adj4,
      ]);
      console.log("Sending array of test data...");
      device
        .writeCharacteristicWithResponseForService(
          SERVICE_UUID,
          ALL_LOT_CHARACTERISTIC_UUID,
          btoa(testData)
        )
        .catch((e) => {});

Bluetooth Low Energy (BLE) with React Native and Arduino

Introduction #

Introduction into Bluetooth #

Bluetooth Classic #

Bluetooth Low Energy (BLE) #

Going deeper on BLE #

Profile #

Service #

characteristic #

Setting up Bluetooth Low Energy on a ESP32 #

Bluetooth Client vs Bluetooth Server #

Initializing the Bluetooth server in Arduino IDE #

Configuring Characteristics in the Arduino IDE #

Setting up BLE in a React Native application #

Preparing for React Native #

Creating the React Native application #

Setting up characteristics #

Optimizations #

Sending data to the BLE device from the mobile Application #

Optimizing Connecting and reconnecting of devices #

Searching for BLE Devices rather then a static device #

Characteristics Optimization to allow the transmission of lots of data via BLE #

Sources #

Josh Martin

React.JS Developer

contact@cjoshmartin.com

Fishers, Indiana

IOS Universal Links with Expo, React Navigation and React Native

Generating ZIP Files with Javascript

Added Support For 3D Models In Blog Post