React Native con BLE: Conectando Dispositivos Bluetooth de Baja Energía

🚀 Introducción a BLE en React Native

El Bluetooth de Baja Energía (BLE) ha revolucionado la forma en que nuestras aplicaciones móviles interactúan con el mundo físico. Desde wearables y sensores de salud hasta dispositivos IoT y electrodomésticos inteligentes, BLE permite una comunicación eficiente y de bajo consumo entre tu teléfono y un vasto ecosistema de hardware. Como desarrolladores de React Native, tenemos la capacidad de aprovechar esta tecnología para crear experiencias innovadoras y altamente interactivas.

Este tutorial te sumergirá en el fascinante mundo de BLE con React Native. Aprenderás a configurar tu entorno, descubrir dispositivos cercanos, establecer conexiones, leer y escribir datos en características BLE, y gestionar el ciclo de vida de la conexión. Prepárate para darle a tus aplicaciones React Native una nueva dimensión de interacción con el hardware.

¿Por qué BLE? ¿Y por qué React Native?

BLE (Bluetooth Low Energy) es la elección predilecta para dispositivos que requieren comunicación inalámbrica con bajo consumo de energía. Es ideal para aplicaciones que no necesitan un gran ancho de banda pero sí una conectividad constante y eficiente. React Native, por su parte, nos permite construir aplicaciones multiplataforma con una única base de código, lo que significa que podemos crear apps con funcionalidad BLE para iOS y Android simultáneamente, ahorrando tiempo y esfuerzo.

🛠️ Configuración del Entorno y Dependencias

Antes de sumergirnos en la codificación, necesitamos preparar nuestro entorno de desarrollo. Para BLE en React Native, la biblioteca más popular y robusta es react-native-ble-plx.

1. Inicialización del Proyecto React Native

Si aún no tienes un proyecto, crea uno nuevo con Expo o React Native CLI. Para este tutorial, usaremos React Native CLI por su mayor control sobre los módulos nativos, aunque react-native-ble-plx también puede funcionar con Expo Go en ciertas configuraciones.

npx react-native init BLEApp --template react-native-template-typescript
cd BLEApp

2. Instalación de react-native-ble-plx

Instala la biblioteca usando npm o yarn:

npm install react-native-ble-plx
# o
yarn add react-native-ble-plx

3. Configuración Nativa (iOS y Android)

Aquí es donde la configuración se vuelve específica para cada plataforma.

iOS 🍎

Para iOS, necesitas agregar permisos en tu archivo Info.plist. Abre ios/BLEApp/Info.plist y añade las siguientes claves:

<key>NSBluetoothAlwaysUsageDescription</key>
<string>Nuestra aplicación necesita acceso a Bluetooth para buscar y conectarse a dispositivos BLE.</string>
<key>NSBluetoothPeripheralUsageDescription</key>
<string>Nuestra aplicación necesita acceso a Bluetooth para buscar y conectarse a dispositivos BLE.</string>

Luego, instala los pods:

cd ios
pod install
cd ..

Android 🤖

Para Android, los permisos se gestionan en android/app/src/main/AndroidManifest.xml. Abre este archivo y asegúrate de que tengas los siguientes permisos dentro de la etiqueta <manifest> (y fuera de <application>):

<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
<uses-permission-sdk-23 android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission-sdk-23 android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-feature android:name="android.hardware.bluetooth_le" android:required="true"/>
<uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
<uses-permission android:name="android.permission.BLUETOOTH_ADVERTISE" />

4. Reconstruir el Proyecto

Después de hacer cambios en los archivos nativos, es crucial reconstruir tu proyecto. Cierra cualquier emulador o simulador en ejecución y vuelve a iniciar:

npm run android
# o
npm run ios

🔎 Escaneo y Descubrimiento de Dispositivos BLE

El primer paso para interactuar con dispositivos BLE es descubrirlos. react-native-ble-plx proporciona un método sencillo para escanear periféricos cercanos.

1. Inicializar el Manager BLE

Necesitarás una instancia del BleManager para realizar todas las operaciones BLE.

import { BleManager, Device } from 'react-native-ble-plx';

const bleManager = new BleManager();

2. Verificar el Estado del Bluetooth y Solicitar Permisos

Antes de escanear, es fundamental verificar que el Bluetooth esté activado y que la aplicación tenga los permisos necesarios.

import { Platform, PermissionsAndroid } from 'react-native';

const requestPermissions = async () => {
  if (Platform.OS === 'android') {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        title: 'Permiso de Ubicación Necesario',
        message: 'La aplicación necesita permiso de ubicación para escanear dispositivos Bluetooth.',
        buttonNeutral: 'Preguntar Luego',
        buttonNegative: 'Cancelar',
        buttonPositive: 'OK',
      },
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('Permiso de ubicación concedido');
      return true;
    } else {
      console.log('Permiso de ubicación denegado');
      return false;
    }
  }
  return true; // iOS no requiere solicitar permiso de ubicación en tiempo de ejecución para BLE
};

const checkBLEState = () => {
  bleManager.onStateChange(state => {
    if (state === 'PoweredOn') {
      console.log('Bluetooth está encendido. Listo para escanear.');
      // Aquí puedes iniciar el escaneo
    } else {
      console.log('Bluetooth está ' + state + '. Por favor, enciéndelo.');
      // Puedes pedir al usuario que encienda el Bluetooth
    }
  }, true);
};

// En tu componente, llama a estas funciones:
// useEffect(() => {
//   requestPermissions().then(hasPermission => {
//     if (hasPermission) {
//       checkBLEState();
//     }
//   });
// }, []);

3. Iniciar el Escaneo

Una vez que los permisos están en orden y el Bluetooth está encendido, puedes iniciar el escaneo. El método startDeviceScan toma una lista de UUIDs de servicios para filtrar (opcional) y un callback que se ejecuta cada vez que se detecta un nuevo dispositivo.

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, Button, PermissionsAndroid, Platform } from 'react-native';
import { BleManager, Device } from 'react-native-ble-plx';

const bleManager = new BleManager();

const BLEScanner: React.FC = () => {
  const [devices, setDevices] = useState<Device[]>([]);
  const [isScanning, setIsScanning] = useState(false);

  useEffect(() => {
    const subscription = bleManager.onStateChange(state => {
      if (state === 'PoweredOn') {
        console.log('Bluetooth está encendido. Listo para escanear.');
        // Aquí podrías iniciar el escaneo automáticamente si quisieras
      } else {
        console.log('Bluetooth está ' + state + '. Por favor, enciéndelo.');
        // Podrías mostrar un mensaje al usuario o intentar encenderlo programáticamente
      }
    }, true);
    return () => subscription.remove();
  }, []);

  const requestLocationPermission = async () => {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: 'Permiso de Ubicación Requerido',
          message: 'La aplicación necesita acceso a la ubicación para buscar dispositivos Bluetooth.',
          buttonNeutral: 'Preguntar Luego',
          buttonNegative: 'Cancelar',
          buttonPositive: 'OK',
        },
      );
      return granted === PermissionsAndroid.RESULTS.GRANTED;
    }
    return true; // iOS no necesita permisos de ubicación en tiempo de ejecución para BLE
  };

  const startScan = async () => {
    const hasPermission = await requestLocationPermission();
    if (!hasPermission) {
      console.log('Permiso de ubicación no concedido. No se puede escanear.');
      return;
    }

    if (isScanning) return;

    setDevices([]);
    setIsScanning(true);
    console.log('Iniciando escaneo...');

    // El primer parámetro es una lista de UUIDs de servicios para filtrar. [] para todos los dispositivos.
    bleManager.startDeviceScan(null, null, (error, device) => {
      if (error) {
        console.error(error);
        setIsScanning(false);
        return;
      }

      if (device && device.name) { // Filtramos por dispositivos con nombre para evitar ruido
        setDevices(prevDevices => {
          if (!prevDevices.some(d => d.id === device.id)) {
            return [...prevDevices, device];
          }
          return prevDevices;
        });
      }
    });

    // Detener el escaneo después de 10 segundos
    setTimeout(() => {
      bleManager.stopDeviceScan();
      setIsScanning(false);
      console.log('Escaneo detenido.');
    }, 10000);
  };

  const stopScan = () => {
    bleManager.stopDeviceScan();
    setIsScanning(false);
    console.log('Escaneo detenido manualmente.');
  };

  return (
    <View style={{ flex: 1, paddingTop: 50, paddingHorizontal: 20 }}>
      <Text style={{ fontSize: 24, marginBottom: 20, textAlign: 'center' }}>Buscador BLE</Text>
      <Button title={isScanning ? 'Escaneando...' : 'Iniciar Escaneo'} onPress={startScan} disabled={isScanning} />
      {isScanning && <Button title="Detener Escaneo" onPress={stopScan} color="red" style={{ marginTop: 10 }} />}

      <FlatList
        data={devices}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
            <Text style={{ fontWeight: 'bold' }}>{item.name || 'Dispositivo Desconocido'}</Text>
            <Text>ID: {item.id}</Text>
            <Text>RSSI: {item.rssi}</Text>
          </View>
        )}
        style={{ marginTop: 20 }}
      />
    </View>
  );
};

export default BLEScanner;

Este código proporciona una interfaz básica para iniciar y detener el escaneo, mostrando una lista de los dispositivos encontrados. La lógica de agregar dispositivos a la lista devices asegura que no se dupliquen.

🤝 Conectando y Gestionando Dispositivos

Una vez que hemos descubierto un dispositivo, el siguiente paso es conectarnos a él. La conexión abre la puerta para la interacción de datos.

1. Establecer Conexión

El método connectToDevice(deviceId) inicia la conexión. Es buena práctica llamar a discoverAllServicesAndCharacteristics() justo después de la conexión para obtener todos los servicios y características disponibles del dispositivo.

// Continuación del componente BLEScanner

// ... dentro de BLEScanner, después de la FlatList ...

const [connectedDevice, setConnectedDevice] = useState<Device | null>(null);
const [isConnecting, setIsConnecting] = useState(false);

const connectDevice = async (device: Device) => {
  if (isConnecting) return;
  setIsConnecting(true);
  try {
    console.log(`Intentando conectar a ${device.name || device.id}...`);
    const connected = await device.connect();
    console.log(`Conectado a ${connected.name || connected.id}`);
    await connected.discoverAllServicesAndCharacteristics();
    console.log('Servicios y características descubiertos.');
    setConnectedDevice(connected);
    bleManager.stopDeviceScan(); // Detener el escaneo una vez conectado
    setIsScanning(false);
  } catch (error) {
    console.error(`Error al conectar a ${device.name || device.id}:`, error);
  } finally {
    setIsConnecting(false);
  }
};

// Modificar renderItem en FlatList para incluir un botón de conexión
// ...
renderItem={({ item }) => (
  <View style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: '#ccc', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
    <View>
      <Text style={{ fontWeight: 'bold' }}>{item.name || 'Dispositivo Desconocido'}</Text>
      <Text>ID: {item.id}</Text>
      <Text>RSSI: {item.rssi}</Text>
    </View>
    <Button
      title={connectedDevice?.id === item.id ? 'Conectado' : 'Conectar'}
      onPress={() => connectDevice(item)}
      disabled={isConnecting || connectedDevice?.id === item.id}
    />
  </View>
)}
// ...

2. Desconexión de un Dispositivo

Es crucial gestionar la desconexión para liberar recursos y permitir que otros dispositivos se conecten. Puedes desconectar explícitamente o escuchar eventos de desconexión.

const disconnectDevice = async () => {
  if (connectedDevice) {
    try {
      console.log(`Desconectando de ${connectedDevice.name || connectedDevice.id}...`);
      await connectedDevice.cancelConnection();
      console.log('Desconectado con éxito.');
    } catch (error) {
      console.error('Error al desconectar:', error);
    } finally {
      setConnectedDevice(null);
    }
  }
};

// Añadir un botón de desconexión en tu UI
// ...
{connectedDevice && (
  <View style={{ marginTop: 20, alignItems: 'center' }}>
    <Text style={{ fontSize: 18, marginBottom: 10 }}>Conectado a: <Text style={{ fontWeight: 'bold' }}>{connectedDevice.name || connectedDevice.id}</Text></Text>
    <Button title="Desconectar" onPress={disconnectDevice} color="red" />
  </View>
)}
// ...

3. Monitorear el Estado de la Conexión

Los dispositivos BLE pueden desconectarse inesperadamente. Es importante suscribirse a los eventos de estado de conexión para reaccionar adecuadamente.

// Dentro del useEffect, después de la conexión
useEffect(() => {
  if (connectedDevice) {
    const disconnectListener = connectedDevice.onDisconnected(error => {
      if (error) {
        console.error('Dispositivo desconectado con error:', error);
      } else {
        console.log('Dispositivo desconectado.');
      }
      setConnectedDevice(null);
      // Aquí puedes implementar lógica de reconexión o limpieza
    });
    return () => disconnectListener.remove();
  }
}, [connectedDevice]);

📊 Interacción con Servicios y Características (GATT)

El corazón de la comunicación BLE reside en el perfil GATT (Generic Attribute Profile). Los dispositivos BLE exponen servicios, y cada servicio contiene características. Las características son donde residen los datos reales que queremos leer o escribir.

Conceptos Clave de GATT

• Servicios (Services): Son colecciones de características relacionadas. Por ejemplo, un sensor de ritmo cardíaco podría tener un servicio de 'Frecuencia Cardíaca'.
• Características (Characteristics): Son los puntos de datos reales. Dentro del servicio de Frecuencia Cardíaca, podría haber una característica para 'Medición de Frecuencia Cardíaca'. Cada característica tiene un UUID único.
• Descriptores (Descriptors): Proporcionan información adicional sobre una característica, como su unidad de medida o un nombre legible por humanos.

Para interactuar, necesitas conocer los UUIDs de los servicios y características del dispositivo BLE con el que trabajas. Estos UUIDs suelen estar definidos en la documentación del fabricante del dispositivo.

1. Leer Características

Para leer un valor de una característica, necesitas el deviceId, el serviceUUID y el characteristicUUID.

import { Buffer } from 'buffer'; // Para manejar datos en base64

const readCharacteristic = async (device: Device, serviceUUID: string, characteristicUUID: string) => {
  try {
    const characteristic = await device.readCharacteristicForService(serviceUUID, characteristicUUID);
    // El valor se devuelve en base64. Necesitamos decodificarlo.
    const value = Buffer.from(characteristic.value!, 'base64').toString('utf8'); // O 'hex', etc., dependiendo del formato
    console.log(`Valor de característica leída: ${value}`);
    return value;
  } catch (error) {
    console.error(`Error al leer característica ${characteristicUUID}:`, error);
    return null;
  }
};

2. Escribir en Características

Para enviar datos a un dispositivo, necesitas escribir en una característica. Nuevamente, el deviceId, serviceUUID y characteristicUUID son necesarios. Los datos deben estar en Base64.

const writeCharacteristic = async (device: Device, serviceUUID: string, characteristicUUID: string, data: string) => {
  try {
    const encodedData = Buffer.from(data).toString('base64');
    await device.writeCharacteristicWithResponseForService(serviceUUID, characteristicUUID, encodedData);
    console.log(`Datos '${data}' escritos en característica ${characteristicUUID} con respuesta.`);
  } catch (error) {
    console.error(`Error al escribir característica ${characteristicUUID}:`, error);
  }
};

También existe writeCharacteristicWithoutResponseForService para operaciones que no requieren una confirmación del dispositivo, lo que puede ser más rápido pero menos fiable.

3. Suscribirse a Notificaciones de Características

Muchos dispositivos BLE envían datos continuamente o cuando un evento ocurre. Para recibir estas actualizaciones, debes suscribirte a las notificaciones de una característica. Esto crea un listener que se activa cada vez que el valor de la característica cambia.

import { Subscription } from 'react-native-ble-plx';

const subscribeToCharacteristic = async (
  device: Device,
  serviceUUID: string,
  characteristicUUID: string,
  callback: (value: string) => void,
) => {
  let subscription: Subscription | null = null;
  try {
    subscription = await device.monitorCharacteristicForService(
      serviceUUID,
      characteristicUUID,
      (error, characteristic) => {
        if (error) {
          console.error(`Error al monitorear característica ${characteristicUUID}:`, error);
          return;
        }
        if (characteristic?.value) {
          const value = Buffer.from(characteristic.value, 'base64').toString('utf8');
          console.log(`Notificación recibida de ${characteristicUUID}: ${value}`);
          callback(value);
        }
      },
    );
    console.log(`Suscrito a notificaciones de ${characteristicUUID}`);
  } catch (error) {
    console.error(`Error al suscribirse a ${characteristicUUID}:`, error);
  }
  return subscription; // Devuelve la suscripción para poder desuscribirse más tarde
};

// Para desuscribirse:
// if (mySubscription) {
//   mySubscription.remove();
//   console.log('Suscripción eliminada.');
// }

💡 Ejemplos Prácticos y Consideraciones Finales

Un ejemplo común de uso de BLE es interactuar con un dispositivo que expone una característica para un LED (encender/apagar) o un sensor que envía datos de temperatura.

Escenario: Control de un LED y Lectura de Temperatura

Imaginemos un dispositivo BLE con los siguientes UUIDs (estos son solo ejemplos, tu dispositivo tendrá los suyos):

// Dentro de tu componente, una vez conectado 'myConnectedDevice'

const SERVICE_UUID = '4fafc201-1fb5-459e-8fcc-c5c9c331914b';
const LED_CHARACTERISTIC_UUID = 'beb5483e-36e1-4688-b7f5-ea07361b26a8';
const TEMP_CHARACTERISTIC_UUID = '00002a6e-0000-1000-8000-00805f9b34fb';

const [ledState, setLedState] = useState<'on' | 'off'>('off');
const [temperature, setTemperature] = useState<string | null>(null);
const tempSubscriptionRef = useRef<Subscription | null>(null);

// Función para alternar el LED
const toggleLED = async () => {
  if (!connectedDevice) return;
  const newState = ledState === 'on' ? 'off' : 'on';
  const dataToWrite = newState === 'on' ? '1' : '0';
  await writeCharacteristic(connectedDevice, SERVICE_UUID, LED_CHARACTERISTIC_UUID, dataToWrite);
  setLedState(newState);
};

// Función para leer la temperatura (una vez)
const getTemperatureOnce = async () => {
  if (!connectedDevice) return;
  const temp = await readCharacteristic(connectedDevice, SERVICE_UUID, TEMP_CHARACTERISTIC_UUID);
  if (temp) setTemperature(temp);
};

// Efecto para suscribirse a la temperatura al conectar
useEffect(() => {
  if (connectedDevice) {
    tempSubscriptionRef.current = subscribeToCharacteristic(
      connectedDevice,
      SERVICE_UUID,
      TEMP_CHARACTERISTIC_UUID,
      (value) => setTemperature(value)
    );
  } else {
    if (tempSubscriptionRef.current) {
      tempSubscriptionRef.current.remove();
      tempSubscriptionRef.current = null;
    }
    setTemperature(null);
  }
  return () => {
    if (tempSubscriptionRef.current) {
      tempSubscriptionRef.current.remove();
    }
  };
}, [connectedDevice]);

// ... en el JSX, cuando el dispositivo está conectado ...
{
  connectedDevice && (
    <View style={{ marginTop: 30, alignItems: 'center' }}>
      <Text style={{ fontSize: 20, marginBottom: 15 }}>Panel de Control:</Text>
      <Button title={`LED: ${ledState === 'on' ? 'ENCENDIDO' : 'APAGADO'}`} onPress={toggleLED} />
      <Text style={{ marginTop: 20, fontSize: 16 }}>Temperatura: {temperature ? `${temperature}°C` : 'N/A'}</Text>
      <Button title="Actualizar Temperatura" onPress={getTemperatureOnce} style={{ marginTop: 10 }} />
      <Button title="Desconectar" onPress={disconnectDevice} color="red" style={{ marginTop: 20 }} />
    </View>
  );
}

Solución de Problemas Comunes

• Permisos de Ubicación: Es el error más común en Android. Asegúrate de solicitarlos en tiempo de ejecución.
• Bluetooth Desactivado: Verifica el estado del Bluetooth y pide al usuario que lo active si es necesario.
• UUIDs Incorrectos: Asegúrate de que los UUIDs de servicio y característica que usas coinciden con los del dispositivo BLE.
• Problemas de Cache: A veces, el sistema operativo o el propio manager BLE pueden cachear información. Reiniciar el Bluetooth o la aplicación puede ayudar.
• Dispositivo No Visible: Asegúrate de que el dispositivo BLE esté anunciándose y dentro del rango.

Consejos para el Desarrollo

• Manejo de Errores: Siempre implementa bloques try-catch para manejar errores de BLE, ya que la comunicación inalámbrica es inherentemente propensa a fallos.
• Gestión del Estado: Usa un enfoque centralizado (como Context API o Redux) para gestionar el estado de los dispositivos conectados, el progreso del escaneo, etc., en aplicaciones más grandes.
• Pruebas: Prueba tu aplicación con diversos dispositivos BLE y en diferentes condiciones (rango, interferencias).
• UI/UX: Proporciona retroalimentación clara al usuario sobre el estado del Bluetooth, el escaneo, la conexión y los errores.

🏁 Conclusión

Has llegado al final de este completo tutorial sobre la integración de Bluetooth de Baja Energía en React Native. Ahora tienes los conocimientos y las herramientas para escanear, conectar, leer, escribir y suscribirte a notificaciones de dispositivos BLE, abriendo un mundo de posibilidades para tus aplicaciones.

Dominar BLE te permite crear aplicaciones que interactúan con hardware del mundo real, desde simples sensores hasta complejos sistemas IoT. ¡Experimenta, construye y lleva tus aplicaciones React Native al siguiente nivel de conectividad!