Building a Health Application with React Native: Step Counter

what's up no gel developers welcome back to another tutorial today it's something exciting today we're gonna build a health application uh in react native by integrating our react native application directly with a health apis provided by the platform for example on iOS we're gonna work with Health Connect with healthkit on iOS and on Android we have the Health Connect so using some libraries we're going to get this data in our rec native application and we're going to build our health application so what exactly we're going to build well for this project I thought that let's go ahead and build something that um an application that is really beautiful on iOS and here I'm talking about the fitness application and I'm gonna focus on that step counter features of this application just to keep this project uh the scope of this project manageable to do it in one or two hours so what we're gonna do today we're gonna start we're gonna build a step counter we're gonna do that by again by getting data from the health apis and the first part we're gonna dive into the user interface and here besides a basic like rendering text and so on and styling and and other things that you're going to learn the most interesting part about the UI of this application is actually this ring and as you can see it's an animated ring so we're gonna do that using SVG using some animations with react native reanimated so I think it's going to be a fun experience to to give it a try and build this animated ring for this application don't judge My Health Data I've been working a lot this week so uh after that in the next part in The Next Step also in today's video we're gonna get this data from API and we're gonna render it here on the screen so that's the plan for today um if you're ready I'm ready let's go ahead and run the intro um while I'm doing that please let me know in the live chat where are you joining us from and um say something nice [Applause] [Music] all right so hi everyone in the chat how are you doing get a treadmill understanding desk hi Simon yeah I know I remember you were on a treadmill right are you still doing it I have a standing desk I'm standing right now but I don't have a treadmill but that's something to think about alright so let's go ahead and get started by initializing an empty project I'm going to open a terminal uh here is the terminal itself let's go ahead and open a directory okay we have a lot of no all right let's let's do it right here so we're going to initialize our project using Expo so for that all we have to do is in terms of environment what we have to uh to have on our system is node.js and npm and using npx Create export up I also like to add latest in order to make sure that we're getting the latest version of the Xbox CLI uh let's give it the name step counter and lastly let's give it a dash T in order to select a template I'm going to go with the second one with a blank with typescript um the directory stop counter has files that might be over step counter prep what okay I already have it so I'm gonna do it one more time npx create X publication at latest give the project name and let's choose web blank with typescript hello Tanish hello Chris from Nigeria from Ghana Argentina Uganda hello guys from everywhere greeting greetings from Germany hello Simon how is your experience with Rec native so far so let's wait for a couple of seconds for npm to install everything I hope my internet is okay how is the quality by the way okay okay okay we already see some deprecation errors but the good thing is that our project is ready so let's go ahead and open it in our editor of choice I'm gonna open it in Visual Studio code uh uh not exactly what I wanted to do but yeah I'm gonna navigate from here so I'm gonna open this one open just like that let's go ahead and zoom in a bit and let's run our project so I'm gonna do npm start to start the Metro server and from here we can press I to run it either on iOS simulator a to run it on Android simulator or if you don't have Android and iOS simulators you can scan with secure code in the Xbox application on your physical device and you are good to go today we're actually another thing that we're gonna learn today is how to work with Native modules I mean with packages that contain native modules in Expo so we're gonna pre-build our application so this is also something that I know that also people are confused and today we're gonna see how we can do that so um web application is loading and in a moment it should be there yes we have it so what we see is the default text open up app.tsx and if we open up this update effect this is the entry point in our application so if for example we change something here we will see right away the changes on our emulator on a war on on the physical device Okay so our minimal application and we can I think get started and start uh displaying something on the UI uh let's uh grab that screenshot give me just one second to bring it somewhere here should be this one and let's think what information we're gonna display before we jump into this ring that we're gonna display um I think we can simply render these steps information from the bottom and with distance so for that what we will need is for example we're gonna have a text that says steps and below it we're gonna have a text with the actual steps for example 1219. um then we're gonna also might get some additional information like a distance distance and below it we're gonna display the actual distance I don't know 0.75 kilometers uh maybe also the flight climbed I don't know something like that uh all right so right from the beginning I don't like that everything is centered in the middle so let's go ahead and do remove a justify content from here no wellline items I wanted it's always Valor one that you think you have to to change so um let's also add some padding right away to this container just to to have some spacing around it and okay that's already better time to put this for example steps and distance into the same row so for that what we're gonna have to do um foreign like right about the next steps we're gonna put that steps and the distance because if we look at the screenshot I don't know maybe I should have it somewhere here uh we see that the steps on the distance are in the same row so if I give some styles to this view saying that I want Flex direction to be row it will work half of a thing like yes it will put like all the steps and so on into the same row but at the same time like we want them label and the text to be on top of each other so for that reason like the groups of information that contains the label and the value should be inside a separate container and if I do that for both of them like this so now we can see that this is the first container this is the second one and also for the Flies climbed as well let's put them inside a container like this okay perfect let's go ahead and give a style Styles dot label because now like it's really hard to understand what's going on there and for the value we're gonna give style.value now let's go ahead and copy this label and give it to the other two labels that we have for distance and flies climbed and the Styles label for the other two values that we have okay we assign a style but we don't have any Styles yet so let's go ahead and start with adding the label and the value here and let's see how do we want to style them for example I know that the value should be really like the font size should be quite large like I don't know 40 maybe 35 something like that um I am also gonna give some style to the whole container to the to the container that has the label and the value Styles dot uh um how to call it value container and let's give it to the other views as well just like this now value container I need it just to add some spacing for them so for example hmm I think what I'm gonna do is add margin right I know 20. more like I don't know 30 50 something like that just move the steps and the distance apart uh okay now next step label no we are not done with a value yet the volume let's bring this screenshot let's bring the screenshot um well the first step of course is going to be to change the background color so let's check what background color we have here is it yeah it's pure black so I'm gonna start with that now the valley is gonna have um is going to have a color that's how you take specifically the colors that you're interested in all right and for the label I think it should be just White like that um now the values let's increase the font weight to 500 Yep looks better and for the label let's increase a bit the font size to something like 20. yep that's better and I think I'm pretty good with it maybe for the value container we can add some margin vertical 10 or even 20. that is okay 12 spacing vertical spacing between the these ones and now we have this containers the thing is that okay here let me go ahead and explain a bit how we can improve this code um a bit you see that always we had to copy paste basically the structure of this digit component over and over to have like displayed three times but basically the structure is the same only difference is the label and the value so these are a perfect example of how we can extract it into a separate component to do that let's go ahead and do uh Define a component by creating a function here the name is going to be um I don't know give me a name give me a name a value uh what what are these these are statistics or stats or something like that oh it's so bad I'm gonna go with value and inside this I don't even need like Curly brackets I need just Open brackets and let's go ahead and copy them the code of one of this value container so if I'm gonna copy it from here put it here uh uh and if instead of rendering them like this I'm gonna simply render them like value another value and outside that view in our value we're gonna see steps steps step steps so we created this separate a separate component successfully but at the same time like the data remain static what we want to do is we actually want to send the data for example for the first one we want the label to be steps I'm looking here like steps and the value to be this one like these for the second one I want the label to be distance and the value to be let's do value also as a string because here with kilometers and so on like it's going to be easier and if it's string like you can do it like this and lastly here we're gonna also do label the label is going to be this flight climbed and the value is going to be I don't know how many 0 12. okay so in this scenario we are sending a property a Dynamic Property to our value component with a name label and another one with the name the actual value the next step is to receive these properties here inside this component and to dynamically render them instead of this dummy data so to do that we're gonna um right away the structure these properties by their name for example label and value and let's render them here inside curly brackets like label and the second one is value now all of three are rendering different um values and labels based on the data that we are sending and we can safely remove the comments from here and now we have a much easier to understand component like it's simply value uh so let's see if anyone has a better idea someone is recommending value component I don't really like to put them word component in into a component but maybe that would be better now um in order to properly type because we decided to use typescript for this application we need to specify like what is what is the type of properties that this component expects so for that we're going to define a value props let's say that it has two things the label which should be a string and the value which should be also string and let's type this object that we are destructuring from we're gonna type it with double dot value props and now typescript will know that this label is a string and this value is also a string okay perfect so what we have right now I'm gonna go ahead and do git add git commit render um text statistics I don't know something like that okay we are we're good so far oh why didn't I use the Gap introduced in 71 because I always forget about it so someone is recommending me instead of adding this margin right which is not the best way what we actually could do um is we're gonna remove this margin right everything is going to be close together and we can add a flex Gap or just Gap what is the value of 25 and this adds the Gap here and the Gap is actually much more valuable than this it just doesn't just add like margin on the right and the left it really is very well when we have like these types of grid views so what I'm gonna do is actually I'm gonna probably move this value also in this container like this they will all be displayed one like like this in the same row let me go ahead and get this extract these Styles into the style sheet so I'm gonna have uh values and these values will contain this Flex Direction and The Gap so let's give Styles dot values like this now for the value container what I can do is I can say that the minimum width should be 50 percent and this of course made it look okay because the minimum width of our value container is 50 but it pushed the third component outside so in order to make sure that it doesn't push outside of a screen but it actually goes from a new line for the container that we have here we can specify how do we want to wrap using Flex rub rub and in this way it put it from the new line I think 50 is too much I'm not sure like what exactly what value exactly I need here but 40 is going to be enough because you cannot fit three elements 340 percent inside 100 so yeah 40 will work for now should it be what if what if a gap is bigger what if a gap is 55 yeah that's better yeah I don't need this minimum width because in my case with a 25 Gap like the thing is that it was okay like all of these values fit on fit on the screen maybe if we would increase the font size to I don't know 45 here in that case it wouldn't fit and it will automatically go from a new line if the gap between these two are is too big I don't even need the margin vertical guys because the margin vertical is handled by the Gap and in this case I don't even need the value container because I don't provide any Styles here so I can remove completely with tasks for a value container because when uh space between the elements both horizontally between them and vertically between the items is handled by this Gap and the cool thing is that this Gap will be 25 pixel both horizontally and vertically but you can adjust how much uh row gap for example you want if you want a bigger row Gap like a 50 you can add that and it will add more much more row Gap and there is also column Gap like this so I think I'm Gonna Leave it just like Gap and this is a small tutorial on Flex Gap with rack native so let me do good stuff but again like if we look at the changes I think it's much more it's way better this way where is it this one oh why do I have so many um so yeah I'm gonna zoom out a bit so yeah I think it's much better this way like we we reduced a lot of things like we didn't we removed the whole values container yeah so let's go ahead get add git commit perfect and use everything in large I'm not sure like where the conversation started but I see the last message that in large devices like a tablet in this case they will be in the same row I think yes exactly even like with this device like if I will switch to uh to horizontal I'm not sure like if my application has now [Music] um default orientation does it have a landscape so if I'm gonna do landscape they will fit in the same line and they will be displayed in the same line so this is much more um much better in terms of responsiveness because on different screens like it will adjust accordingly what's going on there okay perfect foreign and start the next part the next comp component which is going to be this interesting animated ring that we see here on the display that's going to be a challenge for me as well because I haven't worked that much with um with svgs so it's going to be a learning process for me as well so before we begin let's go ahead and create a separate directory for our component because the rule of thumb is that we have only one component per file and then at the moment we already have two of them the application and the value and now we're going to have to create the third one so it's going to be get out of the hands here so let's go ahead and create the SRC folder where we will create a new folder called component that's how I usually structure my projects that all the source code is in the SRC and here I have components screens and other folders that I need so inside the components let's go ahead and create a new file should we extract the value first yeah let's do that value dot TSX this is going to be the component that we already defined here in up TSX let's go ahead and extract it by copying them type and the component itself I'm gonna cut it from here and move it to the value uh uh I'm also like to copy all the imports from the previous container and only delete the ones that I don't need for example status bar and knock style sheet I will need so for the style sheet I need to bring in the styles from here let's bring the styles uh let's leave only the styles for the label and the value so label and value I'm gonna remove a container and values from here and you should do the same in the app.tsx we need to leave only the container and values and remove the styles for the label and value because we move them to their own com component the last step in this value.tss component is to export this value this value component by doing export default value at the end of a file and the last app is in app.tsx we can go ahead and do import value from Source components value and just like that we have everything back working but our up.tsx is a much cleaner um has a much cleaner code right now and we have separated everything in different component um I'm gonna do one more commit just for you to have all the steps extract value to a separate component and as I said the next step is going to be to render our ring let's simply start by creating a component for it uh let's go ahead and create a new file ring progress X here let's go ahead and Define them basic component that at the moment will simply render a text I don't think we will see the text but if I give here color white and if we import this ring progress inside our optia sucks word ring progress from Source components and where do we want to render it well I don't need this hello world at all uh and I think we will render it just here as the first component inside our container ring progress like that yes it is there maybe you don't see it but if I do it red it's right here ring progress okay okay with what do we start first of all let's simply um size this view depending of the of one property that we're gonna receive so before we get started let's Define the types of the properties for the ring progress props and one of the properties that we're going to receive is going to be radius so radius is going to be a number that will specify how large do we want this ring to be so let's grab this radius here let's type our properties with ring properties and for our view let's style it saying that the weave should be well if radius like the radius is half of a circle so we need the width of a whole container to be radius multiplied by 2 and the height of a container to be also radius multiplied by two uh and if we provide a background color red we see that we didn't provide any radius because this radius let's make it optional and let's initialize it with a default value of let's say 50. so if the parent component does not give anything does not give any radius we're gonna initialize it with 50 Maybe 100. yeah that's better so now what do we have background color red I think I have some weird the color that apple is using so let me do here const color is equal to this one e e 0 f five five I'm gonna zoom in a bit for everyone to see so I'm gonna provide it as a background color okay it's already better maybe we can align self Center what will that look yeah it will put the item in the center I'm not sure what happened with duplicated views but if I refresh everything is okay okay so we are we have started and we at the moment what we're doing is simply rendering a view a container with the right size is based on the radius of a circle that we want to render and the next step is going to be to actually render that Circle for that what we're gonna use is we're gonna use rack native SVG so let's go ahead and open the documentation of that I'm going to open it in Expo but this is a react native SVG is a proper is a separate Library it's not coming from Expo it's coming from software mention so probably I'm gonna open that as well Rec native SVG so here it is this is the library and in the Expo documentation we just see a couple of examples of how we can use it so to begin with let's go ahead and install react native SVG inside our project native SVG has some native code but the cool thing is that Expo go Application contains this native code so we don't have to do it to to pre-build we don't have to do anything extra to work with the SVG here we just install it and we are ready to go let's go ahead and um I know grab this example because I think it's a good starting point for Visa SVG so I'm gonna copy the import statement or should we do everything yeah let's do everything ourselves for example in order to render an SVG of course we're gonna have to import s v g from react native SVG so we're also going to need a circle so let's right away import the circle from Rec native SVG and let's go ahead in our inside our component where we have a view and start rendering the SVG everything starts with web SVG component as VG so let's render that one and inside this we can render different SVG components for example the circle so I'm going to start with rendering the circle and what properties does this circle expect well one of them is the r which represents the right radius so let's give it actually our radius from here and if I do feel with our color and if I will remove the background color from our view itself maybe I can do here maybe I can do here for the background color I don't know opacity 0.1 just to understand them uh what are the limits and I don't see it why okay never mind I'm gonna simply remove a background color from our view itself can you fit in the same line yes you can maybe like this please fit I don't want twist yeah that's better okay so we see something is happening there I'm not sure why I registered is this actually radius multiplied by two if I do maybe maybe but the thing is that the center of a circle at the moment is position 0.0 so that's why we see only a a quarter of a circle because the rest is not visible because of the sizes of this view so what we want to do is we want to move the center Center X and Center y in the middle of our container so if the width of a container is radius multiplied by two the center of our container basically is going to be radius and the same with them why and just like that we move the center of n Circle in the center of our view and now we see the full circle perfect that's already better The Next Step The Next Step I'm gonna move this fill color to probably um foreign our component here is not an actual Circle it's a ring right it's a donut so we can accomplish this by working not with the circle itself but by working with them stroke of a circle the outline of it so for example if I give here stroke a stroke with of 10 and the stroke with color I will have to move away this fill color to I will I will actually remove it at all and we're gonna be left only with our stroke let's go ahead and add them we for the stroke as a property as well so um with or stroke with also optional and we're gonna use default value let's take it from here and let's say that the default value is going to be I don't know 20. and instead of this 10 let's use the stroke with as you can see we have that stroke with everything is fine well almost almost everything is fine right because the thing is that the stroke is added outside of a circle and because without this like if I do fill here blue and if I don't have a stroke at all and if I add background color red to our container we see that the circle is touching the borders basically it takes the same amount of space as our box here and if we add a stroke width and a stroke color um maybe that one not red but I don't know Green we can see that this stroke is actually I was thinking that it's going only outside but it's it's actually half outside and half inside is basically growing in both directions so if I'm gonna do a stroke wave of I don't know 30. we can increase and understand how it grows you see it grows in both directions like this so what does that mean for us that means that we're gonna have to calculate them to increase a bit the size of our container to take into the consideration the stroke so now I'm thinking um should we consider this radius the radius of M of the whole circle and then calculate the inner radius by uh by subtracting there from the radius by subtracting our stroke wave divided by 2 because we know that the the stroke is taking is growing in both directions so we only need to subtract two and this inner radius can be used for the circle and there are radius as well something is not right minus Center the center actually should be yeah the center should actually Remain the radius like why did they change that okay perfect so the center is your radius the radius of a circle is the inner radius because the blue part is our Circle and the stroke is perfectly aligned with our box okay I'm gonna comment out with green maybe we're gonna need it later when debugging because it's much easier to understand like what we have to work with um should we add padding to the circle you mean to to not touch this one yeah maybe maybe I would rather do it for the values I will do margin vertical 20. yeah let's do something like that not the big not the most important parts right now Okay so look what we have right now we basically have this donut there the next step is let's make this donut the background to do that we're gonna simply send some opacity here and if I do 0.1 that's going to be something like the background here maybe 0.2 will look better for the foreground let's copy paste this circle and remove opacity and that's perfect but the second Circle just takes the whole space and this would be okay if we have like 100 um progress but if we don't have 100 progress we need to render maybe half of a circle or one quarter of a circle for the second one I'm gonna add maybe some comments here background and here is going to be our foreground so the trick that we're gonna use to make this Circle basically feel or not is something called stroke Dash array and here if we provide stroke Dash array of I don't know five that's going to add them uh a dash um a dashed type stroke wear them width of the field part is five pixels if I increase this to 50 you're gonna see that it looks like 50 is filled 50 not 50 is filled fifty percent not that if you send one value however if you send two values the first one is used for the amount of the of field part and the second value is going to be the amount of empty parts so if I do here five we're gonna see that the empty part is much smaller than the field part so what what we can do is we can give here uh well first of all we basically need to understand what is the circumference of the whole circle because we're gonna use that value in order to play around with our Dash array here from math I think that's the only um with the only thing but with only a formal that they remember for from math that's circumference of a circle is a 2pr so 2 multiplied by math Dot pi multiply by the radius and which one is it inner radius maybe I don't know so now if I'm gonna give circumference here that's going to be filled if I'm going to give circumference minus five that should open up here on the right to five pixels and that's telling me that the value is true because if it weren't we wouldn't see that opening for example if I do -1 it's just one pixel opening there so this idea with stroke Dash array I have to give credit I took it from Catalan Miron I was looking at his tutorial with how is it called uh don't remember how it how it's been named but basically um yeah that's where I got the idea from so shout out to Catalin the only thing that I I I'm doing it differently is that I'm only playing with this stroke Dash array by by playing with these two values like how much is filled and how much is not filled I can adjust like how much uh do we want to see there for example if I'm gonna multiply this circumference with uh 0.5 and then non-filled if I'm gonna do Let's Do It full circumference because we don't really care how much is not filled there because we don't see it right like if it's um yeah like basically it takes the rest of the space and even more so if circumference is 0 multiplied by 0.5 we see half of a circle if it's 0.2 we see 20 percent if it's one we see full full circle so that's how we're gonna control um how much do we want to display here um I want to yeah the reason our property is stroke line cap that can do where you can specify how do you want the the end of our stroke to look so I put round and as you can see it's already around here I think I'm gonna increase the stroke width to 30. even 40 Maybe 35 yeah so this looks much better without it it was just simply Square round perfect um now a lot of these types of ring progress will start actually from the top so in order to start from the top what I can do is I can rotate this circle um minus 90 degree and that will move it to the top the problem is that the rotation uses the position 0.0 as the origin of rotation so moving it minus 90 degrees like it moved to like really a lot not a lot but around the different axis that we want we actually want to move using origin based on this radius and origin or region why also radius so now when moving like it moves around the center of our Circle I can move this probably here at the top right this is the first one okay what's next what's next um think we are ready with a design of this component and the next step is just going to be to animated starting from zero all the way to the value that we actually want to animate and the value that we want to animate to that's going to be a property that we will definitely send and this is going to be progress so progress is going to be a value let's do it not optional let's do it actually required and let's take the progress so if we go to the app.jsx we will see that a red warning here that we're not sending the actual progress to our ring progress so let's go ahead and send progress here to I don't know 0.25 and the progress is going to be a value from 0 to 1 representing that percentages like how much do we want to fill this circle so now with this progress that we have in the ring progress we can replace this value so circumference multiply by progress and now from up.s X if we're gonna run and we're gonna go to 30 it's going to go to 30 then 35. then 56 and so on until you'll get to one so yeah the next step is going to be to animate this value not to be that boring right can you save this life place yes since it's going to be saved someone is saying yeah the next step is going to be uh animation but before that let me quickly look through the charts because you're guys having some interesting discussions um I think someone said uh that I have to upload the live streams as videos where usual person doesn't know how to click on the live streams tab in on your channel so it looks like your channel is empty that's such a big problem like I don't know like um YouTube updated and nowadays yeah like we the videos are split among different tabs and when you go to the videos like basically I don't do any videos I Almost Do only live streams and yeah that's a problem we'll see um reducing opacity of power and view will reduce the child's opacity too yeah that's why when I had opacity Veer yeah thank you wish for me using vs code I have a video on the channel can you open again with four day Master Class yeah by the way guys if you are interested in learning and becoming a better developer we have a free Master Class a free four day Master Class where you will build a full stack Facebook or a social media application like Facebook um both on your front end and the back end so if you are interested the link should be in the description below give it a try and yeah you're gonna have four days to to complete it and let me know like if you don't have any more access ping me after the live stream and I'm gonna try to give you access for longer period of time but these masterclass is part of our premium Academy so if you're going to be a student at the academy.nojust.dev you're going to have full access to our premium course and including these masterclass as well for unlimited period of time so if you're interested in that we we should also have a disc links in the description so you can check out our Academy where you can become a real full Stack mobile developer make sure it's from these live sessions shorts I definitely cannot do from live sessions because I really like to go in depth and to make sure that I explain it properly and not just like hey let's do use these properties let's put it this way and it will work like I really want to make sure that you basically know like why we have to hear and why why we have divided by two here it's not just some magic numbers I want you to understand so for that reason like it's hard to do shorts out of these things but separate videos maybe we can do for example if the ring animations maybe can be a separate video but the next step yeah let's go ahead and actually animate this thing so in order to animate we're gonna use uh yeah give me just one second to do git odd okay perfect so in order to animate it we're gonna use reanimated very animated Library come on react native reanimated here is the documentation we can also open up the documentation from Expo about to animated it just shows us how to install it and maybe some examples so from here as well like we animated is part of the Expo go so at this moment we don't have to pre-build or do anything extra here except installing uh the rec native or animated library inside our project so let's copy the install command it's basically npx Expo install react native reanimated um there should we should also add a line in babel.config but I think that it will automatically be added so let's check that one uh no it's actually not I did so let's go ahead and take these plugins line from the documentation and add it in babel.config after web presets after that is done we should stop our server and start it again by specifying dash dash space dash dash clear a lot of dashes and let's go ahead and close our application and run it again okay okay everything is running that's good what we have to do is let's go back to our ring progress here and we're gonna animate it let me see if this stroke Dash array stroke yeah no okay so our goal is to animate this circle in order to animate a component that is not a default component that we can import basically we're gonna have to import animated not from react native but for react native reanimated um so in order to animate some components like text or views like you can import them from here like animated like View and so on but the thing is that um yeah animated I think I think it's here as well so um the thing is that the component that we want to animate this circle component this component is not a default component it's a custom component the cool thing is that we can easily use the animated to make animated components let's call it animated Circle and we're going to do that by calling animated dot create should be imported not by the structuring but directly so create animated component and here we specify which component we want to make this SVG Circle an animated component now let's replace our foreground Circle to an animated Circle now this component is ready to be animated there are a couple of ways we can animate them using for example use animated styles but the thing is that at this in this case we actually don't want to animate the styles of this animated circles in fact we don't even have styles in a lot of cases like you're gonna work with animated directly with Styles but here what we want to animate like basically the value that will change is this stroke Dash array because this is where we will want to to change from 0.2 and so on until we get to the value that we want to to get and this this strong Dash array this is a property so with animated we can use a hook called use animated props to provide animated properties that will change over time so let's define here animated props equal use animated props and this one expects a function that will return an object as you can see here I'm returning the object right away make sure you have this brackets because otherwise it will think that it's a body of a function you want to have this round brackets and then the object and here we need to specify exactly what Fields do we want to animate so for example I'm going to copy paste this stroke Dash array from here to our animated props uh it shouldn't be equal it should be double dots because this is an object and as well like we should remove this object like it should be an array extract Dash array is an array with these values at the moment our component is back to being filled because we removed this property from here but if we're gonna assign the animated props to the animated Circle animated props equal animated props we're gonna be back to where we started but the cool thing is that now this stroke stroke Dash array is an animated property in The Next Step we're going to be able to play with it in order to make it actually go from zero to all the way to the value that we have to own we have to um interanimated we have we need some values that will drive basically our animation something like um animation progress that will over time increase and will specify like the them that will drive basically the animation these values are called share values so use shared value and um we leave on them like if we talk like technically about them like we live on the UI thread and that's why it's so much more performant for the animations it doesn't block it so let's define the amount of the circle that should be filled is going to be a shared value equal to zero so the amount of circle that should be filled is a shared value so now the stroke Dash array is not going to depend on the progress but it's going to depend on the amount of fill and it should be field.value so now it's there but if I change here to 0.5 for a step it does that but when it comes back what's the problem there oh no actually it works 0.6 yes so now this field value will drive our animation so initially it starts at zero and based on some events it should go all the way to the basically progress that we want here so when do we want this animation tool to happen we want this animation to happen basically every time our progress changes were the first time that the components Mount so for that we need a use effect let's add the progress as a dependency because every time the progress changes we want to animate our field value to the new destination to the new basically value so what we're going to do is we're going to change the field value here to say like how much do we want to fill here so if I go do progress directly it's gonna automatically go there so if I open up.jsx this is actually not animated at the moment it jumps right but it's ready to be animated like if I change here everything jumps now If instead of when the progress changes if instead of right away changing the field value to the progress value If instead of that we're gonna do it over a small period of time basically instead of saying like hey field value should be progress instead of that if we say hey field value should go towards the progress for the next like one or two seconds to do that we have timing animations so let's import the with timing from react native animated and here when we change the value of a field of this ring if we don't say go to the progress but we say with timing go to the progress then we're going to have an animated value so if from up the test X I'm gonna do one you're gonna see that it now doesn't jump but it smoothly goes to that position that we specify and if you also provide to this with timing some options like duration and if you say like I know three seconds in that situation the animation will be oh not free but 3000 because it's milliseconds so three thousand so if we go to zero it slowly goes to zero if we go to one it slowly goes to one maybe three seconds is too much like half of it is going to be enough like zero perfect besides the weave timing there are other types of drivers for animator for animation for example a weave spring will work better to emulate how things are moving in the real world so if I'm gonna do with spring here the thing is that with spring doesn't have a duration it's much more complicated to to work with a whispering but now if I'm gonna do one or zero oh it's weird it's weird yeah I'm not gonna do that maybe if I'm gonna do 0.5 don't really see the the spring there but the with spring you would usually um adjust using let's go ahead and see animations the damping like you're gonna basically play with these values I don't have a lot of experience with this one so what I know that the problem that we saw there when we went to zero from one to zero the problem that you saw there that it was flashing it was because it was overshooting so if we if we say that it don't go overboard like don't go below zero and don't go above like one in that case it's gonna work better but I don't see them who knows the spring how should we make it look better here with properties like Mass I don't know the default mass is one if we do ten don't really like it like I don't see I don't see a change so I'm gonna simply go ahead and move back to the with timing that was perfectly fine for me and with a duration of 1.5 seconds and go to zero slowly goes there perfect so that's how we have this animation and every time we're gonna refresh the application the value to the progress like if you have I don't know 0.8 progress you're not going to see it right away but every time you refresh work open this screen it will slowly animate there so this is called like that's exactly what you see like in the application of the of Apple Fitness when you open it it starts moving but it will also work whenever the progress changes so basically if you keep walking and you're gonna change the progress It's Gonna animate towards that value so that's the animation I hope you enjoyed it let me do it add git commit if anyone has some ideas feel free to to let me know maybe this feel blue we can already background green we don't need them anymore and you know what I was thinking to make them the things a bit but not over here but yeah there are a lot of values that um that are the same basically for the first circle circle and the second Circle so one way would be to um I don't know Circle default props to put all of them into a object and let's say that we have radios we have a center we have the origin which can be the same for both of them we have a stroke wave we have a color and maybe even a stroke line cap we can put it here who it's gonna be yeah like we're gonna have to transform it to an object like this this is just some refactoring it should be like this and now if I'm going to destructure this object with default props here typescript is not very happy with that because it needs Circle props we need to type like back in our ring progress this circle default props they should be typed with Circle props imported from react native SVG and this way yeah everything gets back to normal and these default props can be replaced for the first Circle except opacity because the opacity is what differentiates the background from the foreground and now I think it looks much uh better so if it's 0.5 yeah now our code for the background in the front gown circle like looks much better we reused a lot of properties that are shared amongst them and we left only the properties that are different for example opacity for the background rotation for the foreign ground I think even rotation can be moved there you know because it will not affect the background if it's rotated or not yeah like that and now the animated circle is even like in one single line okay perfect awesome are you going to use the API for dynamic values yes that's our next step so far we are just working with UI and I think we are finished with the UI actually the only thing that is left if we look at the screenshot of this ring is the icon the arrow icon so that's super simple we just open Expo Vector icons come on and let's search here Arrow and which one do we choose I'm gonna be okay with that and design one so let's import it in our ring progress and let's render it like this inside our view I think it should go after the SVG because we want to display it on top of it so if it's going to be let's change it to Red just to see it no no yeah we already see it let's give some styles to this icon because we want to position it just in the middle on the top so for the Styles I think we're gonna work with a position absolute that's gonna put it on the top and let's will this work center yeah Alliance self Center will put it in the center and we just need to add some top 10 or something like that to move it a bit down like top eight even five it will depend on how how large is the ram is the ring progress because if we're here we're gonna do radius of 200 or 150 and the stroke wave of 50. in that case it should look a bit different so maybe the size should even be more like 25 or not 25 but 35 it should be the color should be black and play around with this top there is a way to actually make Dynamic you know both in terms of size and the style depending on them on the radius or on them depending on the depending on the stroke width so stroke width is 35 let's use stroke with here yeah in our up it's 50. so let's let's use a stroke stroke wave multiply by like let's do 80 of a stroke width if if we want to make it dynamic to um the size and the position so for the top for the top if it's zero for the top oh let's think let's think now if it's gonna be one here it's perfectly centered if it's 0.8 that means that there is 0.2 space available which should be on the top on the bottom that means that it should be stroke wave multiplied by 0.1 only on the top yes and now if I'm gonna increase the stroke width to I don't know 60 that's going to increase them 70 and it will always stay in the center 19 yeah then it will be very small so perfect I like it it's a it was quite easy to make it Dynamic based on the stroke wave so let's do git add arrow on the ring so if it's going to be progress zero it's gonna look okay yeah it's perfect I love it when everything is aligns perfectly everything is dynamic oh my God okay how do you like it so far guys are using CLI or xposal I am using Expo um and in the next steps I'm gonna show you how we can work with any kind of libraries inside Expo so our UI is ready now what we have to do is we have to basically take all of these values like steps and distance and so on dynamically from the uh from the API provided by the platform by the iOS platform and in this case that API is called healthkit so the library that we're gonna use is react native health and this Library the problem with this libraries is that there is no cross-platform Library as far as I know or as far as I did the research um there is a library Rec native Health which integrates with the Apple health kit and we raise the library react native Health Connect this one that integrates with a Health Connect for Android so what we can do is basically we can either Target only one platform like iOS using direct native Health warp Target Android by using that one where we can also use both of them and depending on the platform that we are running to Source our information from different parts so so so let's go ahead and and do what let's start uh with direct native Health which is going to allow us to integrate with Apple kit apple health kit this is for iOS only at the end of a video we're going to try to also integrate with the rec native Health Connect but the first step is let's go ahead and do it with Apple what do we have to do well as you can see the installation documentation here is specifically for rec native because this package has custom native code that is not included in the Expo go application that's why when installing the other libraries like the regnative SVG and direct native reanimated I was saying that we're lucky that these libraries are included in the Expo goal so at that moment we didn't have to do anything just install run and it will work in Expo go now we're going into a library that has native code but this native code is not included in Expo goal that's the case with a lot of libraries because Expo goal cannot include all the libraries out there uh imagine the size of of a client but the cool thing is that a couple of years ago if you get into this situation you were kind of a stock kind of stuck and the only solution was to eject and continue using rack native CLI nowadays there might be also this confusion about Vege act nowadays there is no eject there is no need to eject and there are there is actually no eject command nowadays we can still continue using Expo when we have to work with packages that need native code all we have to do is pre-build our application create a custom development client and a development client is basically let's build our custom Expo go Application that contains exactly the native code that our application needs in that case it's going to even be smaller in size and let's run our application there so it might sound uh complicated and Technical but it's quite easy to do that so uh let's go ahead and install it step by step everything that we will need let's not forget to share the screen we're going to start by installing npx Expo installed the react Let Me Clear so let's start by installing the library that we need for example npm Expo installed react native health if we install it like this everything is good I think from the documentation we should also we should also add a plugin so let's add the rec native Health plugin inside our plugins in our up dot Json so let's open up app.json and this is what powers the new architecture and the new way of why it's possible to run a custom native code in Expo it's because of uh of a plugins so it was added automatically actually and this is instructing like hey there is some a package with some native code that you need to install and it's also like from direct native Health side because they created that plugin that specifies like okay what configuration should be changed in on the native side like Android manifest the info info and so on uh if we would go ahead and import it here in our application import how is it called uh Apple so how do we import it Apple health kit if we're gonna do that I think we're gonna get an error maybe not at the moment but if for example we would do apple Apple healthkid dot let's call something from here I'm just gonna need a function to to show an error that that it will say let's do init oh it should be imported by default like this not the structured so now let's try to call a basically a function from this apple health kit like init health kit if we're gonna do that we're going to see undefined is not a function because the problem is that we are installing a package with native code that we are trying to run inside the Expo go if you look we are still using Expo go Expo go does not have all the native code that you would might need but that's not a problem because what we can do is we can pre-build our application uh we can run npm Expo pre-build and this will create the iOS folder I'm going to specify the platform iOS and we're going to be asked what bundle identifier do we want to create do we want our application to have I'm going to press enter Because I like the the default one and we see the steps that it goes through it created the native project and if we look in our application we have IOS directory we have a native project that we can open in xcode that's the same for Android like it will create the Android folder that you can open in Android Studio it updated some of the files like packet Json and so on to make this possible and that's it it's ready the next step is The Next Step that we can do is let's go ahead and run the server with NP X Expo start and there's there's Dev client actually I think it's time like from this moment we're gonna use the dev client because we have some native code that is available only in Dev client so why not go ahead and in package.json in the start it's already Dev client oh my God like we do a lot of stuff so we can continue doing npm start and it will automatically do the dev client there so from here let's press I to open an iOS simulator and we see that no development build for this project is installed make sure to install I think I forgot to actually install it there to install the development build that we just created well we can what we should do is npm run iOS and it will execute export run iOS yes so now our iOS project is being built and it will run but at this time it's not going to be inside the Expo go it's going to be as a standalone application so yeah it takes a bit of time for everything to be compiled but this like you will need to do this you will need to do these builds only when you change the only one you install some libraries that has native code and as you can see we already have open in step counter if I do open you'll see that this is a separate application this is not Expo go this is a separate application and the arrow right now is different because I was calling this init Health with zero arguments when it expects two of them so maybe I can call something else like is available and if we don't see any errors that means that everything is working fine yes it's running and it contains code for the Apple health kit package what I want to do now for example if I do M to toggle the dev menu nothing happens so at this moment we lost some of our functionalities of Expo goal like with development manual for example if we go back to a Dev export Dev Expo go here we can have this development menu that can help us come on go home that basically can help us I cannot show you but you you understand the point like there is the dev menu that helps us inspect and debug our application properly in the application that was built it doesn't contain this Dev client but what we can do is we can install this Dev client we can do that easily by doing npx npx Expo install Expo Dev client and this one is the part that builds a custom version of the Expo goal and a custom Dev client for our application it's only going to be available in development because when you build this application for production but that client is gone it's not there so we have created that and in order to have it in our application we will have to basically build application again remember the first time we went through the pre-build and then we did the npm Run iOS I showed you that with two commands just for you to understand when there is this pre-build that creates the iOS folder and there is vs npm run iOS that builds and deploys and runs the application however if we do simply call npm run iOS which is in fact this Explorer on iOS this will automatically pre-build the project if it's not already pre-built so now we simply do npm run iOS it will install the new package that we added expert Dev client and we're gonna be good to go is it possible to run in the next Pogo in the current state very good question yes it is possible to run it in Expo go still the only thing is that you're not gonna have access to those native modules that Expo gold doesn't have so for example if you need that Dev client only for a specific page of application for example only for for yeah like the camera let's say like you're building something with camera and you need the native modules only for that you'll be able to run it in Expo go still without going to that screen and it will work perfectly to do that do Expo start we followed with their Dev client and then it will open it and uh so now what we can do is press command d or M here in our terminal and it will open our Dev client for our step counter application again this is not expogo this is tab counter application and from here we can do all the things that we are used to do in our application and like if you run it on your physical device you'll be able to shake it to open the dev menu I'm not sure like why I cannot do it here with command D no yeah if I if I do it multiple times it actually opens so you would be able to toggle the performance monitor to to debug it and so on so all the good stuff from Expo with the benefits of running any kind of native code all right so uh that was a little bit of explanation of how to do custom development builds with Expo and now we are ready to interact with our rec native health package based on the documentation and interact with it with full capabilities the first step with we have to initialize the health kit we need to initialize the health kit with some permissions so let's go ahead and when will we have to do that we will do that in a use effect because we want to initialize the permission as soon as the application opens right so we don't need VCS available at the moment we can go ahead and do um Apple health kit dot init health kit here we need to provide permissions and these permissions let's define them at the top cost permissions which is going to be of type something like permission Health permissions so this is an object that has a read right no it's an object that has a property permissions wait a second Healthcare permission yeah it's not Health permission but health kit permissions and now we're gonna have permissions permission is an object with a read permissions and write permissions is it imported correctly health kit permissions from react native health kit oh pyramid shins like this that's good that we are using typescript because it allows us to save these errors right away I was having permission and that's why it wouldn't work because it needs permissions so for the read permissions we're gonna get it from our constants permissions so there is this apple health kit dot constants dot permissions and here we have some permissions there is a lot of Health permissions that you can access and the one that you're gonna the permission that you need depends on the features that you want you want your application to have and the data that you need to access this is like when it comes to health like it's a pretty um let's say [Music] um how is it called I didn't focus when it comes to health like the data we take it very seriously so you need to be very granular and very specific about what exactly you want to to ask for example what we want is here is step or steps yes let's go with the steps we don't need any right permission at the moment so we're gonna leave it empty by the way this project like we're gonna only implement the steps counter but with the same approach like you can get access to any kind of data and I'm going to show you in the documentation how you can navigate how you can ask permissions and how you can request the data that you need that can be like a lot of things for example you can get like the body methods like height weight and so on temperature body fat percentage uh like everything about the diet with Fitness methods uh for the steps and so on um nutritions mindful minutes and so on sleep methods so for example if you're building uh mindfulness application you would be interested in using the save mindful sessions so if your user is using your application for 10 minutes to do some mindfulness exercises you can call this say mindful session to basically record the data about this inside the Apple health and the user will see it right inside the Apple health project hey Andrew how are you doing very sensitive topic thank you very much my brain is fried um so what I wanted to to do now what I wanted to do let's move a bit faster because I'm going to in-depth so let's import the use effect from react in it health kit we need to send the permissions here and the second parameter is a callback function that can give an error right so we can check if there is there was an error we can I don't know let's simply console log it and otherwise like if we return here that means that at this moment you can request data you have permissions to request data so there is the one way would be to actually call like the functions to get data here but it will Nest like it will have it will Focus our code will become really unreadable when we will put everything into the same use effect so I would rather save the state of our permissions like if we have permissions or not I will save that data into a state variable initially use state from react initially we're not going to have permissions and only after we initialize healthkit with our permission and if we don't have any errors that means that we can set permissions to true now that's it like that's everything about initializing in the next steps what we can do is we can Define our use effects that will be responsible of requesting data that we need um but we're going to do that in a moment because right now we see that it automatically our application is already asking us for the steps permissions if I'm gonna reload it automatically opens it up and we have to manually turn it on and allow there was a problem reload perfect now the second time if I'm gonna refresh I'm not sure why if I do dub if I press Double R to restart it it crashes so to reload I'm I will have to press R in our terminal and that will reload the application so the second time we already see that it has permission and it doesn't ask ask us again if a user in the first the first time you uh you are asking the permission for for some Health Data if a user doesn't give you permission for that you're not going to be able to ask it again programmatically basically you're going to be able to ask it but it will not open up that um automatic window to to request it it will just say that you don't have permission to that so in that case you what you have to do is to inform the user that he has to go manually in the health application and manually go ahead and give a permission that you're requesting from the help application that's just something to keep keep in mind uh uh right so now that we have permissions we can go ahead and get some data let's define a new use effect that will be triggered every time our permissions were not permission but has permission changes and we're gonna check if it still doesn't have permission don't do anything because it will be trigger the first time and it will be triggered when has permission becomes true and here it's already safe to interact with healthkit because we know that we have permissions the function that we're gonna use are somewhere from the Fitness methods for example there is a get step count that will aggregate the total sales for a specific day starting and ending at midnight perfect let's try that so what we need we need Apple we need some options okay and then get steps count options and then error and result okay so we need some options const options the type of these options will be health input options health input options imported from react native health let's define these options and what information data and include manual added so date will be new date that's going to be basically today two is a string let's call this function so we're requesting for the data for today and let's do include manually added false now with these options we can call Apple health kit dot uh get how's it called tap count we're gonna send the options here and we are going to receive a we're going the second parameter is a callback function that will have error and their results again if something happens the error will be defined so we can at the moment simply console log error getting the steps but if it doesn't we can console log the result so let's see if the what result do we get so if I'm gonna restart our application there was a problem Development building counter the following wait a second get step counter should work and the result is it has a start date it has an end date and it has the value this value is what we are interested in so result resulted value is going to be the step counter step count for today so what we can do is we can save it into a state variable use state zero so let's first of all display it in the UI here as the steps value steps to string we see Zero let's display it for the ring progress where the progress is going to be our number of steps over the goal what would be the goal I don't know let's define it as a variable steps goal I think the recommended one is 10 000. so steps divided by steps goal okay now it's zero and lastly we need to set the steps with a value that we receive from the getstep function so set steps with results Dot value it's still zero because the emulator doesn't have this Fitness data but I have my phone here and let's go ahead and try to build it for my phone I'm going to open a new terminal and let's go ahead and do npx Expo run iOS Dash D in order to select the device that we want to run to I have my device connected to the computer so I can select it from this list this is my device and it will build and run it directly on my device and we're gonna see the data there ask all permission is the way yes exactly so we're gonna wait for for the bill to to to be created should take one or two minutes I miss all all days in Android when you can get permissions to control their phone and all devices in home without asking for it that is fun privacy then it's very developer hey buddy your channel is only one but most useful for rec native I am new here hey welcome don't forget to subscribe to the channel by the way if you enjoy what we are doing here we are doing Project based tutorials every single Friday live here so if you enjoy them make sure to subscribe not to miss the future ones because we have a rule actually I forgot to mention about it guys where is it this one we have a problem you know and the problem is that 99 of you that are watching this video are not subscribed to the channel and I know this form of analytics it's even worse right now so if you are part of a one percent Club make sure to click the red button below and comment down I'm part of one percent Club you are Elite my camera is freezing a bit I'm just running in 20 FPS uh so I have a application running on the device what I need to do is I'm gonna get rid of my emulator here I want to show you the actual device so many things here is exactly what I see on my device and we need to from the development server here Let's do let's press on it open it on iOS or maybe press fetch development servers let's try to run the development server again npm npm start I need npm start and from here let's press fetch development servers will it find no let's press I and it opens on the i o iPhone why doesn't appear here should be I'm too lazy to enter URL manually whoa actually now that our custom development build is installed in our application I can simply open up the camera and open this here allow and that's it I forgot about it reload and here we have it now it asks us on my physical device to give access to the steps let's allow and got it let's close it and I've done 249 steps today that's what it means to prepare a live stream let's see if that's actually true yes that's actually true guys 239 steps come on like this part didn't even move um maybe we can do 2023 month number is one number six but I think it should be five in in the Constructor here and the date Maybe 15. okay if it's six it's zero if yeah because six is July foreign for JavaScript dates this is yesterday yeah we see that it's working 16 14. a bit better oh even better uh I'm just gonna look at all my data here I almost need the norm there that's sad yeah that's what I was looking for um um so that's how we get data automatically from the health kit and it's also nicely animated we should also try to give our data Maybe distance will that work or should we calculate it on our end get daily distance walking running samples um get flights climbed that's something that we need and we simply call the same function the with the same properties so I'm just gonna copy paste this code and I'm gonna get flights climbed the same options for the same date I need another state variable for our flights can anyone explain what does flights mean in this context why is it flights climbed explain for a dummy like me so here when we request them we set flights like this and where we display them should be this one cannot read property value of undefined results here irrigating steps but what error uh I think with these errors we need to return here but what's the problem let's also console log the error itself maybe not the right parameters arrogating steps code Apple domain Apple where operation could be completed I think I didn't ask for the permission steps let's do I'm going to destructure the permission not to have to ride them again and again what okay okay let's just see if the problem is with the permission by adding a new one here Dot flights yeah that's a separate permission so I need to give it as well allow okay we get this data as well and lastly is the distance so for the distance for the distance here we have get daily distance walking but get distance walking and running but basically will be the total distance the only difference here is that we need to add some uh the unit mile and get distance walking running okay so again we need another Apple health kit call why didn't we do the API as a single weight a really don't like these callbacks functions so get distance walking running and inside the options I think we can add here unit health unit what health unit do you want health unit meter health unit dot meter and let's go ahead and do cost distance set distance equal use state zero and and for the get distance we're gonna set distance here and where we display it let's go ahead and dynamically displayed here by taking the distance which is in meters and I think we have to divide it by 1000 and then like in order not to get a lot of digits after the zero we can do two fixed two and it will display only two digits after them cannot read property health unit oh the default is meter so I can exclude it and it should give me an error because we didn't ask for permission so let's add one more permission here for the distance walking running I need to give it allow and refresh 1.3 kilometers if we compare it with Fitness for yesterday is it for yesterday let's do it for today how shameful it is but let's do it for today where is it here 16th to 239 and 0.15 yes yes exactly perfect multiply what multiply if it's in meters and we have to render them as kilometer kilometers we need to divide right okay so that's how you slowly and slowly get access to more data depending on the requirements of your application um what I want to do right now before doing anything else I really don't like how everything is getting already out of a control here like it's a lot of logic of interacting with apple health kit I think with like from the perspective of our application our application doesn't really care where we get this data the application itself only cares about like hey how many steps how many flights and how much distance so I'm thinking of finding a custom hook that will do all of it all over all of the logic with related to the Apple health kit and then we're just gonna use that logic to get access to the steps and so on so invisaurus let's go ahead and create a new folder here uh hooks let's create um a hook called use Health Data dot TSX uh [Music] use health data equal to a function and everything like getting them basically we're gonna copy everything except from the return like everything related to the permissions tabs flights and so on let's copy to that part let's copy it like this and copy to the use Health Data we will need the import statements and also the permissions here as well and we need to return them right now let me just check the structure yeah we need just to Simply return that value so at the end that's what data we're gonna export from the hook so we want to export the steps flights and distance steps flights and distance Now using this hook where that we will export by default here export default use Health Data in our app.jsx we can get access to use Health Data and we will get access to the steps to all the flights and to the distance and just like that our application now simply uses a custom hook that does always have a logic of getting this data and here we just receive data and render it on the screen so our update TSX is much more clean at the moment and all the low level interaction of apple apple health kit we abstracted and put put it here foreign foreign should be a variable that we will send to the use Health Data we can do that and if we for example we will take it from here and send it from maybe without the tostring let's just send a pure data date value inside our custom hook use help data we're gonna receive it here date like this as date we can use it here inside the options so if I'm gonna change it from 15 yes it works so now we've simply using this hook sending the data that we want to request for we can get all of the information Decay is asking a very important question it looks like you are working for our team but it doesn't so I'm pretty excited to talk more about that she's asking please tell about tell us more about your premium course so what do you what are you interested in our Premiere courses for people that have went for a couple of projects here on YouTube that are already a bit familiar with how everything works with Rec native and are ready to get to the next level when it comes to building full Stack end-to-end mobile applications the course like really goes into depth it's covers so much more than you see here on YouTube on YouTube I'm limited by time I cannot go here like for eight hours straight in the course I have all the time that I we have and also we are editing the videos in order to for you to have the best experience possible in learning a condensed way and getting better at building mobile applications so it's covers both a front end using react native how to build beautiful user interfaces and also the back end using AWS amplify on how to build scalable and secure backend infrastructure for your application we have modules for all the parts that are related to the backend let's say we have a full module on apis that has more than 12 lessons there we have a module About Storage module about uh some more Advanced Techniques like a feed and following system uh also notifications what else production preparing everything for production that was a big one where we create an automatic CI CD pipeline that every time you do some changes in your code you simply push it to your GitHub account and the pipeline that we are building there will take it from there will deploy the back end we'll build the application we'll submit it to App Store so it's really like you are only focusing on coding and all the changes are automatically deployed to the stores and in the hands of your users so I can talk a lot about that but if you are interested to learn more you can go to academy.nojos.dev the link is in the description below and learn more there all right so yeah we have uh I think we crossed more than 500 students at the Academy which is really exciting we also have weekly group coaching sessions which are some of the students say that these are the most powerful thing that they get out of a course to to go through some problems or to go through some things together as a group every Monday it's really interesting need to commit thank you very much uh so yeah thank you all for asking if you're interested all the details is you can find at academy.nojas.dev but for now I think uh I will have to commit Apple health kit integration and I think we're good here when is the how to build WhatsApp for Vision Pro that's that's interesting like I like when we announced it I was thinking like hmm can you run Rock native here vivaldo is also an Academy student and also part of a one percent Club good job proud of you guys I'm quite excited if we will be able to use Rec native for Vision Pro I'm pretty sure we will like it's not going to be like right from the beginning but I'm sure it will be I recently discovered your channel your content is very helpful please create content for a long time I'm from Mexico and in Spanish not exist track native content like yours should I do it in Spanish [Music] um your solo um is condo lingo is solution perfect okay I'm gonna stop all right so we have a lot of things here um look shall we give it a try to integrate it with Android as well I I haven't tried it to be honest so I I'm not sure like it's a bit risky to go into that direction um because it might take two hours just to get it working and another thing is that not sure if I have an Android device maybe Android has some kind of does anyone know if Android emulator emulates this data back to healthkit so what do you say guys should we go into Android as well the Health Connect needs to be installed on the user device sorry however the goal is to have this application pre-installed on Android devices in future health Connector API requires okay is initialized alternatives for iOS foreign to be honest to be learned on Duolingo yeah I have um I have quite a lot of streaks on Duolingo but it's so bad like I really want to to to learn it but I don't have time like I have 432 days straight but yeah there is no we don't have time it's only it's not the priority right now huh I'm a bit afraid to get into it but let's just try let's try if I'm so tired we're gonna stop but let's go ahead and we have to run our application on Android emulator I don't have a physical device right now so let's try to do npm run Android and let's see what's going on there npm run Android what do you like your Android package to be named yes that's cool maybe I should look for a device give me just one second until everything is building here foreign beautiful all right I found the device not sure how alive it is but I also have emulator so it's sad that it needs the health I need to sign in right that's gonna be tough give me just one second remember my password security code where hmm okay okay so at the moment the monitor is doing something I'm setting up it the emulator foreign for health is it Google fit no it's not Google Fit Health Connect better are we still in beta yeah I think it's this one let's install it an application is still building come on so guys any questions about this application about anything else until I wait for this to install in build come on just join did you publish it [Music] um just join no basically what we are doing is we are building them uh the fitness application that will display the number of steps we have done that integration already for iOS so the application is working I disconnected my phone but you can see it here like everything is taken dynamically from the Apple health kit and now what we're trying to do is we're trying to integrate it with Google with Health Connect from for Android and this way to have application to be able to run this application both on iOS that will pull the data from Apple health kit and on Android that will get the data from healthconnect and for for the application to work like it the device should have the Health Connect application installed and as I read the healthconnect is going to be pre-installed on all the devices going forward I think it's still in beta but later we are trying to do like a central hub for all the Health Data similar to how iOS is doing uh regarding the react native app using charts I think we have something Lucas did the project with crypto price tracker that was done by Lucas included some charts maybe we can do something like that as well again why it takes so long it says pending here like what's going on is there a page where we can see the downloads I'm really not sure if it's actually doing something downloading or installing this Health Connect application where it's just stopped anyone has any ideas but let's wait we can wait it's already 10 minutes building application and vamos activity Run Tracker what else it doesn't have the best ratings but it's great but it doesn't work or sync I think like the problem is that it's still new and the application have to to basically connect to it oh oh pending why why it takes so long is it because of this one what do you think or I should just wait getting the phone ready maybe my physical device doesn't have any battery I'm gonna run to search for a new Android device gonna be back in one minute foreign nope so if in 10 minutes we don't have any success with this one we're gonna call it a day uh you can use let's view as a mirroring software yeah but the thing is that all of my Android devices are dead so I'm just trying to uh some progress with Android emulator skip skip thank you no thanks and this one come on oh yes now it's downloading perfect okay there is some progress with emulator let's open up this health you need to set a lock screen give me just one second okay so get started with Health Connect stores have on Fitness data giving you a simple way to sync with different apps on your phone get started no apps recently Access Health Connect okay that's good but yeah let's give it a try and see if from our application we're gonna be able to do that first of all um we have an error here on the on the Android device on Android emulator because we are trying to call some functions from Apple health kit that are not available here so in order to make sure that we are only calling Apple health kit on devices that support it I think in this use effect what we can do is we can check if before initializing it we can check if Apple health kit dot is available is it not a function uh yeah if it's available it needs some cannot be tested for thank you oh really you need to okay okay let's go back to Apple health kit where is it uh Rock native Health Connect no this one health kit and let's look at them is available function is available error available so it shouldn't be if statement it should be simply a function call where we will get the error and the available here we can check if error we can say error checking availability return then if it's not available log [Music] uh Apple Health not available and also return otherwise we can initialize Apple health kit so I will copy everything from here put it there and is not a function I think even this function will will fail probably we have to do it with ourself using platform from react native so in this year's effect let's check if platform OS is not iOS then return basically don't do anything and it's good that we added this of this feature is available because even some iOS devices might not have apple health kit so that's why we have both of them so basically all of our all of these tabs like with checking the platform checking if it's available or not all of them will prevent Apple to initialize and if permissions are never set to true Vapor functions that will request data from Apple health kit will not be will not be called because we have this gate here so basically it will say that it doesn't have permission on Android now let's go ahead and we are going to start um let me actually Commit This um okay and now let's go ahead and get started with Rec native Health Connect so what do we have to do here we have to first of all install the rec native Health Connect so let's copy the name of the package and let's install it using X npx Expo install rack native Health Connect I'm not even sure is it will have a config plugin for Expo so for react native Health which is for apple it has this up. plugin which makes it compatible with Expo let's see if this one has because if it doesn't we would have to create it ourselves I think it doesn't oh boy but maybe maybe it will work I don't know so we install the library what we have to do right now is we have to run it again build and run it again so let's do npm run Android so oh wait initialize request permission let's um let's work with what we have here should I do it in the same file maybe yeah let's have a function Read sample data with this example basically this is iOS health kit and let's go down say Android Health Connect we have a function and in a use effect let's check if a platform is Android dot OS is if it's not Android I would like to stop here return otherwise let's call get how is it called this function Read sample data let's do console log result okay there wasn't oh minimum SDK 21 cannot be smaller than um where did I see that error I've lost it version 26 declare in the library Health Connect so we need to increase the minimum SDK to 26. we've built properties yes so using this Expo build properties we're going to be able to um change the Android configuration and increase the target SDK so let's go ahead and install it npx Expo install export build properties and inside up.json we can use the export build properties with Android to change this okay so inside up.json we have plugins here let's go ahead and add a new plugin but in this case we will add it as a tuple as an array of two values the first one is the name of it is the name which is X for build properties Expo build properties and the second one is an object is an object with configuration for example Android we want to to increase what what is the error Target SDK so the target let's do which one 26 let's try 26 and now if I'm gonna do npx exponents tall no no no not this one I already did that npm run Android to build again the project for Android but this time we've built properties we change the target of the Android version and it still doesn't work compile SDK is not specified maybe we need all of them let's target 31 like this simply let's try again woodrack native Maps work for routes uh yeah I think it should work foreign can minimum SDK version does it have a come on oh no how is so excited mean as the K version let's check here mean SDK version number but that's what I did mean oh okay different capitalization okay okay okay we're getting there I'm pretty I hope we will get there have a very destroyed phone here let me prepare it as well meanwhile but SCF build failed version cannot be smaller than version 26. what's going on if I do maybe if I do npx Expo pre-build platform Android and I think clean let's do help here first clean and platform so platform Android and then there's Dash clean proceed so now will it take 10 minutes again please this is a step this is a step please oh 33 or later oh oh oh so we are on a good track so we need 33 or later let's do 33. and for minimum let's do also 43. do I need to do clean in the same error so I suspect that I need to do a clean again and a run Android this time it will work and and let's go please I think it's more than previous time Exile the whole I just got here are you done already with this application uh no this application is finished for iOS so the fitness application is pulling data from the Apple health kit now what we are trying to do is to make it compatible with Android as well by integrated with the Android Health Connect so that's at the step where we are at the moment but for iOS it works it pulls data correctly from your device V circle is automated is animated so it was a really interesting and valuable tutorial if you are interested the video is going to be published on the channel so you can re-watch it afterwards all right how confident are we that is gonna work I'm at 50 50 at this moment not gonna be surprised if but let's see let's see so I said that I'm gonna prepare my physical device as well maybe because I'm not sure if we're oh no failed to install older oh don't tell me that oh my God I think my emulator is Android SDK 41 but I need Android xk33 so installing it will take so much time foreign going through all of these steps again I'm not sure yeah this is API 31. I'm gonna want a different one I would have to or maybe this one it's gonna take some some time your device is not 33 yes but my physical device I'm pretty sure it's not foreign are we actually dependent on this version uh Rec native Health Connect API requires minimum SDK 26 so what's the problem then why um why it didn't work when we had here minimum SDK 26. shall we try it this way because it says minimize the k26 I have to select the one that has Play Store that's true but where do I see if it has placed or not foreign I think so okay I'm gonna do a lot of things on the side just to see which one works so first of all uh what we are trying right now is to try it again with minimum SDK 26 to see if the existing emulator will work uh because it's supposed to otherwise on the side I'm preparing the a newer a newer emulator with Android version 33. um it still will take a bit of time to for me to log in and play and it doesn't have play or does it all right yeah I made a mistake okay no worries uh the Play Store depends on the device that you choose so which one should I choose and Nexus and with a different one I just downloaded it what's going on here and half of it at least my PC is holding up with so many emulators running build at the same time Android Studio like streaming software so many browser windows build successful build successful guys opening up really possible and handle Android permission Health read active is not declared but it's already good so I think I can close all my Android Studio stuff and look into our code for the use Health Data where we have what request permission where is it coming from is not declared as so I'm going to active maybe um oh there is some documentation so let's see let's see he's initialized permissions permissions let's look at those to Access Health Data from the Health Connect application in your application you need to add the necessary permission and filters to the app manifest Android manifest XML permission read or read and so on so setting up export permissions oh let's go you will need the AES and config plugins edit up the Json and add Android permissions uh let's do that Expo Android permissions Expo application we somewhere have here Android and we need to Define permissions so which one are we interested in read steps I don't need the right steps I don't need let's see what our permissions we're on uh so probably flight we will not have sexual activity damn boy very such data here um floors climbed let's go uh so the name is this one let's add it here and the distance right distance and of course distance and because we are changing on the native side we will have to rebuild it again npm run Android to include the newly added permissions in the Android manifest file let's see if we don't have to do anything else setting up permissions and creating a config plugin to insert a new intent filter add a new file in your project root Android manifest plugin why aren't you adding it on your end why do I have to copy paste it in my application uh okay let's let's do this as well we need to do it we need to but it's good that we're pro we're providing a code for the config plugin so in our root folder let's create a new Android manifest plugin and let's copy paste this code here okay and then we have to edit app.json again and add this plugins this one yeah above Expo build properties so app.json plugins um YX will build properties is twice I don't need it twice I will delete it once and I will add here the Android manifest plugin fast that's it and let's fire a new build guys I'm pretty excited I think it's gonna work I I'm pretty sure it's gonna work come on high hopes actually not exactly sure how so it's still building I'm trying to connect on my devices well what's going on here doesn't raid have like a step counter building complete oh so it's running yes it's running in use Health Data if I uncomment this one it shouldn't be active color is burned because what we are requesting is steps simply steps what read steps is notifying I just defined that read steps here in permissions don't tell me that I have to to most probably to clean it so pre-build clean let's go and then pen run Android and let's go through the documentation a bit methods initialize request permissions active read records oh look at this look what we have here our application is requesting permissions for the steps let's do allow allow and it's zero steps no the thing is that we got an empty array here because what we are doing here is time range steps start time let's do what 0.6 it's still empty hmm between tabs what are we calling get read records read records maybe read the record no record type example active calories burned why is it with small active and here is with capital active and what about these options do you have documentations about them troubleshooting page oh okay what are we looking for we're looking why we get an empty array time which you gave should be ESO format what's the problem with this one is it valver way around let's look at the read records option time range filter data origin ascending page time Branch filter M range filter operator between after before let's do after and after has start time zero no I think I think there is simply no date about the steps there um I don't know I'm trying to simulate some activity but I think it's not gonna have it unless we write it what do you think guys what if we let's take access to the others as well how they're called pyramidious distance right distance and floors climbed now if I'm gonna do the same for the upper tool for example distance and here distance and how's it called Flores climbed so we need to give permission for the distance that's already good floors climbed allow and it's still empty should we try to write maybe something foreign correct zero six sixteen zero six sixteen could not be parsed 0 6 16 as I said still empty where is this health kit why is not here yeah the thing is that you don't have any data in Health Connect how do we add the data to Health Connect I think we should downloads an application that would write there foreign to help you test your office integration with Health Connect it can read and write data directly to Health Connect that's what I was looking for allowing you to test your application operation you can download the APK use it to to for your test cycle let's try so we have a zip I think I found the solution foreign how it's called Health Connect toolbox where is it come on and health connect tool box why you're not here let's try it from the terminal ADB install downloads health it's showing where oh wait a second I love her permissions display over applications I don't know in serve health record activity distance let's do duration distance 2000 save and we need permissions allow save successfully inserted what else do we need we need steps uh like this save steps allow save successful and uh floor is climbed let's do five hello save okay now will our application have access to them reload yes yes so exciting so cowand it gives us an array of things can it aggregate somehow because I think if we for example will include it gives all the activities for example if I do steps but not at 6 PM but in the morning okay and I will do 500 save and now my application will get for example for the steps count one five hundred and one seven fifty so what I will have to do to get the total number of steps uh cost total steps equal to steps Dot map not even map steps dot reduce because we want to calculate the sum where current and uh some van querant we're gonna take some plus current dot count and we're gonna start from zero console log total steps let's do that like this total steps so total steps eight thousand yes because we have 750 in the evening and 500 in the morning so that's correct now um I think we just need to do beginning of today and end of today how we're gonna do that we have this date here I can install some libraries for the date but start what's going to be I'm gonna console log less things but if we console log date Dot to ESO string that value is going to be the date add the start of a day or not or at the end of the day so maybe I can just use this one here and maybe I can extract it into a constant time range filter for to reuse it for all of them like this so time range filter here the type is time range filter now I can do the same here to provide the same time range filter and for the floor climbs climbed as well so we have total steps let's go ahead and set it set steps as total steps we can do the same for the for the distance let's copy it like this so total distance equal to distance dot reduce some current dot dot distance Dot in meters now here we set distance with total distance and let's do the same for the floors climbed we're gonna need to calculate the total lures we're gonna Loop through the results and what are we gonna get we're gonna get the floors and let's set flights floors total floors what was that okay but it needs to be until the end of the day because look the date that it receives right now if I do a console log uh date this date is 12 but today 16 so what we are trying actually here to do is oh um let's do JavaScript uh let's actually ask jojob team I have a JavaScript JavaScript date I need two dates representing the start of that day and the end of the day in ESO format is it supposed to be set flights or settler it's supposed to be set flies because that's how we called it it's coming from Apple Apple it's just been aiming maybe floors like I'm not sure like why on on Apple it's flights but no never mind so start of day set hour okay so we can do date set hour like this start time can I do it in line it should be between and here it should have end time 23 59 59 so it says zero but if from up.js I'm gonna send today's date 16. yes yes yes and if it's 15 is 0 17 also should be zero and only 16 should have yes it works guys and it works both on iOS and an Android oh my God it's so exciting you know what to make it uh yeah yeah yeah oh my God I'm so happy that it works I really did not expect this one to work let's see the last things if we're doing everything correctly for example here we're not checking if it initialize or not so let's do if is not initialized let's simply return um let's check if granted permission Dot I don't want to check that it will simply give an error later if it doesn't have permission maybe like uh to to do it properly maybe you'd have to do if for example here if uh granted permission Dot access what does it return back request permission how can we work with them so if it's uh if the if this one fulfills that means that it has permissions all of them that we asked so I think we can safely delete it not deleted but just request it and that's it maybe it needs actually some some checks with his request permissions here but I'm not gonna do that right now let me go ahead and submit um health connect integration for Android health data the last time that I wanted actually to do which is a very little bonus is to have this date somehow dynamic and what I mean by that is to have it as a state const ant date set date let's initialize it with let's initialize it with today and let's use the date from this state inside our data here now above a ring here above a ring what I want to do is let's add a view with a text uh that will show the date Dot to date string the text should have some Style let's go ahead and give it some Style I want to be able to move between dates from the UI color look what Apple has it's white view Style the date picker date picker let's go ahead and style it a bit I want the just to make sure that okay it's spans across the whole screen let's do a line items I know Center margin or let's do even fighting align self-flex start what's gonna happen there no no no no no no no no it's okay like this so date maybe font wait 500 font size 20. perfect let's add some icons so Expo icons are you still with me guys oh my God it's almost four hours I thought that it's gonna be a one or two hour uh thing but which one this one or this one let's do this one so we're gonna have it here for the left here for the right we're gonna do white uh uh maybe not wide but let's do the green is it important definitely not do I want it to look pretty of course and for the date picker let's go ahead and put flex Direction row to put them in the same row and justify content Center yes and for the date margin uh horizontal let's do 10. maybe even 20 I think 24 here is too much so 20 will be okay and maybe some align okay okay okay it's good now we have to implement the change date thank you so new date is going to be new date with the value of a current date then let's do new uh to the help um great uh just function that will receive the number of days can be negative and then um update yeah react State variable called bait set date by moving it I think it will understand to update date number of days current date create a copy set date current date plus number of days update the date by adding subtract the number of days set date will it work change date here on this one I'm gonna do on press let's do change date minus one and on valver one it should be plus one so if I move it if I press yes yes it works moving to another month will it work yes baby oh my god it works and when we get here it's actually a field oh and we can keep it under uh we can keep it under how many hours four hours that's good so what I want to do now is I want to have a short demo here is our Android emulator here is here is our iPhone haha all right guys so that was the build for today we managed to do a lot uh so what we have done today is we implemented a step counter replication in react native by integrating directly with apple health kit on iOS and with Google Health Connect on Android here you can see both applications running at the same time one is running on my physical device in my hand here which is on the left we can move through uh with dates and it should it should update come on to an update on iOS why you are not updating reload so this one I obey value OS device is displaying the actual data that is coming from my fitness application so please don't judge that I only did to 100 steps today because I actually prepare for this live stream so if we move it like this it doesn't actually work on iOS why because we didn't reinstall it but I think it's bad on Android we can move it and it will update it will very nicely animate um this ring to display the actual data that is coming from the Google health kit I hope you enjoyed this one it was a long one but uh very exciting it showed you how you can integrate with apple key Apple health kit and the Google Health Connect and this I hope will open the doors to a lot of possibilities for you because now you know how to interact with that data in this tutorial yes we used only a subset a very small subset of data for steps distance flight client and so on but that Apple Health like go ahead and look at how much data you'll have access to and you can do a lot of things with that you can create different applications that will Target the health of the user you can create like some applications that would do challenges with Health Data and so on so I'm pretty excited about this build if you enjoyed this make sure to subscribe to the channel or let's do it another one if you enjoyed this make sure to check out the tutorial on our YouTube channel nodejas.dev you'll find it there all right guys so that is a long one uh thank you for joining I wish you a very fun weekend if you enjoyed this tutorial make sure to subscribe to my channel and if you want to become a full Stack mobile developer definitely check out our Academy at academy.nojis.dev uh that was it for today I will see you next Friday we are going live every single Friday and I don't have a voice already that means that it's time to end this one alright bye bye

Channel: notJust․dev

Views: 4,380

Keywords: vadim savin, not just development, notjust.dev, react native ui design, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, CodingTutorial, first app, App Building, Step-by-Step Guide, User Interface, React Native, native components, step counter, count steps, step counter application, step counter react native, Google Fit, Apple Health, Health App Integration

Id: VVoXcr18mdo

Length: 237min 52sec (14272 seconds)

Published: Fri Jun 16 2023