Building the Formula 1 App with React Native

what's up not just developers welcome back to a new live stream today I have prepared something special for you today we're going to build the Formula 1 application using R native that's for all the Formula 1 fans out there uh specifically for you but I'm pretty sure it's going to be very valuable uh for people who are new to Formula 1 as well so what exactly we're going to build we're going to start by uh this playing a list of races from this season then we're going to go into more details about a specific race we're going to specify the display the details of the circuit and after that the rankings for the race qualifying uh practice sessions and so on so on the front end the Tex tack is going to be made out of Rea native using Expo and also Expo router for the navigation Library this is a modern St back uh and it's going to be very easy for you to get started uh even if you don't have experience with with rack native it's going to be very beginner friendly and I'm going to help you along the way when it comes to the data that we're going to use we're going to use a real API I found one on the internet the API sport uh that provides data about Formula 1 uh races so this is a rest API so we're not going to connect them directly from our client side from react native to the rest API um but we're going to add a very thin graphql layer on between these two between our client and the rest API provided by that public API uh and we're going to do that using staben the text tag for the back end is going to be graphql and staben and we're going to connected with uh a public API this video is brought to you by stepen and thank you very much uh stepen which is an IBM company and uh they are helping us build graphql apis really easily you're going to see later in this video how easy it is to uh to spin up a graphql endpoint by running one single command and graphql takes over and does all the Magic by introspective building our schema and also running our uh graphql API so we're going to see more about that a bit later but now now we can uh get [Applause] [Music] started all right before we get started uh here are some of the things that you're going to need one of them is the step-by-step guide which you can access on our website at nodev projects slf1 and if you go there uh you will have a step-by-step guide here with all the links with all the commands that you'll be able to copy paste from here to easier uh follow along together with me um from this page you will also be able to download the asset bundle which contains some dummy data uh it will also contain the presentation and other materials like fonts that we are going to use and yeah that's it you'll also need a free a stepen account which you can uh create for free following the link in the description below but I'm going to tell you when we have to do that once we get to them to the data so shall we get started shall we start initializing the project here it is I hope you you were able to see something uh anyway here is uh the demo of application uh this is the first page where we'll be able to scroll through all the races of this season and after that you can press on one and see the details here we're going to use uh a top tab navigation inside exper router which is a little bit tricky but I'm going to show you how we can do that and Achieve uh this this way of um the screens anyway let's go ahead and start by initializing our Expo project okay here is my uh yeah to initialize backo project we're going to run npx create Expo application so let me open a terminal first uh remind me later let me zoom in a bit I'm going to go to Project all right so after navigating to the folder where you keep your projects let's go ahead and initialize our Expo project we're going to do that with npx create Expo up uh we're going to do at latest to take the latest version of uh vli command and to use the latest version of Expo and let's give it a name I'm going to give it a F1 name and then DT to select a template let's press enter if this is the first time you are using this command it will ask you if you want to install it so just press yes and on the next screen uh with the arrows uh move down one uh one time until you reach the blank typescript template um and let's press enter this is going to be a blank project in Expo but it will have typescript configured so I think it's uh the best way to to do it like this and later on we're going to manually install and configure exper router ourself so we're going to see how we can do it in any kind of project now it's going to take around 1 minute for our project to uh initialize and while that is happening I want to uh talk a little bit about the upcoming event that we have then not just hack this is a hacka phone that we are running every year and and this year we want to make it bigger and even Bolder so if you want to build applications if you want to challenge yourself and see what you can build in just three days uh you can do that uh at our event at no just hack from 20 to 22nd November um that's going to be the main phase and on 23rd November we're going to have a demo day where you'll be able to present your project the grand prize for this hacka phone for this Edition is going to be a Macbook a M2 so the best project uh out veyor is going to win a Macbook I think that it's pretty exciting and I can't wait to see what applications you guys will build this year because previous year we had uh at the demo day we have around 20 projects and a lot of them continue working on their projects long time after the heaphone so they publish the application they are still uh maintaining it and bringing more users I met a couple of Founders at upgs conference this year and they started their application previous year at not just hack and they were still working on it having users and yeah uh pretty exciting to see this success stories of projects being started during our uh event anyway uh you can find more information about this uh by going to no. dhack all you have to do is sign up and we're going to follow up with more information uh next week we're going to announce the theme so the hacka phone will have a theme um and if you signed up you're going to receive this information there so uh while I was doing that our project has finished uh initializing I'm going to open it inside Visual Studio code uh you can simply open Visual Studio code and then from file open folder navigate to the folder that you just created and open it up there we're not going to need the terminal anymore so I'm going to close that one uh let's open a terminal inside Visual Studio code you can do that at the top from terminal new terminal we're using the shortcut and what I want to do is right away run npm start to start the development server of our application and see see what do we have there after you see the QR code and this menu our development server is running and the easiest way we can see this application on a device is using the expoo application on your physical device uh you can download V xoo from both play Play Store and app store or if you have xcode and Android Studio you can also run them on the simulators or emulators so I'm going to press I to run it on my iOS simulator so that you can also see it here on the right you can use Expo go that's also going to work throughout this tutorial now what do we see here it's going to take a bit of time to bundle the Java script and after that is finished we will see our blank application yes here it is it says open up. TSX and start working on your application in up. TSX this is the current entry point of our application if we change some text here it should automatically uh auto update on the emulator on the right so if that's uh that's the case we are ready to uh to continue uh yeah before we move on uh hello everyone from the live chat how are you doing guys where where are you joining us from today live from Kenya hello maumu uh ad the this year the heaphone will have a theme so you're going to be restricted to a specific theme but I think that's a great way to to get out of a comfort zone and encourage creativity when you are restricted to one specific theme so yeah you can actually vote for the F if you go to the event page there is a link to the voting as well Alexandro salute salute from Romania anyway so now that we have our R native application um I'm actually going to uh Focus right now on the data because the data that we will have available will dictate what possibilities we will have in terms of user interface uh how we will be able to display this data so let's first have a look at what data we will have available and after that we're going to get back to R native and work on displaying it on quering it inside our application so after initializing in the guide we see that uh we get into the F1 API so for this project we will use this API Formula 1 that I found uh they offer a free tier so if I'm going to go to Simply API sport is do what I can do here where is it yeah they offer a lot of apis about sports I think they're focused on football but they cover all of them so one of them is this Formula One uh it redirects us back to the documentation but I wanted to show you that yeah we have a free plan uh with that doesn't require any credit card uh so yeah you're going to be able to use it for free all we have to do is sign up here uh I already have an account you can sign in using Google uh should I do that right now but I think yeah uh I don't think signing up uh and creating an account is uh something complicated and I trust that you're going to be able to create an account here after that you sign in um I have to complete the cap capture and from here uh what we actually need is the API keys so where will we find it somewhere under the account my access so the API key is here on the top so copy it and save it in some nodes for you to be able to use it uh later we're going to need it in a moment so let me open up a new note oh come on give me just one second come on all right all right all right so I have saved the API key here for the dashboard API football going to move it out of the way we don't need it at the moment but we're going to need it soon now back to the documentation where is it uh here it is uh we we're going to see that how we can interact with this API so in the introduction uh there are actually two ways we can query the API using the rapid API service which is a tool to distribute public apis uh were directly from where endpoint from V API Sports I'm not going to go through the r rapid API because for that you need a credit card I'm going to use the API Sports directly with the provider of this data so everywhere uh in our endpoints we're going to use this URL that ends with API dports doio it also needs uh an API key and yeah that's it here is a little bit about architecture uh so what do we have we have races which we we are interested in because we're going to display a list of races The Races they are part of a competition which is a Grand Prix the competition is part of a season and also it VAR is data about circuits and also rankings with their drivers so a lot of data but we're mostly going to be focused on races and rankings so if we go here under the end points we can see there is an end point for the races uh here we can get a list of races based on some query parameters so information about the race can be like uh who was the fastest on that uh in that lab how many laps did it have a distance the time zone we status if it was completed or not so yeah as you can understand it's information about a specific race uh and we're going to need this one for to get data about it we're going to need it on our homepage here so let's see how we can send a request and get this information on this page we can have a look at how we can do that from multiple environments what we are interested in is using this curl uh command which allows us to send a request directly from our terminal and this Cur is part of most of the operating systems so yeah as you can see we should copy this curl command let's bring it somewhere I don't know I'm going to just bring it here you can bring it in some notes not txt and here is the request um so as we can see the URL is using the rapid API and we s that we're not going to use this rapid API we're going to use directly V endpoint actually I'm not going to bother you too much with adjusting this uh Coral request because I already prepared it in our guide so let's go ahead and see simply take it here uh under the F1 chapter we have a first cor Coral request to get uh no it's the second one to get a list of races so let's go ahead and grab this one in our notes and now this one yeah is using the correct API sport um endpoint it's quering the endpoint races and it has two parameters the season should be 2023 and the type should be race not qualifying practice but specifically the Sunday race now for the header the first one will remain the same but in the the second header we need to Prov you you need to provide your own API key so I'm going to take it back from my notes probably I'm going to bring it here so this is my API key I'm going to use it here in this command and now I can copy the whole command from here and paste it in a terminal let's open a new terminal and paste this command here and what we will see is a lot of data actually a lot a lot a lot of data if I'm going to copy this Json and maybe go ahead and find some kind of Json format online uh to see it in a bit different view we see what do we see here some parameters no errors uh 23 results which means that there are 23 races in the response and here is in the response is an array of actual races uh so the first one is Bahrain then we see what Saudi Arabia and so on so that's how we can get data about races in a specific season using this get request and we saw that how we can actually execute this get request using curl by running this command in that terminal as I said we're not going to use uh directly this uh endpoint inside our rec native application and instead of that we want to add a th graphql layer on top of that uh by adding a th graphql layer on top of the external Endo uh so something like this by having our own graphql API built with stepen uh this will allow us to later connect to other data sources not only from the API that we are using for example we could connect with uh our database in order to add additional features specific to our application maybe you want to implement features like adding your favorite driving driver tracking him making some history or even implementing some Advanced features like a fantasy game where you create your own team in that situation you would need some data from the uh API Formula 1 that we will use but some data we will need in our custom database and by having the graphql API built with stepen we will be able to do that easily by simply connecting it with an extra data source and uh steps then makes this very very easy uh we simply run some commands and it connects and it brings the data that we need later we can also create the relations between this data so that ultimately from our client side we can easily query only only the data that we need um on a specific screen from the graphql API without having to send multiple request to the rest API uh that we have there so um that's the theory behind it uh in practice what we have to do is we will get started with steps then and you're going to see that it's quite easy to uh to do that well let's go ahead and first create a free account on staben I'm going to go to stan.com you can follow the link in the description below and you can create a free account there on the dashboard after you create the free account we're going to need to get access to some of our apis API keys so go to the account and here is going to be your details about your account like the admin key and the account name once you're here here we can go to our terminal and start building and creating our steps and backend so I'm going to open a terminal um the first thing that we have to do in the terminal is to install install the stepen CLI command globally so let's go ahead and do npm stepen not stepen npm install come on install DG to install it glob and we're going to install staben uh any idea what are the limits for the free API and any idea how much it cost beyond that free tier I looked and there is no pricing page uh I think that I found some pricing page here um so let's see that's that's a good point so um about pricing of this API yeah let's let's have a look at the bottom nothing No it should be how is it called the main one the main one is football or yeah football the site is the original one is api. comom and on this website they have a pricing page and there are uh plans for the free account we have 100 requests per day and actually we might run out of request per day if we're going to send a lot of requests today by building the application but maybe we're going to simplify by using some um dummy data some some Json uh while we test not to not to get out of this request limit but for 19 and a month there are more requests per day and so on I'm not going to focus too too much on this one um and yeah they are not sponsoring the video I just found them it's they have a quite easy to understand documentation the other alternative that I had is F1 API is this API Pro provided by ER guest developer API but the problem is that they are deprecating it so it's deprecated and will be discontinuing at the end of 2024 still available I think this one is even free uh but it's going to be discontinous so that's why I decided to go with this API football to to use it anyway back to our terminal what we managed to do is to install stepen globally now we can run stepen command like this the first command that we're going to run is stepen login to connect our CLI with our account for the account name go to your dashboard and take the account name from the authentication here for the admin key you can take it from here paste and now you have successfully logged in with your account perfect our CLI is ready let's go ahead and create a new folder inside our application where we will store all the files and configuration for steps in we're going to in the root directory of our Expo project and call it staben now back in our terminal let's simply navigate Veer so I'm going to do CD stepen and if I do PFD we're going to see that we are in this in our project and then inside the steps and directory basically here now how can we convert a rest API to a graphql API using step and with one single command well to do that all we have to do is add stepen import before this command before the coral command that we already tested so simply adding steps and um steps and import we will get what we actually need yeah here below we have um very quick so I'm going to show you we can build it together uh so that you know like every step that we are taking I'm going to move to my notes here and this was the request that we executed and we got data about races I can execute it one more time just for you to see that yeah indeed it answers with some data about the races and now on the steps and side as I said we will take the same C command and we will simply put stepen import at the beginning now all stepen is not is doing is executing the coral request to this API and then analyzing the response to understand what data it returns and based on that it will create all the queries and schema that we need um instead of telling you let me actually show you the other uh headers not headers but other parameters that we need to send here is something related to naming conventions and there are a couple of them for example uh I have them here the three parameters the first one is query name uh and we're going to specify races query type race and the name races um if I I will show you in a moment how this maps to step them file names or folders or types and so on but yeah that's basically what we have to do add steps and import at the beginning some names at the end and then we take this command back in our terminal make sure that you're still in the steps and directory and let's execute the steps and import command uh for me it's not going to work I already see because I forgot um here at the end of this line I forgot the slash because this is a multi-line command and after every line we need to put this slash so let me delete it and paste it again now if I'm going to press enter uh step then will ask how do we want our end point to be called I'm going to go with a default one and we see that in less than a second stepen already created our graph quel schema I'm going to go ahead and do steps and start to start our development server and then I'm going to show you some of the files that it generated when doing steps and start what's happening behind the scenes is we are deploying our API to stepen and then this API is going to be accessible through the internet um in one easy command what we can do from here is where we see explore it with graphical press on this URL and it will open in browser it will open here in browser and it will already have a prepopulated query if we execute that query uh we see that the season field must be filled yes we need to provide a variable here for the season is going to be 2023 type is going to be a race and if I execute now we see in the response all the data about the races and we can even adjust like exactly what data do we want here on the right we see the Builder of this query and at the moment it only has information about the race but maybe you also want information about the circuit like ID image name or maybe the competition and the location like City Country maybe you also want to know the the fastest laap and who was the driver you can do that by selecting the fields here they will appear in your query on the left but when you execute now the response will contain also data about the circuit the competition like the country where it happens the fastest laap the number the IDE of a driver that had that fastest lap so as you can see we already have this graphql API that is public accessible we can already start integrating and quering the data data executing these queries inside our re native application to get information about the F1 races in a specific season so yes to to summarize uh all we had to do is after we had the C command returning the data that we need all we did is uh appended steps and import and the front of that Coral command and provided a query name query type and the name as as extra parameters now let's see first of all what actually happened what new files we have in our project and to do that we're going to go into the steps and folder everything starts with the index. graphql and this is the F the entry point that combines all the other endpoints that we have as you can see it all only mentions the file from the folder folder races in this races we have another index graphql and and this index graphql is specifically related to the endpoint that we just imported the the steps and import that we created is this races uh index. graphql the name that we provided as a parameter is the name of a folder races the query type and query name you see races is going to be if you scroll down we get to the actual query that we execute to get the data about races the name of the query is called races we could also call it get races and the return type is race so these are the parameters that we added here to step Zen Now using the rest um Handler uh it connects this query to the endpoint to this restful end point it also adds the the necessary headers for our API which could also be extracted to configuration files if we want uh and yes then it analyzes the result and we will see that above here is all the types that we need automatically generated for us without us having to write any single line of code so here is the type for the competition for the circuit for the fastest lap races and so on so quite powerful isn't it um anyway that was our that was our first imported API end point uh and while we're still here let's try to do to import a second one uh and the second one that I want to import is for the race rankings query so there is an endpoint called ranking ings and let's look at the documentation on the API Sports uh this is the rankings and there are other sub uh endpoints subdomains let's say not subdomains yeah uh end points inside this rankings what we are interested in is to know the rankings in a specific race so this one is the rankings SL Ray we need to provide them uh query parameter called Ray uh this is a required parameter and back we're going to receive the position of all the drivers on the grid in that specific race so the same step that we had before all we have to do is run these steps and import command let's go to the notes I'm going to add it here maybe with a comment import uh rankings and this is going to be the command we're going to do a get request the URL is this one with at the end rankings SL races it will provide the race query parameter the API key should be replaced with our actual API key this is important uh the query name is going to be race rankings and so one and the only additional field that we added here is the prefix rank we're doing this in order to not have type collision between this one and the previous import command that we executed so let's copy this import command to import our second endpoint uh I can stop our steps and server for a second and import the rankings and Point successfully imported I can go back and do steps and start uh we're going to see that in the steps and folder we have a new race rankings folder with the query to get the race rankings now our project is running and if we go back to the dashboard to maybe documentation under the query we're going to see that at the moment we have only one query races but if we refresh and press on the query there are two of them there are race rankings and races so now in the Builder if I'm going to remove this one and add a new query for the race rankings I need to provide here the idea of a race I I can go with I don't know 80 maybe I don't know any number and then we want in the response what the the the race ID the team no maybe the driver ID and name and let's do also position if I execute this query we see Louis Hamilton first one valter botas second one Sebastian vettle thirdd one and so on so perfect now we have another query that can give us data about the race rankings I think we have a lot of data to get started on our UI and later on maybe we can import more or I will also show you how we can connect two separate queries using steps and uh in order to be able to execute one single query and get all the data that we need and we will need that in order to be able to query the race and get their rankings at the same time at the moment we cannot do that we're going to have a race ID and then we're going to have to execute another query to get the race rankings but that's exactly why that's exactly why we are using graphql in order to send only one request for in order to get the data that we need not having to send multiple requests to a rest API anyway so uh our API is ready for us in a moment to start working on it and quering it inside our R native application but as I said before we do that let's now focus on the user interface let's work for a bit with some dummy data and then once everything is ready we will be able to connected to our graphql API using Apollo client pooll client is a library that allows us to query and cache graphql data easily and we're going to use it in our rect native to query the graph API that we just built uh but yeah as I said the first step is going to be to uh work on some user interface cuz at the moment our user interface is quite boring uh and we're going to start with our home screen on the home screen this is a list of uh races and it contains information about the date when it's happening the round the name of the the country and then the name of a Grand Prix perfect let's do that uh what you can do is you can uh build a query that gets exactly this data here for example for the races for the season I'm going to do 2023 for the type Ray and in the response I can include for example the what did we need there something about date yes we need date we need the competition location like country and also the competition name the Grand Pre name and that's it maybe season and if this is the data that we will need on the homepage date round name name yeah we can execute this query and we can copy this Json data in a file for us to to use it to build the UI if we copy exactly this uh the the data structure of this response it's going to be very easy for us to swap where we are getting the data from Json or from our API but it will allow us to move faster uh while developing the user interface if you're lazy to create all of these queries yourself and you want to to work together with me using the same data then I prepare for you uh in the asset bundle that you can download in the description below I prepared the dami data that I'm going to use so here is the asset bundle for myself in the assets let's go ahead and in the assets add the data here now inside the data there is the races Json and it has the same structure as you saw previously with the response which is an array of races I have here a lot of data I basically took all the data that is available but yeah let's go ahead and start working on this what do we have to do we first of all where we're going to display this let's start by doing this in ab. TSX as we are still working on one single screen and later on we're going to see how we can add uh how we can install exper router and create multiple screens and at that point we're going to move some of this code in their uh right place but now for Simplicity let's start all working in up. TSX here what do we have we have a text with Hello uh and what we actually need is we need that to import the data about races so races response equal or import from we're going to go to assets data and races now because this RAC is Json it has like a lot of subobjects I'm going to extract the array of our races from this object by accessing the races. dat. r do response sot data do races dot response and if we hover here we will see that the type should be an array of yes an array of races now what we can do with this races we can use a flatlist component to render at least at least a scrollable list of races on the screen just for as a reminder this is the screen that we're trying to build uh I'm going to zoom out a bit so that you can see it um yeah it's a list of races so as I said using a flat list imported from react native let's go ahead and below this text let's render the flat list it's going to be a self-closing tag because we don't need to put anything inside it the flat list will be managed using properties and the two properties that are required is the data which should be an array of things array of data that you want to display our array is going to be this races now it also needs a function called render item this function should specify how should one item of this array be rendered on the screen that's why as a parameter we're going to receive that information about the item that we want to render and back we're going to return some GSX some some text or some view let me return a view I want to put it from New Line like this oh come on oh no and inside this view what I want to do is have a text with I don't know hello initially so right away we see a lot of Hello hello hello on the screen but if we take some information from the item itself an item here being one single object from the response array like this so what we can do is we can take the country of the competition right because that's what we're rendering there Brazil mexic yeah so to access the item we're going to add the cly brackets here and access item dot it's the competition then location. country and just like that we have a list of countries here perfect uh I'm going to clean up a bit for example I'm going to remove a text hello from from here and in the Styles container I'm going to remove both align items and justify content from here and maybe even the background color just like this and as you can see the first items they are displayed be below be behind the uh the time and the Notch and so on that's called the unsafe area so usually we don't want to render there something that the user should be able to read something critical that's why we have a component called safe area view so if we replace this view with a safe area view imported from react native make sure the closing tag is also safe area view in that case the content of the safe area view will be displayed in the safe area like on the screen and not behind the Notch and so on perfect uh um now what I want to do is I want to extract this render item into a separate component let's do that inside this file and a component in react and react native is a simple function so let's define the function as race list item and what this function will return is exactly this GSX The View with everything now at this moment we don't have the item here and we're going to take it from the properties like this item now the last step is here in the render item we can simply render the race list item and we will send through properties the item itself and this way we have a same behavior but the logic about rendering one item in this list is in a separate function and this way is more reusable uh better split into into custom components and it's going to be easier to grow this and work on this race list item one more thing is that uh if you want to get type recommendations here uh because at the moment the item is of type any we can specify the type here by providing uh the object type should have an item which should have the type of One race right so I'm going to say type of races at position zero now our item has all of this information so it's going to be easier for us to get a to complete like this perfect let's go ahead and um first maybe display all the information that we need or all the items that we will need and only then let's go ahead and work on the styling or no let me actually set up a little bit the structure for with styling and because yeah actually we already have a style so I'm going to only add the item container just for us to have a visual representation of where what what are the components for one single item and for the item container I'm going to Simply do a podding five or maybe 10 a margin five and a background color of white now let's assign this item container style to the view for our race list item item by sending the style styles. item container all right now we see it and the background color of this one should be how is it called like there is a a name for the color white smoke yes so now the background is with a grayish color and the item container is with white and we can easily see um where the the Box box of one single item now that we have that as I said let's go ahead and render the information that we will need and after that think about the styling so for the information the first one is something about the date something about the dates right how do we do that um I don't know let's start with text here for for example a hardcoded 03 05 and below it is going to be another text for the month for example November okay then we have here round 21 that's another text we're going to put a lot of texts here round 21 uh we're going to put the hardcoded text then we're going to style and then we're going to think about how to have them Dynamic and below is the country name we have it already but below that is the name of the Grand Prix so I can copy this competition location country but this time I don't need the location I don't even need the yeah I don't need the location I need the name of a competition and the last line should be yeah B in Grand Prix and as you can see in the actual application it also has like Formula One in the beginning and the season at the end something like Formula 1 uh 2023 Formula 1 Marine Grand Prix 2023 perfect the last thing on this screen is the icon right so with icons we can use Expo icons which is pre-installed in our our Expo uh project and if we go to the icons. expo. FYI we can search for icons for example I can search for like an arrow to the right uh I'll go with this one from an typo so let's first import this um this font here for Vector icons and then render it this way at the end of our item container yes we see the icon on the screen everything is perfect all right so we have a lot of things to style here now that we have a data well first of all um for the color what are we going to do with a color let's go ahead and see what color is actually being used here and add it as a global constant I don't have a source folder yet but now is a good time to create it so let's create a new folder called SRC for the source code I like to keep all the source code in this directory then we're going to create a new folder inside it called constant and inside constants we can create file called colors. TS from the Colors Let's export uh const primary and the primary color is going to be this one Ed 0500 now in our app. TSX let's go ahead and import our colors import color from Source constants colors and what we need is for our icon for the color here instead of this one let's give it a variable called colors do primary is that correct no no no no for the colors let's let's let's Let's uh export instead of this let's export a v a variable colors that is going to be an object with a key primary primary double dots is this one so instead of exporting a variable primary I exported a variable colors and inside it it has a primary key now back in up. TSX where we import we need to this structure the colors because that's the object and now our Arrow actually has our red color that we selected there perfect uh now we have a color what else do we need oh a lot so let's start by assigning styles to all our texts and then going ahead and actually styling them for example this one is going to be style dot uh date date date uh let's copy it from here and for the second one is going to be month uh then we can call it round uh this is country and the last one is is I don't know um description can be like this okay so date month round country and description where we're going to have to add all of them as objects here in our Styles container so date is going to be an empty object month is going to be an empty object uh what else round country round country and description description well for the country that's already like a very very large font font size 20 font weight bold all right that's already better uh for the round that is displaying above the name of a country the color is going to be also red so let's use colors do primary that's the red what else the the description is going going to have a grayish color maybe dark gray no dark gray uh deem gray yeah maybe that's better um let's work a bit with alignments with positioning all of these texts around our container because right now all of them are displayed on top of each other what we actually want is a free column uh a free column layout for this uh item container where the First Column is going to be about the dates then the the actual details and the last one is going to be the icon so in order to well first of all in order to align the items inside this item container in order to align all the Childs here to not be in their own row but to be in the same row what we should do is on the parent container which is the item container we can add a flex Direction here we can say that it shouldn't be a column it should be a row and if you do that now all of the data is displayed in the same row that's not exactly what we wanted we wanted to display in the same row but at the same time group some of them together ever again for example the date and the month they should be grouped together into one single column in our row to do that these are the two text box that we want to group together let's simply put them inside a view so a view that starts here and ends after the the group and just like that these two text box now will be on top of each other because by default the flex direction of a view is column so by simply putting it here inside they will become uh they will be displaying different uh in different rows with a flex Direction column but in the main container they will behave like as a group and will be in the same line with other child here well we should do the same with the next three text boxes which is the middle container let's put them in into a view to group them together as well just like this and now yes they are they are exactly how we wanted them to be the the last one is the the icon right well if we want the icon and the other items to be on the same align on the same horizontal line what we can do is that on the container that we added Flex Direction row we're going to align items on the center and this will put the icon and the other containers on the same horizontal line now what we actually want to do is we want to make sure that this and typo this icon is displayed all the way to the right of our container but because the middle container has a currently has a dynamic wave then the last column is always in different positions what we can do is we can say that the middle container should take all the available space and only leave a necessary space for the other two containers to do that we're going to attach a style here to the middle view with a flex One Flex one means take all the space available in the container and this will actually push our uh icon all the way to the right and the middle container will will will be the whole weave of of this available space okay okay okay we're getting there slowly but we're getting there uh I think what else what else I think that top view we will give it a a style because it needs some spacings maybe some borders so this one will be Styles dot maybe dates container let's copy it and it's going to be right after items container so dates container is like this in the DAT container I wanted to add maybe some ping 10 just to add more spacing um maybe margin right 10 and it also has a border so border right uh with let's set it to one and Border color is going to be gray or maybe a lighter version of gray called gains borrow yes that's exactly what we wanted like this now in that date container as well we want to align the items in the same vertical line well because they have different different Flex directions uh we're going to use the same align items here in the this container but in this case it will align it on the same vertical line and now the month is going to be from the not from the beginning of a row but from the it will be centered perfect now this the display of this month how can we achieve it we can achieve it in two ways by either wrapping this text inside a view and having a background color for The View with border radius and so on or we can try to do that directly on the text component for the month um on the month style so if I go to the month here what I can do is I will start with background color um also the gains borrow like a very light shadow of gray now I can also add some pting here uh and it's going to be different the pting vertical is going to be less like three but pting horizontal should be more to have more spacing on the horizontal like five maybe even 10 okay uh also we can make the make this spill with round corners by having border radus uh 10 nothing will change uh because without hiding the Overflow uh we we basically still see what's overflowing from the container so what we have to do is say overflow hidden and this will hide what's overflowing and we'll take the shape of that we provided here with border radius I'm not exactly sure sure if this overflow hidden is working properly on Android so if it's not working we simply uh go go to the solution by wrapping this text inside the view and adding things like border radius background on The View and the rest of the Styles like uh font color here can be gray but a darker slate I don't know uh dim can be like this and font weight for example bolt okay okay that's good and we can also add some margin ver uh not margin vertical but margin top like 10 maybe it's too much five to have some space between the date and the month now it looks kind of similar what else do we need there well I think the next uh the next one well we can also make round borders for the whole item container border radius five or maybe even 10 H I'm not sure if you can see but it's barely visible but it adds a very nice nice touch to it and another thing that we can add to make this user interface pop is to add some Shadows adding shadows in react native is a bit tricky but I always go to react native Shadow and there is this Shadow generated generator that you can simply adjust how much Shadow do you want I will go with depth one and copy all of these styles on iOS it only needs this elevation but on Android it needs Shadow color offset opacity and so on so now it will look much better it all the item containers will pop uh on the screen nice perfect uh what I'm going to do right now is let me go ahead and do G add get commit uh this is going to be uh unit step Zen and also races UI um yeah all right so we have good progress uh I think the next step step that will make this user interface really pop is going to be to use the uh the Formula One font that you can see here on the user interface before I do that I also want to show you how we can export the this component to a separate file we de developed the race list item component in the same file with our up. TSX the rule of um is to have one component per file and this way you keep your files smaller more reusable and easier to manage so what I'm going to do is in the source directory let's create a new folder called components and inside here let's create a new file called race list item. TSX now in the race list item. TSX let's bring the actual race list item component from here going to bring it to to our file and as you can see a lot of things are missing here usually what I do is I copy all the Imports I bring them to the new file and I will delete the ones that I don't need at the end also the import of colors is a bit different we need to go One Directory up then into the constants then into the colors uh when it comes to the Styles we are still missing them here I do the same I go back to up. TSX I copy all the styles from here to our new component and I simply delete the one something that I don't need for example I delete the container because container this is about up. TSX everything below from the item container is about this race list item now you can well as you can see it also need these races so I can I probably will also import this two there just to take the type which is a bit uh not the not the best probably later we're going to Define our types ourself but now we are inferring them from our Json file uh I want you to save it now we can clean up a bit here here inside our race list item we to delete the Imports that we don't need and we have a very clean file we should also not forget to export default this function to be able to import now in our app. TSX because now there is no race list item and our application will fail but we can import race list item from Source component race list item and we are back to to how it was before I'll clean up a little bit the race the up. TSX and specifically the Styles because we moved all the comp the component about an item we moved it so most of the Styles here can be deleted actually all of them except the container um now we can also delete some of the things that we don't need here I'll move import a bit to the top and I think that's a much cleaner app. TSX file it only has a a flat list that renders that uses the racist data and uses a custom component to render it on the screen and we have it scrollable like this let me commit it uh you're going to have access to the source code code um at the end I'm going to provide the source code for everything that we are doing and you're going to find it in the description below you can also move from commit to commit to see how the application progressed custom component nice how is it going guys uh let me see if I have a questions from the live chat in the future please teach us how to build re native application using tdd approach test driven development in um yes if you're interested in more advanced um things about building fullstack mobile applications make sure to check out our Academy Academy at nojust dodev where we teach react native and building full Stack mobile applications with r native with Expo with AWS amplify we teach it very very in depth very practical we have more than 40 hours of content and more than 650 happy users so yeah if you're interested in more advanced stuff if you want to get to the next level then definitely check uh check out academy. noas dodev if you want to give it a try to see how our courses are structured and built we also have a free master class that you can join also we have a link in the description okay back to the questions how do I customize stying with Amazon Cognito this is very off topic from today's tutorial but I'm going to answer shortly with Amazon Cognito you uh you are not required to use V pre-built user interface what you can do is build your own screens for the authentication and then simply connect it with the off of API directly we have a tutorial on that uh also for free on the channel if you're going to search the authentication flow there are a couple of videos where we teach you how to build the screens how to add form validation and also how to connect it with amplify uh say is saying hi there I will join when just hack 2023 cannot wait to attend the event awesome I'm excited for that uh I see that I forgot to to update the asset bundle uh let me do that really quickly right now just for you to also have it um I uh I forgot to update the the actual downloadable file so let me go here give me just one second and then we continue with our user interface the next step is going to be interesting during the next step we're going to load phone custom fonts to make our UI pop okay yeah the it was from the old project from the AI uh live streams F1 bundle save yeah I updated vet bundle so now if you download it again you're going to see the the data that you actually need is there a git rapper already I haven't created it I haven't created one but if you're really curious to follow along with me let's go ahead and create it together because it will take us literally 30 seconds uh and not just Dev F1 F1 up with react native and IBM staben it's going to be public create let's connect it inside our repository and let's do git commit not git push get push origin main now it should be there and and I can also update it I will paste the the link in the comments and in the description so yeah the the GitHub is already there by the way but it's a very long shot if there is anyone who who feels comfortable writing some documentation I would really appreciate some help from our community with readme files for our projects so if you want how you can help us uh if you send us a pull request with some uh documentation in the r me of how to run the application maybe a link to our YouTube guide I'd really appreciate it I really don't have time to go there but it's it's helpful for people to to know how to get started what's the project about what tools it uses what what they will learn and so on so should I quit why should you quit let let let me see the the previous question questions Android Studio is tough is react native easy yes Rea native is much more much easier than native Android development I remember in like years ago at the University I was um I was learning like Android development and it was a nightmare to to Bas it was feeling that I always had to basically copy paste a bunch of code without have without understanding like just for to make the application work just to change a color or something there with r native for me personally it was much easier maybe because I was coming with a web experience maybe some experience with react GS but that's not mandatory like go ahead try to follow one of these tutorials and see for yourself also uh to get started if you're if you are uh to get started make sure to use Expo because with Expo you don't have to install Android Studio to build your Android application you can write away execute and run the application using the Expo go on your physical device um take a break if needed thank you very much uh we're going to continue actually yeah yeah people feel the same just copy and paste yeah maybe maybe the resources um I was not using the right resources or I don't know but now I'm trying to to explain like everything all the lines that we write here so that you have a much easier experience following along our tutorials and I hope you you actually enjoy uh if you've got until this point um that means that probably you you got something out of this tutorial and I wanted to ask ask you um a favor and I'm going to do that after finding this this one here I want to ask you a very small favor if you enjoy the tutorials if you learn something new today make sure to consider subscribing to our Channel we have a goal for this year by the end of the year to reach 100,000 subscribers we are currently at almost 85k and in the last three months uh we are 10% uh ahead to to to reach our goal so yeah I it I know it's possible because 99% of people watching the video is not subscribed I can see this in the analytics and if you can take take one second to press that red button it would mean a lot to us and maybe we can reach it uh by the end of a year anyway thank you very much and back to our tutorial um so as I was saying uh the next step for us is going to be uh to add custom fonts in our application because as we can see um yeah there is a very distinct F Formula One font I found one uh and I'm going to provide I'm going to give a credits where I found this one um wait a second forgot to to add them I'm going to give you the the source of the font that I found oh I'm getting lost in all of the all of the pages but here it is and I should have the F1 assets.com fonts so this is the website F1 assets.com fonts you can download from here the the the font from F1 I'm not actually sure if this will official ones or what's up with this one yeah it's not affiliated with F1 so I'm not sure what's what's the details about this but this is for educational purposes only uh make sure you credit them if you're going to use this in production uh um you'll you you'll also find them inside the uh asset bundle F folder that you can download from the description below so here is the folder with the font with Formula One probably I will delete them from here so you can always come here to download them but let's import them to our assets folder let's go ahead and import them like this so here we have around five or six fonts for Formula One for regular wide bold and so on in order to load them in our application we're going to use the Expo fonts library with Expo fonts Library we can um load fonts in our application and use them um to for for for our texts and to install it we're going to start by running npx Expo install Expo Das font let's open the terminal clear and do npx Expo install Expo font now here is a small documentation on the usage of it what are we are interested in is in this hook called use fonts so if I'm going to copy it here and add it to our application our application let's add it here and the use fonts will be imported from import use fonts from Expo fonts how is it called Expo font now we need to provide the uh the path to our font so if we are in up. TSX there going to be assets assets fonts and then the name of a font the name of a font let's start with formula one black so let's call it formula. ttf and the name we're going to call it F1 black now after our font is loaded we can use this as a font family for the texts that we want to to display using this Formula 1 black font let's test it out by going into the race list item and for example for the country where is the country country for the font family let's use F1 black all right we see it already here it should work um but at the same time it might fail for example if you refresh the application you're going to see that the font is not displayed and there is a error saying that there is no font called F1 black that's because um the font has not loaded yet and we are trying to use it so a way we can uh do that is we can as long as the font are not yet loaded we can show an activity indicator so we can say if fonts are not yet loaded don't render the flat list that needs the font but simply return or render an activity indicator imported from react native activity indicator is a simple spinner and now if I'm going to refresh we don't see this spinner because it's very very instant but at the same time the application works and the the application is rendered only after the font has actually been um loaded this this is a very primitive way of doing that uh in the documentation of Expo font what they are doing is they are using the splash screen to load the font what do I mean by that they are preventing out to the splash screen to automatically hide and they wait on the splash screen as long as the application is loading and as long long as the fonts are loading only after that we are manually hiding the splash screen so this is another way of doing that but at the same time we are still doing this return all if the fonts are not loading so this is an extra step if you want to show the splash screen while loading the fonts well we have a lot of fonts there so instead of uh going instead of writing them manually I'm going to look at how I did that previously so inside our layout these are all the fonts that we will need well I'll have to remove some of them here so there is the F1 black bold metallic regular and white perfect let's go ahead in our race list item and start using this font inside our application so as we can see here for the name I think black is too bold so we can go with F1 bold yes that's much better we don't even need the font weight bold here because the font family is actually a bold font family uh for the date and the month well let's start with the month font family one what should it be F1 bold Y and for the date it should be the regular font family F1 regular yes and now the dates are also display properly for round 23 that should also be F1 regular so round uh it should also be F1 and for the description we're going to leave it uh by default we're not going to change it to F1 and what else uh while we're still here the the country that is being displayed here I think needs some vertical spacing so margin vertical five will do its job I think yes it added more space maybe even more like not 10 but seven Yep looks good looks good to me and looks quite similar to how we intended it to be okay awesome so this was our custom fonts and I'm going to go ahead and go get add git commit minus M Uh custom font I just realized that we went to the custom font but we are still rendering here some hardcoded data for the dates that's why we're doing that because um to actually render the these based on the the date that we receive from the item which if I'm going to console log item dot date or maybe not even console log but render it on the screen for example after this 2023 if I'm going to do day maybe maybe in a new text all together we're going to see that we have a date which is a string uh the date of the specific race when we have to work with dates we can basically par it to a JavaScript date and manually like format it and so on but the default JavaScript uh JavaScript date class doesn't have a lot of uh ways we can format it and so on so that's why to work with our dates we're going to use a library called day GS so let's start by installing it in our application by doing npx npx Expo install day GS let's go ahead and import it at the top of our race list item component from dgs and what we can do now is when we display this item. date we can parse it first to dgs and then we can do a format for example year Dash month Dash day and this will show it with the format that we specified if we only get leave here the mm this will display the month as a number if we do three M I think it will display it with yes it displays it with um letters you can learn more about this in the mation of date.js for displaying so you can see all the formats that you can apply uh but this was leading to to the fact that now we see that month as a threel abbreviation that's exactly what we need in this left container so I'm going to copy it from here here and I'm going to put it instead of a nov hardcoded text in the left container and I'm also going to remove it from the main container it was only for demonstration all right now the month in this container is dynamic for for all the items should I do it like this so that you can see better or is it okay for you uh the same thing is with the dates well the target date here is quite easy because we what we're going to do is something similar to this one we're going to parse the date with dgs and we're going to display it uh by formatting it to DD which stands for day 05 yes uh but now we see that the second number is correct the first number is not correct well that's because we we don't have information about when the weekend started uh we only quered the races from the season and we know that the races are usually on Sunday and the weekend starts on Friday so what I can do is I will take the same proper the same structure in the first date which should display 05 to 05 but if I'm going to to First substract here two days now it should be 0305 so this is a little trick uh just because we know that the the race is usually on Sunday and this is the date of a race uh we're going to display that two days before the race as the beginning of a weekend which more or less should be okay so now our dates are not hardcoded we are actually d dnamic what else round number 21 for the round I think we're going to Simply receive it as a property here round let's specify the type of round that should be in number and we're going to display it as round here it's going to fail because if we go back to up. TSX we see where we render the race list item we're not yet sending the property round if we're going to send it as two then all of them will be round two how can we understand which round was that first of all I think what we should do is we should sort all the races based on their date because right now if we're going to look here console log uh races dot I'm going to only display the dates map if we're going to look here we see that it's ascending so it starts with month March 03 03 04 04 and it ends with the latest ones 10 and so on so what I want to do is I want to First first sort them by date in descending order I want the latest races to be on the top so sorted races is going to be equal to races do sort the do sort method on an array expects a function that will receive two dates date or race one and raise two now we need to return a negative number if race two should go first or a positive number if rate one should go first we can achieve that by simply transforming the date of race one today's GS today GS r1. date and then taking the difference to the day GS of r2. date so we are calculating the difference we need to make sure to import where is it no no no no no to import D GS at the top in ab. TSX like this and now our sorted races should be sent to our flat list nothing changed I think we just simp simply have to revert first here to be R2 and second one to be R1 and now we see that we start with the latest Race November November November October and so one and now we understand that actually the last race in this list should be round one and the first one should be the round 23 let's say so how we can do that we will take there is the index property that we also receive here which represents the order of the item in the list so if I just use it we're going to see 0o 1 2 3 I actually want the 0 1 to three to start from the bottom so I'm going to do sorted races. length minus index and this way the first one is going to be one two three and all the way until round 23 perfect amazing now our races are sorted the the round is dynamic country is dynamic description is dynamic everything is dynamic maybe even the name here can be I'm not sure if we we queried in the dam data races if we quered the season yes we actually did so even the season can be dynamic here instead of hard coding it by using item dot season yes Dynamic awesome so let me go ahead and do get ad and this one is dynamic fields for races in the list I'm going to also push it so you right away have access to it okay think the main screen of our application is finished looks pretty cool to me um and I think we are ready to move to the next one but actually before moving to the next one uh to the next screen in our application we're going to have to to to set up exper router for uh as our navigation Library we're going to use exper router which is a file based navigation library to create different screens in our application and to navigate from one to another and that's going to be our next step after which we're going to to get into more details about building the rest of the screens for the details of the race by the way I didn't ask you guys are you a fan of Formula 1 are you watching Formula 1 let's see let's run a poll I started watching F1 previous year while we were going through coid uh yes and we we said let's let's give it a try and watch it on Netflix we started with a Netflix show and if you are not familiar with Formula 1 I highly recommend to start with Netflix show the drive to survive and after that like you're going to fall in love with it and this season we are already following it every single race every weekend we're watching Formula 1 Danilo thank you very much daniil hello how are you doing are you building the app with the latest Expo file based navigation uh Revan is asking yes we are building the application using exper outer and you are at the right time because at the moment we are getting into this we will use expor outter we will set up in our project and we will start adding multiple screens navigating between each other and so on what is all about the this build we're building the Formula 1 application so far we have a first screen that displays a list of races and now we're going to go ahead and start displaying the details of race over races let me grab a coffee and I'm going to be back and we will continue with Expo router for [Music] so we are back and we are continuing our Formula 1 build um as we are getting into the second part of our build should I put some music what do I say guys try to add some music not to be distracting one two three let me know if it's not too loud Jasper is asking just wondering you what country do you live I live in Spain on Canary Island then all right guys so let's continue as I was saying the next step uh I think I did this transition too many times but the next step is going to be to set up export router in our application because we already have a first screen ready we need to add M more screens and for that we need an navigation library to be able to create the screens and to navigate from one to another for this we're going to use uh as someone mentioned here the new Expo file based navigation system and which is called export router let's go to export router introduction and uh let's go ahead and right away to the installation in a couple of words if you don't have experience with exper router this is a file based navigation system this is something new Like A New Concept for react native applications but it's not New Concept for web applications for example um and the way it works because it's a file based navigation system we simply create files and folders in our project and it automatically creates screens in our navigation stack in our navigation three then we can simply navigate there and Export router the navigation in exper router is happening very similar to how it's happening on the web based on links and these links are built out of the names of the files that you create so it might sound a bit complicated initially but it's really easy Once you understand the basic concept of it and then you start using it uh in your application um another important detail to mention here is that export router is built on top of Expo or of Expo outter is built on top of react navigation so so if you have experience with react navigation you're going to see that some of the options some of the parameters they the same as in Rea navigation and additionally we can also integrate some other Navigators and that's also something that we will do later we will integrate the material top tab navigation from react navigation inside exper router so yeah um enough Theory I'm going to explain more as we do as we Implement everything so what we have to do is as I said let's go to the uh documentation of routing and under installation where the quick start is using a template but because we don't we want to manually install it in our application we're going to follow the manual installation guide here so what we have to do we already have an application so we're going to go to the second step to install dependencies let's copy this command and back in our project we're going to install the dependencies like Expo router re native safe area context and other dependencies of Expo router Jasper must be a great place I'm from the boring Neverland for from a boring Netherlands why boring I studied actually in Netherlands I lived there for three years and when coid happened and then I moved back to my home country mova so yeah Netherlands also holds a very special place in my heart we we go back there from time to time and it's such a Nostalgia from University years like I don't know uh Netherlands would be the the second option if I decide to to move from from Spain I inan the next option really love it except the weather everything is perfect there a little bit loud thank you let's keep it like this so we have a dependencies installed let's go back here let's go back here and what do we have to do to to set up the entry point so the entry point is the main uh the main field inside package.json so I'm going to copy this line from here back to our project in package.json there is already the main and let's simply replace it with the export router entry now we need to modify project configuration to add the scheme of our application in app. Gs this is done in order for Expo to automatically add deep links to all the screens that we have uh you can adjust it here to specify your scheme for example um not just F1 and then the URLs or the Deep links uh the Deep links will look like not just F1 then I don't know uh race is one two three this would be a deep link we're not going to get into a lot of details just add a scheme with something that represents your project and we can move on uh we are not developing for the web so we do not need the rective web however we could install that uh and the last thing is the B.C config we need to add the plugins line so let's copy plugins in b.on config we add the plugins under the presets and if I'm not mistaken that's everything that we need to do now I'm going to stop the development server and let's start it again uh I would also encourage you to start it by adding dash dash space-- clear this will uh clear the cache the the Metro cach as we can see here bundler crash is empty rebuilding this is just to to make sure that everything is clean fresh and so on especially it's useful when you you install like some some bigger libraries that effect like the the execution or the the architecture of your application so what's happening here let's run it to Expo go and we are greeted with a welcome screen from exper router uh that's because we as I said exp router is a file based navigation system and the way it works is it looks at files that you have in a special folder called up and those files become screens now we don't have any directory called app you can create one by pressing on this button but it will create in the root I don't like to have source code in the root that's why I'm going to create our up directory in the source folder so let's call it up and the name is very important the name is how exper outter looks for the screens now inside this app we can basically move the app. TSX from the root directory to our app directory uh let's also update the Imports and rename it to index index means home screen or basically if nothing is provided this is the index this is the home screen of our application uh let's go at the top to see um the Imports the Imports will fail here so make sure to add two dots in front like this because we changed a bit the the puff it's relative to to this new location our assets is two directories above and everything else probably should work the same I'm going to go ahead and stop our development server and start it again I'm going to close this application and I'm going to press I to open it on iOS now if everything is okay we should see our application or our home screen with a list of races as the initial screen of our application and that's exactly what's Happening Here we see our list of items here so to recap what we did is we install exper router we configured it and exper router looks in the app directory which can be either in the source or in the root of our project it looks there for screens at the moment we only have index. TSX which becomes because it's index it becomes the home screen the initial screen that is being loaded uh now things like safe area and so one will be handled by the navigation part so here I think it's safe to move from safe area back to a view and make sure to import the view from react native like this it's not going to change a lot but anyway some of the things like at the bottom like it's we're going to be able to scroll yeah it's it's better we leave things like safe area to be handled on navigation level uh what next um I'm going to rename this component from up to home screen and I will rename it just to to explain that before when we had up. TSX in the root directory that was the entry point in our application and what do I mean by that is that all the screens that we would have added back then would basically also execute the app.js function and respectively it would also load the fonts and so on now with this approach index. TSX is not the entry point in our application it's a separate screen so if we would go to a different screen we would not have the same fonts there maybe I can show you uh I can show that right now by creating a new screen in our application for example if we create a new file in our application called I don't know about. TSX and here export a function that will simply render about just by creating this file we already have a screen in our application well we cannot navigate there yet but if I'm going to go to the index which is the home screen and above a flat list if I'm going to add a link that's how we navigate from one screen to another and the link needs a an hre similar to how a link on the web needs an H like where do we want to navigate so what will be the HF of the about screen well well exactly the name like it's going to be slab now we will give this link a name for example go to about and we're going to see it at the Top If we press it we are navigated to the next screen about that yeah render the the about so what we saw just now is by simply creating files in our up directory they become screens in our application we can navigate there using the link component imported from export router and by say sending the the location the HEV the HEV is basically the puff to that file to that screen inside the app directory and now it's in the about but it can also be inside a folder called uh others and if the about is inside the others folder it will simply be when we navigate there we will need to specify others then slab so it's the same way as we navigate through p through folders and files we specify what's the path to that file inside up directory well it's inside others and then it's the about file perfect well I'm going to move it back here I'm not even sure that we need that others uh screen because we yeah I use it only to explain these concepts of how we can create screen and navigate from one to another but the next step is about layout the layout the layout is the the component that either has like also user interface or the okay the layout is the component that encapsulates or wraps around a group of screens for example if I'm going to create the layout file here we actually need this one so let's create it together a new file with the name uncore layout. TSX the name is very important this is a specific file for export router and it defines the the layout of these Pages using this layout we can add UI elements that are shared among different screens usually this CI elements that are shared among different screens they might be tabs so in a tab Navigator all the screens inside the tab Navigator will display the tab navigator at the top we're going to see that in a moment but let's first I export default root layout this is going to be a function so let's do function and by default if we don't have any layout what what it's happening is it Returns the slot from Expo router and the slot basically takes the the the the the screen or the code for the screen and renders it here it does nothing more than that as you can see we lost some some of the default um styles there uh another thing that you can do I don't know with this slot or with this layout is as I said have UI that is shared among different components for example I can have here a safe area view from react native that encaps that wraps around our slot and remember the slot is basically the screen that we are currently on well it needs a style Flex one and now it has proper pting there and if I go here yes I'm V what we can also you uh do is um I I'm going here I'm going to the place where I I wanted to show you what but didn't Focus as I was saying the layout is used for user interface elements that are shared among different screens for example we can have here a title saying uh F Formula One and we want this title to be at the top of all the components all the screens not from here from react native should be so if I simply add it here above the slot we're going to see the the title there so I can add here some Styles font size 25 and for Formula One is there even if I go to the about screen it's going to be there because first comes with text after that comes with slot so that's why we need the layout but not only for user interface stuff but also for for other things as well well what we can do in this layout and is is usually specify the the Navigator the the way we want these screens to to to navigate from one to each other one of The Navigators that are automatically provided by expor outer is the tech Navigator this is the same as a stack Navigator in exp in Rec navigation and what we can do is instead of rendering the slot we can render the stack and by doing this we already have a header at the Top If I go to the about we have a back button and we also have like animation from going from one screen to hour we have a proper stack Navigator because the stack Navigator is actually handling the safe area View and the rest of the things I'm actually going to remove everything and only leave the return stack and just like that this is a very common and very uh simple layout file where we Define what kind of Navigator should the screens use in this case is a stack another Navigator can be tab tabs which is also provided by exper router so what you can do is render here tubs and now this is not going to be a stack Navigator where you can go back and forth it's going to be a rubber at the bottom two tubs that you can move from about to index and just like that you can change the Navigator type as you wish in the layout I'm going to go back to stack here perfect uh and as I was saying the layout is not only about the uh UI that is shared it's also about the the logic or the life cycle events that should happen in our application uh if for example h let's let me do I'm not sure if uh if I should go into this many details hopefully that's valuable for some people uh because if you already know how it works uh you you can skip forward a bit but I'm going to add here some console logs for example about screen on the index I'm going to console log here home screen and on the layout I'm going to console log layout so initially when we render the application the layout is the first thing that is being rendered after that the home screen is being rendered now if we go to the about the layout is not re-executed but the bow screen is is so what I wanted to say here is that the layout and in this case because it's the root layout is right inside our application becomes the entry point in our application and it's always going to be executed no matter on what screen we are in about in index or in even other nested screens so this is the place where we do Global things we define global providers we EX some stuff that should happen when the application is just being launched and one of this uh logic is inside our index. TSX is the font loading so instead of being loaded on the home screen we need to load it in the layout this is a global thing that should always happen we should always load fonts no matter if we're on the home screen on the about or something else so I'm going to copy this one from here to the layout uh we need to import the Ed fonts from Expo font activity indicator from react native and that should be it back on the home screen we can clean up some of the things from here like use fonts and if I'm going to refresh yes it still works the font still works and we can go back and forth to about back but now it's happening in the root layout and no matter on what screen we land first it's always going to go through the root layout we'll load the fonts and only then will render them the child screens okay okay okay okay let me go ahead and um commit setup Expo router yes Jasper you're VI you're right the easiest way to think about a file-based navigation system is like HTML files for a basic website and routing in vyor so when you create a static website with HTML we simply have like index.html maybe you have like blog which is a folder and there you have index and details and the way you navigate there through slash and so on the same way we navigate here from one screen to another hello isak how are you doing Wilder you're a code machine thank you uh all right so let's go back let's go back what I wanted to do while we are still here on the XO router I wanted to show you how we can we saw how we can use uh default Navigators that explorator is provided providing this are a stack this is uh tubs and I think that's it the TBS which is B which is TBS on the bottom of the screen uh and the stack which is a stack Navigator the next step for us is going to be to add the race details screen what I want to do is when I press on one of these race I want to see the details about the race and the results for all the race in that weekend for the race qualifying and so on and I want them to be different tabs but not on the bottom I want them on the Top If we go ahead in the react navigation and as I was saying expirat is built on top of rack navigation so it's really easy to integrate them together because yeah behind the scenes exper aor is using rack navigation and one of The Navigators here is material top tubs material top tub tubs Navigator it looks as a user interface like this and that's exactly what we want we want be able to go from one tab to another and to display them at the top the problem is that where this material top tabs is not yet in like automatically provided by exper router well that's not a problem because we can go ahead and install it by following the installation guide on Rec native navigation so let's start by installing the dependencies here we're going to install it um we also need to install the native pager view so let's grab this one here and and that's it and Below VAR is the API definition how everything should work well first of all where are we going to create this top tab Navigator because we will not create it in the root layout the root layout we will leave it like it is what we're going to do next is we're going to create a new folder for our race details so let's call it uh race and in this Ray we're going to have for example the index. TSX let's generate an empty function here for the race details and maybe uh and maybe another file for qualifying do TSX and this is going to be qualifying results now we have these free uh fre free screens if a folder does not have a layout it automatically becomes part of the uh layout of the parent so it's going to be part of this stack let's first of all have a look of how we can navigate when we press on one of these races how we can navigate to to the race details and then we're going to see how how adding a layout affects everything well uh when do we want to navigate to the race details we want to do that when we press on one of these race list items so in the components we have race list item we saw how we can do that by using the link the link we saw that in our index here at the top link H ra and so on the problem is that the link expects a string inside here to to work without additional properties I'm going to delete it from here and go back to the race list item let's wrap our whole race list item container inside this link imported from exper router like this it should have the HRA HRA is the directory called slash Race So if I do slash Ras and don't have anything afterwards it's going to go in the directory race and we'll take the index. TSX The Styling is broken because the Styles is actually on the child view what I'm going to do is I'm going to pass a property to the link called as child this will automatically fix everything because it will use this view as the main component but it still doesn't work why because the link component expects the child component to have the on press event listener if you doesn't have a one press event but by simply replacing the view with a component called pressible which is the same view but it it can handle press events like on press I'm not going to give it uh my sell the on press event but the link will send this on press event to the pressible and now if I'm going to click on one of these we are navigated to the race index nice we're going to see later how we can add Dynamic puff parameters here but let's go back to seeing how we can structure them raise pages together um as I was saying when a folder doesn't have a layout all the screens become part of a parent layout and the parent layout is this one which is a stack Navigator that's why here we have a back screen and so on and the screen is right away inside this stack Navigator now if I'm going to add here in the race its own layout now this layout is going to be used around all of them but at the same time the root layout is being executed so first it goes to the root layout after that to the specific race layout and only then it's going to go into the screen now now let's in the race layout let's export default function race layout and now if you return here for example a stack you can do that as well you're going to see that here we have one header but if we press on this on one of these items well nothing happens I don't know why but we're going to see well we are redirected Veer but now we have two headers one of them is coming from the root layout and this is at the top with a title race and a back button but the second one is v stack Navigator and if we navigate from index to qualifying we're going to have a back button here having stack uh having nested Navigators like this is a very common thing and in terms of user interface usually we can hide the header of the ones that we don't need and leave only the header for the stack navigator that we are interested but in this situation we we don't need a stack stack layout inside our race layout we need a top tab Navigator I'm going to move first to the tubs which is the default one from Expo router and we're going to see that now if we go to this screen we have tabs at the bottom index race and qualifying and when we navigate the title here changes respectively nice but we wanted the tabs not to be at the bottom but on the top that's why we install the material top tab navig material top tab Navigator and we see here in the API definition how we can create this material top tab Navigator let's copy it from here and let's create them inside our race layout this is our tub which has two properties a navigator and something else now using this tab Navigator and the additional function from expor router we can create our top tubs by doing with layout context with layout context is imported from come on import with layout context from export router oh it's it was imported here uh and what we need to send there is a navigator we already created it here and we can access it by using tab. Navigator by doing that we create a navigator that is a we of a cont context of Expo router and now it can be used simply like this like we use with stack and tabs and other default Navigators from export router we can use them there and now we see at the top the top tubs and we can swipe left to move from one to another Perfect all right so we we we are having a lot of progress right now uh this is how we can create a custom top tab Navigator let me go ahead and add it to our git uh top tabs Navigator and yeah we created a basic structure for our race details but we still are missing something we are missing a way to specify if we're pressing on this race from Qatar we want to send some information about hey we want the details of a katar uh race where if I press on Japan I want the Japan one at the moment we always redre to the slash race so there is no way to send some data there at this moment here is where Dynamic puff parameters come into play and what they are is a a puff par a a puff segment is basically let's say the name of a folder and if we use one of these puff segments as a Dynamic Property where we can send data we can have Dynamic links for different items on our application we can navigate there and from that page we can get these Dynamic Puff param and based on it query the right data what do I mean by that well to have a dynamic parameter we have to use um special uh syntax we need to specify the name of a file or a folder inside square brackets in a lot of cases that can happen on the file but now in this situation we know that all of these files like index qualifying race they are specific about One race so that's why I'm going to add the dynamic puth parameter on the folder level so inside the arrays I'm going to create a new folder and I'm going to use this syntax with square brackets inside the square brackets we specify the name of the variable so it depends on us how we want to name it for example I'm going to use the ID as the as a way to identify the Rays now I'm going to move all all of the folders and all of the files from race to the one folder below and now what we have is we have a folder called race inside it we have a folder called ID that has ID as a dynamic puff parameter and only then we have a index layout and so on now without any changes if we press we see that the file is not found because indeed it's not found uh the the route to that file is already different it's not only slash race it also should have slash something in the ID part so back in our list race list item we can create it by specifying here race slash1 123 for VD if I do that and if I press now it it correctly par um navigates there the first parameter is race that's the race directory then one 12 three becomes the dynamic parameter ID and because we don't have anything afterwards it takes the index now in this index we can see how we can get this data by using the use local search perams hook and there we can get the ID if I will display it here as ID you're going to see that it indeed is the one to three that we sent from from the link well we don't want to send a hardcoded one to three we want a dynamic idea of the item that we are rendering so I'm going to switch from a normal string to a template string and instead of a number here I'm going to send a variable with this syntax item do ID and now if I press on Abu Dhabi we see Item ID is 1781 USA 1776 Mexico 1766 and so on so now you can see that we can send some Dynamic identifier from when we navigate to a screen and in on that screen we can get this Dynamic Property Dynamic puff parameter and later on we're going to use it to query the data for the race with this ID okay so this is the dynamic parameter let's do get add get commit minus M Dynamic puff parameters nice the last step uh probably the last step that I want to show here when it comes to exper Outer is how we can adjust and configure some of the navigation uh user interface starting with the home screen we see that the header we want it to be with this red color so let's go into the root layout into the root layout and when we render this tag the same properties that we were using in react navigation we can use them here so remember if you worked a lot with Frack navigation you'll remember the screen options these are the options that are sent to every single screen in our stack and the options can be stuff like title hello title becomes hello uh but it will be hello for all the items even here hello uh some of the things that we can adjust here here is I don't know header style can we adjust here the background color to be red yes it works so instead of red I'm actually going to import colors from our constants do primary colors from constants primary perfect uh header style I think there is also a title style header title Style style and the header title style we want the color to be white and we want the font family to be something like F1 regular or maybe bold yes that looks better and the title of the first one is uh racing so we saw that we can add it like this here racing the problem is that the screen options are things that are applied to all the screens so even here is racing and when we go here is also racing if we want to apply some options to a specific screen we can do that but for that we need to do a couple of things first of all is at the moment this tag is a self-closing tag let's make it not a self closing tag but a opening and closing tag now inside it we can use a stack. screen component to send here some options like title racing and I'm going to remove it from the screen options well there is no way at this moment I mean how can we say that the title racing should be only on the index screen well exactly like that we need to provide the name here and the name should match exactly the the name of the route in this case index so by using stos screen name we are targeting the index screen and we are using the options to provide to adjust some some parameters for that screen like title and here the title is racing if I'm going to go there it's race slid we can use this one not only in the layout we can use it also on the uh on the screen itself so we can go to the home screen and we can have the same we can render the same stack do screen by importing stack from export router and in this case you don't need to provide the name because you are inside the screen and Export router will know that hey we want to adjust the options for this current screen and racing think one two three I think this one will take uh priority over the layout yep where uh in this case I don't think we need it here on the index but where this is going to be useful is to adjust the title all on all of these screens here but no I think we can also do it from the layout I'm going to also copy it h no actually that's not true um let's copy this TCH do screen way of adjusting the title to our race layout and here we will need to again add here more components so I'm going to add the brackets I'm going to add an empty component like this and what I can do here is I can use stack dot screen to adjust the options of the current stack screen where the race layout is rendered inside so here I will say title race details race details race details perfect I can also use these options to hide the label of the back button so there should be back header back title no back back title visible header back title visible false will remove yes the name from there and another thing is if I go back to the root layout I think there is that tint header tint color if it's going to be white the carrot is going to become white yes and it's better than having it with uh Blue by default okay so we saw how we can adjust the styles of our stack screen how we can do the same for our top tab navigator that we have here well basically the same we go to the layout where we have a top tabs Navigator and we can use the screen options here not screen listener but screen options we can have background tab bar what tab bar style can I have here background color red and if I go there yes it actually works so instead of red I'm going to take colors dot primary and we need to import colors from constants now if I go Veer yes Veer with red uh top bar style something with title Tob bar oh there is the inactive tint color and active tint color these are used for the color of our labels so the if I use white here we're going to see that the the tubs that are inactive they displayed with white this one is still black because we can we should also adjust that tuab bar active tint color and I think active tint color should be white but the other one should be uh gains borrow like a yep maybe should I also do a font family tab bar title H top bar item Style well there is the indicator and the indicator is what we see below the tub now is displayed with blue but I can do tab bar indicator or bar indicator indicator container style I can do a background color white for it to to to not be blue but no no no it's not this St bar indicator is is it indicator or how is it called tab bar label um tab bar indicator style tab bar indicator container no tab bar indic indicator without container okay now the indicator at the bottom is white we can also increase the height of it to 10 that's too much 7 five that's better and we can also adjust the top bar label style and this is for the text that we use there so I can use a font family of F1 bold yes that looks better and we can move from one to another and here we can go back perfect so that's how we can adjust the styles of the navigation components uh style navigation UI hello Sean hello full bright how are you doing guys just in a mo Hassan our next app is going to be to work on the details of our race uh and also to display the rankings and after that we're going to connect uh connect it with our backend to query the data using Apollo client in the root layout we can also we can also do what there is a status bar in the index. TSX which shouldn't be here so I'm going to copy it to our root layout let's render it around here somewhere these empty tags they are called fragments and we use it when we want to return multiple things from a component because the rule of f is to return only one thing one component that can have multiple Childs so in this situation we need both stack and status bar that's why we are wrapping it around a empty component status bar where did it import from no I think it should be from export status bar Expos status bar and it shouldn't be outo it should be yes if we do it light now the logo and the things on the top is going to be displayed with white uh the index should probably be called in the race index I'm going to use here a we basically in the layout again if we want to Target one specific screen from these top tabs first of all we're going to look at it we see that it's a self- closing tag so we're going to move it to a opening and closing tag first and inside it we're going to put a top tabs do screen and we're going to Target the one with the name index I want to change the title of it uh and using options we are going to change the title to to Det details details when race qualifying and by other screens will be there all right so let's go ahead and work on our next screens and next screens will be the race details screen on the details I want to display more information about the circuit the race uh and so on and then on the other tabs I want to display the the rankings we have already this end points and this data in our back end if we look at the documentation St of our back and we have race rankings so race rankings will give us the the information about the rankings of drivers in a specific race what I want to do first is again we're going to work with some Json data that I prepared for you and later one we will connect it with our API so in this race. Json this is the response of a quering for details of AR Ray we're going to need this Json in The Details page so let's go ahead and Source up race in the index. TSX here we're going to need the race [Music] response from uh above above above above assets data race. Json now the race itself is going to be race do response and we will go to data races and response so dot data races do response and actually because we are interested in only one race it's usually it's always going to be the first one so let's take it from position zero and now our race is not an array of things but it's only one specific race and we can show that by displaying here what the raise details let's do race dot competition Dot country or location do country so we see raise details brain it's going to be the same for all of them because we are still using dummy data so don't expect to see other data when we move to a different screen later on we're going to use V Dynamic Property ID and we will query our backend for specifically v data about that race but in order not to use a lot of credits from that public API we're going to use the the Json the same Json for this Details page um I think it's a good time to take a seat because we are almost 3 hours in we still have to work and I started going to the gym and my back and legs are hurting so let's go ahead take a seat look how small I am okay this is better okay perfect hopefully you can see me let sure if you need to okay so back to the coding uh we have a country here we have a details what do we want to render we want the the the name of the country then the season so we can do here race do season 2023 and below below this text we want to display what the name of the circuit so it's going to be Ray dot is it circuit dot name and below it we can also render the the image over rased circuit to render image we're going to use the image component import it from react native and yes let's import it from react native and for the source we're going to use the the race. circuit. image this is a publicly accessible image URL and if we go right now we were not going to see it because we need also to provide some styles to it Styles Dot image well it complains because because we don't have a Styles shet yet so let's import Styles from R native and Define the Styles at the bottom Styles equals Styles sheet. create and here we're going to have what maybe something for the page later we're going to have something for the image definitely so let's start with that if I add the wi of the image to 100% to take the whole Space of a screen and for the height if I do a hardcoded I don't know 300 pixels we should see the image of a circuit it's very low quality maybe through other apis and points it's going to be a higher quality but I'm not going to focus on that right now uh what I want to do is well first of all if this one is too large the image will not fit and it will try to overflow you can adjust this Behavior using very Reise mode property on the image by default it is cover but if we say contain it's going to going to instead of covering the whole container is going to make sure that the image is displayed fully inside the container It's contained there and now instead of specifying the height what you can do is you can work with aspect ratio if you have an aspect ratio of one and if you provide the width the height will be calculated to be exactly the same as the wi I can show you we're using a background color red it's a square if however we do 1/ two that's going to be the height is going to be twice as large as a wi if we do two over one that's going to be like this I will do with like a normal 16 by 9 16 by 9 or 9 by 16 no 16 by 9 is perfect and I'm going to remove a background color red now it looks better let's style a bit where have texts here and in order to move faster I think I'm going to start writing inline Styles so I don't recommend that try to always separate the styles from GSX but now I want to move faster so I'm going to write them right away here for example what I want to do is for the first uh for the country name and the Race season I want to increase first of all the font size so font size is going to be 20 and I want to use a font family H font family F1 bold the problem is that both the bin and the second text is displayed with bold what we can do is we can display the main text with F1 regular and we can uh wrap the name of a country inside another text we we can run we can encapsulate text inside texts that's possible in R native and we can only adjust some properties here for the style for example it's going to keep the same font size but for the font family it's going to use the F1 bold now the 2023 is using the regular but the name of the country is using the F1 bolt maybe we should increase the size yeah let's add some style here and because we already added their page I'm going to use it and the page needs at least some poting nice do we need anything else there maybe some for the image itself maybe we can add some margin 10 margin vertical yep like this the official uh F1 application has a little bit more information there about the race itself not sure where to find it we can look at that and how to display it a bit later let me uh see if I can show you as well what what I'm referring to uh media new movie recording give me just one second yes here is the official uh F1 application so yes it displays the same uh circuit and Below we display some information about the circuit like the length number of labs and so on maybe we by the end we're going to have time to implement this one if not you can try to implement it yourself the data about you can start by implementing the user interface and the data for that one is also available through the API through the sport API if you look at the circuits and maybe if you query it through here no the image is still low quality okay let's let's leave it like this and then we can add at any time more information Veer let's move on to displaying the rankings over drivers for a specific race and to do that we're going to use another endpoint for the race rankings we already have it in our steps then if check it here this is the races but we also have race rankings I also provided you with dummy data so if you go to the data race rankings here is going to be a sample response with data about all the drivers and their position on the track so let's go ahead and Implement that uh where we're going to do that let's do that inside the race it's going to be both in race and qualifying and so on but let's start with the race race itself so here we're going to import race ranking response from race rankings nice and there let's right away take the race ranking is going to be data do race rankings do race spons now this is an array of data what do we have to do on the screen we're going to use a flat list so let's right away import a flat list from react native and for the data is going to be race rankings and for the render item we can start with simply rendering a text saying item dot driver dot name and if we go now to the race itself we should see a list of drivers Marx vapen Sergio Perez Fernando Alonso and so on nice so we have access to them we are rendering them now it's time to separate the ranking the the driver in the ranking list into a separate component we're going to do that inside our components similar to how we have race list item we're going to have uh ranking list item. TSX and let's export default function ranking list item it's going to receive the item and it's going to return the text from RE native hello now back in our race. TSX where we have a flat list let's replace this text box with the component that we just created ranking list item and we're going to send the item there item we see hello hello hello but if we change here to item. driver do name it's back to to normal now typescript is not going to um we we didn't specify the name of this item so typescript doesn't know what is this driver and the name so to fix this we're going to use a small hack we're going to import the race rankings no race well let me import the same data as we have here in the flat list because I just need to take the type from from from this one so the item here is going to be of type of race rankings at position zero and it's good to also separate it like type ranking list item props and take it from here separate it into a separate type and simply reference it here it's it's going to be make more sense if I so now the properties is of this type and here we can see that it's the item what's happening why race component no no no no no no no uh I imported incorrectly the data race rankings response okay now it's better and now it knows about the driver it knows about the name okay let's look at the user interface that we want to achieve well it should be a couple of columns the the position the maybe name or short name and the time so let's try to do that here in the ranking list item by putting um inside the view and we're going to put there the text make sure to import the view from R native and the other information that we need there is the the time right so we're going to take item dot um time to display it after the name yes the time is displayed there and the first text actually before the name should be that item dot position POS yes one two and so on let's go ahead and import the Styles and start working on our Styles so we have container we have position ition we have name and we have time let's assign these styles to all of our components starting with container I'm going to copy paste it to the other styles like this and only change the name so this one is position this one is name and this one is time okay for the container let's start with a background color white and with some ping five and some margin five as well we want to display in one component we want to display everything into the same line so let's do Flex Direction row and now the name and so one will be displayed in in the same line if we want the the middle container to take all the space and in our case the middle container is the name uh we can add it a flex one and this will push the time at the end perfect the position let's start by defining the font family it can be F1 can it be wide yes I like that one much better than what we had before maybe it should also have margin right 10 or let's use this one as a fixed wave to make sure that the second column always starts from the same place so if I do maybe 50 yes now it's better not sure how it is in official loc yes something like I mean for us it's even better maybe adding some more potting inside the container yes border ruce make the container better and we can also add some uh some uh Shadow I'm going to add the same Shadow to our container here yes looks good for the name should we use a font family here and F1 regular yes I like it and maybe we can put the name inside uh a view and also maybe display some information about the team below that so text is going to be item dot team dot name Red Bull Racing nice now now the flex one that we had on the name should already not be on the name but on this view that makes the middle container so if I'm going to go Styles and add here Flex one it's going to be back to normal on the whole container if we want things to be on the same horizontal line we will add the Align items Center and now all of them are on the hor same horizontal line yeah I think this one is even better margin bottom the time on the Formula 1 application has a very similar style to how our November P or month pill looks here on this container so I'm going to go to the re race list item and see the date container or the month no the month container let's take the styles for this month container and let's go back to our ranking list item and for the time use the same Styles let's see if it actually works yes it actually works maybe we don't need to increase the size or maybe the font family shouldn't be that one um what else I will decrease a bit the font size font size 12 yeah I think that that looks that looks good font weight bold maybe we without it maybe font weight 500 okay you know what the the drivers also have pictures should we do that as well well we can try if you're interested we can have a look at image uh let's import it first from react native and the source here will be URI uh item. driver. image andour oh style driver image let's get it somewhere here and have a I don't know 50 by 50 Race nice nice like I like it let's see let's add a background color red just to see what's happening there where do we have um position position position here it has with 50 maybe it should be less 40 45 and text align Right Center I think this this looks nice margin right 10 okay perfect perfect you know what uh I think I can improve it a little bit because if we look at the background color of a driver image there is a lot of space on the top and the bottom so what if we add margin vertical minus 10 no no no uh that is a no U I'm going to accomplish it a a little bit differently on the root container that is our pading so if I'm going to remove a padding get it working so we will just simply adjust the height of our image to 70 and make sure that the image also has a resis mode of contain no I don't like contain should be cover but we're going to use an aspect ratio of one to make it square and now now it looks better all of them look good yes all of them look perfect maybe the container needs the Ping but only horizontal horizontal five yep what if now I'm just playing around if this one will be the last the image will be lost H I don't like it all right that's good uh that that's good we have a very nice ranking screen that we will be able to use when we will query them ranking details for a specific race so let me go ahead and commit it uh uh race rankings UI good uh the thing is that we also have a qualifying for the qualifying we're going to have basically the same as for the race the only thing is that the data we will get it a bit differently but for now we can basically copy paste the race screen to our qualifying and only change the qualifying screen and if I go here B race will have information with qualifying perfect nice and with details so very great progress for our Formula 1 application what we have is a list of races from 202 pre season on the home screen then we can go ahead and press on one of them to see the details of that race we can also see the rankings for the race itself for the qualifying maybe later we can also add for the practice one practice two and so one but so far that's great the only thing is that at the moment everything is working with data that we get from our dami data from the Json files uh our API is already already completed and is waiting for us to integrate and query it it's a graphql API that we have built using staben uh at the beginning of this tutorial and our next step is going to be to integrate re our re native application to get the data by querying our graph qu API for that there are a lot of uh client libraries that hand this but one of the most popular one is the Apollo client and Apollo client is a library that allows us to query graphql apis in react and also in our um it supports our Frameworks as well besides being able to query it also does a lot of stuff behind the scenes such as caching all the data locally and uh mer having like mutations and so on so what we're going to do is we're going to integrate a polo client in our application to query our stepen API some information about that we can find here in our guide so under we set up Apollo client so all we have to do is to install a polo client and graphql using npx XO toall in our application let's start that here npx Expo install Apollo client and graphql and then we're going to need to create the polo client and wrap it around our components so the way we're going to do that is using a context provider we're going to use a context provider in fact we actually don't even need it's not a context provider it's just a provider so let's go ahead in the source create a folder called providers and inside the providers we're going to create the Apollo provider. TSX Apollo client provider let's rename it just to have a same name as in the guide Apollo client provider the code for uh setting up our client provider we can find it here so let's import it and I'm going to explain what it's happening here to create a client uh to create a client we we are initializing the polo client class and we need to provide here some information the first one is the URI the URI of our graphql endpoint to see the URI of our personal graphql endpoint we can go to the stabs and dashboard so go to the stabs and dashboard I need to find it here is the steps and dashboard and the graph qu API should be should be at the top but let me see end points angry poodle yes I have multiple end points here one of them is called angry poodle and this is the exactly the one that I just generated if you want to see the name of your Endo you can go to stabs and directory and here in the steps and config you're going to see actually it's a different one it's loopy Fox so let's go ahead I was using a different one all this time but it should be the same so the one that we are interested in is the name loopy Fox so back to our code in the provider Apollo client provider the endpoint name this is where loopy Fox is going API SL loopy Fox and here should be the account name the account name you can see here in the authentication account this is account name account account name and here we are attaching some headers that Apollo will always use for all the request that we send one of these headers is the authorization of our steps and API at the moment we are using the a an API key authorization so what we need to do is we need to take this admin key and paste it here instead of our API key you can also of course do this uh in a better way using uh environment variables and you can do that in Expo by creating a newv file and here a normal EnV file that exports some variables the one that we need to access from the client side we're going to prefix with Expo public and then the name will be step z uh API key equal and it's going to be here I'm going to paste the inv the the key and the API key is going to be equal to process. EnV Dot and the name of this key make sure to console log the API key to make sure that we are accessing it correctly uh because if it doesn't work we're going to see if it's a problem of how we access it from the process environment but the problem is that I took the admin key when in fact I was supposed to take the API key the admin key is something that you should never share with anyone the API key is something that you can safely use in the client side code so I'm going to have to replace it here and I recommend you replace it as well so the API key not the admin key so here instead of hardcoding this value in the client I'm going to use a template string and and I'm going to reference the API key variable now that's it with the headers uh another thing that we are specifying for the polo client is the cache what kind of cache to use to cash the data the request that we are creating we're going to use a an inmemory cache to store the information in the uh in the memory of the phone and what we are doing is using an Polo provider component we are setting the client that we just initialized and using the custom Apollo client provider component we can wrap around our screens and they will have access to the Apollo client in this file our work is done we need to wrap this Apollo client provider around all the screens basically in our application to do that if you remember that should happen in the root layout so let's open the root layout and let's import here the Apollo client provider and we need to wrap around the the screens so here we have a stack I think it's going to be good if we use the first component where we will use the Apollo client provider now this Tex screen becomes the the children property of a polo client provider and what we are doing here is we are rendering the children inside the provider itself so that means that all the screens in our application they will have access to the Apollo client we can test that uh first of all if I'm going to refresh I want to see if the API key is correct yes it's correct so I can save remove the console log at the top I wanted just to make sure that we access it correctly now that we have configured aollo client we can send our first request where is going to happen where do we need the first request let's start with the home screen the home screen is in our app index. TSX that's where we have a home screen to send a request we need two things we need a graphql query and we need the use Query hook both of them use Query and graphql will be imported from Apollo client uh at the top here we will Define the query that we want to run using the graph ql and then back ticks from the template string here we're going to put the graphql query itself where do we take it from well we already played with them in our uh dashboard here I should make sure to select how is it called uh stabs and loopy Fox so this is the query that we can build here in the dashboard on steps and we can select exactly the data that we need and uh where in the Builder and uh test if it works and then copy it in our application so let's go ahead for example here we need the races from season 2023 that can also be uh I'm going to leave it like this um yeah let's just copy this this query because later we're going to adjust it with data that we need I just want to see something on the screen maybe even I'm going to remove a competition and only have ID date and season just like that so if I copy this query to our screen I'm going to paste it right away inside graphql here and using the use Query hook we can execute it when the home screen component mounts what we have to do is call the use Query hook and pass there the query that we defined at the top now the use Query will give us back a couple of things data it will give us loading and it will give us error well based on them we can display different things on the user interface for example if it's loading I can simply return uh activity indicator from react native if there is an error I can return I don't know a custom text box with error fetching races and maybe also the error Dot message and if it's not loading and if it's not an error then there is some data so let let's look at the data that we get here make sure to import text component from react native as well and let's open up the the terminal all right we already see some something in the terminal where our re native is is running so we see races with the data has the races the races have response and all of them are objects well you can go ahead and stringify using Json just to see what's inside json. stringify and if we look right now this is exactly the data that we are querying based on the the query here at the top and what we should do now is in the flat list we need sorted races I will take the sorted races and I will put it here after the console log the sorted races shouldn't work shouldn't use the dumy data races it should actually use that something from the data or I will take the races inside data dot let's see what data has data. races. response do races. response now I will comment out the the import of the dami data at the top we Ser two lines here and what's happening cannot assign something with we sorted R to date do we have dates we have dates if I do console log not of the whole response but of the races what's going to happen cannot assign oh because sorted races what do you meem cannot assign not reassigning anything you know uh what if I just simply display races here canot read property location of undefine yeah that's it's it's fine but what's wrong with with sorting them yeah I think the the races from here they are read only so what we can do is we can put them into a new array like this by destructuring it into a new array and now the error with read only disappeared and now the error that we see here is from the lack of the exact data that we need so on this screen besides the ID date and season what else do we need we can look at the race list item here to see what information do we need things like item competition location country so let's go back to our steps then and using the Builder we can look at the response competition location country let's see what else do we need vyor uh item competition name item competition name what else item do season that one we already have season I'll put this one at the top what else do we need uh I think so far here this the only thing that we need and if that's the only thing that we need we don't need to query more data than necessary we can test it we see here and we can move it back to our uh home screen to replace the query at the top we see loading and this is already live data that we fetch from our graphql and Point built using staben and that one is taking data from the rest API that is provided by the API Sports here so this is all real data queried from the server that's perfect that's exactly what we we need and this was our index. TSX I'll also show you here how we can send Dynamic variables to our properties to do that uh I can show you first of all here in the in the dashboard I like um usually when you do some changes to the graphql try them first in the dashboard make sure that it works and only then copy that in your application now what I want to do is instead of hardcoding the Season here 2023 you want to be able to pass it as a variable to do that first of all we need to Define variables on the my query here the variable will start with the dollar sign and we can use the same name season then we need to specify the type it's a string now we can use this variable with dollar sign instead of hardcoded string here now in the variables we can adjust for example not to query 2023 but 2022 and if you do that you see different yeah even the date is different so now if I'm going to copy this query maybe I should do the same with the type because here we can also use qualifying and other types not only race so let's add a type field of that is a string and here do typ type yeah and if I do here type Ras test it should also work and now we can copy it and go back to our application and replace our existing query with a new one it's not going to work uh because we need to provide some variables to Prov variables in the use Query we can send here the second options with a variables and the variables that we need is as you see here is an object with season and type I can actually copy it from from here and paste them in our application so for the variables we're looking for the season 2022 and type race and the difference we will see that that what not sure what's the difference um well yes after Mexico there is uh in 2023 there is another USA uh the race from Las Vegas so if I will change here to season 2023 this is the right the the race from Las Vegas so yeah that means that our variables are being sent correctly to our graphql API and then later on append it to the request that is being sent to the to that end point okay uh what else on the next screen we need to query the details of a of a what of a circuit or of uh of AR race let's go ahead with details of AR race because if we look into the documentation for I'm going to no no no it's it's good it's good in the Builder H uh yeah let's look at the documentation for races uh and this is exactly like what we in integrated with the thing is that when querying races we can also use the ID property of a race and in that case we are getting information only about One race this will be very useful for us on the details page where we want to query the details of a race based on its ID at the moment however if we look into the steps and races index graph ql here we see that we have only two puff properties here only two parameters here it's not very hard to add a new one if we add here ID of type uh int because it's not a string it's an integer uh the value that we will send to the ID will automatically be appended at the end here like ID equal to something let's exactly what we want and we can look at the terminal where our stepen is working and we see that in 2.6 seconds our app was redeployed so if I'm going to go back to our dashboard in stepen and refresh we should see that when querying races we also have this ID that we can specify and I'm in this case I'm not going to send season and type here for example in the variables we also don't need it I'm also I'm only going to have an ID variable of type integer that we will send here ID so the ID can be what 100 and this is the race bar in Grand Prix in that 2020 what 2012 okay that's the query that we will use to get details about One race but what information do we need there on this page well we actually don't need a lot at the moment we don't need a lot because we in the application index race index we only need the race competition location country competition location country we need the season and the circuit image maybe the circuit ID and image as you can see we can write away write it here and it will synchronize in the Builder with the checkbox is that we add here maybe the name as well okay uh we'll see like if we need more data we can easily add but let's go ahead and copy this query and let's go to our race details screen in application Ras ID and then index. TSX here the first thing is to import use Query and graph Q L from Apollo client let's define the query at the top using graphql like this now inside the component we can take the data loading and error using the use Query hook and passing here the query that we sent our query has a the ID parameter and let's use it in the variables here variables should have ID and the ID as you can see is going to be the ID that we take from the route parameters now if I go to AB Abu Abu Dhabi and here if I will use this data first of all if it's loading I want to return turn activity indicator and otherwise I want the Ray Ray to be data dot data dot races dot response at position zero and we can also check if Ray if race is not defined that means that we didn't find such a race so we can return a text saying race not found now the the damit data with race and the race response is not needed anymore and we can click here all right we see that data is automatically uh displayed here here so we see Abu Dhabi with the circuit if we look at the Las Vegas this should be it it doesn't oh it has actually the circuit Brazil nice Mexico and if I go to as you can see when I go to a new page it has a loading indicator because it it is fetching the data but when I go to back to one that I already visit it automatically displac it there because Apollo as I said is using behind the scenes a cash mechanism and it caches all the queries that we send so the next time we need them they are easily and on the device storage oh nice uh last step last step is for their race results race results that's going to be in our race here so how are we going to get it well in the race rankings here we we can also get the ID the same way as we get the ID from the from the puff parameter using the used local sech params in the index we can get the same idea in the race as well because it's part of a parent puff so we can take it here import and let's see the query that we will need to execute for our rankings so if I open r race rankings we need the race ID here right the ID is it of type string let me check where API if I go to rankings race rankings it's an integer I don't know why it says so it's an INT ID so what do we need back we need in response well we need web position driver image driver name team and time so position uh team team name and ID when there is an ID always query it uh then in the race not going to do that but for example driver we need image Name ID what else uh time time time time uh the time of the of the driver I think that's everything that we need idea of type int using position expecting string race rankings why is it expecting a string it's a very weird race rankings index uh why is it string what if I will use a string for oh no yeah look here it's uses as a string so I think we can use it as a string and it can actually be required as well so if I do a string 100 will it work send yes I think it actually works Red Bull Racing McLaren Red Bull and so on nice so let's copy this query in our source application race race here we need what do we need we need to import use Query and and graphql from Apollo client we need to define the query itself equal to graphql and here in the template string we're going to put the race rankings query and we're going to use it inside our component to get data loading and maybe something else like error let's use the hook use Query send VAR query and in the options we're going to need to send a variable with the ID and ID we're going to take it from here now if loading then we're going to return an activity indicator otherwise we're going to take the how did we call Race rankings rankings equal data dot data do what data. race rankings the name of a query dot response yes do response we should also safely access it in in fact text from R native and if I go here to Abu Dhabi 2023 race something went wrong because the this one is upcoming if I'm going to go to Brazil race again something went wrong uh but why maybe we can console log data it's always a good go back to the rec native what what's happening competition season date console log data well first of all I want to remove dumy data just to make sure that it doesn't affect us uh I'm conso logging here data but I get something with it's undefined if I go to Ras it's undefined why is that let's see the ID console log id id IDE undefined why is the IDE undefined here use maybe Global in this case yeah in this case it wasn't local because it's a Hub screen so with global let's see if it works raise rankings response by these 1781 yeah it's it's not it didn't happen yet but if I will check Mexico for example race yes yes it works and now this data as you can imagine this is coming from actual back end so for other uh for the ones that are upcoming maybe you don't don't want to display this thums or maybe you want to display something else there but the ones that already happened in the past uh it displays the information about the race uh okay and you can do the same for the qualifying as well so I remember which one which one which one was the only one that MOX bur St and didn't win it was somewhere at the beginning don't remember exactly Australia no it's Max yes Ser Perez won in aeran oh so that was quite a journey now we have our Apollo integrated so what I can do is I can do get ad Apollo client and look we are quite good on time because we are almost at 4 hours uh long that the project that I wanted to Showcase to you I hope you enjoyed it I hope you learned something new if you did make sure to subscribe to the channel leave a like uh comment down below what other projects we need to build and I want to say big thank you to stepen for making this project possible thank you for sponsoring and for believing in our content um with stabs and you saw how easy it is to build graphql apis before we leave I also want to remind you that we have the hacka phone no just hack upcoming is going to be on 20 to 22nd November and the big price is a mbook a M2 so excited to see you there let's go ahead let's grab uh let's C together and build exciting mobile applications during the the event guys let's let's stay connected on Discord I really want to end this before we hit the 4H hour marks so thank you for being here have a nice weekend ahead wor the rest of the day and I will see you

Channel: notJust․dev

Views: 69,667

Keywords: vadim savin, not just development, notjust.dev, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, React Native, GraphQL, Apollo Client, Formula 1 App, IBM StepZen, GraphQL API, Apollo React Native, User Interface Design, React Native UI, StepZen GraphQL, Apollo Client Tutorial, F1 App Development, Mobile UI/UX Design, Querying with GraphQL, Coding F1 App, Formula 1 2023

Id: WBK26V3PdtM

Length: 238min 44sec (14324 seconds)

Published: Sat Nov 11 2023