Build a FinTech Clone with React Native (API Routes, Zustand, Tanstack Query, FaceID, Charts, Clerk)

what's up Galactic friends and welcome to another massive clone tutorial on this channel in this video we will build a fintech application clone and we're going to use the revolute application as the idea and inspiration for our project in this clone you will once again work with all the latest and greatest technology which means we're going to use Expo router version 3 file based routing API routes we're going to use mm KV for handling the stayed with zo stand we're going to have reanimated and the gesture Handler we're going to have charts we're going to have different text inputs and we're going to have clerk for authentication and of course speaking of clerk check it out at clerk.com clerk are sponsor of this video you can get started completely for free and clerk is really the best way for a complete user management system you're going to see it once we put it to use in this clone we're going to use the OTP authentication so we're going to actually get real codes to our device send and then we're going to verify our accounts simply by our phone number so check it out clerk.com and there are already two other clones the WhatsApp clone and the Airbnb clone both sponsored by clerk that you should check out all of these clones focus on slightly different aspects and so this one will also share new things even if you have taken already the previous two clones in this one you're going to learn new things I can promise you and if you want to follow along I will do my best to be as slow as possible in writing the code but you should also check out the link below this video to the GitHub repository where you can find all the code for the styling for some assets and some dummy data that we're going to use in this tutorial so check it out on GitHub and now let's start with a gentle walkr of what we're going to build in this fintech clone in the first part of the Clone we will set up our application and we're going to directly switch from Expo go to an expo pre-build because the Expo pre-build gives us a lot more flexibility while still maintaining all the features and functionalities that you use from the Expo goab and we will later be easily able to introduce our own custom native modules in the second part we're going to then build this beautiful signup area where we have a background video playing and we're going to also talk about the input Fields here for our signup page and also for the login page including the routing to these pages and how we could display a model on top of them in the third part we're going to talk about clerk authentication especially OTP which means I will be able to put in my phone number right here I will retrieve a code to my device and with that we're going to have a number verification screen in which I can input the numbers and finally get to the inside area in part four we're going to then talk about building a tapar area for our application and how we can make sure that the inside area is actually protected using clerks we're going to automatically bring the user inside or lock them out when the session expires in part five we're going to actually start with the UI for our home screen especially the part up here where we have the the amount the user has on its account and these buttons and these buttons have a specialty because we can click that more button and open this cool native dropdown so we're going to use a package called zego to build this beautiful native dropdown in part six we're going to talk about State Management so we will be able to actually add and remove transactions this is generating some fake transactions and if we reload our application these will actually still exist because we're using uh zo for State Management an mm KV to store the values on the device in the best and fastest possible way in part seven we're going to add the first customization feature because I thought this would be really cool to have drag and drop between different little widgets down here this is also available in the official application that was the inspiration for this and we're going to use of course reanimated and the gesture Handler and some great code from the community in part eight we're going to then develop the actual custom header we see up here and also the bottom Tap bar here because this is actually a semi-transparent view it's hard to see but there's a little blur view behind the tabs and as well at the header so whatever you scroll behind this will somehow shine through and we're going to apply these stylings to our app in part nine we finally talk about API routes and we're going to do this by actually accessing some data from a crypto API so we can keep our secure key in a server environment and still retrieve the latest Bitcoin prices right in our react native application in part 10 we're going to then move into the details page of this and build this cool page which has a lot to it than uh actually more than meets the ey we have a transition of the title we do have these sticky sections up here and we also have the transition from a tab bar to a view that's above the Tap bar in part 11 we're going to talk about this so we're going to build our own chart into the application using Victory chart we're going to use Shopify skia for this and reanimate it and we also going add the functionality that we can drag our finger across this line in the most performant and smooth way which updates these values up here so this is going to be really really epic in part 12 we're going to then talk about something very specific to fintech applications which is usually about privacy so when these applications go into the background and are in the background for like 5 minutes and you bring them up you're going to see something like a lock screen and we're going to implement our own context that manages the inactivity and then switches over to a lock screen once the user has been inactive for too long in Chapter 13 we're going to then actually talk about that lock screen that comes up when you come back to the app from the background so we're going to build this view with we can put in a code and if that code is wrong we're going to actually have a nice little shaky animation of course using reanimated we're going to add the whole Logic for making all of this work including local biometric authentication using face ID which then in turn should bring us back into the app in part 14 we're going to talk about the account model overlay which is once again using a blurry background and allows us to change our name and also the image which is working directly with Clerk and the user Management Services of Clerk and in the final part 15 we will talk about Dynamic app icons so we will be able to switch between three different icons and depending on our selection immediately our app icon will change to the current selection using using a dynamic Expo app iccon package all right that's a lot of ground to cover so let's dive straight into our code all right so let's kick off the fun by creating a new project we're going to run npx create Expo app which is using the Expo CLI to create a new react native application using Expo we follow this up with a name and then we use a specific template so in our case we're using the TS template this is one of the default templates and I like to use this because this is using Expo router file based routing we're going to get more into that and how it works later for now we're just going to wait until this is finished and in the meantime I just want to uh mention again that you can find all this code on GitHub linked below this video and I highly recommend that you open this up because we're going to bring in some initial code um like for some styling and maybe you can copy over the assets we're going to try and do most of the other coding ourselves but for a few parts to get started if it will be really helpful and also if you uh are stuck at some point you can look up what we did you're going to also find all the links so again clerk is the sponsor of this video we're going to use Clerk and in this first part we're going to also already install a few packages that will be used for example reanimated or the react native gesture hand up why are we doing this well we want to set up our application with Expo pre-build which is using continuous native generation I will show you how in a second so our app is finished and as far as I know I can do something like code d r uh and then it opens No it should just open in that one window like there was a command to this I don't know why it always keeps disappearing uh I'm really disappointed by this because it's so cool if you can like have it in vs code and then it already opens up and I actually wanted to prevent exactly that I now have to do this again and then I have to do Zoom again so I'm sorry about that if you know the name of that command please let me know and now I just want to zoom in four times okay so usually you know go ahead with npx Expo which will run the Expo go application on your simulator or your connected device however as I said we want to do a pre-build because later in this video we're going to introduce more packages we're going to use I don't know what are we using we are using Rec native skia the victory charts acing storage maybe packages that are not included in the Expo Go app so you should make it an good habit to get into pre-build which is pretty easy before we do our pre-build let's quickly install a few packages so I want to install the Expo def client and I want to install react native reanimated and the react native reanimated uh no the react native gesture Handler in order to use these files we have to go into our Babel config so let's close this and down here we're going to add plugins no actually plugins with a lower case p and follow this up with an array of stuff so in our case we want to have the react native reanimated SL plugin this should also be the last element in that list uh for whatever reason this is important to reanimate it you can then also check out your EP Json but I don't think we need any specific changes in here here yet so let's go ahead with our pre-build so I will do this now uh npx Expo prebuilt this will ask a few questions uh py code is deprecated yeah I don't really care okay what would you like to call your packages I will just press enter to use the bundle identifier com super Simon uh fintech for both IOS and Android and if you press enter you're going to notice that you now have an Android folder and you now have an iOS folder in your project does it mean you're on your own you have to deal a lot with native code no it completely doesn't mean that I will show you why that's not the case in a second so let's see um do we still have to like include the Expo def client somewhere I don't think so I don't think so so that should be a good point um at this point you can also decide if you want to test your app on a native device if you want to run it in the simulator or if you want to run it on an Android emulator it doesn't really matter it's just like a slightly different command in my case I will run it on the iOS simulator simply because that's the device or the place I usually feel the most comfortable with like you get a good preview um it looks pretty good and so uh I will choose this so let's wait until the co COA parts are finished all right looks like my commands just don't finish anymore today but that's not a problem we can now continue with npx Expo run and we already see that we can use a command at iOS if I just run this it will run on a simulator if I attach Das Dash device I would be asked if I want to use my connected device but it's actually not connected right now so we'll just use npx Expo run iOS and I don't know why this deprecation is now coming up with every command I run this is kind of annoying but nonetheless uh we hope that our pre-build now comes up in the simulator soon so what's the difference between this as I said if we want to use plugins if you want to use native modules that are not part of the Expo Go app so you have to imagine there's this Expo Go app which can run your application really fast but there's only a limited set of packages and sdks bundled with that Expo Go app if you want to use anything outside of that you have to do a pre-build but as we see it's pretty easy so this just generates the native IOS and Android folders and then if you run the command like we do it will still spin up your life reload server it will deploy to your device you get all the benefits you previously had with the Expo Go app um so you get this cool debugging menu you can reload and log in and stuff so there's really no downside to an expo pre-built meanwhile we can also probably take our first look at the code that we got so I do have a components folder that actually don't really like so I will get rid of that under constants we have some colors so I actually want to bring in my own constants this is the point where you should probably um open up the GitHub repository so let me bring in two files I picked some colors for our fintech clone and I export them and I also did a few Styles so these are just using style cheet we don't use any native wind tamagi in here I really wanted to keep this down to the basics because most of you as I've seen in the state of react native survey are still using stylesheet so what we have in here are just some general definitions for some buttons texts um uh section headers blocks yeah just like basic elements it's pretty cool if you have these default styles that you can then reuse across the pages of your application um on top of that you might want to bring in the assets folder uh probably we can also do this at later Point um the only thing we need for the next part is actually the two little videos I have no copyright on these videos I just got them uh from a place online what are they actually I think they're like freest stuck videos that we want to use on our introduction page don't worry if your first pre-build an npx run command takes a bit of time that's not a problem usually um as you can see it's doing a lot of things it's compiling a lot of iOS stuff and then copies over the resources and at some point it will hopefully pop up here so until then let's wait again so the app is coming up and as you can see we're actually uh seeing pretty much the same setup like if we would use the Expo go Application we got this QR code we see that we're using a development build that is good that means we are using our own app not just the Expo Go app uh I think I messed up the project by deleting the components but that's not really a huge problem so I'll also massively remove all these files because we really want to start with some Basics uh let's check out probably in this folder I will get some complaints because I removed stuff uh so I will remove the color theme here uh I don't really have a TS or model I'll will just use the stack for now uh we can keep the rest as it is um we can actually remove this as well and once we got that let's just place a simple index. TSX file in here and then do react native functional export which is a snippet I have and create a new page in here if I now press relight I really hope to see my page here we go this is my page this is the index page and we can see that it changes if I just put something in here we see the immediate update so we are now running our own pre-build we have fix the issues we've boiled down to the basics that we need we're going to get more into the layout stuff and the routing soon so make sure you got the pre-build setup you installed the packages reanimated gesture Handler so we got all of that in place and then we can finally work on the lockin experience okay so after getting the basics right we now want to build the initial screen the lockin screen and the signup screen but we will do them without the clock functionality so we're going to add the actual authentication in The Following part for now now we're going to do the UI and we're going to focus basically on this first example so what we're going to have is a video playing in the background we then have two buttons at the bottom this will bring us to a sign up screen or a lockin screen and we can also toggle from the top from this um this help uh Circle up there a little right here a little modal overlay so this is the navigation and the UI we want to create again you should now bring in the video assets actually I think we just need one asset right why do I have two yeah I think this one is yeah I'm not using this one so you just need the intro. mp4 file and for these we also need two additional uh packages which means we actually need to kill our live reload here so we're going to stop that server and we're going to npx Expo install the Expo AV package and the Expo asset package okay we can find them in on Expo the first one will be used to play a video in the background and the second one will be used to actually load that video file in the first place so let's get back and we can I don't know why my commands just don't close anymore here oh it's actually still installing uh is it really I don't know I feel like something is terribly wrong with my with my best command line I will just close this one open up a new one uh maybe it works better when when I run it like this uh okay yeah I think we got all of them I think it's yeah it's just a general npm problem but we have installed the packages so we can go back to uh the pre no not the pre-built but xpu run on iOS so run this again and this will create a new build of your app we don't need to do a new pre-build in this case I think actually um do we have to do a new pre- we're going to learn but I don't think we need it right now you usually need a new pre-build if you um use the environment file if you add an environment file if you change something in the app Json but we're not really doing any of that let's add a new file or a few new files so we have the index page that is the initial page that will be rendered on our screen but we also want to have a login page so let's add a login. TSX and again I run my um snippet here react native functional export component which gives us this and then I will also add the sign up. TSX and Fe so re native functional export component and I usually like to call these just page in the beginning and I also do a help file so we will not really Implement that page but anyway it's good to have it so now we are already able to navigate actually these unstable settings can be removed in the layout file um we can we can keep it like it is but I kind of want to change the layout file already a bit so what I'm going to put into this is I want to make sure that on the loog in I actually don't see the header so therefore you can put in stack do screen name index and the code completion you get here from co-pilot is usually wrong so what we want is we want to set the options for this one and I want to set header shown to f FSE okay this should hide the header and now my text is somewhere up there so you still see it uh that should be enough so we can now continue on the index page to create that view and for that view we going to load our asset and we can use the use assets hook so equals use assets from Expo assets and now we have to or we can create an array of uh requir statements in here I don't really I'm not a big fan of this but it gets the job done for us and we'll load that asset so with that we can specify all the folders starting at the top level because our TS config has a setup for this pad so this makes it a lot easier in our project to use these uh file path and our file is now under assets and now that is just the font it's under assets videos intro. MP4 okay that's the asset we want want to load now we need some styling so let's add a block for the react native stylesheet API and we're going to start probably with a container I don't know why I should probably have added the container simply to my uh to my default Styles I don't know why I didn't use it um so we're going to use a flex of one and I also want to justify the content probably not in the center but we're going to fix that in a second let's add that style up here so styles. container that puts the text in here it's okay for now um and what we want to say is if we do have assets so if the assets are ready so I will use assets and and and then we're going to render our video component from Expo AV uh the source for this will be the uh we're going actually have to use two brackets here and then use Yuri uh Yuri at the index zero because in our case we have only one element in that array if you add more assets with use assets so if you have comma and more you're going to have to be careful that you select the uh item at the correct index but in our case that's not a problem so if we go ahead with this we see something like this okay not too interesting not too special um so therefore we're going to have to change a few things uh I want to add some styling for the video actually so what I want to make is I want to make this use the full width so I will use 100% for the width and for the hate and I also want to have it in the background so that will be a bit more challenging but we're going to get to that in a second so let's add the Styles okay this fills up the app pretty well um why are we still seeing the uh safe areas that's a good question let's see if I can add the position position absolute uh that's not making a big change let's see let's see we're going to add some stuff to the video anyway because as you can see it's not really a video yet so I want to add something I want to add is muted because we definitely don't want to hear sound we want to set is looping so it plays in Loop and we also want to say should play uh automatically if we add all of that the video starts playing um now I want to change my justify content to space between but that shouldn't make a uh a tremendous difference to our application so why are we seeing these uh we have a stack screen index um we don't really have a safe area around our app yet so I wonder we just re reload how can I get this one to play on the full screen maybe we're going to figure that out soon uh let's probably just continue for now by adding some more elements to the page so we'll add another view in here uh we'll get some styling in a second and a text that is now using um our own styling okay yeah whatever uh let's just no I don't want more okay thanks first time this happens today this will happen many more times um because we've positioned the video in an absolute way um we can't really see the text yet so I want to add margin top here of about let's say 80 and some padding of 20 okay so the text is here and we just need to style it correctly probably we should add some like header styling okay so we'll do something in line and usually try to use stylesheet as much as possible but sometimes it just uh it's a bit easier and faster okay let's make this bigger uh and let's add font weight I don't know 900 yeah that's cool I also want to use text transform uh text transform uppercase okay welcome to the app but actually want to use a different text that we're mimicking here so as I said in the introduction we're trying to use the revolute app as an idea for this app so this is where my inspiration came from okay good um the second view we're going to add to this page will be for the buttons at the bottom okay so this one will also get some styling let's call this buttons and we should probably add this down here so four buttons what I want to use is I want to use a flex Direction row so we can position the items next to each other but I still want to justify the content in the center and probably use a gap of 20 okay so now we can put in our uh touchable opacities here touchable opacity touchable it's hard to spell this correctly and then close it and the touchable opacity you require a little text element uh let's call this one lock in uh is it displayed anywhere I can't see it um where on it's probably at the bottom uh let's add to the something here about margin bottom of I don't know 60 yeah it's probably my head is also covering it but now it appears up here we just had white text on the white background and also what we can do is um we can let's put in two more of these or one more of these uh and then we're going to WP this with a link component I also add some padding horizontal that can't hurt uh won't change anything right now um so what we're going to do to use routing is to use a link component from Expo router with an Atri because we're using file based routing and we got the support of type routes we now see all the available routes so in this case I want to go to login I will add as child because otherwise the styles are not applied to our child here um and if I click on it I can already go there because we're part of a stack layout however this is not everything um and I also just noticed what we are missing um it's so cool like sometimes you just understand we have a resize mode for the video and we can set this actually we don't have to use a string you can use resize mode from Expo AV and set it to cover voila oh that magic so much better so much better okay that's a that's a lot better um my lockin for the lockin we can actually use one of our predefined Styles so this is the first time we can import the default Styles and then we can use uh what did I use before I think pill button um okay let's doing something but not a whole lot so if you check out the pill butting it just uses petting hate border radius but I didn't want to set a specific color I want or try to keep these as generic as possible so usually with the pill button you're going to see that we use an array of styles so this is like the default Styles and then we add a bit more on top of it what I want to add on top is flex one so it spans across uh all of the width and I want to set the background color and now first time importing my colors be careful you want to get the colors import from our add constant colors not anything else make sure you got that and then from constant colors I want to use uh dark okay so this will give us like a a little dark pill button down here the text is also not yet correctly we should probably up the size and font weight so next to the color white I will use um the font size of 22 and a font weight of 500 okay that's a lot big uh a bigger button okay touchable opacity is good uh we're good here now let's copy this and let's use it again and for this one I want to actually use the background color white okay so this is like the primary button that also means that the text should probably not be white so we remove this we change it to sign up okay sign up and then we get this okay everything that's in the bottom is usually covered by my head so I'm careful okay this is there typo loog in in I feel like this is a oh my it's still early morning here okay loog in and sign up and sign up should also of course not take us to loog in but instead to sign up so now you should be able with those two buttons to either go to the lock in or to the sign up page and we have our video playing in the background so congratulations you finish the first screen of this gigantic colog app um I think we're actually fine with that page I think we're completely done with it uh when do we want to continue let's probably move on to the sign up page so on the sign up page as you've seen before uh what we want to do is we have this number input on the sign up page uh and a little uh yeah we going want to open that and the lock in has some more buttons so let's do the sign up page now we definitely need a function that we'll already call const on sign up we will Implement that later uh because this is where clock comes in and we're going to put some focus into making sure that that part works now what we want to do in our view is let's use some styling here here and we can use the default styles. container could I have used this before maybe but that's bit different now also if we check out the previous one we're going to see that the header area is definitely different so we're going to have to work on that part as well in a second um but let's continue one by one we're going to add uh some styling here default style I think I have like a header as well yep let's use that that one and call it let's get started okay so we have a nice big text up here and then we can also use a description text below that which uses our default Styles description text that's our whole point of using this in the first place then we come to another block which is our input container this is going to be a bit more challenging so let's add R native stylesheet down here and and what we're going to do is we're going to use for the input container um margin vertical so it has some uh space to the top and bottom and a flex Direction row all right and then we're going to use it in here the input container this is only the container for our text input elements so we can now place these text inputs in here I don't want to use the react native gesture handlight yet I want to use these like this um placeholder phone number yeah that's actually mostly accurate uh the keyboard type it's also not that bad and let's close it so we're going to use the input styling down here um can we oh no no no no we want to use these starts okay so in the first part we're going to actually have like the um country code and then we're going to have the input for the actual phone number I won't make a big deal out of the country code you can also like do something where you click it and it opens an overlay and you search for the country actually in this case I will do it in a pretty easy way so what I want to do is I will just use my colors here and then um we can put the value to country code use State uh um value so let's get this and then we have it down here so I will just use like a default uh country code uh our mobile phone number input should somehow look a bit different because right now this is definitely not looking like it should um this should take up a lot more size and actually we don't have any styling so let's change this let's change the background color to uh colors. light gray so we actually see the fields that's good then we add some padding around this or inside of it of 20 okay that makes the field a lot bigger already and we add a border radius of 16 giving this a nice rounded border if we don't mess this up and a font size of 20 to up these a bit um and margin horizontal uh let's just use margin right of 10 okay yep that looks good we could have probably also used a gap that should work uh additionally my second input should take up most of the space so you know what to do we're going to make this an array and we're going to say okay this one has Flex one so it will span across this now what we see is that if I press K we get this number input because we've used the keyboard type numeric uh and we also want to use uh State here for the actual phone number so let's add this uh we can use the value uh phone number and onchange text I want to call set phone number also uh I think we have the placeholder and you can if you want to also set the placeholder text color to something like our gray color okay this looks pretty good um I think we're fine I just want to make sure that um let's see let's see what are we doing next uh we need a button we need a button below this so let's probably do this so I will use Link component from explorator again hre goes now back to the lockin so in case you already have an account um I'm going to use as child here and then I will use a touchable opacity again um this one doesn't really require any styling so we just use style here default Styles and this is a text link this is just a text link uh already have an account log in something like this uh that should work what I want to do by the way is if I click on this link it's currently pushing the sign up page but usually in that case you kind of want to replace this you can just tell the link to replace this page and if you do it it's still pushing this but if you go back you're back here so um by default it's pushing on The View stick but if you say replace it will replace the view uh in the stick so just a little little one of these tips that you're going to see across these uh clone tutorials now let's continue with another touchable opacity at the bottom because what we need is of course a way to then say okay sign in this one uses some styling and I'm pretty sure it will be an array so we're going to use the pill button and oh please uh I don't know yeah on press actually on sign up yeah that's cool that's not not too bad not too bad copilot uh figuring this one out however we also need a text in here uh let's use default styles. button text and then sign up where is it where where is my view I don't see it anywhere uh oh it's actually here uh we haven't set the background I think for our uh pill button uh Let's do let's do probably a conditional background here because if the uh phone number uh where am I I need to be here in the array if my phone number is um unequal to an empty string I will use styles. enabled so I'm going to have to do like an enabled style or I have a disabled style uh disable Okay so in the enabled case I want to set the background color to the primary color of course uh let's see background color colors primary and in the other case I want to set the background color to primary muted okay so now we can use this up here so if the phone number is uh something I want to use enabled and otherwise I want to use disabled on press sign up I already got all of that um we just need to make sure we're not messing up the styling too much in here okay yeah this belongs into that block okay I hope we oh my we completely messed this up um phone number there there there we got this one I think we got just too many brackets everywhere yeah I don't know what are you doing with this line here this is yeah this is how it look like okay now one more thing um I kind of want to push this sign up button to the bottom we can do this by simply injecting a view here and giving it style uh of Flex one okay so this should push the sign up to the btom now what Happ if I toggle the keyboard the button is not visible anymore to fix this we can now surround our uh view with a keyboard avoiding view let's do this keyboard avoiding view there different ways to handle this uh we will just go with this one uh I will use style Flex one so that shouldn't uh destroy anything if I just wrap it now around on my app um we're going to get this we still don't see the button there are a few things you can set here so first I want to set the behavior to pading and by the way in the simulator you can press command K to toggle the hardware keyboard okay uh but it's still hidden why is it still hidden because the offset is incorrect and we can now set the keyboard vertical offset to something like let's say 80 if I do this and then do it again we see it works a whole lot better uh it could also probably be like 90 uh that's fine the thing is this could be different for Android so we're want to use something like keyboard vertical offset here and we're going to check if the platform is equal to iOS then I want to use uh like 90 and otherwise on Android we're going to use something else so I will just use the value of keyboard vertical offset which means I click here and the sign up is in the perfect place and also it should be disabled why is it not disabled uh my phone number is an empty string uh uh uh value change and my touchable is p button okay yeah this is setting the background color this is certainly wrong this is not what I want um this is in general not what I want this is oh we should have some margin margin bottom instead yeah that makes more sense okay now it's not in the best place yep that was why I had 80 in the first place so let's change this and finally we should be in a fine place yes this is it okay good um um something is missing here oh yeah that's right the header part uh to fix that we could actually Implement something in here but I recommend you do this in your layout file so I will add a new entry to my stack now and you see you don't have to do this um but if you want to Simply use the name of the file the name was sign up and previously we had index and then you can Define all the options you're used to from react navigation so I want to use an empty title here and I want to set the header back title to an empty string as well okay if I now go to sign up we see no more stuff up here uh her back title is still index yeah sometimes you have to like reload the app to make that work I don't know why it's still index um we're going to figure that out in a second uh I also want to say header Shadow uh visible fault that should remove this little Shadow here and I want to set the background to the same of the page so it feels like this is one let's use header style background color not trans I mean transparent would probably no it wouldn't work uh we should use colors again make sure you import the right one and background so then it has exactly the same background color and I want to use a different Arrow uh this blue up there I don't like it so we can just Implement our own header left button let's use uh touchable touchable opacity in here and uh on press I want to do something I will figure that out in a minute and then I will use the ionicons from Expo Vector icons name iOS arob let's use just arob back uh yeah onpress is M let's just not implement it in the first place okay so we got this button probably use the dark color Okay looks good just making this a bit bigger and then we're fine cool now I just need the functionality we could wrap this again with a link component or we could use the router uh and at this point I kind of want to restructure this a tiny bit so let's do this together in a preparation of what's coming soon I will call this one here now initial layout and that initial layout will not return this one but we'll actually return the stack stuff that also means that down here I want to have a cons root layout navigation and I like to use the same syntax everywhere so I use it like this and then I will use my initial layout and I will export default my rot layout NV okay we just restructured the stuff so it becomes easier to add context around this in a minut in it um additionally do we have everything here oh yeah we can now use the router so let's add this um con router equals use router simple Hook from Expo router to um access the router also this wouldn't have worked in the first place down here because uh we need to have that context available and now we can go back to the touchable opacity and on press we can call router back let's see sign up and we go back okay perfect implementation of what we want I also want to have a light stages bar by the way [Music] um can we do it like this yeah I think we uh oh where did I add the where I did the empt text string oh no where did I introduce this oh here okay yeah uh and we can say status bar expose status bar and I want to use the style light in here so watch out for the header uh the stages bar and just a little oh come on just do a Reload you should turn light why are you not light states Bar style light do you have to use dark why are you not turning light I will get you to turn light later I don't know why you're not yet turning light let's see if I can just wrap the gesture hand rud view around this would that make you happy uh let's see style we get we need this anyway so this is not something bad uh I can't get it to refresh accordingly we will see we will see I'm pretty sure we're going to conquer that later uh for now do we have Expo stages bar we do have Expo stages bar maybe if I reload the app and do another reload soon anyway sign up is done uh we see it's in the perfect place it works exactly as we had uh we had planned now let's copy this whole stuff and move it to the lockin page okay so the lockin page will only be tiny bit different uh we can probably start in the layout because uh we just work there and let's continue here so let's copy that entry for our login page um I want to use the same stuff so no title um header Shadow visible and the background stuff but this time I want to use for the header uh right an additional object so I will just copy this one header left and use it for header right and what we want to use here is a link component again with an H rev and that H rev goes to the help page and then we use of course as child to make this work wrap it around I don't want anything on press and of course I want a different icon in this case so this should be like the uh help Circle I would really love to have code completion on the icons that would sometimes be really helpful okay so if I go to lock in I can now already go to the help page from here however that page should of course be a modal overlay so we're going to do another stack. screen this time for my help page uh options oh yeah use title help but more importantly we want to set the presentation to um model we're going to see different presentations later on as well but for now this is how you could add your easy modal page on top okay now uh actually let's check out the login again so on the sign up screen we just had the phone number input we have the same here but just a handful of buttons below uh the continue button so really not a big difference on the login page uh maybe just uh changing a few words here and there uh and also calling this one on sign in of course so this is what we want to handle we can have the same stuff set up here but we will say welcome back and then enter the phone number associated with your account I think I'm yes this one should be on sign in um so this should also then be called just like continue okay welcome back enter the phone number associated with your account we also don't need the text Link in this case Okay so that can be removed um and also I kind of don't like that view okay so this looks a bit better um for the input container do we have the input container styling yes we have margin uh row we have the same input styling so we could probably have uh Outsource this into our default Styles uh pretty much everything that we have in the Styles here nonetheless uh what we need really need now is that view below the touchable opacity to show like the social sign up buttons let's make sure we catch the Right View so we stay in the container this comes after the touchable opacity uh after that one I will add a simple view because we have these like ore you you can't imagine how hard it is to like do a decent like two lines and an or I don't know why but anyway Flex direction should be set to row in this case we want to align the items in the center and we want a gap of 16 then we have two views with a flex one hate uh of actually not one what I want to use or like to use for these really thin or make let me let's keep this so you see this is a hate of one using light gray I will just use gray so you see it's a quite it's okay okay it's thin but we can do even thinner so you can use stylesheet do hairline width and notice have this turns even thinner so I want to use this one and I want to use it twice and I want to use a simple text in between uh using my gray color uh font size 20 to achieve something like this okay do we need anything else I think this is good so so now we can just position the rest of the touchable opacities below this touchable opacity one no touchable opacity no oh my God I'm so bad okay touchable opacity here we go style we start again with the default styling oh these brackets I hate them and now I have no I'm so bad default styles. pill button um for the back ground color um I think I want to use like white but let's see um I'm going to figure that out in a second okay let's see and close this I want to put in an ionicon here uh I want to use first of all the let's say name male um size like 24 and uh let's use just black in this case okay this is the icon and then I have the text component so oh no I messed this one up I'm really good at messing stuff up to dat and the text should also have some sort of default styling I think I defin something uh button text yeah button text looks good uh and we're going to say continue with email all right so if I close this now uh that looks like a perfect button we don't even see the text so so let's add color yeah I made these really generic okay that's okay uh problem is that we still need to make the touchable opacity use flex Direction row okay we got that and on top of that we probably need a bit more we need a gap of 16 as well between these that should look good um and some margin top like 20 so we get away from that and then I use the background color white I feel like something on this page okay yeah that's enough because the background is actually gray and then this turns white uh we can also have like a uh another function for the sign in type maybe that's interesting uh so what you could do if you want to handle multiple different styles you can do like an enam up here little typescript exercise sign in type uh okay and this should do some something like phone email Google Apple um my just like this and close it okay then we got our sign in type up here and we can use it in the function to pass in the sign in type and you could do like an easy split so if the type is equal to sign in type. phone we're going to do our phone authentication and otherwise uh you're going to do something else that also means that on these buttons you know need to be careful and you need to pass in the right type in here so in this case it's the sign in type phone where we press continue down here in my buttons I would have something like on press uh on sign in sign in type email and I will replicate this now for the next one so what I want to do is I want to use the uh logo Google and I also want to do this for logo Apple okay so this would be apple this would be Google and then you could easily distinguish between the different sign in types did I build this like this before I'm always curious how I did it before um so yeah I think this is how I did it for that page okay um we have the three buttons we have the continue button which should work once we put something in our help model overlay works this means I don't know how long it took it but this is basically our initial sign up login experience that works really really smooth there's no logic behind this yet but we can navigate around between the different screens and we have everything on the screen that we need so with this perfect setup we can dive into OTP phone authentication with clerk now the next challenge of our clone is to set up real authentication and we're going to use clerk the sponsor of this video so go check them out at clerk.com uh this is really the most comprehensive user management platform if people ask me why Clerk and not something else it's not just about the authentication it's really about the whole user management there's a lot more to clerk than just signing in users with email or password or something if you don't need this cool then probably something else is ER but if you're looking for the best way to manage your users in your application then clerk is certainly the way to go we need to install a few packages now in our application so I will kill that one right here and what we need for clerk is the clerk Expo package and also the Expo secure store package because this is Will basically store the token in a secure way on our device in combination with clerk additionally what we want to implement in this clone is phone number authentication so that means we put in our phone number we get an SMS from clerk it will have a code and we have to verify that code that means we need a little way to verify this and I think I used a verification package for this um so I think I used the react native I wonder I wonder if I ended up using it because in the past I used it yes so I also used it again uh thank you for showing me all of this I don't really need this so let's let this installed in the background my npm has sometimes problems we're going to continue and create an application already here I will call this fintech video I can enable email uh I don't really need it in this case so I will just enable phone number authentication for now you see with clerk you could also just enable all of these things and you get like default components that works a bit better with a web so on mobile we're usually using a custom flow from Clark but again shouldn't be a problem um have you installed everything that we need uh npm installation that would be really cool no you're still doing something uhhuh addit config plugin Expo secure store that's a cool story so the react native confirmation code field package is the one I want to use I think I used this one for a reason I can't exactly remember but this one seems to be updated this Fork so go ahead with npm install re native confirmation code field and again uh all the commands should be in the GitHub repository as well once we got Clerk and we got this uh there's still something to do and that is adding our clerk key to our environments I will add a EnV file and in my EnV file I will put the clerk secret key uh we're in development mode so I can just copy this I don't need uh actually I don't need the secret key right now only thing I need is this one I will call it Expo public clerk publishable key so this will make sure that our front end application can access it um this is a key that we can have in there because it's a public key so this is a safe way to expose it uh while we got this uh let's quickly check out our app Json so we got the Expo secure store here as a config plugin and that should be in enough to run our run command once again okay um in my clerk dashboard I haven't done anything else your sign in is ready so if you're on the web you could now easily use these for Expo actually this is the one we should have copied I hope we did uh let's check yeah that's the one we got uh you can check out the documentation for cl we have installed this one we have an environment variable and now we need to put our cler provider around our application that's the next exercise we should follow so let's go to the layout and Surround this one down here with the clerk provider the clerk provider expects some input so we're going to give it to it in a second it needs the clerk publishable key okay this is hard to pronounce for me um I'm going to get this from my process. EnV and use the Expo public key uh and then there's a little snippet from clerk that we need as well so this is the whole reason why we installed the Expo secure store make sure you import that as well it's basically telling clerk as the token cache please use this mechanism to store the token so the token will be stored with a secure store and will be read from the uh secure store as well and then down again at our provider we can simply say the publishable key is the one we have imported at the top um and the token cash is the token cach you might have to add an exclamation mark here to tell that that key is set so I'm pretty sure that that key is set um yeah I don't know how we could otherwise overcome this okay cool our app is now making use of Clerk and we can actually implement this so let's go to the signup screen and on sign up we want to use um we need the router now so let's use the router because we're going to have to go forward to a new page uh I will put this in a new folder actually and I will call that folder verify and then do a phone. TSX uh why is Simon doing this you can check out some other videos I did about the Expo router and file based routing uh we we can have folders just like this they become part of the URL basically and if we use the brackets here we can pass in uh any kind of information like uh in the URL and then access that number on that screen so if I'm on that phone screen I could now for example get uh the phone by using use local search params from expor router and we could even type this if we wanted to into an object and say this phone string that's set okay that is the whole story here now back to my sign up page and I want to disable this I don't want to see the movie all the time uh on that sign up page I want to import something as well from the um from the clerk package so I want to import the sign up sign up and also set active from uh use sign sign up actually I don't want to use that active just notice that we need to verify the phone number anyway so we can just use sign up from the clerk Expo SDK package and then when we try to sign up we're going to wrap this in a little try catch block uh await sign up is this right um do create this is what we want to use then we need to pass in the phone number uh let's try and make the full phone number number as a string up front from our country code and phone number so if we do it like that we can later use it and then we going to call router push this is actually correct there are different ways how we could push this by the way we could just include it in the URL if we made it a string letter Ral or if you want to have it more explicit you can put an object here and in the object we have path name and this is always confusing me it's just lowercase path name and after that we have the params and for the params we can then pass in our full phone number cool I can also catch the error and then do a little uh console yeah error signing up I will not do this in a very elaborate way today you can check out the previous WhatsApp clone where we also handled like if the user is already signed up it will trigger the signin flow but I didn't want to complicate this too much so what this does is if I enter my phone number here I will will receive uh hopefully uh automatically an SMS with the code but we're not that uh at that point yet so I want to make sure that we have the right settings okay we have in clerk set up our phone or I don't really need email if you wanted to enable the other stuff of course uh you would enable email as well I will disable password because we're only using SMS verification and I will allow users to change their names okay okay good I'm in the right place here just need to verify a few things and that looks good to me now we probably want to implement that verification screen in a second um let's quickly set up how we would handle this on the login page so on the login page we would also add our router okay con router okay and this what definitely the wrong import so use router from exporo and cons sign in this time from use sign in so there are different hooks from Expo that we can use um sorry you sign in did I use property sign in doesn't um uh as far as I know last time I checked sign in exists where was there was there a wrong spelling I don't know no okay let's do another of our classic TR catches here again I want to create my full phone number by using my country code and the actual phone number and then we go ahead because the signin Works a tiny bit different in this case I need to first check the supported first factors using weight signin dot uh create and I want to use the identifier full phone number uh supported first factors did I go uh yeah they should yeah let's do it like this sign in should exist at that point then we can check if the phone number exists as a supported first Factor by checking the strategies so this is an array we get back and we can check if phone code is allowed if that's the case we can grab the phone number ID from our first phone factor and with that we can finally call sign in. prepare first Factor authentication and we pass in an object with the strategy phone code and then the actual phone number ID so it's a bit more complicated than the sign up because there could be different methods how a user can be signed in once we got this we will then call our router push function uh I want to go to P verify phone again and for the params I will use my full phone number and one important thing I will pass in another value sign in true okay if we do it this will help us on our verification screen I will also already add it in here sign in um okay uh this is actually option string let can do this yeah whatever um because we need to check if we're signing in or if we are verifying a sign up on that screen so there's a tiny tiny different between these and we just passing in another parameter we are able to catch that information now um You can just put in some logging here I also did something like this and before so you can check if this is actually a clerk API response error and in that case you can present an alert with the correct typings so a little little improvement over just console logging now before we do all of that fun um I will now commend this out in the signup screen and I will just go to the next page actually we can keep that and then go to the next page so on the sign up screen I will now be able to go to the verify screen okay cool and we are now able to implement that screen before we actually now five times need to trigger a code uh here so in this case we're going to have a code input that we want to create so let's do a state code and set code use state with an empty string for now uh additionally I want to have a use effect block here so let's check okay and this one will be triggered when code changes I hope that makes sense so every time code changes we're going to check if code. length is equal to six that's the length of the verification code and then I'm going to verify my code we need two functions we have verify code uh let's make this an Asing function and we have a second one cons verify sign in we're going to just close it up here okay these are the ones we need to implement and that also means we can make use of the sign in we passed in here so if signin is true I want to verify a sign in if it's not said I want to just verify my code good um additionally let's grab all the stuff from the clerk hooks so sign in from use sign in and const um uh sign up and set active from use sign up from clerk Expo where did I go wrong oh it's just uh it's just taking a second that was confusing as hell to me okay um on this screen we can start by wrapping this in our default Styles uh default styles. container so it's getting the right background color uh we can probably also keep it or change in my layout file how that page looks so most likely we're going to use pretty much the same setup like we had on the signup screen let's put this somewhere here so this one is uh verify again we're really using the path to that file as the name here um so again title uh header back title header Style and header left will look like this okay so let's try yeah that looks good and on our verification screen we can now Implement our cool inputs uh we're going to use the same text and descriptions like before um so yeah this is the number that was sent to that page that's already a good indicator and at the bottom we're going to have another L component from Expo router um where we can like go back so let's say we have something to lock in um do we need this here on this screen uh can we I I wonder if we actually can do what I think we can do uh so this is the one we had on the lockin screen as well um it could probably it could probably be the case doesn't really matter too much okay so whatever sign up then we have that link in between we have our code field and that's the important part we need to figure out now before we can finally uh Implement our clerk o so for the code field as I said this is the package we want to use it gives us a pretty cool way to um create a view there are some basic things that we can use and that we should use for this so first of all we have a cell count up here and we have an uh import statement up here let's get this imported and then we have a cell count that they recommend so in our case is of course cell count of six additionally there was like a little hook here to update the value and to have a reference um let's see how we can fix this um usually they just pass in a value and their uh value is the state here so they use the name value and then it is included here in our case the name is phone so I will use Value phone and the same down here Value phone and set value set pH uh actually uh actually code actually oh that was a good catch uh that could have taken me long to debug set code should be here and up here it's as well code okay code and set value set code nice we dodged that bullet really quickly now we can bring in the code field okay let's add the code field uh somewhere here and where is it red um oh I haven't added stylesheet probably yeah why should you add that in like whenever I start the page it should just add stylesheet it's so annoying okay anyway we got code we got set code um we don't have the root styling so is this page giving us some root I think I found the root styling uh code field root cell root uh Focus cell yeah we're going to try and grab this but most likely we need a bit different styling but we should be able to see it at this point yep there we go so we can input something this is not the final UI but most of it is already in place we got the code field it updates automatically it has a cell count of six it's using the number pad it has a onetime code uh and then we have the render cell function which has index yeah I think I want to do this in a tiny bit different way because I want to have an A separator in the middle the way to do this is I'm basically wrapping this with a fragment here okay and then I have the view and check if the index is equal to two so remember 0 1 2 then I will add the separator styling so the separator will just be like a little line that I include down here with the separator styling okay let's bring this in from constants and I think I messed up something as well we have cell rout and cell text as well let me just use my initial styling um I think I found this we'll look this up again in a second um so for the cell field route we have some margin and gap for the overall fields we now see we have this little um Arrow here no it's not an arrow it's a SE the my separator View and otherwise this will just return null so only if the index is two it will render this additional separator and then we have our cell text and cell rout which is using pretty much the same stuff um the default uses here okay that means uh we I think have everything in place let's add a little lock in here okay let's lock the code here and we should now see if I press the last digit um it locks out the code so that means when we enter the last digit it locks the code and that's the place where we now want to plug in our verification with clerk now to finish that whole flow we just need to implement the verify signin and the verify code cuz we've on the lockin and sign up requested the code we've now entered it and then we finally need to verify it let's do this again with a try catch block and we're going to say await sign up so this is the verify code which happens after the sign up attempt phone number verification and I attempt this by passing in my code additionally we can have the same catch block like we had before so if we do have a clerk API response error we can actually use the correct types here and for the alert did we get the right oh we did write alert that is epic Visual Studio you you still surprise me sometimes but this is not everything this is only verifying this on the clerk side we also want to make sure the user is activated afterwards so what we call is we call the set active which we imported uh we we destructured from the uh use sign up hook and we pass in the new session and the session comes from sign up. created session ID now this will uh complain because we can't uh do it like this so in this case I will use an exclamation mark um [Music] because sorry said active uh in which is possibly undefined no this is not possibly undefined I just told you that it's not undefined I intentionally said it's not undefined you can't tell me it might be undefined um sorry did I get something wrong here set active with my session oh set active can also be undefined yeah great good catch yeah typescript is great now in this case I just want to do like this because we are anyway in a tri catch block um so it doesn't really matter too much now let's move this to verify sign in in this case I will of course use the sign in object instead and I want to call attempt first Factor authentication and I will supply again the strategy not phone number actually this is phone code um good and the code and afterwards I will also call set active but again with sign in. created session ID uh where are you met about this time created session ID from I have no idea was that created session ID it's completely I don't know there's so many mysterious bugs today and like errors I don't know okay we now get a lot of errors here because we're trying to uh automatically verify this this code because our code length is equal to six and so one of these is called that's of course not great so we should pretty soon test this with a real code I think we have actually finished uh everything we need so since we don't really have the inside Area yet let's do a simple thing um within our initial layout I will add is loaded and is signed in from use all The Hook from clerk okay and now we can add an additional block somewhere let's do it after this one so I will add a use effect block and we actually really need this block in a second and we'll make this dependent on is signed in so if we're signed in I will just lock that uh something changed so right now is signed in is false but once we now trigger our flow this should change so let's give it a try I am not signed up so I will now pass in my phone number uh do you still remember the times when you did not know your phone number um okay so I probably got a code now if I correctly uh insert of my phone number I actually don't know I think I used the right one um but I feel like we made a mistake somewhere along the way so let's get back to this and let's see okay on phone we haven't saved but that shouldn't be the pro yeah uh you know this feeling like this could have easily cost us about half an hour of debugging time why why it's not verifying my phone number so on the sign up we commented this out make sure you correctly comment this in otherwise you won't even use clerk in the first place okay let's try again uh I put in my phone number oh this could have taken me like at least 50 minutes of debugging I'm I'm so sure um let's see did we now get this did I actually hit save uh did we do yes we did uh error signing up no um I still didn't get the code sign up create and we were pushed to the next page so this was definitely called uh which part is incorrect I mean we should get an error signing up if something goes wrong so we didn't really catch that one which means um sign up should have sent out that code I think I also used the right number um let oh let me let me debug this quick apparently we forgot a very important line which is sign up prepare phone number verification I forgot that after create we have to call this on our sign up page I think on I lock in everything's fine but now it should finally work so let's do it one last time and I'm really optimistic that at this point I should get an uh message so let's wait a second and then if I did no mistake here we go this is my code so I will put in the right code 664 675 but sometimes make a I sometimes try to remember the here we go we are signed in so this is the lock we have at our layout function at the top so is signed in changed from the clerk authentication and we could now use this point to bring the user to our inside Area that's actually on purpose we haven't done any kind of routing on the side on the on the phone verification screen we will do all of this in our is signed in uh use effect blog right here so if you are able to retrieve a code and it and then see the lock that you're signed in and also check out your color dashboard uh for users yes I do have a total of one users at this point then you're ready for the next step which is to build the inside Tap bar area and protected with authentication using Expo router okay so let's quickly bring up a little Tap bar for our inside area for this we're going to use groups in our layout so I will start by adding an authenticated group and we do a group by not adding a file like I did uh but by using a new folder and calling it for example authenticated the name doesn't really matter uh what matters is that we're using it as a group if you use the brackets it's just like group grouping together things that have their own layout so I will also do another subfolder called TS now so let's do TS and within the TS I will finally have a new file that is an underscore dolayout uh layout. TSX R native functional export you can call this layout or page doesn't really matter too much and on that page I want to now use TS uh we can import the tabs from Expo router and let's add just two tabs or let's add a few so there's the index. TSX actually I will not use an index let's call this one home. TSX uh this is one page and then I will copy this a few times so we will also have like an invest page uh we're going to have have uh what is it else lifestyle page then we have a transfers page and we probably at some point also have a crypto page crypto page okay so with all of these in place we can remove the text here and if we just do it we would be able to get to the inside Area now we are also talking about making sure that these pages are authenticated or protected so now now we come back to our topmost layout file in here we already get the state of our signed in and we've seen the locks here if we check it out I got a lot of use signed in actually in the beginning it's undefined so that is cool that means um we have actually two values we also have is loaded so if is loaded um is not set so if either the loaded from Expo for the fonts is not yet ready or our exp our clerk SDK is not yet ready I want to return just a text loading if you don't return anything at this point it usually gives you an error and you need to uh have some sort of index file at the top so I think this should actually prevent this you can also have like a loading spinner it doesn't matter too much now what I also want is to get the segments so use segments from Expo router this will help us to understand where exactly in our app we are currently so let's start if we are not loaded by the away here then I will just return in my use effect in the case that we are in an O group so in or group is true if segments at the index zero is equal to what we just added our folder called authenticated segments um where's my segments didn't I segments okay this is what I want now we can check if the user is signed in and we're still not in the off Group which basically means we're on the login screen then I want to bring the user to the authenticated uh TS folder do I have to supply something yeah of course I do so let's do like home yep that should fix it in the other case else if we are not signed in I don't really care where the user is but I want to bring the router using router do replace back to my um not login actually we can bring yeah we're going to bring the user back to slash and then we have is signed in now if I hit save this should immediately work because uh in off group will be fault we're still on the login screen as you can see so here they like our first screen and is signed in will be true at some point so is signed in true and we are still here so boom we are brought back to authenticated tabs home and voila there we go now a few things are off here um we don't really have any icons and uh our page looks kind of messy so let's quickly fix this in our layout we can actually do this if we I will just copy this one St screen here and I will tell that the authenticated group and then the temps group uh does not have a header so header shown fults that's usually a problem you're going to encounter with different navigations uh if you have TS inside Stacks so now this should be fixed if I go around these I can already see the different tabs cool on top of that we can quickly style this T Bar a bit more um so what do we where are we going to start uh maybe just going to add a few a couple of uh buttons so we can do this just like we did before four different screens so let's say for the home screen I want to Define some options um oh whatever this is now let's not yet implemented and then you can close it and let's see I want to supply the title here which should be home and I want to have a different Tap bar icon um at this point I do have size and color available and I can use these to create an ionicons actually I want to use Font awesome this time so let's use Font awesome name registered oh actually I do have code completion here and then we have an icon like this which is Sim pretty similar to um the the color of uh uh no the icon of the revolute app we can also do some general settings up here with screen options for example I want to say that every T Bar active tint color should be colors. primary okay so now we have like this purple kind of thing and with that in place we can now simply set up the other screens so for invest I use a line chart for transfers I use exchange um for lifestyle I will use the font awesome th which is like a group and then we had as well for crypto I we just call this one crypto and use Bitcoin and so we do have a tab bar with five different icons we have our own tint color and especially this is now protected with our um hook up here with a use effect so whenever the authentication would now change to not signed in this would immediately strike and immediately bring back the user to our login page with that being said I just want to mention that real security should always happen at your back end so never trust the front end completely users might still be able to fake something to get into an inside area so always make sure your API is protected but we now have everything in place from the lockin sign up to the T Bar setup and we can work on the actual inside functionality of our finte clone and it's going to be amazing we have now arrived in the home area and if we check out the GitHub repository this is basically what we want to focus on right now actually we won't talk about that head out area we're going to do that a bit later for now the only thing that's interesting is the stuff in the middle so we want to create this little overview of the account we want to have some reusable components here for these rounded buttons and then we also going to use something called a native drop-down menu so you're going to see this menu here looks exactly like a native iOS menu and I was actually inspired by this um by a treat from Evan bacon a while ago where he used these kind of menus uh in an example on Twitter and I actually found how he did it because there is something called zego from of course Fernando Rojo who has been guest on the rocket ship podcast check it out that episode was really really great and zigo is basically beautiful native menus for react native and web inspired by radex UI so let's start our adventure into the home screen by uh setting this up already so we're going to install these uh we're using Expo SDK 50 so this is not an issue for us and because this is as far as I know uh this should just be an npm install uh so we got react native iOS context menu and react native iOS I don't think we need to do a new pre-build don't well we're going to try I'm not exctly sure if that is really the case but we're going to try without it for now okay let's put this down let's see here's the app still up and running uh we can close the layout we can close the tis we can close all the other tips for now as well as we want to focus entirely on our home screen so for fake purpose I will just use a balance right now um I can actually just set a fixed value of like uh whatever uh something like some amount and then we're going to keep it like home so as I said we're going to work on that specific custom header a bit later for now we're going to keep it like it is but I will definitely wrap my view in a scroll view already uh as the style here goes I will set the back ground color to my default background colors so here we go and then we're going to put in a view here uh with some stuff we of course also need our stylesheet so Rec native stylesheet goes here and then this one goes up here the first thing we need is the account styling so I will call this styles. account and what we're going to do for the account styling is is basically making sure that it's just centered and has a lot of margin at the top uh and align the items in the center and now we're going to just put in actually we're going to probably put in two things um because we have the balance so what do we have before here we go uh we have the balance and we have the currency symbol so we're going to do this in another row um I will call this styles. row very creative from me uh and row probably copil can figure out what this will be about okay so we got text the one text will be the balance and we're going to make this more dynamic in the end and the other text will be the currency I will just set this to uh Euro for now okay so here we go this is my balance up here of course that's not correct so let's use more stock spelling style styles. balance and also uh Styles dot currency and then we can beautifully make all of this balance and currency is this exactly as I want not completely so for the row I want to make sure yes there we got this uh actually I want the items to be at Flex end so you see that moves this to the Baseline here here on The View uh but I still want to justify the content in the center why are you not closing the brackets here co-pilot that's no sense okay uh we also need a little Gap in here maybe something like 20 uh that's too much maybe 10 yeah that's good so we really want to make our account balance stand out in a fintech clone for the currency we really want to use uh let's use just for a 20 and probably uh 40 maybe 50 I don't know you can play around with these values and font weight um that was really bold before but but actually not too bad actually that was pretty good okay uh for the currency we also want to use some font weight so let's use Font weight 500 this time that will make it a bit bigger uh we don't really need margin left because we already have the petting so I think this should be it then remember we have this little action row below okay this action row consists of uh rounded buttons uh we're going to make some custom components but for now the action row will have a flex direction of row we're going to have some space between the elements and we're going to also add some petting here uh we're going to put this right below our account so let's call this one styles. action row um no yeah okay there's no closing element if I would use a simple button it would now look like this uh where did I put in a string oh yeah thank you uh it will look like this but it will space this stuff evenly once we um once we have multiple so if I have four of these you can imagine then we have like four that should be fine now actually let's develop our component uh right away I will do a new file at components uh components SLR uh round button. TSX you can actually put both of these um like you can have the folder name included once you type this uh do I want to call this round I will call it round button so that makes it a bit smaller okay and then we have the react native functional export for round button that button hasn't icon and it has a text and it should probably have an unpress Handler um let's directly use this in my home screen so then we're going to directly see how it works we can import this here and we should Define a little type let's define a type round round button props this will have a text which is a string it will have um an additional icon and this is interesting usually yeah yeah you can pass the icon as the name but then you're going to get a lot of typescript issues so what you can do in our case is use type of ionicons uh. default props and then it will work a lot better and then you're going to have an onpress Handler so on press I want to do something that makes it a lot easier because now on our homepage we can already say okay uh the first round button should have the icon um let's call it add and it should also have the text um the text add money and then we have also the on press Handler here so on press I want to uh call something on add money so let's add that function real quickly up here cons on add money we're going to do something um equals okay now the only thing uh he's complaining about is our icon type icon is not aign to um I did not I haven't used um I think I should be fine actually I don't know why the round button is complaining over my uh icon type of ionicon default props um type of I I honestly don't see a problem with that it should be just fine I feel like today some something's not working with me it's more working against me uh property icon does not exist on type intrinsic attributes I would actually say that icon does exist uh just as text and uh round button are we using the wrong round button or what's going on oh probably do we have to supply it in here to make sure it works I can text on press from round button props would make would this make you happy oh yeah that will make you happy of course so let's exchange all four of them and then we can easily develop our uh quick round button so the round button it's no magic but I just wanted to show you how you can um put uh or how you can structure your apps in a bit better way you don't want to put everything into these Pages you want to do as many components as possible and when it makes sense to create a component that you can then reuse all right touchable opacity uh style we don't have styling yet so let's add stylesheet in here as well stylesheet goes up here and then for the Styles I want to use first of all a container styling that should just be uh for aligning the items in the center and then adding a little gap between them all right and also this one has the unpress Handler so unpress I will just call the onpress that was passed from the parent to our child component inside of the touchable opacity we have a view which first hold the ionicons using the name so if we wouldn't have used type of ionicons if this was a string this is the point where it would complain okay type string is not assign all two types whatever and by doing it like this we can solve that I don't want to use black color I want to use colors dot did I add already colors colors. dark in here so then we have uh the plus signs and after that we're going to add some text with the actual text okay so this is a pretty good start uh let's add some styling for a circle here because that is what our button will be uh we'll actually use a WID and a he of 60 so we can use 30 I want to use a light gray background and I want to Center the items so give this to your view and we have the rounded button and then we just add Style styles. label down here at the label here and then with a font size of about 16 yes and a font weight 500 and the dark color we should have nice little labels so the only thing missing is how or what we pass to these labels so we can now simply exchange this uh to refresh and I don't know I called this I think exch change and then I had the list icon and details uh and details and actually these don't really need anything um they I think we can make the onpress Handler optional okay then it should work okay and for the final one it gets interesting because we started this video by saying we want to have native menu and this is the point where I want to use a native menu so that last one will actually be a dropdown and I want to create this as its separate component because that works a lot better so I will call this dropd down. TSX R native functional export um and the dropdown will then have a round button as it's trigger okay sounds more challenging than it actually is so let's just get started by putting in the drop down here instead dropdown and let's see um let's hit save oh no can we do a Reload I was already signed in yeah here we go okay here's the drop down so now we need to structure the drop down and this works actually pretty easy um we can now import everything from zego dropdown menu uh uh why are you complaining I think we we did install it didn't we um we did add uh no actually we didn't install zego I think we we missed that one install Z I just installed the iOS contacts menu and utilities uh but we actually need to install zego as well so if you check out the documentation um there are many ways to to use this but basically we have a drop down menu route we have a trigger and then we have the menu uh then we can style it however we want so this is the general setup and we can now use this in our view so let's say this down uh up here is the drop- down menu. root so that is surrounding our app then we have the drop-down menu. trigger and within the drop- down menu trigger you want to have some sort of button in our case guess what it's the round button uh I want to use the ellipses horizontal so that's give like three uh dots and um yes that was what I expected I was really thinking that we could do it without but uh we're going to have to do npx Expo run iOS again which installs the native module so zigo was definitely using something otherwise it wouldn't be called native menus all right um so let's uh let this continue in the background in our case we can already continue because we have the trigger that will be a button that looks just like the others but it will trigger the dropdown and then we can Define our drop-down menu. content and will also directly close it this is now missing children so what a drop- down menu needs is of course a do item um and a key so we'll just call this I don't know statement and within that item we can then have a drop- down menu so if these words are getting too long for you uh you can pick something else up here so just call it DM or whatever you prefer uh but we can now have something like an item title we can have an item image uh a subtitle so what I wanted to do was item title and call this one statement okay and I probably also want to have drop-down menu. item icon um and this one's getting interesting okay let's just press enter okay so this already opens statement and if you want to use the native icons in there you can actually use let's see if this is explained somewhere um you can use the iOS uh SF symbols did I uh where is it described should be described at least somewhere with soito nextjs this is the usage um maybe in the styling guide no not really um at some point that was definitely described uh let's see item icon should be okay on iOS it renders an SF symbol if you provide one and SF symbol is one of these so actually download these and search for a few icons and then you can get the name of these icons so in my case what I want for example for this one is uh we can supply this in here Now for iOS I want to use the icon with the name oh my list. bullet. rectangle. fill and you see it immediately turns up and then you can also change the point size here uh I will change this to 24 and then you see we have a bit bigger icon and this is how we can create this now we can of course have an on press Handler and then it would return something but uh in my case it was more or in this case it was more about showing you how you can do these native menus so you can now do whatever you want I'm going to call this one converter and then we'll say converter and then you going to have a second one in here and you can just continue whatever you want in here so let's add just two more and then you have this beautiful native drop down um you can specify more settings as you want so simply check out the documentation of z uh it is a pretty cool tool by Fernando Rojo uh you can as far as I know on the root component Define the sides the offset the Collision padding so really as always when Fernando is doing a library he has done great documentation and this is really really cool okay at this point we see our account balance we have a scroll view we have these cool rounded buttons that we can use so let's see how we can actually use them in a pretty realistic way with actual State Management Library if you have an account balance in your fintech clone you have usually retrieved it from the server or in some cases you have a local state and for State Management there are various approaches out there however zustand or as we Germans call it tand is one of the best ways to manage your state in react and react native application one the easiest ways you can simply run npm install zustan I will just call it Zeus going to call it zustan Zan I don't know I feel like if I say tand people from the United States or the rest of world don't know what I'm talking about if I say zustand people from Germany going to say why is a German saying zustand instead of tand I don't know I don't really care about anyway you know what I'm talking about and this a library in itself is great we can use it as a state we can keep track of stuff but if you also want a persist State there's nothing better than adding a middleware and the mm KV package from mro saavy is probably the best and fastest key value storage for react native and we can use mm KV in combination with zusan which is like it is like the perfect match really these two together so I want to show you how we can use these together in an application again uh make sure you install all of the packages and then we're going to have to do a new uh run with our new pre-build by calling npx Expo run in the meantime while our app is compiling new we can heat over to the setup of those two packages so let's do a new folder I will call this one store and we're going to add two files so I want to add the mm KV storage. uh TS and I want to add the Balance store store. TS in the mm KV storage um is there a description yeah we can actually see it as a middleware wrapper so let's just copy over this exact snippet here from react native mm KV this one creates a new storage using mm KV uh which saves our key and value pairs using I think C or C++ I don't know in in a really fast way um definitely on our device instead of using as swing storage you can give this an ID if you want to so I will call this balance storage then it creates this Con I will actually preface this with export so we can actually use it somewhere else and it's just an implementation just like we did with our clerk token cache so probably we could also use mm KV now for our Clark token cach but it's using secure store because it's a token and a bit more secure this one is an adapter now for um mm KV storage engine and with this file we can now heat over to our Balance store and Define our actual zo store did I Define this in the completely wrong file yes of course I did so back to the Balance store um I want to start by defining what a transaction actually is so I will say interface transaction and then now this is is a bit Hipp uh like a long shot in a real fintech application you probably would retrieve all of this from a server however I felt like it could be a cool uh idea so we have the ID maybe we have a title that is a string we have the amount and a date and then we want to Define our interface for a balance State okay this is not the first thing you're going to see in the zoan documentation because they make it really easy like just bring up that store use create from zustan and then you're all good but we want to use it in the typescript way and with typescript it looks a bit different in the way of using typescript we would say use Balance store and then we will call create from H from Zen why you not importing create and let's import it ourselves okay we got create here then we would pet uh put in our balance State and we would use brackets because that makes typescript happy uh let's leave it like this because it's compiling um but what the state holds is an array of transactions so this is an array of transactions then we would have something like running a transaction on our state so we would pass in a transaction and it would uh run a function then we could calculate the whole balance um let's calculate this and return a number or let's for debugging purposes also add a function to clear transactions which would be another function here now let's try and get our brackets right at this point so I will open up new brackets and I will now call persist I will call persist around our application so this comes uh I think persist comes from another middleware package of Zo and to persist we got two arguments so the first argument is um our state and how it changes there are two is are there just set and get that we can access there's maybe more to it but set and get is what we can access within our state and beware really the brackets might get horrible at this point anyway I will leave it like this because we have a second argument as well and that second argument is the uh option or are the options so this one is the name for our storage I will call this just balance and now it gets interesting because we can Define the storage mechanism and this is where you plug in your um specific storage engine like we used M MKV I hope this makes sense I'm trying to explain it as good as possible you could use Zoo stand completely without this then if you reload your application the state is exactly the initial State however by persisting the state on disk we can keep something uh saved this is probably not helpful for transactions and fintech but it's a good way of learning uh and using this later in other applications now for storage you could just use like a default Json storage but in fact what we want to do is we want to pass in our Zoo storage from mm KV and by doing this we have successfully plucked in our middleware using the fastest possible storage engine that was a long shot um we haven't actually implemented the state changes so let's do this now in persist I will start by transactions with an empty array this is our default State then we do have run transaction so run transaction run transaction gets a transaction and then does something okay uh it's probably mad if I do it like this so I'll just say void for now uh then we do have balance as a function that returns a number let's say it just returns null and then we do have clear transactions which is also sort of a function expression expect okay we're going to do this in the case of clear transactions it's pretty easy so what we want to do is we want to use the set function from up here set and get can be used in all the places of our state so I can now simply call set and set my state back to an object that has only an empty array of transactions this is not overwriting the rest it's only overwriting transactions for run transaction I think it's pretty clear what we want to do uh so I want to set my state I want to get all the current transactions um we could use get transactions or we could also use my state um I I don't know if there's a big difference so what we could this should probably work or you could use it like this as a function uh so we got State and we should have brackets around this and then we would not use get but we would use state so the current value of our state and then appending the neutr transaction not a big difference um but anyway this is the full zo State management for our app now there are only two things so we can only add transactions and then uh clear the whole storage that should already clarify how this works in a pretty decent way so let's go to the homepage and on our homepage we can now import all the relevant things from our zo storage we can actually import the balance run transaction uh the transactions and clear transactions all of this from use Balance store okay great now balance is not just a value but actually a function and if we call this exactly we should see a zero now on add money I want to run a kind of random transaction let's see I will call run transaction the ID will be random the title will be add money date is date and for the amount I will use a random value either a positive or A negative value so we hooked this up to our first button so therefore when I click this button I hope to change my state which I'm not doing yet uh but that's just a minor problem so let's see uh adding money let's see okay we are actually adding money um so that means means either the money is not added to our transactions or we did something wrong in a different place debugging is always fun okay in the use Balance store probably in your case it already works by the way then I highly oh yeah I mean let's always see the positive like don't complain about you messing up be happy that you find the bug or found the bug really fast in our case I'm always returning balance zero which doesn't really make a lot of sense so I will use the get function again and I will reduce everything here let's call get transactions. reduce uh uh current Value Plus T do amount and we have the starting amount zero yeah that's actually it yep it seems to work nice it it currently looks very random that's because it's either either um we're either adding something or subtracting something to our account let's make this a bit more obvious by probably having a list of transactions so let's do a view uh we do want to call this one [Music] style um styles dot oh we can actually use the default Styles once again and then the section header yep and then transactions then we should have a nice little uh text strings where did I add a text string right now where I shouldn't add it oh my I completely it should just be a text element it's such a okay so here we go again we got the transactions and now we can do the actual transactions view so style styles. transactions and then and we can put in if transactions P length is equal to zero in that case I want to have some little fallback so let's just do a uh no transactions yet I also don't really have the styling yet for transactions so let's put this down here for transactions uh what we need is some margin um margin let's say horizontal of 20 let's just put it like this I want to see if this works uh we close this what are you mad about now there's really no problem uh we could probably say just and end okay but we do actually have transactions that's the problem so let's hook up our second button let's just use the exchange button and on press this button will call all clear transactions from our state so if I do it it hooks this up and we see no transactions yet we probably can add a bit of styling here let's say pedding 14 and color colors. gray okay so no transactions yet actually that looks horrible uh with a padding but maybe we're going to give some uh additional styling to my transactions let's see two transactions we should probably say pedding 14 as well usually and a background color of uh White so we're going to give this like a rounded border border radius of 16 and a gap between elements of 20 okay so now it looks good if I add something this disappears because now we do have transactions and that means I can map them um trans actions. map and for every transaction we can now create a little view uh so for every transaction I want to do a view where the key is the transaction ID I want to close this already and then we can put in let's say a circle again do I already have the circle styling somewhere um style styles. Circle so that would be pretty cool because then I can put in ionicon uh which is either plus or minus so we can have ionicons and the name would be something yeah we don't have the circle styling yet we do used it in the round button I think can we just yeah um that looks somewhat good I think um only thing is yeah iOS cach doesn't exist let's say this is ADD okay and I want to make this uh use the dark color yes and I want to check if the amount is greater or smaller so let's check transaction. amount is greater than zero if that's the case I want to use add and otherwise I want to use is it remove I think so now I can have multiple and we see already for the transactions it would display this little uh item also we probably need to align this but let's continue because I want to show a bit more information in that view let's do a text with transaction dot title okay okay yeah that looks horrible so that indicates that we need some styling up here uh we need styling for Flex d Direction Flags Direction row okay this is oh I put it in the wrong place got to be careful here okay yeah that's better uh and then align the items in the center yep that's better and some Gap as well good yep yep yep we're getting there we're getting there slowly but we're getting there nonetheless uh next to the transaction title I also would like to use the transaction date I will just call two local date string making it easy we're going to probably use a format Library later for now I really just want to make this in an easy way again using my own little colors here and a smaller font size of 12 so get this like a little bit below and up here we're going to use a bigger font weight so font weight of like 400 uh that didn't really turn out did 400 change anything in the first place yeah it kind of changes yeah 400 is okay um and I want to give this one Flex one so it spends the rest um of this View and then afterwards we can put in the text for the trans action. amount I we'll just pass in Euro okay voila this is our transaction list we could probably limit this uh you can add a little slice here if you want to limit this but now you see that whenever we add something it would show our transactions we can actually do transactions dot can we do like inverse or what is reverse um I think we can do it like this right so now the latest transaction should be at the top uh transaction. date but too long string um is it because of reverse that shouldn't be the case uh two local uh oh yeah let's use local string instead that should be better um yes then it works doesn't look really great but yeah that's okay for now but I want to reverse the transactions none less so reverse uh reverse please okay and I update this I should have the latest 5 824 not really I I do yeah let's let's clear this yeah it looks like the latest is always on top but it's also not really sorting this in the right way um I don't know I I didn't came here if we sorting that list oh yeah I put it in the wrong place I completely messed up as Simon usually does so this is where we want to put reverse uh is it now better or worse I honestly don't know I think it reverses them all the [Laughter] time oh my okay anyway we have a list we have these icons um we have especially Ze stand added to our application so I hope this gave you a glimpse into how you can manage your state with one of the best uh State libraries out there and also how you can plug in mm KV to make the storage even more efficient in your react native applications so it was really not about building the best list component here or whatever uh it was more about managing state with Zen and mm KV and we have achieved this so now let's move on to the next part fintech apps are usually very customizable and so is as well the revolute app and notice this down here there is actually a section of widgets where a user can add new widgets or drag and drop existing widgets into different places like to make your home screen exactly yours and this is what I wanted to replicate with you as well I like to have some challenges and actually as always there is a package from the community so we already used a bunch of packages like zigo zustand and all the other packages the number input and of course the Great Master of all time William kandyan has a video that came pretty close to what I wanted to achieve so he built this Dr and drop list of like the Google Chrome tabs uh where he wanted to do something like this and I really didn't want to reinvent the wheel so again kudos for this section go completely to Willam we only do some slight iterations on what he has done but the source code is right here on G GitHub and we're going to use a bit of this so um let's just try and bring in most of the stuff so I will bring in the config can I just like copy this uh yeah this is the copy symbol okay we're going to do this in a separate folder let's call this folder under components uh new folder let's call this sortable list okay and then we're going to start we're going to add a config TSX just like William we're going to hit save we do have reanimated anyway we installed this in the beginning so not a problem then we do have an item okay let's do this again this is what we probably want to change or maybe the tile I don't know I think the item is fine and you see there's something outdated so not as easy as you might expect we're going to copy the tile tile. TX okay tile will look a bit different in our case and then we have the index no we don't really need that one um yeah this is what it's called Chrome here I will call this my widget list widget list. TSX okay put all of this inside and then we need one more thing which is the sortable list okay so we copy that as well new file sortable list. TSX so in the normal case I would now be completely I I would be very mad because nothing works and everything turns red and I'm like well do I really have to use it but let's say okay so getting started the configuration looks okay um mostly we're going to probably tweak a bit here I will up the margin a bit uh column K two I think we can keep the rest just as it is for now then let's check my widget list so the widget list is using stuff that we do have um and it's passing everything into these tiles so I will make my tile definitely look different because I don't really want to use uh the web view so maybe we're going to start here with a tile of changing things so let's get rid of the react native web View and instead up here I want to add a different sort of container styling also in the view we're going to change a few things so my container will look more like this uh that means I do have a lot of custom styling here because I want to have like Shadow opacity and shadow colors I want to have round borders and I want to have a specific hate for these boxes for the tile props we only need an ID I don't need a URI and we're going to keep the onong press and then we also just destructure this into using the ID and we can actually also use something uh in here which is pretty cool like we can use our transactions now from our use use Balance store so we can also include the transactions here and there if we want to um now what I want is actually different um or different widgets and we create them or I would create them now pretty easy like saying if the ID is equal to spend we want to have or we will return our spend widget if the IDE is something else we're going to return that so for this one uh as an example we could return a text element okay of course the import is missing uhuh text element uh and my colors from constant colors um so spend this month and then some random value and we can also now use like the transactions or what not in here I would just do this um in a pretty easy way so let's add four of these in total so this would be the spend widget if the ID is equal to cashback uh I would have something like this where it says like 5% cash back with some styling so for this part probably check out GitHub again uh where we have all this code we're going to go a bit quicker through this because this is a lot of boiler plate and we're actually only interested in the actual widget list itself so this is just making sure that we have some some dummy stuff in the recent category we would have my recent transactions which is then using my transactions lengths from our store which is pretty neat and finally we can have something like if the ID is equal two cards uh then I would return a card with an ionicon and I feel like I return it somewhere where I shouldn't return it yeah I should place it here so by doing this we have four different tiles also we now fixed the tile so that's good news uh there are just two more things that we now need to fix which is the widget list and the item so the item uh as you can see holds all the reanimated or most of the reanimated logic of a single item now in line 97 it shows a problem so in line 97 we do have the scroll view um um so why is it mad let's check okay up here we also have scroll y we can improve this a tiny bit so we can use shared value directly from react native reanimated um and scroll view uh the syntax is a bit different now this should be an animated ref uh and then an animated scroll View and same up here this should be a shared value of positions and voila this actually already solves the problem of this file so you don't really need to care a whole lot about what's going on in this view Beyond this um this should all be fine and is usually just uh what's going on with one of the widget items so now the last missing piece is is it the widget list already that's pretty dope isn't it like wow uh I wasn't sure if that's fast so instead of having an array of browser window tiles I want to have an array of these IDs in the widgets um I will also rename this to widget list now and I will move this for the moment uh for the moment let's just I don't know render a view can just oh my just do whatever you want um because I want to use the widget list and Export widget list because then we can finally place this in our home screen and continue the debugging so on the home screen we can now use one of our section headers so we'll call this widgets down here and then simply add the widget list okay that's good uh we've got a lot of views uh a lot of black in here so a lot of uh a lot to do for us uh let's get back to the widget list and instead of having the view we now actually want to use the tile but for the tile we don't have a Yuri anymore uh the ID can still exists like this I guess um and the key um for the ID I actually only want to use the ID on long press true yeah this should actually look good um uh what's the matter here let's do a little reload ENC counted two children with the same key spend that shouldn't happen usually um why is that the case well we have my um I don't really need the safe area view I want to have the the sortable list that's cool uh but below I have title id- index and for the ID I have only the title ID that is fine all of that is fine however I want to use a view here and I don't really need Flex one and whatever uh so petting horizontal margin yeah we can keep that uh view doesn't exist that's always great uh let's see if we can get closer okay okay this is progress this is progress we see the list uh we have some petting horizontal which is margin uh margin should be about 20 that's fine fine but this list is way too big uh and I wonder why that's the case um why is this the case um let's give it some margin bottom as well I think this is also blocking this uh on the home screen the home screen might also have a saying in this or might be now the home screen I think the home screen should be fine at this point with our widget list uh home screen should be fine so why do we have this huge gap in there okay probably let's check out the sortable list uh in the sortable list we have the animated scroll view on scroll we're going to do something uh event scroll bounces Falls and this returns just a list of items overall I think this shouldn't be the problem so in this case um are we doing making any mistake in my config uh we have a call I mean we got the widgets by the way right so this is pretty cool I only don't understand encounter two children with the same key spin this actually can't be how is that possible well well well let me figure this out once again the solution could have been really easy so in Williams example he's duplicating the tiles and I completely overlooked this so I just have to change this back to using only our tiles and actually uh we can just pass in tiles then in that case so let's remove this and reload our app and we have our four tiles we have spent this month which is actually a fixed value we have no recent transactions so let me put this here so I'm definitely not covering this if I do add a transaction we actually see our last transaction here by the way again pretty cool with statement management and then you see I can do exactly what I want and this feels so so good so we're not handling like how and where the user dropped something and we do don't really have like different sizes but you see that it's possible so you could have like an add button where you can add a new widget some predefined widgets and with zoan and mm KV you could then actually use it or a swing storage store the position of each of these widgets individually so this is how we can use drag and drop widgets uh and again under the hood what will him is doing is no magic you can check out the different uh lists how the lists rearrange the items and how the items arrange themselves once you start dragging them like they pop out a bit you notice this little animation here all of this can be find under item and all of this is once again using uh react native reanimated and also the react native gesture handlers so the core pieces uh of this uh cool UI behavior all right uh we got our state we got our drag and drop in place and I think we're actually pretty done for now with the homepage the only thing left missing is uh implementing the custom header and also working a bit on the Tap bar so before we get into the next bigger functionality let's tweak this to our needs all right so now we want to work on our header area up here and we want to work on the Tap bar as well so probably the best thing would be if I place this here for this part of the video so we can swap this around and you can still see uh everything that's relevant okay cool what we want to do is we want to uh add a custom header component and we want to make this here slightly blurry with a blurry background so if that blue thing goes beyond it we should actually notice this and the way to make this work is to add a new package which is the Expo blur package so go ahead with npx Expo install Expo blur and you can also check this out right here this is the blur view package on Android this is still an experimental feature um we're going to install it and then we can use that blur view probably want to start with the tapar area first because that setup is actually a bit easier so again my npm commands simply don't finish I have no idea why uh but anyway let's see how we can approach this um we are inside the layout of our T bar right here and at the top we already have our screen options which are the general options for the Tap bar uh we're currently only setting the Tap bar active tint color now we do want to set the Tap bar background and we don't want to set the T our background to a specific color like co-pilot recommends no no a lot more we're going to set it to our own component and this component is now the blur view okay can we import this somehow automatically uh that would be really cool Visual Studio blur view how do you yeah that is definitely the wrong path thank you for nothing so let's copy that over let's do the manual work I don't know why we have to do manual work here when we have like Ai and stuff going on okay so for the blur view we can uh specify a few things I actually don't know if I don't specify anything uh let's see what happens if I just say okay this is my background uh we kind of don't really notice anything so on top of the blur view I do think we have to do some customization uh one thing that I think is required is to also set the Tap bar style in this case and we want to set it to uh transparent background color we want to position it absolute uh we really only need bottom left and right we don't really need this part so let's hit save okay what happens is that our T Bar is still in place but you see if I scroll something behind it it's now transparent so that is a good starting point because now we can tweak the blur view to our needs so we can add a style in here I will first of all stay Flex one so it spans across all the available space and then I will set the background color let's say I will set it to Red okay this won't be really helpful because we should really have something with transparency so instead of red I use something like rgba uh and then 0.1 well that's not really working great um I think we should also set now the intensity of the blur so the intensity goes from zero to 100 and notice this we are getting this nice blurry background we can also tweak this a bit more so then it looks a bit better I think yeah that feels really satisfying so um should we use more no then it gets just darker no I don't really like this uh we want to have this as close as possible to the background actually I think what poile recommended here in terms of the elevation and the Border top I kind of like that recommendation because that removes this little border here it just really gives this blurry glassy effect for a T Bar you might like it you might not like it I don't know um but this is the way how we can make our T Bar have a nice blurry background okay moving on now to the header area and I think we can safely switch this around again in that case so I would really love to not set a break point here we don't really want that I want to have the thing right here key doy all right um to get started with a custom header we should just set up a new component let's do this and let's call this uh custom header. TSX okay this is my custom header now we want to include this for example on on the Home tab so we go into our tab layout and we search the homepage and the home definition and for home we will now set my header to the custom component so this is now my custom header um if we do this it immediately replaces this and you see the custom header appears up here I think do we I think we should also say header transparent true uh maybe we're going to do this later for now uh I hope I can remember come back to this uh for now we're going to leave it like it is so let's implement the custom header in our application the custom header should look somewhat like this so we're going to have an icon or whatever this view is to the left hand side then we have a search bar text input and then we have two more icons okay nothing crazy but usually this sort of setup is quite hard to achieve the default react navigation header so you do have header left and header right and header title and probably we could do this uh but it becomes a bit easier if we do it like this all right I will actually also surround this with a blur views we can use in the header the same effect like we had on uh our T Bar and I will add the style sheet in here because we definitely need a few styles for this in this case I will set the intensity to 80 and I just noticed that I did not tell you about one additional property that you can use for the blur view so you can actually set the tint of the blur view as well uh I hope if I put this up here my hand is not covering this so you can set the tint to different things um you do an object you get all these things that you can use play around with these I think I actually used extra light which turned this even lighter um but still gave me a nice effect on the blur so then it looks really almost as if this is the background um so play around and figure out the value that you enjoy the most in the case of the custom header we're going to set this as well so let's set the tint to extra light I would really love to have this as an object I think that's a bit better but well for now it's okay um then we're going to put in a view in here and that view needs some styling as well okay we actually going to make this an array of styles and then remove the text here so the first thing we want to have is a link component um or actually we don't really have the account page at so later that little uh round thing for the account will go to the uh account page overlay but we're not doing this yet so let's just do a touchable opacity for now touchable opacity um needs also some styling we're going to set this up in a second and then we're going to have a text with some styling I don't know why it's now giving me this all the time but anyway this could be like my credentials um they're not displaying anywhere so let's start by setting up the container now we have some general outline um we definitely want to have like the container uh styles. container in here and the container should have a flex Direction row and we want to not justify the content like this we just want to align uh item Center and the content Center as well additionally we're going to have to specify the hate of our view so let's add this in here um or could we just do it I don't know why we we can just do it in the container right why should we do it in any other way that totally doesn't make any sense Simon okay yeah so let's do it in here let's set a specific he I will set this to 60 and if we do this we see it changes a bit here in the view and I will set the background color so we actually see what's going on okay this is currently our header size that's okay uh I want to have a gap between the items as well so let's add a gap of 10 um and let's put in some items now okay uh so the first one should have the touchable opacity we're going to actually use this as round button okay so we don't have to do it in line my round button should have a WID of about 40 I would say uh and a hate to 40 as well then we need a border radius of 20 so where is it uh did we apply this correct correctly I think we did but the touchable opacity is not yet there yeah we should probably also set a background color here okay let's import our colors and use gray so then where is it where are you my friend you must be somewhere I just can't see you uh we have the container uh with okay great the container does not have any styling um let's see if I add padding top of 20 okay notice something um we do have actually my my thing is coming up here and I can now have like additional text elements here and here and then uh stuff would be placed hopefully correctly if I put this in the container um so we have the one element the other one in the middle should probably it's going to be a text input and then it will span most of the size but we have a problem with hat so I added a petting of I don't know 20 so I could do this manually at a petting of 40 but that doesn't really work out for us um we don't really want to have this as a fixed value so what we can do instead is you can sometimes use a safe area view which respects this safe area here on iOS at the top or at the bottom but uh usually the safe area view brings some other problems so the recommended way is actually to extract or destructure this using the use safe area inserts Hook from reactnative safe area context and with that we can set our Penning top exactly to that value and see it's perfectly it's just perfect this is exactly what you want because then if you use 40 as a constant you're going to have problems on Android because there's no safe area and things will go further down okay additionally don't worry about this being red I just made this to show case what we're doing uh in general this has a transparent background so this is our header component um and yeah this is also the problem of the scrolling that we will later fix with our layout when we make the header transparent good that's a good start um we can probably tweak a bit The Styling here for our text let's say this one should have a color of white then we're going to use Font weight of 500 and a font size of 16 oops sorry about that okay yeah that looks a lot better um and then we have our other views so I made these just like fake views now we're going to do the actual views so this one is going to be uh the search section and I think I actually found this uh somewhere on St overflow so if you want to do a search uh text in input with an icon at the front that's usually a nice snippet on stack Overflow that you can use for that basically I'm now putting in an ionicons uh name search um size 20 probably and colors uh dark yeah that should be fine and then we do have the actual text input which you would use um placeholder search yeah that's fine let's also use use the placeholder text color and set this to our colors dark okay see that's what happened if you do it by default so for the search section we of course want to make sure that it expands to most of the available space that's the first part then we want to have some um how do we do this we should probably set the flex direction to row Flex Direction row okay then we do have two and then you see we should probably um style this in a tiny bit different way so let's add some styles for both the search icon and the text input I will actually not use it like this uh I will use styles. input and for the icon I will use styles. search icon so let's work on these at the same time search icon and then we had the input as well if I spell this correctly that would be really really great okay so the search icon will just get some pading okay so now it sits nicely in the center the search section itself should have a background color because if we do give a background color to this we can make this work and look like this is just one thing although it's actually just a text input here and an icon here uh then we want to make sure that all the items are aligned we're going to actually use a border iOS making this really rounded and then uh align item Center and justify content Center as well um actually do we want to do it like this uh justify align um I think we're going to be fine we're going to be fine in a second so we are in a flex row layout so the rows uh is split evenly between the icon and the search input right now uh we want to shift the icon here so we're going to make sure that the text input is now actually taking up most of the Space by doing Flex one okay see this immediately shifts the stuff to the left again uh then we can add to the input a bit of petting top 10 uh petting right 10 and petting bottom 10 and petting left of zero um additionally we don't really need the background color here so we can can just um like if we do this it won't really change a thing uh so we will only set the color for our text which is then colors dark and that should be it basically I just noticed that we also probably need some uh petting horizontal on the overall container so let's use petting horizontal of 20 to shift these things nice I think this is coming along pretty nicely in my example I just had two additional Circle views so let's see uh we somewhere had a circle styling right uh that's quite a big circle let's probably take this one here and place it down here so okay do we already have a circle oh we do already have a have a circle why do we have a circle in here uh view Styles oh I called the first one uh let's call this Avatar not Circle and the second one is going to be our Circle okay yeah fine um okay let's use this for two additional views style styles. Circle and then where did I just add this why am I in the round button component completely messed this up okay so whatever I just did I just want to undo this okay yeah fine uh I don't know why I put this stuff the the circle stuff I had copied there it needs to go into the custom CER oh my yeah that one's totally on me okay so yeah let's do uh let's search the circle styling again and let's make sure I put it actually into the custom head and not in some other file so the custom header now gets this circle styling and then we have two views okay uh these are probably not the ones I wanted to use so let's change this to uh stats chart color dark and then we use card here yeah that's what I wanted to see okay all right now the last thing here is that um Okay click functionality will be attached at a later point but we want to also use the blur view here we're not really making use of it because we still need to go back to the layout and for our home screen set the header background to transparent and if we do this um it's probably hard to see in the video so for me it's quite easy to see right now uh that it works I also noticed something else so if I do reload notice that my homepage is not not aware that we actually have a custom header and how big that header is so if you're using a custom header component you might want to fix these issues so let's go into our homepage and on the homepage we can now get the hate of the Header by using another hook and we can add this it's called Uh use header hate so let's call this header uh hate and this is equal to use header let's see it's not even giving me the import that's strange that's so strange oh this doesn't know about it that's strange because this one comes from react navigation SL elements like a sub package of the react navigation that is used underhood of Expo router so we're going really a level down here and we're going to now attach this in our scroll view so in my scroll view I have some styling already but this now applies to the actual content inside and therefore we can use the content container style property of the scroll View and set the pading top to header right I'm not really interested in the petting bottom right now if I set this see what happens we get the correct ha using the use header hate hook and that will be used for the content in our scroll View and as a result this is fixed okay so we can now scroll and you probably now see a a few Shadows here going behind this we can make this more obvious if we see the the blue thing going behind it um I think if I just like add a petting of I don't know 600 bottom yeah then I can scroll this up here and then it becomes obvious in this area that here is the blur view on top of that uh blue cashback Circle so we do have a semi-transparent Tap bar and we do have a custom header with blurred background I want to get rid of this big petting bottom this is definitely too much but now we have solved the issue of using a custom header with a custom hate on this page good this basically concludes our homepage the different functionalities we have we have State Management the native pop over the custom header the dragon drop widget and so in the next part we're going to now focus on something completely different that actually really really brand new let's talk about API routes Yes you heard this correctly you can use API routes you can use cloud functions in your react native project since Expo router version 3 and Expo SDK 50 there are a few changes required so we're going to start with this by setting uh the web output to server so this is just a small change we have to do in our app Json uh where's the web output we're going to set this to server and that's all we need for now now how does it work well uh I can tell you a lot about this and show you the code but I think it's actually the best if we just get into this and try it out ourselves uh one additional thing is that we have to set an origin as well well in here for the Expo router this is important once we uh call our API routes so let's do this um we just have to check where are my plugins here is Expo router so we're going to make Expo router an array I really don't like that syntax to be honest but there have to has to be a reason why it looks like this uh and the origin is usually where later your Cloud function is hosted so um the reason is in your app you could make later a request like fetch hell and to make this correctly work the a native and Expo router needs to know the origin of your call so in this case uh this call would basically resolve to htps Evan bacon. devevo so this is becomes important once you host your uh API routes they are not bundled with your react native application this is important to say and it's like a complete mindset shift I mean with nextjs or other full stack Frameworks people are used to having API routes for react native this is somewhat new and feels maybe even strange to you but let me tell you it's going to be amazing um we can start by adding uh a new folder actually you don't have to do a new folder but I just recommend that you do an API folder in here that just makes it a lot clearer what we're uh doing in here um so I want to do let's say I do a new file in here new file info and now it becomes comes important Plus api. Ts file okay this plus API is the important part here now you can export an Asing function and you can call this function in one of the verbs get post update patch whatever then you got access to the request which is an expo request object and thanks for no completion here today so you can import this from export router SL server maybe this changes in the future so watch out uh for this and then we're just going to Expo respawns Json return something okay let's do this let's bring up the app again and then we should be able to retrieve that information somehow so I think in the default case our app is running on uh well let's wait until this is finished um and we can do a few things in the meantime why is this so fast today this is incredible credible um in the meantime let's talk about what we actually want to do so I want to retrieve some crypto prices in our AP uh in our application from the coin market cap API you can sign up here and get an API key that you can test out for free there are a few functionalities included so um go ahead sign up uh log in and grab your API key and by the way we're going to have to put that into our environment so I should have probably done this before uh let's bring up my environment and I will add this under crypto API key notice that I don't use Expo public because this is really not meant for my frontend application this is meant for um well for our API routes and if I don't add Expo public this key won't end up in the final bundle of my app this is really important because usually every key in every environment variable you have will eventually end up in your bundle of your app and it's not secure to have like a secret stripe key in there but in this case the API routs are deployed somewhere else they're bundled differently and therefore the uh stuff you import in there won't show up in your app okay um I'm still looking for yeah it's 8081 so let's try I think I had like Postman extension let's do a new HTP request if I now use uh Local Host 8081 SL API info and make a get request I should be able to get a response um where is it hello from API this is our API response that we're now running on our own because if you run npx Expo run doesn't matter if you run it on iOS and do a pre-build it will spin up a server with your Cloud functions and you can test this locally just like this so that was probably a lot of information up front but that means means we can in a secure way Implement Cloud functions in our react native project that we can then host somewhere and it becomes a lot easier to consume them and just keep the code together okay so you're going to now have to trust me uh somewhat on how the API Works um so you can create or use or make a fetch request now to the coin Market uh application so Pro API coin Market cap. / V2 cryptocurrency info and then you can have an ID an array of IDs you can grab these IDs directly from the search perams of your request so I can make a call and have like the different IDs of coins in there that I want to retrieve additionally this requires our key and so we can also get our API Key by using the crypto API key from my EnV did I just restart this I think so I I hope I hope I did um and finally once we got this we can then uh say cons result equals as always await response to Jason uh and then we can what is this oh I'm oh that was interesting I didn't know that was like an icon indicating my ts was on uh anyway we can now return the Expo responds Json with the result. data for example additionally I want to make another route um let's just copy this and let's call this one listing Plus api. Ts so we actually need two calls because that's just how the API works the first one will help us to retrieve some general information this call here will help us to uh get a list of the currently um top five I think top five or whatever we pass in latest listings so just a tiny bit different this call does not involve the images so I had to make another call to info that also means we first need to do this call and then that that's going to be an interesting story in a second as well okay listing do uh list no let's call this listings I want to call this listings because that's the API uh listings promo coin market cap version one cryptocurrency listings latest start at one limit 2 five or whatever we pass as limit and I will actually convert this to Euro so there's a flag I can pass to that API cool so we got two end points let's see how we can use them uh for this I will go into the crypto page um or actually I want to uh uh uh uh um how can we do this in the best possible way so we can actually test the API rod that's a good point let's make a new request and what we just did uh API we're going to do this to/ listings and if we're lucky we get an internal okay why was this rejected uh data is not zero okay yeah that that's on me let's check this out let's go back to the API route and that's the cool thing like we're in one project so it's not a problem to jump around between the API route and our code and how we call this um in this case uh we got the response we call response Jason we have the crypto we probably not getting that key so that could be a problem uh let's put in a lock here so I don't know uh um if I now do that funny call again where's my Postman I did have like didn't I just have it open okay data is not Jason serializable that usually means I did not get any good data back uh no such F environment. TS my API key seems to be correct however uh something off um yeah sure I don't know if it works for you already um yeah this should probably be rest. data that that's the problem mhmm yeah that was the problem most likely okay can I I should be able to find the postman call here in my T Bar usually I don't know why it just keeps disappearing okay so see we're making a call to our own API and we get back this huge blob of information down here actually this should be for uh five tokens or whatever so I'm not a Bitcoin or web 3 expert uh feel free to patch and change this to whatever you want now what I want to do is I want to make sure that during debugging I'm not using up my whole quota here so I will copy or I would now recommend you copy the result I already did this uh up front so my values might be a bit different and I will paste this down here in my listings plus API as data and now instead of returning it like this I will simply return my IC data here so I'm not constantly making any calls anymore to the API and I will actually do the same now for the second uh API so for the info API I also grabbed some information from the API make that call then copy this over here and instead of making the real call you can comment this out and then use the Json data uh if you have problems signing up for the coin Market market cap API you couldn't get a key um the dummy data here should be included in the GitHub repository as well so check out the API routes and then you should be able to grab these so your API routes can return some data just as an information cool now with that in place let's head over back to my crypto page and on the page I will for now just add a use effect block and by the way we're going to improve this a whole lot in a second um um so making sure this is called once in the beginning um and I will also for debugging change in my top layout that we're brought to the crypto page so that makes it a bit easier uh during debugging because sometimes it reloads and then we're on the wrong page so let's do it in here and now let's try and grab some data so const uh whatever do call we can also just it's a it's a test Fu equals async function and within that we're going to make the call uh this is await fetch our own API um so we're going to make a call to slash uh API SL listings that should be fine and once we got this we can change it to Jason and then I will lock this data out uh yes we're not close we should close close the function and then call Fu so with that in place we start on the crypto page and the page loads and we get the data with this simple call from our own API now why is this cool because we can now keep our key to the crypto API or to any other API that should not be exposed to our app in that cloud function we can host them in a safe way with their own environment and we can have everything in terms of the logic in this one project here we can now also have a nice interface so this is pretty cool um so let's add a new file at interfaces uh / crypto.iq grab this array of data here um and go back to the uh interface we just defined I could now say with command shift p Json 2ts convert from clipboard and then we had this nice little object here I would probably call this currency and I want to export that interface and then we have a quote then we have an interface Euro and we have an interface uh platform actually what is platform I don't know I didn't have this one before but uh it doesn't matter too much uh I could probably just change this to any the platform anyway uh we can now use these in our crypto page uh for the listings so this is the basic uh you can then later Host this you can look this up I do have another video I think also on galaxies in the according course about Expo router full St uh apps so check that out galaxies. d/ uh learn is it slash learn I think it's SL learn and then you're going to find the Expo router full St course here which also talks about hosting this in the end we won't do the hosting today because that's really it's not boring but well we don't really have to do it we work with our local stuff for now just make sure that if you later really deploy your API somewhere especially I think on a device I wonder I wonder if it works if I deploy this to I actually think it works just fine um but if you deploy it later in a real world scenario the API is not bundled with your Expo application so this would fetch from the actual origin that you specify in your app Json like we did in a fake scenario here so you would have to change this to versel netlify whatever where you host your Cloud functions and then the app would know where to find it good so this is step one um now I also want to take this a step further because this is a huge clone you're going to learn a lot of things so what I want to introduce at the same time now is 10 St query this is a state management for Server State usually it's also known as react query um now I think it's t to query because there are a lot of more tools available from Sir tenana um we can first of all install this and then I'm going to show you how you can use it so let's go and install this by using npm install 10 take query and to use it in our application we will have to wrap it around our app so there's really no we don't really have to do this but it's a good point for any kind of API call to use it there's a great article as well explaining why even in the most basic cases it's good to use 10 St uh library for your project so just trust me on that it's really really that helpful now what we need to do is from TN query import the query client and the query client provider and then we need to create our own query client by calling new query client we do this in the topmost layout file here in our application so keep that in mind uh we're at the root of the project now we can wrap this as a context around our application it doesn't really matter which comes first here so I will do it in here query client provider the client is my custom query client and then make sure sure you close it at the right point and then we do have this enabled for our app cool so now with that in place we don't have to rely on uh this this really yeah garbage way of calling the API anymore we can do this in a whole lot better way so what we can do is we can now grab all the current currencies by calling use Query oh no not from here I just want to use at 10 St query what is going on here uh from here this is the page um and to use Query we can now specify an object this is actually by the way using version five of 10 St query so it's a bit different than version 4 we now have a query key I would call this uh doesn't really matter and this has to be by the way an array so this is one of the first changes of wi5 this is the key under which 10 St will cach your result from the API so if you do the same call again and uh you fall into the caching policy it would just immediately return the data and then you have a query function which could be any kind of asynchronous operation for example could be a fetch call to something and then return this as Json in our case what we can do is we can simply uh change this to the call we had before so that was SL API SL listings and then we would return this as Json cool now we could actually already use this on our page so you could now go ahead and say currencies. data and then you can go through all the entries in there so every currency by the way is now a currency from our interface and this is the cool thing about using the interfaces I'm now pretty sure what I can do in here so I can access the currency name um I think there needs to be another bracket and with that in place we have a full mechanism of API route using 10 stack and using the 10 stack mechanism to access the data and then display this in this little list up here how cool is that I don't know if you didn't take anything away from this clone until here I really hope this this is now blowing your mind in terms of what's possible with react native right now here in 2024 so we're going to uh of course build this out into a bit more the biggest problem I do have right now is that we don't have the image available so uh if you check out the API routes and the data you get back for listings there's no image included so that's why we're making this second call to the info API which then for specific IDs so for an array of IDs that we did get back in the first step we can now retrieve more information and we also have the logo so this is the logo that we want that means first make this call then make a second call and we can do this in a nicely way with 10 stick so let's try and get all the IDS by saying if currencies data is ready I want to map all the currencies and take the currency ID and I will actually append in here uh um dot join oops I don't know what I did uh I want to join these on a comma actually no space so then we should have at some point this list let's see if I hit save right I get back a lock with the IDS and this is what I can ex uh add to the call of info so we're getting the um the information for these coins or IDs and now we can do this in a second call uh in this case I will actually directly extract the data uh from use Query so in the previous case notice we just had to use Cur currencies data now we could actually just directly extract that then within here we have the same uh setup like before so we do have our query key I will call this actually info uh and this should by the way we use let's use the name of the actual API so this is listings this is info and as the second value I will also use my IDs and then we do have a query function uh let's see I'm messing up something I'm pretty sure so this goes straight to apiin and then question mark IDs equals I think this is the syntax right let's check it out I mean we do get back the data anyway uh the fake data we could do it once with a real scenario but here you see reest Expo L search params get IDs so this would be our string 1 comma 10 comma th000 whatever and that would be attached to the call to the API but this is really not a tutorial about the coin market cap API really we want to focus on the API routs and then also on 10day query all right so now this query uh should only be called once we got the IDS so therefore we can add one more field and say this query is only enabled if IDs is actually truthy so only in that case this query would run and now let's see one last thing um let's just do real quickly uh Flex Direction row here uh row and the currency is the ID okay let's close this off then I don't need the key in here and as the first value I don't want to present an image which is hopefully the currency. logo so currency. logo of course does not exist um we need to access my data now so let's see how we can do this uh data and then we should probably say add the let's see what do we getting back okay I need this is not an array this is an object so I need to access data at a specific key the key in this case would be the currency do ID and at that position I want to have the logo voila here we go that was quite quite challenging to do but I hope you could follow uh in everything that we did this was really like a uh quite challenging part and maybe you just want to rewatch this part of the video we've done the API route which is now hosted for now uh with our live realer server and then we added 10 stack around our application for State Management of the server and caching and we called our own API and then we also applied the logic to have like a like a waterfall or a second consequential call to the API to resolve the information and then use that information in here with this Dynamic call um there was really a lot probably but we are now in a perfect position so I could now replace this and I could use the real API no problem uh yeah I I hear you scam Sim why are you not doing it okay I will show you I will give you proof that my implementation with the actual API works I commend this in I'm using my real quota just for you today one of my 10,000 free call to the coin market cap API per month goes here and we see that it changes basically nothing because these five coins will are always going to be at the top of that list um at least at the moment I think uh again I'm not an expert this is no Financial advice don't buy stuff here uh based on what Simon is telling you so I will go back to my dummy data but you have seen that it definitely works okay and with this information we have everything about the coin we have the logos um and we can work on a pretty cool layout for this page now to improve how we navigate through the coins in our crypto list we're going to do a few things so if I show you the demo here uh this is the crypto list so we're going to see we have our custom header again we at some point want to add Charts uh this is something we're going to do later but something that we want to do right away is implement this page and how it goes into the details page okay this is what we want to do first and we're going to of course display the list in in the right way now to achieve this we have to restructure our application a bit the problem is that we are now talking about a nested layout so we are here inside a T Bar layout but we actually need a stack because if we click on something here it should push to the next page and we could probably push this outside of the stack uh but then we wouldn't have a nice I mean that actually could work um I'm I don't really want to do it I I kind of want to do it but I also don't want to do it um how do we we could try because the thing is on the crypto Details page I mean we don't want to see the ti bar on the crypto Details page anyway right um and there is a somewhat ugly fix for that that we could apply or we could really just have this outside of the TS layout ah you're really this is this is kind of challenging um I'm taking a long shot here uh and I will do a folder crypto up here outside of my tab bar and I will place the details file in here I'm just doing this for you I'm just doing this for the clicks uh ID uh let let's do a test first let's do a test run first uh Details page okay so what we're doing now is with this syntax uh did we use this before I think yeah we used this before so I can pass an ID to that page and then we would have the detailed information about that uh cryptocurrency now if I go back into my crypto index page um where is my crypto index page here it is I will try and just surround the stuff in here with a link component so link from expor router uh the H rev goes to and this is now going to be challenging um yeah actually to/ cryptocurrency ID this is pretty uh accurate I think um and then we're going to have like a key we do have the key Let's uh below it as a touchable opacity touchable opacity okay so if this works uh this would be really great let's see okay yeah nice Yep this is uh this is I think this is what we want to do because you notice now if I'll put it here that it shifts away the Tap bar and shifting away the Tap bar is always like making sure that uh pages are sted correctly so we're not really in a nested layout now uh we're more sort of breaking out of our T Bar layout but that's cool that should work perfectly okay right with that in place let's focus on building this page out um on the layout of the T Bar um no this is not the layout of the T Bar this is the layout of the T Bar on that file I want to make sure that I do have the custom header stuff as well here on the crypto page so I will place it here uh and then we do have my header we see again we have the same problem uh with the setup right here but no problem that should be fixable at some point uh so let's go back to the crypto page and on the crypto page we can use our effect uh again so from uh the package we use before we can grab use header oh come on yeah there it is use header he from react navigations then I will change this to a scroll view because I'm pretty sure we're going to scroll on this page uh did not import it right then we're going to set the styling here uh just making sure we got the right background color uh colors. background and then just like before the content container style will have a petting top of the Top Value oh no of the header hate value okay let's refresh and I'm signed in and I'm on the right page and and yes this is scrolling nicely behind our blurry header perfect good good setup um now let's use some text before we actually display the rest so style um default styles. section header and I will call this latest crypto can we not import this correctly there we go latest crypto and then we're going to wrap all of this in a block so I think there is a default styling called block which basically adds a white block around some stuff okay so it looks like this cool now we do have our link component in place uh we do have the touchable opacity we probably want to have a little Gap in here as well so let's use a gap of 14 and make sure that we align the items correctly in the center that looks nice then we do have our image um I will actually set the ha here and width to 40 so giving that logo a bit more size nice that looks good then we follow this up with an additional view okay because we want to have the view spend up most of the width here and at the end we're going to have like the current price indication so let's use style uh Flex one again should take up most of the space available and then we have the currency name and Below we're going to have the currency symbol something like this probably a bit different uh let's give this one style as well so let's use in here the font weight um like 600 and the dark color can grab from here um actually not colors yeah when use the dark color here and for the second one we're just going to use color scrape okay that looks looks decent uh I feel like the gap of 10 is quite harsh isn't it yeah I I honestly don't know I feel indifferent towards this uh okay let's continue so another view that we have at the end of this row should now show the price these are going up or down right now so we can first of all start with a text element and then using currency. quote dot in my case it's Euro you might have used US Dollars um and then price to fixed I want to use this two two and the Euro sign okay so this displays the current value of that um currency and now an additional view that goes uh with a row styling as well and maybe maybe a gap of four is enough in this case um in this view we're going to display an ionicon okay so probably something like Arrow up uh we don't have a success color I will just uh call this green for the moment okay so we do have this one up and then we can show also the current uh price change price change would be below that so making this a bit shorter um we got another text here with checks if the percentage change is greater than zero then the text would be green otherwise it would be red uh currently all of them are uh red that's not looking too good to the crypto Market H anyway uh for our ionicons we can do the same so we can make this dependent we're not always using Arrow up we can check if the change is greater than zero then we're using it up otherwise we're using it down and same now for the color making the color also dependent on that value and then it turns either green or red good you notice that this price here actually comes to the left side uh we kind of want to push it towards the end so if we want to do this let's give our view here uh a little gap of 10 or actually the same Gap like we used up there of six and then we will align the items at Flex end so notice what happens we push them towards the end all right cool so for every coin we are now going to the details page and leaving our Tap bar interface that's actually quite nice I hope everything works out as I want it to I really do hope uh so let's see I can close the stuff here uh I can close my custom header let's go to that Details page so first of all if you want to access that data simply extract the ID calling use local search params from Expo router again and then we should be able to Simply lock this out print this out yeah id1 800 something yeah nice this is exactly the ID on that page now let's effect and change the layout of this page page first if I go to that page this is definitely not what I wanted to look as we are now inside the tops deck navigation we actually need to change this up here so let's do this uh we can now add another entry stack. screen uh not scream name in this case is authenticated crypto ID yep that's true um but I don't really want to do it like this I want to add some I mean we can try yeah that that seems to Target that page good good to know but I actually want to want my nice little headro the only thing I want is I will set the title to an empty string and that header left should probably be this uh back arrow that we had before yeah that looks good um additionally I want to use header large title so on iOS you can actually have like a title that is big here and then moves into the header and this is the preparation for it I'll also set the header transparent to true I don't know if this makes a huge change in this case uh but we're probably going to see a change additionally we can add for for fake reasons some buttons to the right so this would be a simple example of adding uh two additional buttons like a star and whatever notifications icon to the right hand side of the header so we've again completely customize the appearance of that header good let's go back here and again we're going to use our use header hate because we already see that we got some issues here so let's import that correctly and I also wanted to probably manually update that view so I will now put everything into an empty fragment and start by using stack. screen you can also by the way do this from like a use effect hook or use layout hook that sometimes looks a bit better this looks kind of odd I just want to show you that this actually works so I could now give this a title let's just call this Bitcoin for now doesn't really matter um then it would appear up there um we still haven't really used the uh view yet so this is now a bit more challenging I should probably show you what's going on here um The Details page that looks like this has the little uh chart later and then at the bottom we have another card and coming come back come back we have this error here uh which is like uh pill buttons that we can select and you notice when we scroll they stick to the top and if you want to have something that sticks to the top notice check this area for when we scroll this is sticky um this is quite challenging to to implement and one Cool Fix is to actually use a section list from react native so I will now put in a section list and I will tell you in a second why because the section list has a lot of properties that we can use like a header component um and you can uh make these sticky to the top and you can have another um additional view in which you put stuff so this is really um a great idea actually I think talking myself about great ideas but um using the section list helps you in these cases to structure your view with different elements and still get like the benefit of having some some sticky stuff okay um what do we need we probably need the render item function to make this happy this is like the most Central piece we usually have uh in here and this one will return let's for now let's just return a text um let's call this render item then something else is missing probably for the renderer uh we do have the key extractor so the key extractor in this case should just be like uh for all the items we put in we're going to use item. title ah this I definitely messed up the syntax here I can smell and see it okay um and then we do have the actual sections as well because otherwise the section list can't really work so we do have sections uh and this is an array now if I don't pass anything in that would already work by the way uh but of course this is not what we want by the way what we do want is to already add the style here which uses our property uh of pading top or I think we might use margin top in this case of head or hate um so right now we don't have any any section let's fake and say that we do have uh like one section and I think you need to say data and then have another array and call this title uh chart so we're going to have one section okay here is the render item function that's cool also notice that our cool iOS scroll header is actually already working so we have a big header up here and then once we scroll there it goes straight into that how cool is that ah nice I like it I really like this um okay but we want to do a few more things here so the render item function will be uh let's let's remember maybe do this right now so I don't want to render some stuff I want to render The View and some some card so in a second or in the next part we're going to render the chart here chart and below the chart I will just Place one additional uh block of some some random information really uh this is just an example of a card so in that card I could have like a subtitle don't does don't I have like a default style subtitle no I don't have H that's a Pity so for such a subtitle we could just use some general styling and then notice whenever I bring in I bring in two more breaking dependencies okay so this is the first one and then we need to add my style sheet up here from react native okay I just want to have some sort of information included and most importantly to do implement the chart in here this is the render item now on top of that I do have the list header component and within the list header component I can now have some sort of uh header that I want to display in my case I want to display a little view here so I'm making this a bit faster because this is a lot of boilerplate code that's somewhat boring so I want to have this BTC below Bitcoin I currently feel like we're not in the right place here yet um my content doesn't seem to be correct let's try if we use instead margin top it wouldn't change a thing yeah I I didn't expect that to be honest um I want to set my scroll to enabled here but that should be enabled by default that shouldn't make a change so we can probably get rid of that um but I want to also set the content inser adjustment Behavior that's usually required when you're working with um these sort of big iOS yeah see see this I think it was this one okay now it's like totally on top of it and if I use content insert adjustment Behavior automatic we go there and it's below it okay so this is what we want to see cool nice uh additionally I wanted to have the logo um in order to get the logo we actually have to make another 10st called so we can probably copy this over from our crypto page uh so I want to make a call just like this pretty much so let's get rid of this let's use Query oh no I don't want to declare this I want to import this from tin stick um I want to call info for the ID that we used on that page and I want to make a call to SL apiin [Music] um huh that's a good point will it just I mean in our case it doesn't really matter uh because we will always get the same information but this would be probably correct however I also want to return just that one correct logo so I will also make this now an actual call here and say const info equals await fetch so we have have to make this an async and then I can extract the logo by using info at the position id. logo and if you want to use um a value like a variable to access a specific key you can use a plus sign which gives you a computed property and oh I didn't want to move my view oh oh that one's I don't do this usually okay and then I will simply return the logo that also means we can get rid of this part we don't really want that and that we can directly destructure this and access the logo here from my d data so with that in place my logic here to display an image should hopefully work so we just need to import image from react native and then we should see okay I go to Solana this is the Solana icon I go to ethereum yep yeah ethereum and Bitcoin yes okay at this point we I mean why are we actually saying BTC I could probably use that information here at the right index huh you're you're really giving me a lot of ideas right uh let's try this one out so if I now say data. logo it should still be the same but I should actually be able to use data dot something like I don't know what's it like name or so yeah okay yeah cool let's check out the data we get back we can make this a lot more realistic than I thought okay we can use the symbol let's use data. symbol cool so we got e now we can also now we should also be able to change the name really let's see title is not Bitcoin it's just data do name okay I shouldn't have used Bitcoin yeah here we go here we go now we're talking o that one's not defined okay yeah probably my fake data isn't uh defined for all of them so I will stick to what works I will think stick to like the first here oh no it's not working anymore at all uh I should probably make sure that I'm not accessing it before it sets so let's do it like this uh oh no uh it's also now in other places for the here and probably here oh my I got into a lot of trouble with that right yeah yeah now it yeah now it works okay we fixed that we dodged the bullet we're cool and we also got that cool scroll header for iOS okay um we are not completely done yet um before we get into the uh rendering of our chart let's add a bit more information so there were like two additional buttons I think I will bring them in because this is not really essential to this and just just wanted to make this view look a bit better so after that first view here I would like to place an additional view we're going to bring in the touchable opacity and this is completely optional you don't really have to do this right now this is just adding two buttons to make this look even better so completely optional um but what I really recommend is that down here we can now uh where do we want to render this let's have header okay so this is the list header part this is like rendering one item and in between we can now also have the section header and this is the so the part that we want to render before a section starts is what should be sticky at the top so we can implement this now uh this is the render section header and we're not really interested in uh the stuff here as well anyway so I will just use a view let's just use use style uh I don't know Flex one background color red uh hate I don't know what you just did copile it but uh it's probably correct I don't want this at all no I don't want that okay and then close the stuff okay this is my header it's probably in real world more like 50 pixels and now you already see by default it's going to stick at the top and this this is the place where we can now Implement something whatever we want that should be sticky in this case that was a scroll view so let's implement it like that let's get rid of this and let's use a scroll view from react native which should actually scroll horizontal so we're going to set horizontal to true and then close the scroll View and within the scroll view we're going to have uh a few different categories let's just set up uh some categories at the top as an array so we could do something like overview news orders transactions just to have these different pill buttons uh like we can see here on top of that screen so those are my categories and I want to display them in the scroll view so I would say categories map and for every category I would render one uh touchable opacity okay touchable opacity I don't know what your recommending me uh opacity here but I really don't want to do too much uh at once I think we did this in one of our other clones as well this is quite interesting uh in how we can achieve this so let's add a text element first of all and just call Item uh what is the item what am I okay yeah I can when I map the category I should probably destruct structure this into item and index and then I should be able to run the item and I need another one to close this okay oh you see overview news orders transactions uh coming up nicely now you honestly just need to style this correctly uh and make it work so I want to say shows scroll indicator fault I really never want to see them uh and then we have some content container styling which affects the actual uh content within so here I want to align the items in the center I want to use justify content actually not Center but space between um and I want to use the full width so now we're having it spread out like this so I'm adding some petting horizontal okay nice and I want to also add some padding bottom of well about eight okay I want to give this the same background color so we don't I mean yeah I want to give it a background color because once it's sticky at the top you otherwise wouldn't see it okay so I want to have this sticky with the same color Okay colors. background and I want to have it a very thin border at the bottom so border bottom color should be colors uh light gray in our case and the width again not one but stylesheet do hairline wi so it becomes a really really thin border at the bottom and so it sticks nicely at the top now we just need to uh set up the touchable opacities uh for these we also need some styling so let's go quickly to the bottom um there are a few elements that I want to use here so I want to use the category text with a gray color and size a category text active which is when you press on one of these so we're going to have to remember which is active we have the general categories button with some padding and Border radius and a definition if the button becomes active you notice in that case we also have to talk about State because otherwise we couldn't keep track of what's active so what we need is first of all an items ref actually do we need that uh um I'm honestly not exactly sure if we need it right now let's start with the active index maybe that's already enough um react use state zero and then we can use that active index here in where is it here is it okay for the touchable opacities now this is what we need to implement um every touchable opacity has a key which is is in our case just the index and the style is going to be dependent on whether the active index is equal to the index of the iteration in that case I will use the categories button active and otherwise I will use the categories button styling okay uh also now I should probably implement the actual onpress to check this out so onpress I will of course call uh uh set active with that index so now yeah that actually works pretty well you see it turns white here and it's sticky at the top so it's exactly what I wanted so now I can just copy this block over to my item and use the same logic but this time I will use category text active or just category text so with that in place I think we actually have nice split here I mean it could have a bit more petting these icons could have a bit more petting I feel like uh this is the categories button right what if we say uh pading horizontal is a bit bigger like 14 uh would this make us happy yeah I think it would make me happy although no it's 40 and 10 but M I think it's good I think this is what I want so we do have this uh we have our big to-do in here I will just indicate this with a little view now so what we want to do is we want to place a chart in here uh which has probably like a he of 500 and let's for now just use a background color of green okay so in this place we're going to have a chart but now we can also play around a bit more with this so I can go to The Details page I get this cool header stuff going on on iOS and I also have that list which has a sticky header now so I could now swap between different things um which is really really nice I think all right this is a good preparation and I learned a lot about this while talking about this so we now have the crypto out of the TS layout we could have it inside if you still wanted to show the TS at the bottom but usually for Details page you kind of want to break out of that UI so with our setup with our logic in place we are ready and prepared to finally display a nice ticka chart all right it's time to implement a nice chart and there are many great libraries but I wanted to use Victory native XL for a specific reason so if you check out the repository it says high performance charts powered by D3 skia and reanimated and if you check out the examples it's really dead smooth uh and this is exactly what we want to achieve with our example um so you can really do a lot with it we're going to get into our Details page we're going to fetch some uh data some well not dummy data but some generic data and then we're going to try and display it in a chart like this the only thing we need is to install it and in fact we do have most of the libraries already included so let's kill the server and I will install the react native skia pack package from Shopify and victory native uh as a package itself and on top of that I also want to install the Expo heptic plugin because then you can like give the user a heptic feedback once the user starts dragging um on that chart so there just a minor addition uh additionally this one requires of course reanimated so if you go into the getting started guide you would see react native reanimated and react native gesture Handler but we have of course already used both of them so uh both of them are included and we can just follow this up with npx Expo install Expo heptic good now that we got this uh let's go back to our run command and as I said we need a new API route so I will call This One tickers Plus api. Ts and within that I will actually use the uh pretty much the same call like we had before uh just a bit different okay uh why do I not copy just everything no I don't want everything I'm sometimes getting quite annoyed with myself you know we've been together now for a couple of hours so we can talk about that stuff I really get annoyed with myself sometimes so what I really wanted to do in here is make a simple call I don't need a header in this case because I will actually contact a different API problem is the coin market cap API did not have what I wanted uh it could just not deliver what I need so I had to opt for a different one which is coin paprika um or by the way uh clarification cryp coin market cap does offer these tickers so to create a chart like this but that's a paid feature and I wanted to give it this a try in a free version so I used coin paprika for that that was a bit easier because it didn't really require Authentication for this one call so if I just go here um it would actually give me this data right I can without actually calling the API route I can just directly dump this into Data so I could just do this here um yeah that should work and I can just return that data so we don't even have to make that API call in the first place I will just return this data here good we also don't really need the API key then uh and everything else can stay just as it is good let's get back to the details page so on that detailed page I want to fetch uh these tickers that means I will do a somewhat similar call in here um for my data this time I will just call this data and extract tickers from there we're going to use the same setup so use Query this key will just be tickers and the query function in this case is just to API SL tickers so we don't really need anything else that also means I can just put this here up here and everyone should be happy I think good so we got that information that's good um now we need to actually use the chart maybe we want to just follow the basic setup here that's always a good starting point so they do let's try this let's use some dummy data first uh that's always a good place to see if this stuff actually works and then import Cartesian chart okay we can do that from Victory native and then we can place that chart somewhere in our view and we already have the place for that uh where we have this huge green box so I will put it in here uh I will change the background color to be well nothing I guess um and then okay the cartisian chart does seem to need some children so we need to have some points included so let's better take this snippet here and then we should see something like that let's see okay going to place this here we need to import line as well from react from where do we need react the line from Victory native yeah okay and we have the basic implement ation of our chart good that's good um I'm actually quite happy because at this point you kind of know that things will work like we have the basic stuff we just need some some styling some properties some customization but overall you can be pretty confident at this point that things will eventually work out for you so for my view I will actually put this now in an array up here and then we're going to use the default style block so it's also in this white block yeah that's what I want to see okay that page is maybe this is the favorite page of this app to me really with the sticky segments I really like that part anyway um so this is the basic usage we have the chart which has data it has some properties then we actually render the points directly within that component line or point or whatever and boom you got your chart so let's tweak this to our needs so we can actually use it in the way we want to use it um we have my data tickers up here that's good we don't really need the fake data anymore and we're going to try and plug in my own tickers here so the X key in this case is let's check out our data that should be the time stamp so time stamp should be the xx's and the other one should be price we're actually not really interested in the other two values so time stamp and price is what's important to us so let's use timestamp in here and for the other one we're going to use price okay so why is this not happy with us um probably well probably because a lot of things um this one is also fine but this should be points do price now so why are you mad about my tickers data um should we somehow specify that this is actually um we could probably add a return type I think this would make this happy I couldn't figure out how to work it with our interface before so for our use Query here I will add promise this is going to be in result of any I mean it's actually result of if I check out my interface is no we don't really have that interface yet uh probably that could work if I have something like this I copi this and then go to crypto then say Jason uh this is like a ticker okay and if I then use ticker in here would this make things better or worse uh I don't know let's see but I forgot to export this export interface ticker and then we could import it here from interfaces crypto yeah this is not making the kesian chart happier uh why is that the case I say it like this n not really um do we actually yeah we can use tickers tickers or undefined I mean if I say it's always defined I honestly don't know why it's not working great with our type it should in theory it really should um this is not can can I add like a fall back in here like an empty array no I can't the problem is if I change this to any I think we're going to see no more problem um actually we still see some problems that's good that I mean that's good that's progress but overall it should work just like this um you actually you see it it works we have our chart of tickers here it's just complaining about the type so this is a typescript issue that we might be able to solve somehow uh I honestly don't know why we're not solving it right now we have the query key we have the function uh we have a promise with any and then our fetch call I don't know if this is like a function so in my previous example the code for this looked like this so we had one additional line would this change anything no it wouldn't so we can also keep it just like it is and except that it's red for the moment uh although this is really getting to me anyway what we want is a bit more so we want this press effect so whenever we press on the chart just like they did in some example uh probably here uh in the beginning especially this so you can like direct your finger on that chart and you're going to see the price value up here this is a bit more complicated but we're not here for the easy things uh we really want to see how things work so let's see uh first of all I want to check if my line is correct uh I want to give it a color of uh green actually so that it looks a bit more friendly not not that red we could also use our primary color uh the primary yeah that's actually that's actually even better why didn't I think about that before H so what I want is I also want to specify some options here we do have the AIS options um I still wonder why tickers tickus is any undefined honestly this is oh if I do it like this then we okay for now we're going to roll with that solution uh I'm I'm fine with that one uh although I really really think it shouldn't be should be different okay so for our X exis options um I want to specify my font and if I want to specify a font here I have to actually import one and follow the or use the use Font Hook from skia so let's go up here and create our own font object by calling use Font and now be careful okay we're going to use Shopify Rec native skia and I don't know would it work with font family inter like this I am not aware that it works like this however I do know that it works if we use require in here and then pass in the path to my font so in our case we do have a default font I think under assets funds space mono regular uh so assets funds space monor regular.ttf we can close this and then we have to specify as well as size so I will specify 12 and then we can plug that font into our exis options so because it's the same name here uh we can just use Font and then you see we actually do get the ex's they're not really formatted very well so you're going to probably uh work with this there are a lot of values you can play around with so you can play with the tick count uh you can also use a label offset in case you want to like shift this a bit to the side so I will use something like y0 and minus come on x - 2 and 04 y so that shifts these a bit around uh then we can also use a label color to make these labels look gray and then you can of course also format both the X label and also the Y label uh for the Y label I just want to use a function that shows a Euro sign next to it so you see this is formatting these labels and if I want to format the X label I will use a different one this is like in milliseconds or something uh so we can call format in here um do I have format I feel like I don't have format yet um oh did we I forgot to install one more thing I'm so sorry so we want to install date FNS one of the easiest ways why did I how could I overlook that one okay so date FNS is really easy for um Chang working with dates in general uh didn't we install this before I thought we had um so in that case it's pretty easy to import format uh directly and you can also like have count the seconds from somewhere it's it's a great library in general um and of course format is Now not working automatically and my whole xcode is screaming do this slower no we keep up the pace we follow my way okay so I want to format the date so let's use new date uh the actual value and then you can have your format whatever you want let's use month month um is it a good format I wonder um uh yeah it should be so here we go now we see the actual days in it I feel like tick count five is this a problem for for the view also how many um how many oh come on what's what's broken no I honestly don't know ah something else uh AR in kesian chart at 114 yeah thanks thanks for nothing uh format new date [Music] Ms is for some reason uh for some reason format not defined no format should be defined I mean we've seen it in action it worked just like a second ago um but right now format is breaking that stuff so we definitely do we have to reload the app just to use new npm dependency no I don't think so H it's anyway still complaining about something oh wow what a fun oh what fun it is to debug react native apps [Music] hey I have so much fun why is my tick count wrong I don't know okay something went wrong yeah I can clearly see that something went wrong my friend uh I probably shouldn't set tickers like this I should probably really wait until a ticker are defined um can I just do like ticker question mark no then everyone's getting mad at me but oh come on what's wrong with you it used to work like 5 minutes ago go and now I install date FNS and you completely freak out oh if we just wrap the cian chart in tickers and and to make sure the data is actually there before we display it that would be really smart so nothing is crashing anymore and then we should also be able to format these labels correctly I just removed all the Imports and everything that we did but so far I think that the biggest problem was that uh the data was simply not here and we tried to access it up front so now we do have the labels we do have the tick count um we see the chart actually we just seeing like four days uh we should probably what is the tick count in the first place yeah then we would see more data right um but that also crowds The Tick here yeah I think this looks better um and the data is here it's probably yeah this okay this is January March February and March so this is actually fine I think we are basically done with the chart and the formatting of the chart so what we want to do now is we want to have this press event um there is a nice hook and we should probably check out the documentation on this uh so for chat gestures there is a use chart press State it's a chat chart I don't know um we can grab this like this let's try this out in our own code so I will bring in after this one here the const state actually we just need State and is active we're not having multiple States and then we need to Define our initial press State I will Define this as x0 and Y with price uh y price so these are like just the x's and then uh we need to import this from react uh Victory native okay so now we do have these two and we can um do two things so first I want to add a simple use effect block here that's always called when uh is active changes okay so when I have active changes I want to put in a little lock here uh with uh is active and additionally this is the place where I would like to put in the heex plugin so you can now use or the import for the heex plugin and then simply say some something like if is active I want to say heptic selection as okay so now we can press save and we just need to add the hook the use chart press state so the state here to our chart so let's go down and find the chart I should really have like put this into multiple components do do me a favor do multiple components really this one is getting too crowded the chart should probably live in its own component um and we're going to set the chart press state to this state okay and now watch this I'm pressing and we get true and then it changes back to false and true and false okay so we do get the change of the press State and we can actually highlight this as well on our chart to achieve this there are a few more things that we need to do so for first we need to add a tool tip so this tool tip comes from our uh or we can actually Define our own tool tip they describ it as far as I know uh as far as I know I've seen it somewhere I have definitely seen it somewhere probably in the multi press uh yeah there is a tool tip and then yeah this was the implementation of the tool tip right I think I basically used that one in here so we have a shared value uh which indicates this is using react native reanimated and when we do have a circle which comes from react native skia with that tool tip we can then heat over to the implementation where we actually draw these points So within the cartisian chart we have this block here where we actually draw the points so this is responsible for drawing this fantastic line here okay so it's just going through all the points that we have and it's drawing a line or whatever you want on these points I will now rep this uh in an empty fragment why did I click on that I wrap this in an empty fragment that's not changing anything so far but I will now check if it's active so we are pressing in that case I want to render a tool tip for X I want to use state. x. position and for y I want to use state. y. price. position as a result that means when we are pressing we've seen the hook already works this tool tip should already also be rendered exactly at a specific point so okay it looks a bit clumsy with my uh Mouse icon here but if you use this on a device it feels really really good and satisfying oh my it feels so good okay this was only half of the fun I wanted to show you by the way there's another story to this so if we are active um I want to show the price where we're currently at and this is actually more challenging than I would have thought so let's see how this works first of all we could cover the case if it's not active so if it's not active I want to render like a default view up here uh so this is above uh actually it should be within the block here so that also means if I do it like this I let's probably do this in the tickers one so in the tickers one and if I do it like this I need to also wrap this with an empty fragment my uh okay let's fix everything so if it is not active we have this view which shows like a text element with the current price uh text strings must be render with a text yes I'm aware of that that's only like the second or third time it happened today right so we're good we're good okay so we now are able to render a little label up here that's a good starting point so let's give this label or this text a bit more styling uh we're going to up the font size to 30 uh so it's becoming a lot bigger font weight should be bold okay so we got today and then also our own color colors. dark okay um next to this I would have like to have my price or actually uh let's do probably do today let's do the price in quite big and then below we're going to do in color uh gray we're going to write today so here is something like 42 and then we have today with a small font size of 18 below it that also means I need to somehow retrieve like the last price shouldn't be too complicated so if tickers is set which we are sure at this point we can just access the last element and call to fixed two and then put in a euro so this would be the last price for today currently now the other case is a lot more challenging so if it is active so if we are pressing on the chart right now we have a problem um let's see I will just copy this over for now um and then say x okay so we can now see that when I do this I actually so the logic in general works okay is active changes it is a state it updates The View so we can draw something else on the label now how can we dynamically update a text label that actually doesn't really work very well unless you're using reanimated and animated props and that is exactly what we want to do now um and by the way to use this we're not actually using an animated text we have to use an animated text input for some reason it only works with that so uh let's do an animated text input uh input equals animated from react native re animated do create animated component text input all right so once we got that animated text input component we can go back to where we were before so if it is active um we have an animated text input here uh style should be still the same we're going to make this editable fault um and we're going to say underline color Android is uh transparent exactly these are things I want to add to my animated uh text input okay so far this is not really changing a whole lot which is actually a good story because we we Chang quite a few things um but we go here and the label looks pretty say like pretty much the same so how can we now change this this is interesting as we can now create uh animated props following the same set out like you would use for example if you have animated styles with reanimated also check out the other clones where use reanimated in even more places so in our case what we can do right now is we can say animated text equals use animated props from react native reanimated and in here we can Define our function that now returns a text and and a default value okay so default value that's required for the text input to work also make sure this is called return so let's call it like this um okay so let's see if we can already put this to use I can now use my animated text and I can use it as the animated props of this input uh let's see we're going to use the first one it will actually not have anything included anymore but just animated props and then my animated text and as a result we see it's now displaying the value from these animated props because this runs on the native uh UI thread we can actually update this in the usual reactnative reanimated way so in a very efficient way meaning in our case that means I will not use text but I will use the value of my state doy uh price do value dot I think another value and then yes to fixed make sense euros and the default value will be an empty string and we're going to do now the same again we just going to call this one animated date text in this case I'll will of course go somewhere else else so what I will do here is um I will let's let's grab this first because that line is getting really long so con date equals new date State x value value yep that is the current value of where we pressing remember both um these State values here state state they are also already under the hood using reanimated from the use chart press hook okay so they're updated and re-evaluated and that means at this point I can just call uh something like date. to local is it a date uh date do2 local date string and I of course don't need Euro in that case and animated date text goes into my second animated text input as animated props here we go and finally ah no we made a mistake somewhere along the way uh we made a mistake somewhere new date State ex value value return text date to local date string um actually I'm kind of I think we we didn't make a mistake I think it's probably more like reloading the app we did we did make a mistake somewhere along the way um that is interesting [Music] I think it actually because we've actually seen it for prize to work did I remove something while explaining I mean that happens it's not like this never happened before uh let's say animated date text uh and then we have here the animated date text and here we have the animated text um they look good to me but that doesn't mean it's correct uh um maybe the view is Now not working correctly around them that could like be a good solution but I don't think that's the case if I remove the second one I mean we've seen that the text can change in updates already we've seen that part in action so you can't fool me on that one um I could once again sing my debugging song about react native apps and I don't even see an error here use animated props we do use animated props we use the hook in the most perfect way we have a default value oh I noticed something there is in fact something we I think have to set and that is at the top to make this work we have to say animated uh and then add wh list native props and then we have to say text true I found this somewhere on GitHub before so this makes sure that we can actually uh animate and set the text property uh accordingly please just work now oh my it works that was a close one all right so this is the fix if it's not working for you this is what you have to add as well to make sure that you can animate the text property and now you can go along that line you get updates on the date you get updates on the price here and you just have a super smooth and performant chart using Victory chart uh it's using reanimated and D3 another hood is using skia so all the best things that you can use to get the best performance for your fintech applications all right that was a quite challenging view again I think it's probably my favorite view because of this smooth header animation on iOS we have this sticker component which is using a section list so you or the user is not noticing any of that but the view just comes together in a really natural way and we have this performant chart included so after all of these crypto Adventures let's talk about another very essential feature for every fintech application in many fintech applications you're going to see a specific pattern that is once you put the app to the background at some point it is going to lock itself so when you come back to the app you're going to see a face ID a passcode some sort of authentication so how can we Implement that sort of behavior for our app that's the topic for our next part and actually found a great article on medium from somebody called Alex L kissas um who implemented something quite similar which he called how did he call it um well basically the idea is to have a use effect blog where we can handle or react to the UP State events so this is the important part we want to add a listener to the UP State event and if we then come back from the background we can check if some specific time has elapsed and if that's the case we're going to do something okay in our case we want to then bring the user to another page that means I want to add a new page I will actually add a new folder here called models under authenticated and there will'll add a log. TSX so these are still part of authenticated um so let's call this loog screen we're going to implement that later um and with that in place I want to also go back to my uh layout at the top so this is the root layout and I want to add another stack. screen name in this this case is oops um what we had before how did we use the path before yeah like this authenticated slash models SL loock that's the name and for the options I actually don't want to show the header so header shown should be false and then we can close this one additionally I really don't want to have an animation at all so I will also set animation To None uh because we don't really want to animate that the appearance of that page but I think it will still animate at some point okay additionally we're going to add some context around our app um can we put this under components it's more like context so we should probably do it in a new folder context slash I will call this user inactivity t uh if I spell this correctly would be great. TSX okay so we have a folder context user inactivity this user inactivity TSX um should export a con user inactivity provider and it can wrap around some children so we can then easily wrap it around uh our application in total and once we got that we should be able to Simply return children okay and then go back to my layout file and at some level we can add that user interactivity provider we could actually have it yeah well we're going to put it in here okay so user interactivity uh user inactivity provider not interactivity provider and here we go okay good looks still the same but within my user inactivity provider I can now access the App State uh I can actually use a reference to the EP state so I will use EP state. Uh current state in here and I will also grab the router because in our case we want to bring the user back to a specific page once we strike also I would like to see if the user is signed in so uh if the user is not signed in there's no really any need to lock the application so let's now start with it with a use effect block that's triggered in the beginning and we're going to create a subscription here and we're going to add an app State uh event listener to the change event and we want to handle this somewhere else so uh let's see I'm going to close this off for now okay yeah this is complaining this is cool uh we want to ex exactly clean up after us in the use effect Hook when this is destroyed I want to also remove the subscription we can then write the const handle App State change function here which is going to be an asyn function and then we can put this in here instead of null so this one will get the actual the next app state so this is the App State status event and for now I will just put a lock in here with the next EP state so let's see if it works I try to put it in the background and now okay so it first goes to inactive then it goes to background and let's see if I now go back into it it comes back to active so this is the perfect place we have our provider and we can just do our magic in here the Magic in this case is to record the time once we go to the background and then check the time again when we come back for this we can import acing storage oh we haven't used acing storage before no that means I need to do a new pre-build why why did I forget about this no okay so npx Expo install we have acing storage don't we I I'm confused now didn't we use like Asing store oh we use sec secure store okay so we have now secure store Asing storage and mm KV include this is probably not recommendable I don't know this could be cause a problem um I just noticed that it's it's probably kind of dumb so um you could just store the stuff with mm KV why are we not doing it right now that's actually a good question I think because I used Asing storage in that uh example so yeah using mm KV is probably a lot better uh mm KV I could use a new mm KV storage in here why do you always bring me a new idea so this is the inactivity storage I do have to update all of this in GitHub as well because afterwards you're going to check out the code and saying oh Simon why did you use Asing storage in GitHub and in the video you use mmk V I don't know because I I learn I learn I learn all the time okay so let's do a function to record my starting time record start time and in the case of MKV I don't have to even make this an async function so I will set this to start time and I will set the date to new date now. to um how can we do this um let's say cons now equals new date and then I use now. 2 ISO string is it the same as of as the one it gave me so this is going to be an a ISO string and if I just say new date put now or what it what it initially gave me I'm curious now to see what do we have in COD here before date do now number Returns the number of millisecs elapse since midnight uh should work in general as well um I don't really care should work as well yeah okay so let's set it to this time this is the starting time so if my next app state is equal to background so we are going to the background I will record my start time okay if on the other hand uh we are coming back from the background so if uh the next app state is active and I want to add an additional check in here so if this is active and uh the app state. Current matches background so we are actually coming from the background in that so we can match it with like regular expression in here only in that case I want to trigger this so only in that case I want to check how much time has elapsed uh we can get the elapsed time con elapsed equals uh date now minus storage get uh do we have to use get number yeah uh is possibly undefined yeah that's a good point um minus let's add a fallback of zero here okay so I think let's see if we now put this to the background it should use mm KV to store the current time let's wait a few seconds and then go back into it and then do we see any kind of luck here I don't think so [Music] so that's a Pity we are back and at that point I want to get storage uh get number start time again and I want to also put in the handle App State change here um actually most of this should be fine let's do a little refresh here okay so I'm putting this now in the background it's becoming inactive and it's going to the background okay background so we're recording the starting time uh recording starting time and then if we go back next state is active and the App State current matches background they have a typo in here uh because nobody says we are back that's strange I think this is the key problem epate do current what is the epate okay our app state uses the current state um and we should probably update this yeah we should update that reference so at the end here we should update our EP State current to the next state then it makes sense okay so again going to the background inactive we're recording the starting time we're coming back and 3,000 milliseconds have elapsed so with that in place we're now perfectly in a place to check if elaps is greater than I don't know in our case I will just use 3 seconds and if we're actually signed in so if both of these things are true we're going to use the router to replace our view and we're going to go to authenticated model slash loock okay and then we're going to hit save here and then our user inactivity uh starter is done so going back if I go immediately back we're actually cool because this is like just 1 second so let's wait a bit longer one two 3 and boom you can see it up here we're on the lock screen we have 4 seconds elapsed uh and that therefore we are brought to the next page let's just clear up all the console locks and then this view becomes really really easy uh we actually don't even need the async storage in the first place because we're using mm KV uh I or you can uninstall that stuff again uh and we don't need it in our app cool so we have our user inactivity filter if the app goes to the background at some point we can then lock our app you can also by the way immediately show like a white page so in the IOS app switcher or Android app switcher this turns the preview into something white which some apps require for privacy reasons as well so this would be a great place to do this nonetheless let's continue with that lock screen and Implement another epic screen for our fintech clone we now want to implement a really great looking lock screen whether you can either enter a specific pin code or use face ID and for that we're going to use the Expo local authentication package which allows us to use biometric prompt or face ID and Touch ID on iOS so let's get back to the app let's kill the server and let's install Expo local authentication um then we have to set up any I think we do have to set up a little key for Expo local authentication in the app Json uh so let's check this out uh down here we should probably put in Expo local authentication and then face ID permission allow to use facee ID I think this is required we can close the user inactivity stuff and just focus on the lock model that we want to work on and at the same point we can also bring up the application once again good on the lock screen uh we need a state um we need the user as well so let's start with that uh we can use use user yeah it's sounds funny but it's actually the truth use user from clerk Expo uh we of course have the state so we have the code that the user is adding set code using actually I want to use an array I want to use an empty array that will make it a bit easier this is going to be a number array uh and then we also have or want to access the first name so we can show like a greeting of that user you can get this by using state with first name set first name and then we're going to use user first name but with a question mark and then I also don't want to add the type in here okay good starting point uh we do have a few functions we have a view let's use in this case an actual safe area view we should be fine doing that if we add the import correctly and then we start with a little text uh and saying welcome back first name uh our app is not yet coming up so we can continue a bit with the development of this view so let's already add oops stylesheet up here um I do I want this I want definitely a styling for greeting uh so for my greeting I want to have a bigger font size of 24 I want to have a bigger font weight um and and for now we can wait oh no AR exod build Sy has crash build again I hope this was just some some random issue did we mess up the EP Json Expo secure store Expo local authentication I don't think so um I hope we did not break our excode build through something but and I can't see a reason why why that should happen I don't think so um additionally let's hope this turns out and turns up especially in a second uh we can continue with the view so we will check with the use effect hook whether the code is complete so we can do this by saying if code. length is equal to let's say the code always has to be six then we're going to verify it and that also means we're going to put codee in the dependencies array here so at this point I'm going to check the code um besides that we need some functionality and I also need to get to the lock screen in the first place uh how can I do this I should probably just set this up for debugging up here so instead of going to my crypto page I will go to authenticated models SL loock but I mean now I should why am I not getting there um okay that's strange did I command something out in my user inactivity filter thing um if elaps oh okay yeah if elapse is I think we forgot one more thing here and that is no we're recording the start time whenever we go to the background so um so we should be fine inactivity one two three something yeah whatever I don't know something went wrong here and I will also set this now for debugging to that view Okay so it already says welcome back uh it's not saying my first name so why is it not saying my first name that's a good question uh use State user. first name use user from cler probably because I actually haven't said my first name that's a good point yeah I should maybe do this so let me do this on the side because last time I opened my cleric dashboard I of course exposed my email um and then I had to edit the complete video again so I don't want to do that uh I will now manually edit my user we will in the next section actually be able to update our name so I will update my first name to Simon and yes voila here we go so now I got my first name and I will also use the styling here so styles. greeting makes it a bit bigger we Pro probably want to have some margin at the top uh actually a lot maybe like 80 and we want to align ourself in the center so here we go this is it below that we want to have our um numbers view so we need to press on different numbers um and we also need the view to display like these little bubbles up there so let's do another view up here Le some styling in here um this should actually let's call this one styles. Cod view okay so the code view is like the area uh Flex Direction row I want to justify the content in the center uh I also want to have a little gap between the items I'm going to leave this for now and then in the code view I just have to go through all the elements of code um or of the yeah we're going to have to kind of do this in a manual way um I mean we could use code. length probably but then we don't really have information this is going to be somewhat ugly I feel like I want to use a second state I I can't tell you exactly why and I think that is probably a better way but I I I just feel like like uh let's say code length is always I think I just need a dummy array here with a length of six I will just fill this with zero and then we can use the code length to iterate over that so code length map uh I don't really care about the value too much so I just have index here and then this will be a view where key is index uh I will just hit style okay yeah looks interesting let's see how this turns out yes not too bad actually um not too bad right okay we probably want to have some some own styling here so let's use um styles. code empty so that should be just like a a gray bubble okay so let's say code empty in my case uh would be a round border so width of 20 he of 20 and then border radius of 10 um and okay yeah the background color depends on if we have already set that field so let's do this like this background color uh if code at the index index is said uh yes I wonder if this is crashing if this is a good idea but it looks like it works if it works it works so let's do colors. light gray instead uh do light gray instead so we have this gray area up there and for the code view we also need some margin margin vertical of I don't know let's use 100 so this is going to be placed a lot further down justify content Center I will just also do align item Center although I don't think this changes anything but I feel good if I have it okay additionally we of course need a styling for code fil um do we need no we don't really need this um but do I want to make these a bit bigger I feel like they're quite small like just 20 Well for now we're going to going to use them like they are now what we need is the numbers pet below uh this is always looking great I think there are probably some libraries out there but we're just going to stick to the basics so we're going to do it ourselves style equals styles. numbers view probably and this is going right here at the bottom so the numbers view should also have some margin horiz izontal of let's say something really big 80 and some gap between the elements so the numbers view is somewhat interesting as it's like a bit manual we could probably do this with a nice array but honestly you just write this once you don't have to overthink stuff um just get it done you know what you want to do you want to have numbers from 1 to nine you want to have a zero at the bottom and then uh like a face ID sign it's not it's no rocket signs okay so in that case what I want to do you I could just do it like this honestly but I will do it uh as an uh with an iteration here of an array 1 2 3 okay I want to map them so map every number two uh touchable opacity and then for that touchable opacity key will be number on press I want to do something yeah this is not finished yet uh but it's close enough okay okay 1 2 3 style here of course needs to be Flex Direction row and I want to have some content between so let's say justify content space between all right one two three these should have a specific style as well let's call this one number and the number style is just a big font size of 32 so everyone can read this okay and this is actually working better than expected uh by the way I don't want this to be black up there uh let's change this to colors. primary that's going to look way better yeah that's so much better so much better okay um I also want to have my own function for uh on press so let's do in const on number press and in that case I want to do the same thing like I did before so I want to call set code with uh all the items currently in code and then the number but I would also like to give a little feedback so therefore I will add htes oh come on htes do uh impact async oh we don't have activx yet uh okay no problem let's bring it in here we go impact async and then htes impact feedback style light I think this should work fine I actually also need a way to go back later so while we're here let's do that one as well I will call this uh number backspace in that case uh I will also do the light uh thing and this doesn't have to be that hard set code code do slice yeah we just want to remove the last number okay so now we just need to plug this into our touchable opacity so instead of calling set code I will call on number press with the current number um is there maybe yes better Okay cool so we can actually copy this now two times so this is four five and six as I said just get the job done it doesn't always have to be beautiful um but probably we should do this in separate views at least oh my so it would be a lot easier if I just did it like this and then like this okay 1 two three and then four five six and then we got 7 8 n all right looks good um I also see that my code is already coming up so let's try different codes one five 5599 okay yeah code is also coming up correctly we will actually not do any sort of like storing this code somewhere uh so you could also do this in the beginning the user can set a code and then you can compare that code to the code you stored in Asing storage not really any magic in that but we now also need one additional row where we don't have just the numbers we do have one for the nine for the the zero at the bottom okay so this one is going to be zero but we also going to have two additional buttons here so the first button uh let's let's just do three of them so yeah we got three of them the first one should trigger our pH uh or biometric out so let's call this cons on biometric uh o press yeah we can do press equals async function that's going to do something and then I will plug this into the first one here this should also not be any number this should just be an icon so let's use the uh material this is the only place I found it material Community icons name face recognition that came close to this size of 22 and we're going to use a color black so this is pretty I don't know can you see this I'll put it a bit further up um so this should trigger our face ID and then the third button that one should actually only be visible in case we do have um something in the code so if code. length is greater than zero only in that case I want to render this button okay so let's copy cut this out and put it here um and on press I want to go to on number what was it like number backspace something like that what was the name number number backspace unpress no overload what okay yeah this doesn't require number okay so now with that button yep I'm able to remove something and it removes the item in the midd okay it looks like it's uh removing the item in the middle but it's actually just shifting that item back because it's taking up that space so I want to make sure that it's always covering this space therefore I will set a Min width for this view here of like 30 and if I've WRA this around this one it should always this is not exactly working um align item Center enter this was definitely required so let's call this one just I don't know B yeah then it holds the position okay that's better uh we probably don't want to use a b we can also just use a material icon so material Community icons name backspace outline I think that looks good colors black 26 yes and voila perfect okay so we can make this quite easy now if the code is matching we're going to just bring the user back to the inside Area uh we have it up here so let's say if code is equal or if we now check if code. join uh on I want to join on an empty space is equal to I don't know 1 2 3 four 5 six so if we only press one we're going to use our router and call replace and just go to authenticated SLS slome good that should work do we where's the router oh I don't know if it works like this we usually use use router and not just import the router directly I don't know why but I feel like we should use it as a hook uh I think this is the better way okay in the other case we actually going to do a little uh error animation but we're going to do this in a second for now we can only do like a heptic uh feedback type error thing you're going to notice this by the way if you're running your app on a device you would then see this at the same point when it's an error I can also set my code back to an empty array I will also do this in the case we route forwards by way so if it's wrong you see it's going back to empty and we're going to do a little animation here in a second but before we did that uh let's just wrap this View up I included actually one additional thing uh so after this view I also put like forgot your passcode at the bottom but that's just a minor UI thing um oh yeah we we need to call a biometric out uh that was the important part so on biometric off press uh I will call and extract the success value of weight local authentication and I assume yeah it's not working yet so so uhhuh uhuh import Stars local authentication okay and then we can use local authentication you can also on local authentication first check um if it is enrolled if you can actually use it which types are supported so maybe do this before you display the face recognition uh icon here I just wanted to not over complicate these things um so in my case I will use authenticate async and I actually don't need to pass in anything if we do have a success I will bring back the user to the inside area and in the other case I'm going to do the uh heptic feedback for a failed login let's see um I can actually test this in the simulator so if I press this um it would in my case ask for a passcode I honestly have no idea what my pest code is and I'm always stuck on this screen and I can't leave it so that was a really bad choice um why did I do this I now I can probably do this um so if you're an iOS if you're on a MEC there's something at the top bar when you open up the simulator called features face ID and then you can um make a check mark at enrolled you want to do that because then it asks for face ID and once you're enrolled you can now press either command shift M for a matching phase or command shift n for not matching face uh actually command option okay so let's use command shift n not matching face okay face not recognized try again okay or let's do it like this command shift M face recognized and I would be inside again okay so this means our face ID recognition works as well and by the way I always see this little loading text up there can we just make this can we just can we just make this different uh can we just make this somehow different style is a bit better uh like a view or we have some styling and say uh justify content Center align items Center uh text strings must be rendered with a text yeah that's true um if I would do it like this attempted to navigate why do I try to can I only render text elements return text. loading um it's interesting that's really interesting because I think it should work okay that was displaying the loading up there at least yeah I mean now we don't have any kind of UI as well so this can be a problem uh let's comment this out I really want to fix this yeah that looks better actually I don't want to display loading more like an uh what is the activity indicator yeah something like this so I will now return this in here instead and so I don't see a loading always at the edge of my viewport yeah so much better that's it was otherwise really freaking me out I should have we should have done this about 3 hours ago but anyway okay we can enter a code if it's successful correct whatever we go inside if we use face ID and successful we go inside we have all the logic in place now there's just one more thing that I want to do with you and that is if the code is wrong I want to have this little shaky animation so like it bounces quickly and of course we can do this with our best friend reanimated so here we go let's introduce a little offset uh and use a shared value for that I'll use shared value zero then we're going to do Style with use animated style use animated style from reanimated and then we're just going to return transform uh and we want to translate actually the x value using offset do value that's right then we will Define two um constants so this one will be offset of 20 so this is like how uh hard it should shake and then the time between the different shakes um I found most of the code actually on the react native yeah on the reanimated page I think this was where I found this so they described it really nicely we can now set the offset value in this case basically creating an animation using with sequence from react native reanimated and our sequence is with timing I want to go to minus offset uh I want to use actually time uh divided by two then I want with repeat uh use with timing okay I just need to get the brackets right uh and then at the end I will do no let's let's do the middle part first so with timing offset and duration time and I want to repeat this for four times so number of reps is for reverse yeah true uh and then with timing I want to go back to zero finally in the same time like we started okay so this should be a nice bouncy animation and we can now include this for our numbers view by simply changing this to B an animated view animated of course from react native reanimated and then adding this in our array of styles simply adding style our animated style good as a result I should now be able to enter a wrom codee and we have this nice shaky animation you know these things they're not important you could have used that view simply without that but it took me like 10 minutes to figure this out up front maybe just five or now the implementation you've seen is like 2 minutes probably and you just get like this little interactivity on this view it's so much better you could also probably make the appearance of our backspace button a bit more animated just not plopping only animating the uh opacity that would probably be cooler uh also for the bubbles here if you input something you could also animate that but overall this is just a really nice lock screen and if I now enter the right code I should be back in the app which I'm not uh so we should probably make sure that uh one two three I think there this is one too many one three four five six okay yeah that one brings us back and I will also make sure that I will change at the top level our fake logic so we're finally back in the game and I will want to be back on the home screen because now after implementing the user activity and the lock screen it's time finally for a little account page and interactivity with clerk the sponsor of this clone all right so let's Implement a cool modal account page for our application once we click on the icon up here on that page we will be able to also update our image so let's directly start by adding the Expo image picker this will help us to capture an image and then upload this to clerk pretty easily that also means we need a new page so let's do an account. TSX right here and we're going to include that in our routing somewhere also we need to access it some from somewhere I think we're going to use it from the custom header right so in the custom header we do have the touchable opacity already and this is the one I want to Simply rep so hre in this case should go to actually why are I not showing up up here okay because I probably have to save everything yeah this should be account and then as child because we're wrapping it around this touchable opacity uh okay uh authenticated models account does not exist um to my understanding account does exist we we might have different ideas about this uh uh authenticated models SL I don't want this anymore what's going on here today oh my there's definitely there's not just a lock page there's also an account page can't you see it like it is here it is there it is exactly in this place I actually don't know why it's gray because that is that's not looking very very good to me I probably have to run npx Expo run uh I think only in that case it's picking up the new files here that I add so then we got the account page and then I can also close lock and in the custom header once the uh run command finally runs it should pick up that file and generate the new typings for the Expo router under the hood did you mean authenticated models lock no I no no no that's not what I meant I completely know what I meant okay anyway let's open that account page already and get started in here so on that page what I want is I want to First grab some information about the user using the previous hook use user from Clerk and we're also going to implement the sign out here so the sign out is coming from use of another hook here from the clerk package then we want to set the first and the last name just like we did I think on the previous screen so let's say first name last name first name set first name and then use State yeah but we can also use it already with the user value so user. first name goes into this one then we going add our stage by the way clicking this works so this one is happy now as well additionally we're going to add the last name okay so we got that as well and we probably have an edit State because we're going to edit our user so let's use edit set edit and set it to fault in the beginning um let's see if we click on this we're going to go to a full page this is not what we want we want a cool page that is transparent so in our top stack layout navigation whatever you want to call it let's add another entry for the account page and the most important piece here is that I want to set the presentation to a transparent model if I do this it opens this up and we can add a nice blur to the background additionally I would like to make this come in with a fate animation so let's use the animation fade um I will also set the title to an empty string and then I will set the header transparent to true all right so we got a few things already okay good uh now we will wrap our account page in the usual blur view so let's import the blur view from Expo and I want to place this right here around that page so blur view I'm going to set the intensity right away to something like 80 uh style should be like some sort of container styling uh we can also do this ourself if we want to so let's use flex one and uh background color of rgba uh something so I think we used previously 00 0 0 and then 0.5 yeah that's not too bad right um I just don't know how we can leave that view again now uh we probably need to add a button here so let's add to the header left uh one of these buttons uh let's use the logic we had before so something like this in it uh but I want to use the close outline one and probably just uh I mean yeah that's it that's the effect I wanted to see uh I want to use a color white here by the way it should make the button stand out a bit more on the darkish back on okay cool nice good starting point for our account page so on that page we need a few more things uh we need functionality to save the user so on Save user we're going to do something um and then we're going to have a function on capture image which is of course going to capture an image if we now have a user on this page so if we do have a user in that case I want to render the rest that makes sure that we're not failing somewhere along the way so I will start with a simple view style align items in the center um and we probably have to check again what's going on because right now the items are not positioned correctly so if we're not editing which means in the default mode in that case I just want to render the uh different text elements so if we're not editing I will just have a view where I use styles do let's call this edit row so this is going to be like a uh like a row okay edit row goes in here and then add stylesheet to the top and I forgot something apparently to close that one here uh so let's close that view okay so that added row is of of course using up all the space and it should also have of course the flex Direction row and some gap between the items and of course align the items in the center and justify the content in the center as well so this edit row now shows my values so I'm going to have a text view with some styling and within that text view I just want to print out my first name and last name I think I did not set the last name before so I will put this up in Clerk and save it um and right now I don't see anything yet uh that could be for different reasons um I do have a user I'm pretty sure I do have uh my view here has the items in the center and if we're not editing which we're not doing in the beginning we should see something let's see can I see test no I don't even see my label so that's usually a bad sign uh let's see I want to give to the edit row some margin top is it turning up anywhere not really that's not really the casee H that's usually bad that's a bad sign uh we do have a flex on my blur view um I think that blur View o need some pading top we might have the same situation no we don't have a custom header here but we don't let's see if I set this to 100 I don't see anything else yet oh that's interesting so let's see if we give this a background color the good old poorman's debugging well that's that's with console looks but if I give this one a back holy moly AR is this actually coming through at all like where's my edit row what is this am I a joke to you okay this is displaying text so that means I don't have a user uh use user from clerk um uh sorry I should definitely I mean I'm signed in I do have a user at that point why are we not getting a user uh can anyone research this please just do it for me I don't know if I remove this part I probably we're probably going to see a little crash oh my today is one of these days it's uh it's fantastic it's fantastic it's [Music] fantastic okay I have no idea what's going on um I just know that before this I actually want to have a touchable opacity for changing the image we can just put it on the page maybe it changes something um so onpress I don't want to call sign out on press I want to actually call on capture image and I will put in some style here as well um so let's call this one styles. AR okay actually if I call this Avatar we're going to get probably into capture button let's call this capture button where is on the safe side um do we we have do we have Flex one on our blur view just just yeah yeah we do have by the way we can also make this darker I don't know if you I show shown this before so you can use tint as well yeah I think I've shown this so if you make it like this it looks even cooler it looks a lot cooler um so my touchable opacity here should display if we do have a user uh do image URL in that case I want to show an image uh which we actually can't do we really can't do this right now because most likely the user does not have an image yet but we can already prepare for that in the other case this would just be uh a button with a dark background so in that case it would just be with of 100 he of 100 and a border radius of 50 and a background color of colors. gray all right then we'll turn up here so let's justify this in the center um and I think we should again use on The View where's the surrounding View uh the surrounding view is here so we wanted to use align items in the center so everything on this page is going to be centered okay so here we should be able to press uncapture image and otherwise display the image so if we are not editing and editing is false in the beginning I don't know why but I'm going crazy on this one uh align item Center margin top 20 I I don't see this edit row at all at all wow this is crazy this is madness uh I do like font size of 26 here and color where is this text uh even if I don't use the edit stuff this row is not turn it's just not turning up the row is just not turning up uh line item Center justify content Center I honestly okay um that's interesting uh that's interesting because why like why this this uh because I used Flex one up here no because I use a line I I assume because I used a line items Center uh but view with edit row I don't know yeah whatever uh what ises um my edit row I feel like we I I completely messed this one up here U as there needs to be another view around this one uh with a flex Direction row but uh for now I'm most likely confused used so let's just see let's get rid of the stuff here and let's see okay this is my name cool cool story bro um additionally I want to have a touchable opacity after that so I will add this here touchable uh oops touchable opacity on press I want to set edit to True um yeah we can toggle this or we can set it to true and I will use ionicons name let's use I don't know ellipses horiz izontal uh size 24 colors I only use white here I think this usually looks good on that background and then I'm going to close the touchable okay so if I press this I want to go into the edit mode that means in this edit row that I'm in um I will now wrap this one here the whole edit row with if we're not editing I think I now fix this then we're going to have the stuff in here okay so at this point I'll also wrap this now with a whole view of style uh Flex Direction row and just a gap of six if I do this I think it should bring up another view and then we're going to get rid of the problems that we've seen before I think at this point I also need my Flex one again holy moly uh um I I'm I wasn't really the the react native gods are not really friendly to me today so I do have my Flex Direction row here if I'm not editing I will show my edit row and if I probably I'm in the state of editing if I'm in the editing State uh let's let's please please be true oh good good Lord yeah thanks for keeping the state react uh always good um I kind of forgot about that for a second that that it's keeping my state okay in the case that we are editing this these things turn into something else so they now turn into a text input so we can actually change and update the name uh let's say placeholder is first name the value is first name uh the value first name uh or an empty string and on change we want to call set that first name additionally we might need some style so let's say this one let's let's make this an array input field and input field should look something like this didn't we have like an input field styling before I feel like we already did but anyway uh let's use a he of 44 let's use a border width of one and a border color of something like this uh then we want to make a border radius because it's rounded and some petting yes and background color of white okay this is my input field should work uh okay where did I left off uh yeah here so I did have the first text input and we do have uh row setup so I should be fine just adding another one in here this will be last name and then we have last name then we have set last name uh okay additionally I feel like I want to add a bigger width to this so let's use the width of I don't know 140 or something yeah that looks better um and also the button now changes to a check mark so check mark Dash outline and onclick here I want to call save or onsave user onsave user all right let's see we should now be able to update our clerk user data from here so I can now simply try put this in a try catch block await user question mark update and then you can update everything from the user so in my case I want to update the first and last name this is a bit problematic because because those strings could be null so it actually looks more ugly than it should uh so last name like this uh again a bit ugly to be honest uh but that's not the problem of clerk that's just my own problem and we can also say finally I want to set edit back to fault so with that in place I can call myself uh Den uh brov brov you can hit save AB whatever in that case I'm then abrasive um and if I do a Reload of that page and go back it's still showing me this one because this is now the data that is stored in clerk uh I can show you this but I will once again expose my phone number I don't want to put an overlay on the screen again so I mean the data is coming back from clerk at this point so there's no way this could be anything else let's also add the uh image functionality so on capture image this is pretty easy uh there's a block actually from Expo that we can use so await image picker launch image Library async uh we don't have the image picker imported yet so let's put this to the top from Expo I think we installed this right I hope we did um okay so allows editing true quality whatever you prefer we could also do this like 0.75 should be fine aspect whatever and I want to have images yes and then we can check if the result was not canell so this is always giving me the wrong code compleation so if it's not cancelled uh we're going to have to do a bit differently so I first want to create a base 64 string now uh using data okay that was actually correct data image JPEG base 64 and then result do assets at the index 0. base64 and with that I can once again call my user and call set profile image on the clerk user and pass in as the file my B 64 string that's actually pretty nice I can just upload the and update the user with a base 64 image so let's give this a try I'll now click this I will use this beautiful uh flower bouquet um and we're not displaying the image yet right so that could be a problem in in showing you the functionality so for the image let's set the source here to Yuri uh user. image URL and probably some style uh styles. Avatar this is why I reserve the keyword for Avatar right uh let's put this up here that makes more sense and that also breaks more things so Simon has more to work with of 100 hate of 100 border radius 50 uh I also want to make sure that I use the background color gray and if I hit save I get this this is of course not correct um let's see let's see uh data image J let's just do a Reload maybe it's already updated and I just did it wrong actually I would use PNG base 64 but that's just my opinion okay I'm still done abrasive that's not not correct so let's see if I look out the basic user set profile image to my base 64 image overall that sounds good to me let's give it a try uh maybe you're just going to use this one um well data that is certainly not a good case uh oh yeah we should probably say basic4 true in here master of debugging Simon Grim okay we go again I Choose You Charizard here we go uh then abrasive now has I need to call this back Simon grim and I also want to have the beautiful flowers here that looks better I want to have this as my profile okay okay this is not allowed uh sweeping uh maybe it's too big I sometimes also get problems in general with oh I completely messed up something here um with the iOS simulator and selecting images and it looks like I completely broke this app right now oh my devastating um but you can see at least I have that flower that one looks good to me now if you want to build out that view there are a few more things that you could include so uh we could have like a like a little action uh section here on that screen but this is really only UI Parts let me just bring this in we can uh Define a section like this uh so with like cool little background color and opacity and then after the view we had we're going to do uh view with that styling um and then we're going to just put in a bunch of touchable opacity items so let's see we also need an additional button styling for these let's put this down here so this is my button styling and then would have like a little list of things that looks kind of cool on this background they don't really have functionality besides lockout lock out actually does have a functionality in this case so you can try a lock out then you're locked out then you can do like the code thing again I really don't want to do the code thing again right now uh so therefore uh we can no I do we have to call it like this interesting uh so therefore I will leave it as it is and we're just going to do one more thing for our clone now the last customization I want to work you through is how to create a dynamic app icon okay so you can actually change the app icon that's probably known to you but it is really that easy with react native as well so I found this package of course called Expo Dynamic app icon and we can simply install it just like this so let's do this okay let's call and put it in here let's check out what we need to do so we need to put in an object like this Expo Dynamic app icon and then we going to have to specify names for our icons let's do this let's go to my app Json and here we go I'm going to put this in here so we got the icon name we got the path to an icon and then a pre-render option so you can now take the three icons from GitHub and place them in my images or in your images folder so let me bring them in I want to replace this so now you should have an icon an icon Vivid and an icon dark okay and we're going to use these three icons so I want to call these uh give them different names so let's call the first one default this is just icon then we do have dark which is icon Das dark and then we have the Vivid one so vivid uh Vivid okay this is not Clark's style completely but well it should be fine for this case so we have defined our three icons uh by default our app is already using uh the regular icon here so this will be our icon to make use of this we can't just just start npx run Expo again we do have to do a new pre-built so npx Expo pre-built and I want to attach d-h clean because only in that case it will clear Android and iOS completely and copy over the assets that we need uh no such file out directory assets icon that is true this is in images did I not specify this in my app Json yeah assets images sorry about that one um once again Expo clean pre-build yes and that's working a lot better good um with that in place we can wait a second until the kakoa pots are finished but we can also already heat over to the account page so on that account page I want to implement that little switch we can now import get app icon and set app icon from Expo Dynamic app icon so that means we can get what's currently selected and we can set the new one also I will now bring up my reload after the pre-build is done but let's first Define an array of icons that we have available at uh our fingertips so the name for this one will be default and then I will tell the icon is going to use require uh so we can do slash assets oops slash no was correct actually slash assets images icon.png and we're going to do this now again for the two other images that we have copilot come on can't you figure this out so this is dark Vivid icon and icon dark are we still building or or already running in a problem no we're still building that is good news okay let's add a state as well for the currently selected icon so active icon set active icon and I want to use the state um I mean we can use the state default it doesn't matter too much uh I will just add a use effect block anyway which is called in the beginning so once we got that uh I will add an empty dependencies array in here and then I will add a function load current icon preferences uh using an async function and within that function and making sure I call that function within that function I will now get the icon from wait get app icon and then I want to set my active icon okay uh that should work I will also add a lock so we can see what's the current active icon then we probably need a function to change it so let's do cons on change app icon okay what what's what's going on usually you're pretty good now at figuring out what I want to do uh copilot did I make you mad at some point uh I'm so sorry that was not my intention so on change app icon we're going to call wait set app icon set app icon and to set I icon we just need to pass a string so we can use the icon we're going to pass it here through icon string and then I will just make sure that we call to lowercase just in case all right uh at this point if I go here we see icon is default all right so let's see uh and after setting this I will also update my state so call set active set active icon with the current icon all right now we just need a tiny little list let's do this after our block so I will use this block again uh view Styles actions and then I will map through all the icons that we have did I just disable co-pilot or something St stream closed with NG HTP P2 refused I think I broke co-pilot at this point glad this is the last part here so the last chapter for us we're doing this with bloody hands after 4 hours of building this fintech clone we're mapping our icons we do have a touchable opacity I don't know copal it just came back I'm so thankful so the key is icon name sounds good Style Style button okay onpress onchange app with the current name and I don't really want to disable this at all disabling this doesn't make sense to me so then we have the image which is using the icon source and a style of 24 * 24 and the text is using the icon. name actually that sounds pretty legit let's hit save and nice what do we see we see default dark and Vivid but there's a problem oh actually there's not a problem it's just not showing which one is selected but we can now check if the active icon um let's also use to lowercase in here is equal to Icon name. lower case in that case we can render an ionicons name check mark size 24 colors um let's use white and it shows that currently the default is enabled all right if I click on dark it shows that dark is enabled how can we prove this well we can close our app and we see this is it I can now go back into it change to W it and we see different app icon and again open it up go back to default and voila we have the clerk fintech clone app icon in here again so this was pretty easy to set up we just had to connect our icons and then you can give the user a nice selection between different app icons in your application I think this really nicely rounds up our Fint Tech application because these apps are usually about functionality yes but also about a specific style and customizability for example the widgets we can drag around or uh the icon that we can now make our own we have the cool uh crypto we have the API routes we have the charts we have so much going on in this application so I really hope this gave you a blueprint a starting point for your next fintech clone all right and that's it for probably the longest clone tutorial so far on this channel I hope you sticked around with me until the end I hope you enjoyed the process of going through the different seasons the different feelings and of course the different pages and functionalities of this clone if you noce say I kind of like this Simon guy and I want to work more with him go check out galaxies. deev which is my online school to help you get started and work in the best possible way with react native I'm showing you in a bunch of pro courses how you can develop different features and how you can become a react native developer I hope you take away a lot from this clone not only from like the big things but also the small inbetween things like use animated props for an animated text a bit about the gesture Handler a bit about reanimated a bit about react navigation because your applications are not just one feature one feature one feature they are a combination of screens and different features and different UI components and just a lot of things playing together and once you understand this how you can break it down you are actually able to produce the best results because then you can see the things in isolation you can develop small features but you also understand the bigger picture in how you putting these things together so that's my only wish I hope you enjoyed this make sure you subscribe to this channel for more videos in the future and of course also please check out clerk there's a link below this video where you can get started as I said in the beginning 5 hours ago or probably a few days ago because most people watch this on different days uh you can use clerk for free up until 10K monthly users so check it out clerk.com subscribe to the channel check out Galaxy's Dev if you want to become a pro react native developer and I will catch you in one of our next clones or tutorials so until then Happy coding [Music] Simon

Channel: Simon Grimm

Views: 50,118

Keywords: javascript, mobile app development, reactjs, html, react js, app development, ionic framework tutorial, learn react, react course, app developer, react native, ios development, ionic app review, react, reactjs projects, react tutorial, react native tutorial, react native app, full course react native, clerk, reanimated, expo router, whatsapp clone, fintech clone, fintech, finance, programmieren lernen, galaxiesdev, galaxies dev

Id: iDZBeIgcixk

Length: 334min 52sec (20092 seconds)

Published: Tue Mar 26 2024