How to Optimize Your Health with React Native

React Universe Meetup Berlin 2026 / 29:51

Watch this talk on YouTube

Transcript

31 paragraphs

This is an automatic transcript of the recording above. It is published in full and unedited, apart from correcting names the recogniser reliably mishears. It will contain mistakes.

00:06Hi everybody. I'm Tis. Oh, thanks. Robin's over here. Give it up for Robin. Everybody, round of applause. Robin. Robin is so cool. Robin's a big part of our Berlin community. So, thank you. Um, I'm Tis. That's pronounced like contagious. Okay. It's uh people have a hard time with this. It's not teas or teas or whatever you want to call. Um, but I will respond to anything as long as you pay me. No, I'm joking. Um, and I over many years I've I've been able to work at a lot of tech companies, a lot. I I was previously at Spotify. We built a lot of infrastructure, billions and billions of artists, made a lot of money from from my work. Um, it's just true. And so I'm I'm really tired. This year makes 25 years of me working in tech.

00:49Okay? And so I built a lot of things, a lot of scale. We can talk about it. Uh, today I'm an AI engineer at IBM. Uh, some of you are looking at like, oh, yuck. It looks great. Okay, like we we make our own foundation models like our own Watson is a wonderful model that you can run locally. It's open source which means nothing with language models, right? It's open weights. Good luck. Anyway, um so I also uh wrote a book on on on React. Uh this dives into a lot. I'm not here to sell it honestly. I don't need the money. Um but it dives into a lot of the fundamentals of React. In fact, React has changed a lot since this book came out, but it teaches you how to build your own React if you want. So there's been a lot of technical deep dives here, right? The first talk was actually amazing. Where's the where's the guy who gave the Yeah, Eugene was there was a great talk really about the the intricacies of building video on device. Um if you this talk has sorry this book has a lot of similar topics there. So if you're interested in the technical side, I can recommend it because this talk today is about health.

01:48Um and it's about health for a reason and and some of you may may have seen this on the agenda and you're like why do I care? I'm here to write code. What are you doing? Um, but I promise you this is the meetup description of the of the event. It says it's it's an evening built for experienced engineers who care about how things actually work in production. Okay. Um, and this what I'm about to walk you through today is an application that I built that is a production application. Uh, it's it's in test flight. So, it's not officially in the app store yet. Um, but it's being used actively by people including my parents to to improve health and and help everybody live a little bit better. So it is a production application built with React Native and I'm here to talk to you today about what it takes to build and ship an application like that.

02:31Okay. Um in other words uh it says again it says engineers who care about how things actually work in production. We're going to look at that through the lens of use development. Uh some people will call it UCD. I I wouldn't but anyway um and so like I feel like there's a lot of there's a lot of solutions in search of problems today. Is anyone using Claudebot or Maltbot or whatever it is? No. Good. Um we should talk after but like there's a lot of great tools that are searching for users but there's no real use. I think, you know, if you think about web 3 and crypto and this whole movement, like crypto does have some use cases, right? But but a lot of these things never really solved any real problems. And so that's I don't I'm not interested in giving you that kind of talk today. Um I do plenty of nonsense posting on the internet. Today I want to give you something useful by rallying around a use case. Here's how we build something with React Native. Here's the architectural technological decisions that go into building this. Here's how we ship to the app store. Here's a breakdown of the costs involved. Should we use AI? Should we not use AI, right?

03:41Not just use AI by default. We we'll talk through all of that. Okay? And so I really want this to be like useful for you. I have absolutely nothing to gain from giving you this talk, but I just want to help you uh if you need it, if you want it. Okay? So, um let's with that little disclaimer, let's start by talking about optimizing your health with React Native. And I want to spend a little bit of time in the intro talking about your health because it's important. I look around the room and I see people and I see people. Look, if you're not healthy, you you're not able to even come to an event like this. More importantly, you're not really useful um to yourself or anyone. You're you're kind of like sick and and and you need help. The whole point of doing what we do is so that we can be healthy and then take care of the people around us. So, it's it's quite important. Um we'll talk about your health. What if I told you there's one number, one metric, one measure that can very potently help you live better? One. One.

04:40There's of course many. Um, but there's one specifically that can that can do a lot of things that can predict burnout. Anyone here struggle with burnout? How many of you have at some point in your career uh struggled with almost Okay. Yeah. this some so many of you are ashamed to admit that. Uh but but but for those of you who put your hands up, good job. You're you're brave. Everyone else lied. Okay. No, but I if you if you struggle with with with burnout, um this is something you can actually predict and prevent and and you can catch it before it comes and you can live better. I I have had burnout, man. There's been times where I um I I've traveled back and forth between San Francisco and Berlin quite a lot for work and I was constantly burned out and you know what like people would review my pull request and they would say hey let's change the word I swear to you this happened let's change the word folder to directory in a PR review you know and and now if I was healthy I would have said you know what yes but I was like super burnt out so this did not go well, right? I took it personally. I was like, why are you nitpicking my stuff? Like, and so it it we become different people when we're not healthy, okay? And I want us to be our best selves. One measure that can help you regulate your workload. I tend to do a lot. Um I host a podcast. I speak at conferences. I wrote a book. I

06:02write code. I train models. I I do a bunch of stuff. Um I just want to do everything, right? Many of us, we we grew up in a sandbox. We like playing like we love coding and we and sometimes we code into the night and then after that we uh we also want to stay healthy so we'll go for a run and it's just like wo I'm doing a lot and before you know it you get sick. Anyone have this experience like you you overachieve and then you get sick and then you achieve sickness. Yeah. It like congratulations. Yeah. So how do you how do you know like how do you regulate your workload? How do you know when to take a day off? I grew up in a really toxic environment where only weak people take breaks. Anyone else hear this? Like if if you're don't woo that, bro. That's it's like but like they're like, "Oh, you need a break. What else do you need? A chocolate, you know?" Anyway, so um finally, one measure to help you decide.

06:51Why is this thing ruining my slides, man? Google Meet, huh? How do I get rid of that? Yeah, thanks. I don't see my cursor, man. Uh whatever you can read. Okay. Help you decide how much to do or how much not to do. How do you Because for me I a bunch of people tell me you're you shouldn't take a break. What if there was an objective measure a number that said you can point to and be like look at this number I deserve a break. Right? That exists. Does anyone want to guess what this this metric this measure this number is? Anyone in the room? Screen. He said screen time. What? >> Sleep. Yeah. Actually um that's who said that your name was Sophia. Sophia was right. It's it's HRV. Um it's it looks like this. HRV. It stands for heart rate v. Wow. What was that? One FPS. Did you I put so much effort into these animations, man. Um anyway, HRV stands for heart rate variability. It's it's how much does the time between each beat of your heart vary. Okay. Um and this is a number that is very important and so I need you to understand it. And then we look at how React Native can actually help with this. Um but it's exceedingly important. Here's why. Let's see. Let's let's pretend this is your heartbeat.

08:10Okay, this is a graph over time and this is your heart beating um on these beats. If in this graph effectively your HRV, your heart rate variability is 0 milliseconds. What that means is your heart beats like on the top of every interval just like that predictably 100%. There's no variability between each red dot. It's all perfect. Okay. Would you say this is a good thing or a bad thing? Bad. It's very bad. This means when your HRV is low, it means you're you're stressed. Um and and think of it this way. Your brain is is the regulator of your heartbeat, your autonomic nervous system. And and when your brain is stressed, it's like an orchestra conductor, you know? It's like if if a conductor of an orchestra is like locked in and he's like stressed, then you know that he's going to be like on the minute every minute. Like it's just going to be dialed in, right? But he's stressed. You take focus. you take attention to do that which ultimately comes with a tax. It's a stress tax. You get very stressed, you get very tired, you burn out. What does it look like when you're relaxed? This is what good HRV looks like. I don't know if you can see that with enough contrast, but those red dots, they're not like on top of every beat. There's some variance between them. This is actually good.

09:19It's like an orchestra conductor who's like chill. It wouldn't make a really great music. Um, but you know, he's like, "Yeah, I mean, it's fine. It's like you go a bit later. You go." It's it's more literally relaxed. So low HRV is stressed. Uh we don't want this. High HRV is relaxed. Okay. Basic physiology. This is very well studied. Lots of peer-reviewed research. So um how do we measure this? How do we measure HRV? Um actually if you you're wearing an Apple watch. Uh a lot of people how many of you wear smart watches or fitness trackers? Yeah, all of you are measuring HRV. It's just it's passively measured while you sleep, while you eat. Um, ideally you wear this all the time. They're water resistant, IP68 or something. So you can even wear it in the shower and the more you wear it, the more you collect HRV data and it doesn't really matter about the quality of the data. What matters is the trend. We'll see this in the application of drag native. And so you just passively measure you get it. I have two measures.

10:13I have an Apple watch and an aura ring. The Aura ring is way better for HRV. Um, and so now that we know all this, we understand the physiology, we understand the impact it can have, right? I would love to to wake up in the morning and understand, oh, today, you know, I'm I'm maybe not going to have this meeting or or today I'm maybe I normally stay late at work. Today I'm just going to leave on time, right? We can. So, how do we to to action the data? We need to get the data. I I work with an iPhone. So, now my use case is I need to get this data. Need to get this data from iPhone. Um Apple, as you know, is very closed closed system. nobody they don't want anyone getting this data obviously because there's money there um but they also care about your privacy a lot and so how do we get the data this is where I decided to build an iOS app because I want that data and there's there's really no other way to go about this you could maybe you could maybe do a a shortcut like in iOS there's a shortcuts app Siri shortcut where you can read from healthkit and upload data some that's really complicated it's actually easier in this case to use something like react native or Swift um and create a native application to then get permission from HealthKit to get the data out. Okay. And that's that's my use case here. That's why I built this and that's how the application is built. In building this,

11:34it answered a really good question cuz you see for me, I've been a web developer most of my career. I do AI now. Uh this was before Chad GPT by the way. I just I didn't jump on a hype train. Um but but I've been a web develop the web was my platform. In fact, today the web is my platform. AI is a plat as the web is a platform for AI things like MCP and all of this right so the web has always been my platform and I believe the web I'm a little bit biased forgive me I think the web is just superior um in in for some cases because it's so universal um with web GPU you can render things from the GPU with web Bluetooth you can pair with devices it's so beautiful and so I've stayed on the web until I needed React Native because there's no other way and so I had to wrestle with the question okay when do you actually choose Reactive native and and what was the answer to me was because I'm a web developer again is when the web will not do what I want it to do when there's no other choice. I think for a lot of people who come from a web background this is going to be the move. Um however if you if you want something to be platform agnostic as well React Native makes sense. I think if you're a iOS specific developer this is obviously going to be a different story. Um but this was one architectural decision that was immediately clear. If there's things that I can only do native, then instead

12:50of like learning or vibe coding something in Swift, I will reach for React Native instead because it's it's JavaScript, it's TypeScript that I know, write once, deploy everywhere. There's another case where you would use React Native also, which is if you want to build a mobile app, but you don't want to build a web app, right? Because React Native can also compile for the web and then you have the best of all worlds with one codebase, write once, deploy everywhere. The problem with this is if you integrate with a device API like HealthKit, then the web is going to be useless for you, right? Um, but that was very eye opening. So, without further ado, it's already been quite long and I know we're all tired, so I'll I'll just show you the app right now. Um, and then we'll walk through how it's built and what architectural decisions were made.

13:32The app is this. I'll show it to you on the screen also. But how it works is you see a big yellow uh screen here. And I don't know if you can read it from where you are, but it says work as planned. Um it's a traffic light system. So it shows you yellow if you're, you know, not too stressed or not too relaxed. And it shows you some numbers here, but it changes to red if you're very stressed and it changes to green if you can take on some more work. Let me show this to you actually in the simulator. It would make more sense. So this is the iOS simulator. Open the app. Okay. Wow. I have to really like wait a second. It says error. And it says error because this is a fresh installation on a brand new iPhone. The error is we need 28 days of HRV data before we can actually calculate readiness. This is of course if you start a new phone. So this is part of my software development cycle. This is also a tip for everybody building software is you've got to have a way to inject fake data or mock data in any in everything especially for tests. And so that's what this button is. it will detect am I running on the on the simulator? Yes. Okay. Then show the button if not. And so um that's why it says simulator here. So I will inject this data. It's generating. Um there we go. So now we have it says work as planned. Um and what does it say? It shows me my HRV. That's the the trend over 7 days and the the trend over the

14:54past 60 days. And this is how it calculates the delta. If your 60-day baseline is 41, but this past seven days, you're 45, it's like, yeah, this is pretty close. Um, and then it knows, okay, you're you're actually your 7-day trend is close enough to your 60-day trend, you're fine. If that 7-day trend was much lower, let's actually simulate that because we have a simulator. And so, we'll we'll go to the health app right here. Um, wow, that's really bad. uh and I will inject some data here in Apple HealthKit. Um so we will go to HR heart and then heart rate. There's a lot of stuff heart rate variability which is not here. Can I There we go. Heart rate variability. Um and I will add data u and I'll just add something really low, right? Like 10 10 milliseconds is really low. I should maybe add some fake data detection. Um, so I added a record of 10 milliseconds and notice my my average has gone down a little bit, but it's still considerably high. So I would have to add a few very low samples. And the beauty of this the data here is one wrong measurement is not going to color the data. You need consistent trends, right? So it's built with that in mind.

16:12So we'll keep adding like really low measures until the app responds. There we go. So now it says, "Hey man, take it easy today. And and if if anyone comes at you with like what are you like weak or something? You go like actually yes here's the proof. Um I'm going to I'm going to take a break. And this is really awesome because it's it it gives you a clear measure. I'm also a developer. So sometimes I may need to debug things. And of course this is like fake data. So if I click on here I get like a big JSON dump of things I can see. But that's hidden. Nobody knows that. Um active recovery tells me you've been working too hard. Take it easy. Let's I'll show you the other case and then we'll look at the code because I think this is this is important as well.

16:51So we'll just delete the fake records and I'll add some data to put me in like good recovery. So I'll say like you know 100 milliseconds of HRV um and we'll go back here and it says go hard because you can uh and it knows. So there's two measures here you may have seen there's HRV and then there's CV. CV it's it's a statistical term. It stands for coefficient of variation. It's like standard deviation. So how much do does the average vary? But it's expressed as a percentage, not as a unit more or less. And and so high CV, what does it what does high coefficient of variation mean? It means your data is kind of all over the place. It's very spiky, which nobody wants. It means you're going FROM LIKE, OH MY GOSH, TO LIKE OH I'M CHILL.

17:33Oh my god, chill. Like that's not good. Even you're being pulled in different like um arousal spectrum levels, right? And so it accounts for that also. wants you to be stable and then you can work from there. Okay. Uh so this is how the app works. Again, it's in test flight. Actually, my parents, they're old. They use this because they're old and they need to. And so they they clean their entire home once a week. Um and they decide, should we deep clean today or should we just dust a little bit or should we take the day off? For real. This is I'm not even making this up. It helps them live better because they're able to autoregulate their stress levels at their age especially. They need it.

18:15Okay. So, how is this built? Let's look at the code. Um, this is cursor and uh it it was not vibe coded. I'll tell you this for sure. I I enjoy writing everything. So, it's a it's a react native app. So, we start with the layout which is just a stack navigation, nothing more. And the index is health data. It's one component. Now, health data is a UI component that you will start to see the UI rendered here pretty straightforward. So, we have complete rest, active recovery, work as planned, and go hard. And these are just text components. This is actually a wonderful feature of React Native where you can make sure your text is accessible. I I learned this because of my parents. They have their font size on the iPhone to like 200 million pixels. And so instead of like go hard, it was just the letter D on the phone because and so I learned this prop is amazing because you can cap how big the text actually gets uh for accessibility, right? Um so this is we're just seeing the UI left and right.

19:14In fact, can I uh update it? Go hardship. Does it auto update? No. Okay. Um I wonder why. Maybe my dev server died. So that's just the HRV and the milliseconds. Like this is just the UI here. Um what's interesting is how we integrate with health kit and for this we use an npm library. It's called um Kingstinct React Native Health Kit. There's many many many healthgate integrations but finding the right library especially in the React Native ecosystem is an adventure uh cuz some may be outdated, some may be unmaintained, some may have CVE and security vulnerabilities. So what has helped me is really when was the last commit um when what was the latency of the last issue to be closed um and is is it actually like there's the npm downloads trend like somewhere positive those three measures helped me choose this library and it's a tremendous library so how does it actually work well we import this thing first HK authorization request status um it's a global from the library and how we use it I didn't mean to do that How we use it is um we check first for permission.

20:26So we come here and we say if authorization status is not unnecessary. This is a global that the library gives us. If authorization is not unnecessary, what does that mean? It means authorization is necessary. Okay, I don't know why they would do it like this, but if authorization is not unnecessary, then we say, hey, we need permission to access your health kit. And when you click authorize access, Apple brings up this little thing that you can give access. Once we have access, meaning it it is now unnecessary to ask for access. We show you a view with some uh data. We show you that UI that go hard UI. If it's for example um Amber work as planned, we only do this if we have permission with health kit.

21:09We then call a function called fetch health data. I wrote this myself. Um and what fetch health data does is it creates a baseline. So we go back in time 60 days to calculate your baseline, right? Um and then we go back 6 days to calculate your acute baseline. It's just a bunch of math. And then this function get recovery samples uh does that. So we call Kingstinct React Native Health. They have a function called um HK quantity identifier. Variability SDNN um and they have query quantity samples. So you call this function from the library and you say I want heart rate variability data and I want it in this date range and I want it with this unit. The cool thing about this library is you can query like any fitness thing you want. Uh and it's it's just a wonderful library really. You can even diet, calories, uh sleep, anything you want.

22:00In fact, there's really great apps in the app store. One of them is called Athletic. I don't know if you're using it. It's wonderful app. Strava um and uh Bevel BL. They're fitness apps and they they use similar mechanisms here. There's also a metric called Nike Fuel. Um I don't know what those are, but so I say get me the HRV here. Once I get the HRV, I then hand it over to a function called calculate. Uh me, let me see. It's uh yeah, once I get it, I set it into state, of course. And then I I calculate it's called calculate stats. this one. And what calculate stats does is literally just data science. This is not even React Native anymore. It's just TypeScript. We log transform things to get more decimal precision. And then we just calculate the mean and the standard deviation. And the coefficient of variation is standard deviation divided by mean. It's the percentage of that.

22:52That's really all it is. It's just statistics with an integration into Apple's device. Okay, just a little code tour for you. But that's all that's happening. What's really important though is how do we present this to the user and in the world of AI and like I like to write code and and all of this like the art of presenting something so complex with all this data science to my parents that skill can't be taken by AI yet that's a taste thing okay and and to make to go from I'm creating an application it's a production application it's going to be downloaded by hundreds of thousands of people who want to prevent burnout which is everybody But it has to be understandable. They have to open it and understand it.

23:35Separate different challenges. And this one, the taste challenge is infinitely harder. This was validated by a large number of users and this form factor is the one that worked. I'll also say this kind of for free. I host a podcast and on the podcast I've spoken with many many many founders and they are building complex projects. We're talking like edge replicated SQL light for millions of users at Spotify. I worked on really complex systems and all these technical founders they say look I'm building a complex product but the most complex the most difficult thing about building this company is positioning it so people understand what we do. Okay just food for because like with vibe coding and all of these some skills will go I think taste will not um that's just editorial.

24:20Okay let's wrap up by talking about architectural decisions. What did we actually learn? Because I promised you and this is for experienced engineers who care about how things actually work in prod. How does this app actually work uh in production with my parents, how do you get it in the app store? Let's uncover some decisions and decision points that had to go into this. Number one um is the tool chain. We need a tool chain. Everyone who builds builds with a tool chain if you want to build for production, right? We don't write vanilla JavaScript on the web. Nobody writes Rust without the Rust compiler. like everything's a tool chain and it's exceedingly important because the tools at the lowest level are complicated. Um I especially really wanted a tool chain because oh look I spoiled all the other things. Um I really wanted a tool chain because React Native is difficult.

25:10It's so difficult. And the reason I say it's difficult is oh I can click hide now. The reason I say it's difficult is look at this man December 18th 2025. It's still like not 1.0. You see? And so every time I come I'm I'm ranting but every time I come back to a React Native project like a month 3 months later doesn't work at all. Um and then then there's updates I need to do. Um and if we look at the release page of React Native right this was December 2025. Um and if we go back 10 years in time to 10 years ago it's still 0.x you know and so a tool chain is so important. Um, what's what's the best tool chain for React Native? Expo. Um, I I chose Expo. Honestly, this is the best decision I ever made. I know the Expo team, dear friends. That's why I chose it. And if you are starting with React Native or even if you have a brownfield project, honestly, um, if you're not using Expo, you must. It's just it's non-negotiable.

26:07This was the best and easiest decision because it has what? Why? It's a tool chain. like it handles compiling, it handles building, it handles upgrades, it handles so much out of the box. Number two, why did I choose this? I already shared um it's when was the most recent commit, what's the latency between issue closes and are the npm download trends declining or inclining? That's the decision matrix there. Number three, how do we deploy this? This is in the app store. It's in the Apple App Store. Apple gave it permission. Crazy. Um and it it was seamless. How do we get this in the App Store? Any guesses? It's Expo. Yeah. Yeah. Yes. Like, so Expo application services is like Vercel for deploying websites, but for the app store. They do everything. It's literally connected to your GitHub repo.

26:53Um, and they just like ship it. Get push gone. It's in the app store. Test flight updates. It's all fully automatic. Um, I would show you this actually as a demo, but I think many of you know this already, so I'm not. We'll we'll talk about it later. Um, and then finally, I think the the hardest decision was data residency. Uh, because we live in Germany, Darttons is is really important. And I was like, I could steal people's health data if I wanted, right? Um, it's very easy. Um, in fact, Aura does this. I mean, you opt into it in the terms and conditions, but they from my ring, they're literally like taking my heart data and sending it to their servers. I don't know where they live, right? Um, I could have done that. And so this is an architectural decision we have to make is like what do we want to do? Um and I chose to do all the computation on device. This works offline. There's zero databases foreign to me. And the reason I did that is because often times the simplest decision is the best one. Uh for real like I would be walking into so much more complexity. Where do I store the data? Do I do relational non- relational? Do I edger replicate? How do I prove at some point that it it is actually um safe? You know, just complicate it. So, let's wrap up and uh finish out here. Number one, when do you reach for React Native? Uh the of course the answer will vary. For me as a web

28:15developer for the past 25 years, um it's when when the web will not do what I need to do when I need some some extra help. And the web to be fair can do a lot. Again, web Bluetooth and uh face a web authent and all of this, right? Number two, honestly, just use Expo. Uh, if you're not using anyone here not using Expo, no. Yeah, you're Oh, bro. Come on. Okay, I'm remind me to not use the Zatu native. I'm joking. I'm jo I'm joking. I'm joking. Um, and then third, um, I think what has carried me through building not just this application, but every sing I've worked all over the place and AAMS, anyone familiar with AAM's razor? It's it's it's a it's a philosophy that the simplest solution is often the best. And I always wondered why is this called a razor?

28:57Like it doesn't like razor cuts hair. I used one today, you know, like why and and it's because it's a he he used to call it a philosophical eraser. It it shaves off ideas that don't belong here. Uh and it's just wonderful and I I that is amazing. So if we can um shave scope a lot, it will serve us well. It certainly has for this application. All right, I'm finished, but let's talk more. As you can tell, I love speaking. Um but more than that, I love listening. And so um I I have a podcast where where I talk a lot if you're interested to follow that. I didn't actually not even like listen to it. If you want to be a guest on it, I would love to talk to you. Uh because listening is way more fun than speaking. Um and with that, I want to say thank you so much for coming out today and

More talks

All 19 transcripts

Elsewhere

There is every talk I have given, all 69 of them, ConTejas Code, the podcast, and Fluent React, the O'Reilly book on how React works inside.