How to maintain bluetooth connection on page navigation/refresh/rerender?

[jackbridger]

Thanks for maintaining awesome library

I have a questions about maintaining BLE connection when rerendering the page.

Currently we're doing all of our ble-plx stuff within a single page and testing with iOS

  const scanAndConnect = async () => {
    const connectionStatus = await manager.isDeviceConnected(ARDUINODEVICEID);
    if (!connectionStatus) {
      await manager.startDeviceScan(
        [SERVICEUUID],
        null,
        async (error, device) => {
          if (error) {
            throw error;
          }
          if (device.name === "Arduino") {
            setCurrentDevice(device);
            await manager.stopDeviceScan();
            await manager.connectToDevice(device.id, { autoConnect: true });
            await device.discoverAllServicesAndCharacteristics();
            const services = await device.services();
            const characteristics = await manager.characteristicsForDevice(
              ARDUINODEVICEID,
              SERVICEUUID
            );
            const singleCharacteristic = characteristics[0];
            singleCharacteristic
              .monitor(async (error, char) => {
                count++;
                setSensorData(`${count}`);
              })
          }
        }
      );
    } else {
      console.log("DEVICE ALREADY CONNECTED");
    }
  };

Right now we're just doing a count to isolate the issue. But every time we receive data from our arduino, we update the state of count.

The first time
setSensorData(`${count}`);
is called, our connection with the BLE device drops.

Is this because we're inside our page and it should take place at the app level or is there something else we need to do to maintain device connection when rerendering our pages/navigation etc.?

Thanks!

[diegogurpegui]

If you need to monitor a characteristic across, it might make sense for you to handle the connection and monitoring in a service (for example) instead of doing it on the page.

I'm not sure if that's your problem, but doing it on a service will guarantee that you don't drop any important variable or state when closing a page.

[Cierpliwy]

Can you show how do you handle BleManager instance? I highly recommend to separate BLE from the UI.

[jackbridger]

Thanks both, separating BLE from UI solved the issue for us!

[jsonpoindexter]

@jackbridger can you please elaborate on how you separated BLE from UI? was this done via a background service worker? https://github.com/devfd/react-native-workers

[MedRaid]

@jackbridger , Hello, i have the same issue, can you please give an example of how did you separate BLE from UI please ? on android it works perfectly without the separation, on iOS everything works but only on the same interface.

[jsonpoindexter]

@MedRaid I found out how. You need to have the code that manages the BLE connection in a background worker. Here is an example using Saga https://github.com/Cierpliwy/SensorTag/blob/master/src/Saga.js

In this example Saga is used to managed the BT connection in the background and writes to the Redux store what the current state of the connection is