BLE na prática: conectando um ESP32 ao seu app React Native, passo a passo

#include <BLEDevice.h>
#include <BLEServer.h>
#include <BLEUtils.h>
#include <BLE2902.h>

// Gere os SEUS UUIDs (v4) para produção — estes são do tutorial
#define SERVICE_UUID        "4fafc201-1fb5-459e-8fcc-c5c9c331914b"
#define CHARACTERISTIC_UUID "beb5483e-36e1-4688-b7f5-ea07361b26a8"

const uint32_t NOTIFY_INTERVAL_MS = 2000;

BLEServer* server = nullptr;
BLECharacteristic* tempCharacteristic = nullptr;
bool deviceConnected = false;

class ServerCallbacks : public BLEServerCallbacks {
  void onConnect(BLEServer*) override {
    deviceConnected = true;
    Serial.println("central conectada");
  }
  void onDisconnect(BLEServer* s) override {
    deviceConnected = false;
    Serial.println("central desconectada — voltando a anunciar");
    s->getAdvertising()->start(); // sem isso, ninguém reconecta
  }
};

void setup() {
  Serial.begin(115200);

  BLEDevice::init("RhodiumTemp"); // nome visível no scan
  server = BLEDevice::createServer();
  server->setCallbacks(new ServerCallbacks());

  BLEService* service = server->createService(SERVICE_UUID);

  tempCharacteristic = service->createCharacteristic(
    CHARACTERISTIC_UUID,
    BLECharacteristic::PROPERTY_READ | BLECharacteristic::PROPERTY_NOTIFY
  );
  // CCCD (0x2902): descritor que permite à central LIGAR as notificações.
  // Esquecer esta linha = notify silenciosamente não funciona.
  tempCharacteristic->addDescriptor(new BLE2902());

  service->start();

  BLEAdvertising* advertising = BLEDevice::getAdvertising();
  // ESSENCIAL: anunciar o UUID do serviço — é por ele que o app filtra o scan
  advertising->addServiceUUID(SERVICE_UUID);
  advertising->setScanResponse(true);
  advertising->start();

  Serial.println("BLE pronto, anunciando...");
}

void loop() {
  if (deviceConnected) {
    // Troque pela leitura real do seu sensor (DS18B20, SHT31...)
    float temperature = 23.0f + (esp_random() % 100) / 25.0f;

    char payload[16];
    snprintf(payload, sizeof(payload), "%.2f", temperature);

    tempCharacteristic->setValue(payload);
    tempCharacteristic->notify();
    Serial.printf("notify: %s\n", payload);
  }
  delay(NOTIFY_INTERVAL_MS);
}

{
  "expo": {
    "plugins": [
      [
        "react-native-ble-plx",
        {
          "isBackgroundEnabled": false,
          "modes": ["central"],
          "bluetoothAlwaysPermission": "Este app usa Bluetooth para conectar ao sensor de temperatura."
        }
      ]
    ]
  }
}

<!-- Android 12+ (API 31) -->
<uses-permission android:name="android.permission.BLUETOOTH_SCAN"
                 android:usesPermissionFlags="neverForLocation" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

<!-- Android 11 e anteriores -->
<uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" android:maxSdkVersion="30" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" android:maxSdkVersion="30" />

<key>NSBluetoothAlwaysUsageDescription</key>
<string>Este app usa Bluetooth para conectar ao sensor de temperatura.</string>

import { BleManager } from "react-native-ble-plx";
import { PermissionsAndroid, Platform } from "react-native";
import { Buffer } from "buffer";

export const SERVICE_UUID = "4fafc201-1fb5-459e-8fcc-c5c9c331914b";
export const CHARACTERISTIC_UUID = "beb5483e-36e1-4688-b7f5-ea07361b26a8";

const ANDROID_12_API_LEVEL = 31;

// UMA instância pro app inteiro — criar mais de um BleManager causa bugs sutis
export const bleManager = new BleManager();

export async function requestBlePermissions(): Promise<boolean> {
  if (Platform.OS !== "android") return true; // iOS pede sozinho no 1º uso

  if (Number(Platform.Version) >= ANDROID_12_API_LEVEL) {
    const result = await PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.BLUETOOTH_SCAN,
      PermissionsAndroid.PERMISSIONS.BLUETOOTH_CONNECT,
    ]);
    return Object.values(result).every(
      (status) => status === PermissionsAndroid.RESULTS.GRANTED
    );
  }

  const granted = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
  );
  return granted === PermissionsAndroid.RESULTS.GRANTED;
}

export function decodeBase64(value: string | null | undefined): string {
  if (!value) return "";
  return Buffer.from(value, "base64").toString("utf-8");
}

import React, { useEffect, useRef, useState } from "react";
import { Button, FlatList, StyleSheet, Text, View } from "react-native";
import { Device, Subscription } from "react-native-ble-plx";
import {
  bleManager, requestBlePermissions, decodeBase64,
  SERVICE_UUID, CHARACTERISTIC_UUID,
} from "./ble";

type Status = "idle" | "scanning" | "connecting" | "connected" | "error";

export default function TempScreen() {
  const [status, setStatus] = useState<Status>("idle");
  const [devices, setDevices] = useState<Device[]>([]);
  const [temperature, setTemperature] = useState<string>("--");
  const monitorRef = useRef<Subscription | null>(null);
  const deviceRef = useRef<Device | null>(null);

  useEffect(() => {
    // cleanup ao desmontar: para o monitor e desconecta
    return () => {
      monitorRef.current?.remove();
      deviceRef.current?.cancelConnection().catch(() => {});
    };
  }, []);

  async function startScan() {
    const ok = await requestBlePermissions();
    if (!ok) { setStatus("error"); return; }

    setDevices([]);
    setStatus("scanning");

    // Filtrar pelo UUID do serviço: só aparece quem anuncia o nosso serviço
    bleManager.startDeviceScan([SERVICE_UUID], null, (error, device) => {
      if (error) { setStatus("error"); return; }
      if (!device) return;
      setDevices((prev) =>
        prev.some((d) => d.id === device.id) ? prev : [...prev, device]
      );
    });
  }

  async function connectTo(device: Device) {
    bleManager.stopDeviceScan();
    setStatus("connecting");

    try {
      const connected = await device.connect();
      // obrigatório antes de qualquer read/monitor:
      await connected.discoverAllServicesAndCharacteristics();
      deviceRef.current = connected;

      // 1) leitura pontual do valor atual
      const characteristic = await connected.readCharacteristicForService(
        SERVICE_UUID, CHARACTERISTIC_UUID
      );
      setTemperature(decodeBase64(characteristic.value));

      // 2) assinatura das notificações (a lib liga o CCCD pra você)
      monitorRef.current = connected.monitorCharacteristicForService(
        SERVICE_UUID, CHARACTERISTIC_UUID,
        (error, char) => {
          if (error) { setStatus("error"); return; }
          setTemperature(decodeBase64(char?.value));
        }
      );

      // 3) reagir à queda de conexão
      connected.onDisconnected(() => {
        monitorRef.current?.remove();
        setStatus("idle");
        setTemperature("--");
      });

      setStatus("connected");
    } catch {
      setStatus("error");
    }
  }

  return (
    <View style={styles.screen}>
      <Text style={styles.temp}>{temperature} °C</Text>
      <Text style={styles.status}>{status}</Text>

      <Button title="Escanear" onPress={startScan} />

      <FlatList
        data={devices}
        keyExtractor={(d) => d.id}
        renderItem={({ item }) => (
          <Text style={styles.device} onPress={() => connectTo(item)}>
            {item.name ?? "(sem nome)"} — {item.id}
          </Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 24, paddingTop: 80 },
  temp: { fontSize: 56, fontWeight: "600", textAlign: "center" },
  status: { textAlign: "center", marginBottom: 24, opacity: 0.6 },
  device: { paddingVertical: 12, fontSize: 15 },
});