Seamless BLE-to-Live Activity Sync in React Native — No Push Needed

Hi everyone, welcome to React Summit 2025. Hope you're having a good time here. I'm thrilled to be here and thank you for joining my talk. My talk is about seamless Bluetooth Low Energy to iOS Live Activity integration, like seeing data between those two in React Native. But before we get started, I want to show a nice demo for that, so let me switch to the demo.

Okay, so this is our Hinge Health app and we have this Enso device, this advanced device, and that helps us to relieve the chronic pain. And our app helps us to interact with this Bluetooth device and we are using live activity so that user can visualize the treatment data right from their lock screen or dynamic island, and also get critical updates from that particular device if something happens, like if device is detached or battery is low, we directly send that information to the live activity so the user can visualize it and act on it without even opening the app. So let's get started. So here, the treatment is, we are just starting a treatment and here we are increasing the intensity. And here, the live activity is already started. As you can see in the dynamic island, there is a hinge health icon. And now, I will demo how the second live activity, which is a countdown timer, that I deliberately added so that we can see both activities at the same time. And now, I detached the device, so here the live activity says, okay, device is detached. And when detached, it automatically resumes the intensity and everything is visible to the user, even without opening the app. And also, when we tap on the live activity, it deep links to your particular screen or app. So this is a small demo, and now let's cut back to our slide.

Okay, so about me. I'm Rajnikadia, Staff Software Engineer at Hinge Health, and I build cross-platform apps for Bluetooth Low Energy devices, ensuring secure and a smooth communication between hardware and the app. And here are my social links, like my personal site and GitHub and LinkedIn. I'm happy to connect, so let's get started. Okay, so today's agenda is, first, we'll understand the technical stack, like React Native, what is React Native, what is live activity, and what is Bluetooth Low Energy. Then we explore the problem and the challenge, how we can do, how we can support iOS live activity in offline mode. And the magic, like what particular setting we need to use to enable this thing. And then we will see our architecture, like a bridge architecture and the code walkthrough. And then we will have a small slide on how we can design a live activity UI. And then we will explore challenges and best practices to work with iOS live activities. And then, yeah, closing part. So also just a note that throughout this talk, when I said BLE, it's like Bluetooth Low Energy, and when I say live activities, iOS live activity. Okay, so what is React Native? So React Native is a framework from Meta that helps us to build cross-platform applications, mobile applications, for iOS and Android, and even for like other OS, like Windows or Mac. It's used by Discord, Shopify, Tesla, Bloomberg, and many more.

And React Native gives us the power to write our own custom modules so that, for example, if something is not supported by your library, React Native library, you can write your own module for that. So, for example, if iOS activity module is not there, you can write a native code and then bridge it to the TypeScript world so that React Native developers can use that. And for that, either we can use legacy modules, which is supported by old React Native architecture, or turbo module, which is supported by new React Native architecture, or awesome tool like Expo, which takes care of everything and just give a seamless integration for creating these native modules.

So now, what are iOS live activities? So they're a glanceable view, and they provide real-time information right on your lock screen or dynamic island, or even on a standby screen, and also on Apple Watch. In recent, like, 2025, even, they announced that they're also providing the same iOS live activity UI to macOS on CarPlay, which is exciting. Some examples, like Uber app shows the driver ETA, and Doodash app shows like a build data, like a tracking of each individual step, and FlightDash shows a flight status. So normally, the live activity updates are done through the remote server via push notification. So, for example, when we start a delivery app and the order is placed, the backend server will directly talk to live activity and then say, okay, the order is created. And then, each step, like a driver location or delivery person location and delivery status is updated real time through push notification. So here, the remote server is needed, but we are exploring the other way, the magical way. Live activity will live in their own little world.

So Bluetooth Low Energy. So Bluetooth Low Energy is a lighter, smarter, and power-efficient version of Bluetooth Classic. So Bluetooth Classic is for long range, like a headphone or any other, like, audio streaming devices. They're used in various industries, like from healthcare to wellness to agriculture, really powers it all, and it's supported everywhere, like iOS, Android, Windows, or even, like, wearable devices. To understand a basic concept, it's like, one, in Bluetooth Low Energy communication, one device acts as a peripheral and one acts as a server. So you can consider, so for example, when you have your smartwatch connected to your Apple app, like iOS app, iOS app works as a central and this watch acts as a peripheral. So peripheral job is to serve something. So when the central asks for something, like, get me the battery percentage, get me the health data or something, heart rate data, then the peripheral will deliver that. So peripheral is a kind of a server and a central, sorry, a central is kind of a client, if you are competing with a client-server model. And this exchanges data through characteristics.

To understand a basic concept, it's like, one, in Bluetooth Low Energy communication, one device acts as a peripheral and one acts as a server. So you can consider, so for example, when you have your smartwatch connected to your Apple app, like iOS app, iOS app works as a central and this watch acts as a peripheral. So peripheral job is to serve something. So when the central asks for something, like, get me the battery percentage, get me the health data or something, heart rate data, then the peripheral will deliver that. So peripheral is a kind of a server and a central, sorry, a central is kind of a client, if you are competing with a client-server model. And this exchanges data through characteristics. Characteristic, you can compare as, like, an API definition. So for heart rate, there will be a separate characteristic. For battery, there will be a separate characteristic that selects different terminology, but it works almost the same way. And a central can subscribe to a peripheral characteristic. So, for example, an app is only interested in heart rate updates, then that app, the central app can only subscribe to that particular characteristic so that no other data is exchanged between these two devices unnecessarily. And yes, we'll use this awesome library, like React Native Bluetooth Manager. So this is by Innovate and they did a really great job by maintaining and creating a robust library that helps us to directly call Bluetooth communication API right from your TypeScript code in React Native.

Okay, so let's explore the problem. What's the problem? So just showing the setup here. So here, let's say we have a heart rate monitor, which communicates with their iOS devices or Bluetooth. And normally, everything works fine, like when a heart rate changes and you see the data on your screen, like here, your app screen is foreground, so you can see that data on the screen. But now, when you lock the screen, the data is gone. So there is no way that you can see this data on your lock screen. The only way is to use iOS Live Activity. So when we use iOS Live Activity, even if you're on lock screen, you can even display data, like battery or heart rate right on your lock screen or dynamic island. So your app doesn't need to be on foreground, user can be on a call or doing anything else. So still, they get that important critical data right on your screen.

So this works only when there is a creation of this Live Activity. So what I mean by that is like, for example, when we start a Live Activity, we can see, okay, battery is 80%, heart rate is 98%. Now, we background the application and heart rate changes, so that data will not get synced here. Because, as I said earlier, we need to talk to the backend, like push notification server, that will help us to communicate to the app because the app is in the background. But how can we get Live Activity updates on the Bluetooth device without push notification? So that's a challenge. So let's understand what is that.

So let's understand what is that. So when you lock your screen, it's a the OS says, okay, stop. Now it's a nap time. You're not doing anything. Because you're in background, we want basically to save resources and battery. So don't do anything. So we are restricted, as a developer, we are restricted to do anything here. So like, no JavaScript timer, no JavaScript code, no updates, nothing can happen here because app is sleeping. So you cannot do anything actually. Even if you write any JavaScript code, it won't work. So even if here Bluetooth device sends new data, app won't react because it's sleeping. It doesn't get notified because, I would say, it's almost disabled, like not active. So we could, as I said earlier, we could make it work with the push notification. But then, I mean, the server, tokens, and infrastructure and lots of engineering time to implement all this. And for Bluetooth case, it's tricky because we cannot get the right data from the Bluetooth and send it to the backend without writing like a complex backend service.

Okay, so what's the magic here? So magic is UI background mode. So in iOS, when you create an app, it has one plist file. So you can define here the capabilities, okay, what the app can do. So there is a setting called UI background modes. And this will have many settings. And one of the settings is Bluetooth central. So when we add this, what happens is now app knows, okay, whenever there is a Bluetooth communication between the PLE device and this app, I need to wake up this app because a user has, sorry, developer has enabled this option and user is aware of this. So now whenever your PLE device connects with your data, then iOS operating system will wake up your app for just a fraction of a second. And so you can think of it as like getting a mini expression shot every time Bluetooth speaks. So it's like sleeping, Bluetooth happens, it wakes up, and it sends to live activity, and then it again sleep. So this is going back to sleep. So this shot bus is a golden moment, and we can utilize here to send live activity updates.

So the oral architecture. So here you can see the right-hand side is our React Native app. We can have a TypeScript service, which can gather the Bluetooth low energy data.

And again, I'm saying like React Native Bluetooth manager we are using here. So anything we get from that library updates, we will get that to the service and server will call this native module. So here in native module, we have a bridge. So what the bridge will do is it will convert your JavaScript code into a native calls. So this is not a bridge anymore in the new architecture, but I'm just using this so that the same can be used in both old and new architecture. So when, for example, when I call the start activity types function, it will map to a native function. So native function will call actual live activity API, which is provided by activity kit. It's like a module from Swift that help us to control the live activity. So when we do this, it will create a live activity. And also when we call the update live activity, it will also update existing activity, like we'll pass some parameters, some state values, so that we can use those state values and parameter in the UI and doing some configuration. And as I said earlier, the watch OS, it gets this data automatically, you don't need additional setting. So whenever you do like start activity, stop activity, or update, all applicable to watch OS UI also. So that's already taken care of.

Okay, so the code, I put all my code here at this link. And the structure is like in app tabs index TSX. We have like this, the main react native UI layer, and then we have activity controller. This is like the native module I was talking about that help us to convert your JavaScript APIs into a native course. And this is a target. So this is actually a widget. This is not related to React Native or Bridge. This is like a purely defining iOS live activities. So here we define, okay, this is iOS, this activity, this is a UI, and this is how I want to be updated. And here we will define a data model that will pass from TypeScript. And this is a module to interact with the Bluetooth device. And export target. So here we are using in our demo, we are using export targets, and it helps us to build that native module for the communication between TypeScript and native layer. And the important setting that I discussed earlier is to add this to add Bluetooth Central to background modes. And if you're using plist, or if you're using export, then you need to edit app.json to do the same.

Okay, so let me quickly show my code. Okay, so here is my code. Yeah, this is the code and this is the setting I was talking about. And let me run my code. Okay, so I'm running this code on my iPhone. This is a peripheral device. So peripheral is basically this will mimic the wearable or any other medical device so that I don't need to use the actual medical device.

Okay, so okay, this is the app. And here, as you can see, there is no live activity right now. And here is okay, sorry, the window I messed up the windows. Okay, so this is the work as a central and this is a peripheral. So here, I'm using iOS, the core Bluetooth peripheral manager so that this will simulate basically as a peripheral device. So this tool will actually work over a Bluetooth layer, it's not like a simulator thing. So when I do like a start scan, it will search for this and it will clearly find this device. And now when I click on this device, you can see the live activity started. And if you can see here, it started. So now when I do change here, here, I'm actually sending the Bluetooth Low Energy data here. And you can see the numbers are changing.

The point is like your app is in the background, there is no push notification still, your Bluetooth Low Energy device is able to communicate directly with your live activity. And when you tap on it, it will go back to your application. And you can do like a deep linking here to show you some core. I think we are short in time, but I will be quick. So here, as I said, there is a main index file which is like holding all the UI code. And you can find everything on my GitHub repo. I'm just showing the location. So module, this activity controller. So as I said, this will help us. This is using Expo modules. So for example, when I call start activity, start live activity, it will actually call this method. So this will call the native module method.

So native module means when you go into the iOS folder, there should be a message. Yeah. So this is the SWIFT code. So when we call basically that TypeScript code, it will actually call the SWIFT code. And here we are using ActivityKits to start activity or update activity or stop activity. So this is in reference to that whole bridge architecture that I was showing to you. And back to the next screen.

OK. So this is quick overview how we can define various layouts. So when you define a live activity, you need to override a widgets configuration in which you will provide the UI for different layouts. So here we are adding a layout for the lock screen here for the expanded view of dynamic highland. Here, like a leading or trailing UI and minimal detached versions.

Some of the challenges, live activity, is like on different OS, they have limitations. Like on some watch OS, you cannot do something. You can not have buttons on that or something. And it only starts with some particular iOS version. So we need to have some like a if-def code in our native layer so that it won't break or have a good user experience. We cannot access a Bluetooth location network in live activity, which as I said earlier. And closing live activity is tricky. So for example, if you are connected to a live activity, and when you kill your app, you want to kill the live activity, it's not easy because when you kill the app, you got very short time to get that connected and you do the cleanup. And another is like we cannot start the live activity if I put in background.

And another is like we cannot start the live activity if I put in background. So here, either you need to use the push notification or just start the live up front and then update while in background. Other limitations are the timing to save battery and other resources. And the OS imposes these restrictions like only eight hours. And on Dyanake Island, only four hours. But best practices, I will say like when you start working on live activity, start with the simulator because simulator is easy to run and debug. And here's a preview. So preview is a way of visualizing your changes even before running them. So I would highly recommend this preview thing. I will put everything in my wrapper, but I'm just giving a very short introduction.

This is about like, just check for the user has granted permission for iOS or even for Bluetooth, so they don't crash or we won't have a bad user experience. And if you're using timers, I would suggest to use dot timer date text style because it helps us to calculate the timer ticking right in your live activity code. So you don't need to push the new time value every second. Use still date to make sure live activity updates are still. So for example, if you want to say like after five minutes, the data should be marked as still. So you can use this still date property option. This is available to start and update live activity.

The relevant score helps us to prioritize which live activity should be shown first in dynamic island if there are multiple. And deep linking this critical thing, like if you want to deep link to a particular screen for a particular state on live activity, then this is the thing you want to use. OK, so we'll start with sorry and with summary for users, real time feedback. That is magical. So it's a win for them. For developers, no backing needed. So developers are happy and now you've turned a connected device into a living interface in the form of live activities. Because iOS background mode is the rescue, like give this golden seconds to make this happen. I note like Android 16 is have is have similar features called live updates. It's not that much that Rachel has I have slur activity, but this is just to share. And I put all demo here. Find me at my personal set resonated there and I'm happy to connect. Thank you for joining me at the summit conference to identify and have the coding. Have the building. Thank you.