Sincronización sin fisuras de BLE a Live Activity en React Native — No se necesita Push

Hola a todos, bienvenidos al React Summit 2025. Espero que lo estén pasando bien aquí. Estoy emocionado de estar aquí y gracias por asistir a mi charla. Mi charla trata sobre la integración fluida de Bluetooth Low Energy con iOS Live Activity, como ver datos entre esos dos en React Native. Pero antes de comenzar, quiero mostrar una buena demostración de eso, así que déjenme cambiar a la demostración.

Bien, así que esta es nuestra aplicación Hinge Health y tenemos este dispositivo Enso, este dispositivo avanzado, que nos ayuda a aliviar el dolor crónico. Y nuestra aplicación nos ayuda a interactuar con este dispositivo Bluetooth y estamos usando live activity para que el usuario pueda visualizar los datos del tratamiento directamente desde su pantalla de bloqueo o dynamic island, y también recibir actualizaciones críticas de ese dispositivo en particular si algo sucede, como si el dispositivo se desconecta o la batería está baja, enviamos directamente esa información a la live activity para que el usuario pueda visualizarla y actuar en consecuencia sin siquiera abrir la aplicación. Así que comencemos. Aquí, el tratamiento es, estamos comenzando un tratamiento y aquí estamos aumentando la intensidad. Y aquí, la live activity ya ha comenzado. Como pueden ver en el dynamic island, hay un icono de hinge health. Y ahora, demostraré cómo la segunda live activity, que es un temporizador de cuenta regresiva, que añadí deliberadamente para que podamos ver ambas actividades al mismo tiempo. Y ahora, desconecté el dispositivo, así que aquí la live activity dice, bien, el dispositivo está desconectado. Y cuando se desconecta, automáticamente se reanuda la intensidad y todo es visible para el usuario, incluso sin abrir la aplicación. Y también, cuando tocamos en la live activity, se enlaza directamente a tu pantalla o aplicación particular. Así que esta es una pequeña demostración, y ahora volvamos a nuestra diapositiva.

Bien, sobre mí. Soy Rajnikadia, Ingeniero de Software Senior en Hinge Health, y construyo aplicaciones multiplataforma para dispositivos Bluetooth Low Energy, asegurando una comunicación segura y fluida entre el hardware y la aplicación. Y aquí están mis enlaces sociales, como mi sitio personal y GitHub y LinkedIn. Estoy feliz de conectar, así que comencemos. Bien, la agenda de hoy es, primero, entenderemos la pila técnica, como React Native, qué es React Native, qué es live activity, y qué es Bluetooth Low Energy. Luego exploraremos el problema y el desafío, cómo podemos hacer, cómo podemos soportar iOS live activity en modo offline. Y la magia, como qué configuración particular necesitamos usar para habilitar esta cosa. Y luego veremos nuestra arquitectura, como una arquitectura de puente y el recorrido del código. Y luego tendremos una pequeña diapositiva sobre cómo podemos diseñar una interfaz de usuario de live activity. Y luego exploraremos los desafíos y las mejores prácticas para trabajar con iOS live activities. Y luego, sí, la parte de cierre. Así que también solo una nota que a lo largo de esta charla, cuando dije BLE, es como Bluetooth Low Energy, y cuando digo live activities, iOS live activity. Bien, ¿qué es React Native? React Native es un framework de Meta que nos ayuda a construir aplicaciones multiplataforma, aplicaciones móviles, para iOS y Android, e incluso para otros sistemas operativos, como Windows o Mac. Es utilizado por Discord, Shopify, Tesla, Bloomberg, y muchos más.

Y React Native nos da el poder de escribir nuestros propios módulos personalizados para que, por ejemplo, si algo no es compatible con tu biblioteca, la biblioteca de React Native, puedas escribir tu propio módulo para eso. Así que, por ejemplo, si el módulo de actividad de iOS no está disponible, puedes escribir un código nativo y luego conectarlo al mundo de TypeScript para que los desarrolladores de React Native puedan usarlo. Y para eso, podemos usar módulos heredados, que son compatibles con la antigua arquitectura de React Native, o turbo module, que es compatible con la nueva arquitectura de React Native, o una herramienta increíble como Expo, que se encarga de todo y simplemente ofrece una integración perfecta para crear estos módulos nativos.

Bien, entonces, ¿qué son las actividades en vivo de iOS? Son una vista rápida, y proporcionan información en tiempo real directamente en tu pantalla de bloqueo o dynamic island, o incluso en una pantalla de espera, y también en el Apple Watch. Recientemente, como en 2025, incluso, anunciaron que también están proporcionando la misma interfaz de usuario de actividad en vivo de iOS a macOS en CarPlay, lo cual es emocionante. Algunos ejemplos, como la aplicación de Uber muestra el ETA del conductor, y la aplicación de Doodash muestra como un conjunto de datos, como el seguimiento de cada paso individual, y FlightDash muestra el estado del vuelo. Normalmente, las actualizaciones de actividad en vivo se realizan a través del servidor remoto mediante notificaciones push. Así que, por ejemplo, cuando comenzamos una aplicación de entrega y se realiza el pedido, el servidor backend hablará directamente con la actividad en vivo y luego dirá, bien, el pedido está creado. Y luego, cada paso, como la ubicación del conductor o la ubicación de la persona de entrega y el estado de la entrega se actualiza en tiempo real a través de notificaciones push. Así que aquí, se necesita el servidor remoto, pero estamos explorando la otra manera, la manera mágica. La actividad en vivo vivirá en su propio pequeño mundo.

Así que una extensión con API restringida. Lo que quiero decir con esto es que cuando la actividad en vivo es parte de tu paquete de aplicaciones, pero es un objetivo separado, lo mostraré en un recorrido de código. Pero lo que estoy tratando de decir es, como, no tiene todo el poder. Por ejemplo, si quieres acceder al estado de conexión de Bluetooth desde una actividad en vivo, no puedes llamar directamente a la API de Bluetooth en el código de actividad en vivo. Necesitas pasar por la aplicación o notificación push para eso. Bien. Ahora, entonces Bluetooth Low Energy. Entonces Bluetooth Low Energy es una versión más ligera, inteligente y eficiente en energía de Bluetooth Classic. Así que Bluetooth Classic es para largo alcance, como unos auriculares o cualquier otro, como dispositivos de transmisión de audio. Se utilizan en varias industrias, desde la salud hasta el bienestar y la agricultura, realmente lo potencia todo, y es compatible en todas partes, como iOS, Android, Windows, o incluso, como dispositivos portátiles.

Para entender un concepto básico, es como, uno, en la comunicación Bluetooth Low Energy, un dispositivo actúa como un periférico y otro actúa como un servidor. Así que puedes considerar, por ejemplo, cuando tienes tu smartwatch conectado a tu Apple app, como la app de iOS, la app de iOS funciona como un central y este reloj actúa como un periférico. Así que el trabajo del periférico es servir algo. Entonces, cuando el central pide algo, como, dame el porcentaje de batería, dame los datos de salud o algo, datos de frecuencia cardíaca, entonces el periférico lo entregará. Así que el periférico es una especie de servidor y un central, perdón, un central es una especie de cliente, si estás compitiendo con un modelo cliente-servidor. Y esto intercambia datos a través de características. Característica, puedes comparar como, una definición de API. Así que para la frecuencia cardíaca, habrá una característica separada. Para la batería, habrá una característica separada que selecciona una terminología diferente, pero funciona casi de la misma manera. Y un central puede suscribirse a una característica periférica. Así que, por ejemplo, una app solo está interesada en actualizaciones de frecuencia cardíaca, entonces esa app, la app central, solo puede suscribirse a esa característica particular para que no se intercambie ningún otro dato entre estos dos dispositivos innecesariamente. Y sí, usaremos esta increíble biblioteca, como React Native Bluetooth Manager. Así que esto es de Innovate y hicieron un gran trabajo al mantener y crear una biblioteca robusta que nos ayuda a llamar directamente a la API de comunicación Bluetooth directamente desde tu código TypeScript en React Native.

Bien, así que exploremos el problema. ¿Cuál es el problema? Así que solo mostrando la configuración aquí. Así que aquí, digamos que tenemos un monitor de frecuencia cardíaca, que se comunica con sus dispositivos iOS o Bluetooth. Y normalmente, todo funciona bien, como cuando una frecuencia cardíaca cambia y ves los datos en tu pantalla, como aquí, la pantalla de tu app está en primer plano, así que puedes ver esos datos en la pantalla. Pero ahora, cuando bloqueas la pantalla, los datos desaparecen. Así que no hay manera de que puedas ver estos datos en tu pantalla de bloqueo. La única manera es usar iOS Live Activity. Así que cuando usamos iOS Live Activity, incluso si estás en la pantalla de bloqueo, puedes incluso mostrar datos, como batería o frecuencia cardíaca directamente en tu pantalla de bloqueo o dynamic island. Así que tu app no necesita estar en primer plano, el usuario puede estar en una llamada o haciendo cualquier otra cosa. Así que aún así, obtienen esos datos críticos importantes directamente en su pantalla.

Bien. Así que, pero esto solo funciona cuando hay una creación de esta Live Activity. Así que lo que quiero decir con eso es como, por ejemplo, cuando comenzamos una Live Activity, podemos ver, bien, la batería está al 80%, la frecuencia cardíaca está al 98%. Ahora, ponemos la aplicación en segundo plano y la frecuencia cardíaca cambia, por lo que esos datos no se sincronizarán aquí. Porque, como dije antes, necesitamos hablar con el backend, como el servidor de notificaciones push, que nos ayudará a comunicarnos con la app porque la app está en segundo plano. Pero ¿cómo podemos obtener actualizaciones de Live Activity en el dispositivo Bluetooth sin notificaciones push? Así que ese es un desafío.

Activity en el dispositivo Bluetooth sin notificación push? Así que ese es un desafío. Así que vamos a entender qué es eso. Entonces, cuando bloqueas tu pantalla, el sistema operativo dice, está bien, detente. Ahora es hora de una siesta. No estás haciendo nada. Porque estás en segundo plano, básicamente queremos ahorrar recursos y batería. Así que no hagas nada. Así que estamos restringidos, como desarrolladores, estamos restringidos a hacer cualquier cosa aquí. Así que, no hay temporizador de JavaScript, no hay código de JavaScript, no hay actualizaciones, nada puede suceder aquí porque la app está durmiendo. Así que no puedes hacer nada realmente. Incluso si escribes algún código de JavaScript, no funcionará. Así que incluso si aquí el dispositivo Bluetooth envía nuevos datos, la app no reaccionará porque está durmiendo. No se notifica porque, diría, está casi desactivada, como no activa. Así que podríamos, como dije antes, podríamos hacerlo funcionar con la notificación push.

Pero entonces, quiero decir, el servidor, los tokens, la infraestructura y mucho tiempo de ingeniería para implementar todo esto. Y para el caso de Bluetooth, es complicado porque no podemos obtener los datos correctos del Bluetooth y enviarlos al backend sin escribir como un servicio backend complejo. Bien, entonces, ¿cuál es la magia aquí? Así que la magia es el modo de fondo de UI. Así que en iOS, cuando creas una app, tiene un archivo plist. Así que puedes definir aquí las capacidades, bien, lo que la app puede hacer. Así que hay una configuración llamada UI background modes. Y esto tendrá muchas configuraciones. Y una de las configuraciones es Bluetooth central. Así que cuando añadimos esto, lo que sucede es que ahora la app sabe, bien, cada vez que hay una comunicación Bluetooth entre el dispositivo PLE y esta app, necesito despertar esta app porque un usuario ha, perdón, un desarrollador ha habilitado esta opción y el usuario es consciente de esto. Así que ahora cada vez que tu dispositivo PLE se conecta con tus datos, entonces el sistema operativo iOS despertará tu app por solo una fracción de segundo. Y así puedes pensar en ello como obtener un mini disparo de expresión cada vez que Bluetooth habla. Así que es como durmiendo, Bluetooth sucede, se despierta, y se envía a la actividad en vivo, y luego vuelve a dormir.

Así que esto está volviendo a dormir. Así que este disparo es un momento dorado, y podemos utilizarlo aquí para enviar actualizaciones de actividad en vivo. Bien, así que la arquitectura general.

Y de nuevo, estoy diciendo como React Native Bluetooth manager que estamos usando aquí. Así que cualquier cosa que obtengamos de esa biblioteca de actualizaciones, lo llevaremos al servicio y el servidor llamará a este módulo nativo. Así que aquí en el módulo nativo, tenemos un puente. Entonces, lo que hará el puente es convertir tu código JavaScript en llamadas nativas. Así que esto ya no es un puente en la nueva arquitectura, pero solo estoy usando esto para que se pueda usar tanto en la arquitectura antigua como en la nueva. Así que cuando, por ejemplo, cuando llamo a la función start activity types, se mapeará a una función nativa. Así que la función nativa llamará a la API de actividad en vivo real, que es proporcionada por activity kit. Es como un módulo de Swift que nos ayuda a controlar la actividad en vivo. Así que cuando hacemos esto, creará una actividad en vivo. Y también cuando llamamos a la actualización de actividad en vivo, también actualizará la actividad existente, como pasaremos algunos parámetros, algunos valores de estado, para que podamos usar esos valores de estado y parámetros en la UI y hacer alguna configuración. Y como dije antes, el watch OS, obtiene estos datos automáticamente, no necesitas configuración adicional. Así que cada vez que haces como iniciar actividad, detener actividad o actualizar, todo aplicable a la UI de watch OS también. Así que eso ya está cuidado.

Bien, así que el código, puse todo mi código aquí en este enlace. Y la estructura es como en app tabs index TSX. Tenemos como esta, la capa principal de UI de React Native, y luego tenemos el controlador de actividad. Este es como el módulo nativo del que estaba hablando que nos ayuda a convertir tus APIs de JavaScript en un curso nativo. Y este es un objetivo. Así que esto es en realidad un widget. Esto no está relacionado con React Native o Bridge. Esto es como definir puramente actividades en vivo de iOS. Así que aquí definimos, bien, esto es iOS, esta actividad, esta es una UI, y así es como quiero que se actualice. Y aquí definiremos un modelo de datos que pasará desde TypeScript. Y este es un módulo para interactuar con el dispositivo Bluetooth. Y exportar objetivo. Así que aquí estamos usando en nuestra demo, estamos usando objetivos de exportación, y nos ayuda a construir ese módulo nativo para la comunicación entre TypeScript y la capa nativa. Y la configuración importante que discutí anteriormente es agregar esto para agregar Bluetooth Central a los modos de fondo. Y si estás usando plist, o si estás usando export, entonces necesitas editar app.json para hacer lo mismo.

Bien, déjame mostrar rápidamente mi código. Bien, aquí está mi código. Sí, este es el código y esta es la configuración de la que estaba hablando. Y déjame ejecutar mi código. Bien, estoy ejecutando este código en mi iPhone. Este es un dispositivo periférico. Así que periférico es básicamente esto imitará el dispositivo portátil o cualquier otro dispositivo médico para que no necesite usar un dispositivo médico real.

Bien, así que bien, esta es la aplicación. Y aquí, como puedes ver, no hay actividad en vivo en este momento. Y aquí está bien, lo siento, la ventana, desordené las ventanas. Bien, así que esto funciona como un central y esto es un periférico. Así que aquí, estoy usando iOS, el core Bluetooth peripheral manager para que esto simule básicamente como un dispositivo periférico. Así que esta herramienta realmente funcionará sobre una capa de Bluetooth, no es como una cosa de simulador. Así que cuando hago como un inicio de escaneo, buscará esto y claramente encontrará este dispositivo. Y ahora cuando hago clic en este dispositivo, puedes ver que la actividad en vivo comenzó. Y si puedes ver aquí, comenzó. Así que ahora cuando hago un cambio aquí, aquí, estoy enviando realmente los datos de Bluetooth Low Energy aquí. Y puedes ver que los números están cambiando.

Así que el punto es que tu aplicación está en segundo plano, no hay notificación push aún, tu dispositivo Bluetooth Low Energy puede comunicarse directamente con tu actividad en vivo. Y cuando tocas en ella, volverá a tu aplicación. Y puedes hacer como un deep linking aquí para mostrarte algo de núcleo. Creo que estamos cortos de tiempo, pero seré rápido. Así que aquí, como dije, hay un archivo de índice principal que es como contiene todo el código de UI. Y puedes encontrar todo en mi repositorio de GitHub. Solo estoy mostrando la ubicación. Así que módulo, este controlador de actividad. Así que como dije, esto nos ayudará. Esto está usando Expo modules. Así que por ejemplo, cuando llamo a start activity, start live activity, realmente llamará a este método. Así que esto llamará al método del módulo nativo método.

Entonces, módulo nativo significa que cuando entras en la carpeta de iOS, debería haber un mensaje. Sí. Así que este es el código SWIFT. Así que cuando llamamos básicamente a ese código TypeScript, realmente llamará al código SWIFT. Y aquí estamos usando ActivityKits para iniciar actividad o actualizar actividad o detener actividad. Así que esto es en referencia a toda esa arquitectura de puente que te estaba mostrando. Y de vuelta a la siguiente pantalla.

OK. Así que esta es una visión general rápida de cómo podemos definir varios diseños. Así que cuando defines una actividad en vivo, necesitas sobrescribir una configuración de widgets en la que proporcionarás la UI para diferentes diseños. Así que aquí estamos agregando un diseño para la pantalla de bloqueo aquí para la vista expandida de dynamic highland. Aquí, como una UI principal o secundaria y versiones mínimas separadas.

OK. Así que algunos de los desafíos, la actividad en vivo, es como en diferentes sistemas operativos, tienen limitaciones. Como en algunos watch OS, no puedes hacer algo. No puedes tener botones en eso o algo. Y solo comienza con alguna versión particular de iOS. Así que necesitamos tener algo como un código if-def en nuestra capa nativa para que no se rompa o tenga una buena experiencia de usuario. No podemos acceder a una red de ubicación Bluetooth en actividad en vivo, lo cual como dije antes. Y cerrar la actividad en vivo es complicado. Así que, por ejemplo, si estás conectado a una actividad en vivo, y cuando matas tu aplicación, quieres matar la actividad en vivo, no es fácil porque cuando matas la aplicación, tienes muy poco tiempo para conectar eso y hacer la limpieza.

Y otro es como no podemos iniciar la actividad en vivo si la pongo en segundo plano. Así que aquí, o necesitas usar la notificación push o simplemente iniciar la actividad al frente y luego actualizar mientras está en segundo plano. Otras limitaciones son el tiempo para ahorrar batería y otros recursos. Y el sistema operativo impone estas restricciones como solo ocho horas. Y en Dyanake Island, solo cuatro horas. Pero las mejores prácticas, diría que cuando empieces a trabajar en actividad en vivo, comienza con el simulador porque el simulador es fácil de ejecutar y depurar. Y aquí hay una vista previa. Así que la vista previa es una forma de visualizar tus cambios incluso antes de ejecutarlos. Así que recomendaría mucho esta cosa de vista previa. Pondré todo en mi envoltorio, pero solo estoy dando una introducción muy breve.

Esto es sobre, solo verifica que el usuario haya otorgado permiso para iOS o incluso para Bluetooth, para que no se bloqueen o no tengamos una mala experiencia de usuario. Y si estás usando temporizadores, sugeriría usar dot timer date text style porque nos ayuda a calcular el conteo del temporizador directamente en tu código de actividad en vivo. Así que no necesitas enviar el nuevo valor de tiempo cada segundo. Usa still date para asegurarte de que las actualizaciones de actividad en vivo sean estables. Así que, por ejemplo, si quieres decir que después de cinco minutos, los datos deben marcarse como estables. Puedes usar esta opción de propiedad still date. Esto está disponible para iniciar y actualizar la actividad en vivo.

El score relevante nos ayuda a priorizar qué actividad en vivo debe mostrarse primero en la isla dinámica si hay múltiples. Y deep linking esta cosa crítica, como si quieres hacer deep link a una pantalla particular para un estado particular en actividad en vivo, entonces esto es lo que quieres usar. OK, así que comenzaremos con disculpas y con resumen para los usuarios, retroalimentación en tiempo real. Eso es mágico. Así que es una victoria para ellos. Para los desarrolladores, no se necesita respaldo. Así que los desarrolladores están felices y ahora has convertido un dispositivo conectado en una interfaz viva en forma de actividades en vivo. Porque el modo de fondo de iOS es el rescate, como dar estos segundos dorados para que esto suceda. Noto que Android 16 tiene características similares llamadas actualizaciones en vivo. No es tanto que Rachel tiene actividad de slur, pero esto es solo para compartir. Y puse toda la demostración aquí. Encuéntrame en mi sitio personal resonado allí y estoy feliz de conectar. Gracias por unirte a mí en la conferencia cumbre para identificar y tener la codificación. Tener la construcción. Gracias.