Build a full stack UBER EATS clone - 3/5 Days Challenge 🔴

what's up nudges developers welcome back to the day three of our five day super challenge and today we have something exciting because we are starting a new application in our whole uber series so um if you're new here this challenge in this challenge we are building the whole uber uh applications and we're not gonna build just one not two but three applications starting with the user side application then the driver side application which we're gonna start today and finally the restaurants dashboards from where they can manage their uh dishes and orders so everything that we're doing here in this channel is using rock native okay the dashboard is going to use drag jazz and also aws amplify so this is a perfect opportunity for you to improve these skills and level up your skills as a mobile developer using react native and aws amplify on the back end the plan uh for this channel for this challenge is the following so we are already in day three so in day one we build the user side application with rack native it was a great stream like we had a lot of screens there and it's by far one of the most uh complex projects with the most features implemented there so definitely check that out from the beginning and then we get into the day two where we implemented the user uh the backend for our user application we started by setting up our amplify project then we integrated authentication and after that we designed the whole database model that includes quite a lot of tables we are just in order to manage all the data that we have in these applications um yes we did everything uh yesterday in day two again it was a very uh amazing stream with a lot of value that you can learn there and we're getting in that today's uh build and today we're moving to a new application in the uberside series of application and today we're going to start working on the driver side application here we're going to work a lot with maps we're going to work a lot with directions uh bottom sheet navigator and other important stuff that is going to be awesome so in day four that's gonna be tomorrow we're gonna implement the back end for our driver application and also we're going to implement the real-time synchronization between the driver and the user we're going to send some real-time data there in order for the user to always know the life location of a driver that's exciting and lastly we're going to do the restaurants dashboard in day five with rug.js and aws amplify from where the restaurants will be able to manage their worders their menu and other information uh like um direction address and so on so um in order to follow along which i'm gonna repeat myself but i always encourage you to do uh because that's how you actually learn uh you will need a couple of things you will need the asset bundle that you can download at assets.nodejs.dev ubereats and where you'll find the pdf presentations of all the days you'll find pre-made components that we are providing you in some cases and as well the source code for both day one and day two so if you uh had some issues in the previous days and want to start from the same place as we are starting uh today in this live stream i recommend you to get the source code from the day 2 that you can find in visas and bundle and start from there but again we're taking it step by step and i'm pretty sure you can do it yourself and you're going to feel much better but you accomplished everything that we're doing here without like getting the code and doing it yourself all right um so i think we can get started we can start our day free and for everyone who is new here hello my name is vadim and welcome to this channel on this channel my goal is to share with you my knowledge and my experience that i've got in my career as a software engineer working at multiple companies and also at big corporations like amazon and also funding multiple startups and building them from ground until delivering them to users so at the moment like this is uh my full-time job sharing this with you on youtube so if you find this valuable please consider subscribing to the channel because that's gonna help us a lot and with that being said i would like to introduce someone else that you might most probably know so lucas is here with this application hi lucas hello hello guys yeah how are you i am ready to help you we thought that it makes sense to give vadim a little break after two days of heavy coding so uh more than 10 hours of coding i should say so i'll take over today is to give edema break and yeah and you'll see with him coding tomorrow again all right so that's exciting um and um yeah i think we can get started let's see where are people joining us today from and who is here from the previous days and how is your progress in general let us know in the comments because that's valuable to for us to understand like if you're actually following along if you have any issues or if everything goes smoothly and you can build everything yeah i understand that it might be a lot that's why it's a challenge it's quite challenging to build this application in such a short amount of time but again like take it easy easy on yourself like if you need more time re-watch the streams because they are posted on the channel uh for the next period i'm not sure how long they will stay on the channel uh but yeah like for now they are there you can re-watch them uh follow it on your own pace and hopefully manage to implement all these applications and have this application already that you can actually put it in your portfolio and it's gonna look very good because it's quite a complex application uh all right so i already see a few familiar faces rogelio i'm mythic also slack so that's nice someone from romania hello victor i'm actually originally from uh moldova nigeria kansas usa uh marco is saying that he doesn't have any issues everything you're doing is great thank you very much appreciate that okay lucas i'm finishing up crypto tracker i just want to see you i learned so much and i'll be applying uh jobs next week that's amazing i read this one yes yeah good job i'm so happy for you i'm also so happy that yeah like people find these tutorials valuable and yeah we are going to apply it for jobs next week amazing okay so i think we can get started yeah uh what do we have to do first lucas so first things first we'll have to initialize our new project because vadim said this is going to be our new project so let's just do that and you can follow these steps or just follow me along right now so let me share the screen okay and i think maybe this one will be better so open your terminal and simply uh type expo init and the name for us is going to be uber it's courier because i think good no yep let's click enter and uh would you like to update the expo before moving on it might take a quite a while i think what's the difference between uh let's try let's try i'm not sure like i i'm afraid not to get into some troubles and then like regretting but we didn't do it from the beginning okay maybe let's minimize this on a little bit because it's even hard to track for myself uh the command is npm installed minus g by the way um when we initialize first the user application we created it inside a separate folder and this driver application will create side by side to the user application so that's also the way i structure my github repository where we will have one github repository and inside that github repository we have two and then we're gonna have three projects like one for the user side which is a complete separate folder uh only for the user side application the other project is going to be the driver side the courier and lastly the dashboard so i recommend doing the same for you to have all these projects into the same uh repository and in the same folder it's going to be easier for you to track instead of like free completely separate folders and repositories uh hello john privet so let's clear and do expo in it again you see i still get this and it was happening to me before as well okay probably it's coming from somewhere else like different installation yeah i think so as well so let's continue i don't think there should be any problems okay uh i'm working with this uh version like for quite a while so let's create a blank uh template because yeah as we talked it's probably the best one for beginners and yeah there's no not much stuff that might confuse you or be something no need to explain much as well someone is asking us which means what are we going to do today basically uh today uh we are going to do we are in the third day of our ubereats challenge i mean the first two days we have finished the user side application and today we're gonna start a new application the courier application from where uh yeah like couriers will be able to see a list of worders uh they will be able to decide and pick uh a order and after that they will be shown like a map with directions to the restaurant uh and from the restaurant's vent to the user with all the states uh implemented there like picking up the water delivering it and so on so that's the plan for today yeah so after initializing open up your project in your preferred code editor i'm using vs code so yeah here i open the project open the terminal and we can start the server hello miguel after starting the server click run ios simulator in order to open our ios simulator and everything okay we can close the terminal now and let's wait now uh some questions uh do i have some time to to address some questions yes yes uh yeah there are some questions about amplify for example do you recommend only adobe amplifier to use with rack native it's better than firebase for complex mobile applications thanks um look like i will be biased towards amplify because i've been using it so much and i see the value and the power of it but i don't say i don't say that firebase cannot give you the same functionalities and abilities as amplify so if you know firebase like that's fine like continue using git have a look at amplify and decide for yourself which one you like better uh firebase yes it's a bit more beginner friendly but at the same time edibles amplify gives you much more possibilities and as you say for more complex mobile application um objectively thinking like i think amplify is better than firebase in that case but for smaller application i think uh you you're good with both so i'm not gonna hate on on anything today lucas developer yes today's lucas developer lucas developer every day and someone else just one second someone asked ask me if we can set the amplify backhand on a separate folder outside the rack native folder uh we don't have to do that because we will connect to the same back end both from our user side application on one side and to the same backend uh we're going to connect to the driver side application so it's shown here as you can see all of this application will connect to the same backend so in that case like you don't need to do that you don't need to separate anything so we're going to cover that tomorrow by the way now let's get back to to look and give him some time so finally we have our apple open and in order to check if everything is working correctly let's of course write hello world and yeah everything is working correctly so uh right now let's open real quick a presentation okay uh because i think yeah yeah i can so here's the presentation let me go to uh yes so the first thing that we will start working on is going to be a rest order item simple or item and we're going to start doing it in our app.js folder later on we'll export it but yeah let's simply start by oh also we need to download most the from assets the dummy data and i will need that here as well so let me let me grab it uh so that's what i forgot to do download the dummy data but i mean let me see i think i will be able to send it to you real quick so in the bundle data for the worders yeah is it possible to send it in private chat or should i open whatsapp most probably i'm not going to be able to do it in private chat but i'm going to send it let's see come on where no no no i'm not gonna be able sorry i'm on a different pc okay um then i'm going to open real quick this one this one okay and here it is and you guys uh can download it probably vadim can tell you more where to download it yeah um so you can download the asset bundle as i said in the beginning at ss.nodejust.dev uber eats and in that uh in verdammy data uh in that asset bundle there is a folder for dummy data so we're going to take the file orders.json from where did you already import you already copy so lucas put it where in the assets folder data orders and this is going to be the worders uh the data about the word is that we are going to work today with double dots or no one dot i mean yes but why current directory oh yeah yeah you mean like that yes yeah i didn't know yeah so okay we have our orders and we can start working on the design so first of all let me open the design myself and let's start with rendering a view no not here here okay and in the view we can simply take let's say [Music] and also let's destructure let's take one const order [Music] and we will we're taking the because this order is uh based on five structure of the orders to just understand like what data are we dealing with it's an array that's why i'm taking the first object from here and this order object has uh details about the order itself about the restaurant uh from where the order should be taken and about the user from where the order needs to be delivered yeah so let's start with simply order with the name order dot with the restaurant name restaurant dot name save it and what's the problem here undefined is not an object oh because they're saying orders not order yeah so el cabo okay that means our name is correct now also let's import image from react native and add an image so i like to start by just dumping all of the needed information uh in a view and then later starting to like work around the styles probably i'm not sure if that's the best way to do it but that's how i got used to doing that i think that's that's a good way to do it like first display what you need to display and then figure out the styles yeah so basically uh for the source we are going to pass and i think it's an image right yes for the styles for now let's do with 50 and high also 50 just to see it on the screen yeah okay yeah we do have it here that's good what else do we need we need a restaurant address okay here we need yes restaurant address perfect then we also need okay now a simple text saying delivery details let's do it maybe copy paste paste it will be easier like that user and user what do we need at first oh oh name also we do need user name and user address perfect and in here one more text saying delivery details perfect i think we have all of the needed information let's see so we have an image uh the title of the restaurant address of the restaurant delivery details name of a person and the address of a person and to the right probably later we will need the icon okay yeah yeah true everything then so actually let's import the icon right away because i have it in my notes here so we will use uh an icon from typo and the icon is going to be this one check size 30 and white so white we won't see it right now so let's make it black for now okay here's the icon perfect now we can see that uh congratulations priyank donated thank you very much yes you're here we see you so now we need to make our image all the details and then the icon in a row and in order to do that let's wrap up all of our information in another view like that and make no not all of the information uh all of the detailed information without image and without um without icon so like that and so basically wait a second because it's a bit confusing so if we look at the presentation the structure of this order item is it has three columns the first column is the image the middle column is the one with the text and the last column is the one with icon so that's why lucas needs to put all the texts like restaurant name address delivery details and so on in a view to make a column out of it so as we can see the image is one column then we have a view with all the texts and lastly the last column is the icon yes yes okay uh now that's good so we also uh need some more like margins because right now this container is actually actually messing up a little bit for me everything so let me delete the styles from here because i want you to but now it's also not good okay then we will because we will need some paddings and also margin around it when we add it to the list but maybe we can add it then okay so after uh having a row we as you see have a border around the whole object uh surrounding uh green you're still in a presentation i i just wish to show the border so uh a green border color around the whole object just to make it look nicer so let's add that let me check what what's the color that i used okay so border color is this one like these comments uh comments like these are are so nice like your tutorials are helping me a lot now i finally understand what you're saying and typing amazing now it's time for you to actually start building this and you'll you'll unlock the new potential of being a developer yeah that's really really nice okay border color but because we don't have border width we can't see it yet so let's add border width as well of two perfect but we also need to make it rounded so let's add border radius something like 10 okay that's already shaping up a lot better so we have this one let's go and style a little bit the image itself because now it looks a little bit strange i should i i can say so uh the width of the image will actually be um let's delete it so not like this yeah okay perfect uh it's a little bit stretched so now we can actually work a little bit better so the width will be around this much but the no not here it's in here but the height i'll um give it should it be the full height of the container but it's it's there yeah yeah i think 100 perfect i think uh that i like this this uh approach so now let's go to the weave let's think uh should we have with ninety percent or to do it relative with compared to the apparent component like i don't know let's say thirty percent of a container to be the image so that it will look uh also good on like ipads or bigger screen size okay but let's make it a little bit maybe less 25. so in this game it's like in any scenario it's gonna take like one-fourth of a container that it is displayed in yeah so now let's add a little bit of margin as well because uh after removing that it's it looks not that well okay uh that's better and um hmm what else what else i think the the uh container itself looks pretty good uh we can add i'm not sure like this approach uh let's see i'll do justify content and space between between these three in order to or maybe i should just do space between these two and have only the icon on the left maybe that i wouldn't put uh i wouldn't work i don't know right here yes yeah i probably you're gonna suggest just having like uh let's save it and actually justify content like to work with justify content and to keep two columns to the right and one column to the left you would have to uh to create two more cal to add a new view to group them together but just be putting margin left auto we make sure that the icon floats and maximum variety yeah so and then if we do that let's add some margin on the left to the all the information inside so maybe 10 yeah i think maybe that's going to be good enough later on we'll see so okay and i see that i think there is a question for you sorry to interrupt yeah how to be handsome and smart at the same time teach me teach us i i didn't expect that no i'm very fluent so yeah so let's add some um border radius around the image in order to make it look a little bit nicer maybe something like okay let's not be perfectionist let's make the same 10 and uh i like it a lot better right now so now we can start styling the information inside so let's start with restaurant name okay and for the restaurant name i see that well let's increase the font size a little bit to [Music] okay yeah um we'll see and maybe let's make it a little bit bolder font weight 500 yeah a little bit um should we make it yeah let's see let's see okay now let's go to the address and the address more or less is okay maybe we can make it a little bit i know vadim doesn't like when i do that but a little bit lighter no it's okay it's okay okay what you are driving today so okay so yeah we have that and now we can deliver style delivery details uh a little bit better as well so first things first we will need we can do it this way and add some style equals add some margin on top in order to separate these two uh maybe five uh no maybe [Music] and okay you have a space where like before delivery yeah yeah thank you okay and now let's add information and let's add some styles to the user address and user name and i i can already see that i don't want to change much i just want to change the the color so most likely later on i'm going to use some one style and do the same for restaurant address username and user address yep okay let's do gray and let's just simply copy this one here okay do this let me check the design real quick um let's see it together yeah i think we will uh we we have to add some spacing for the details view that is inside right yes yes we will have to do that right now let's quickly fix the last thing is uh to have the icon correctly aligned and with correct colors and then we'll get into that okay as well so also our we can maybe do that right away because our icon will have to be pressable or should we make the whole container pressable later yeah definitely the whole container okay then then simply wrap the icon in a view okay like that save it and this view will have to be styled twice a lot so let's start with background color and let me take my background color hash which is here okay yep now i need also to um square not square to make only the bottom how to tell border add border bottom radius to only the bottom and top uh sides yeah on this side so not square them but round them yes that's the word that was looking for so yeah border bottom right radius will be 10 and also border top uh right radius will be 10. let's save it okay that looks good it will look good to have the same um round corners only one one side to the image as well so the other side is square what do you think you mean this side to leave this yeah square okay maybe this height square i think that that i like this suggestion so let's copy these go to the image it's here but i'll have to change from right to left yes uh border bottom left and here as well can you close the right yeah okay wait what happened oh because i have this border radius still here yeah yep oh yeah it looks a lot better uh okay so what else now we also need to for this icon view that we created we need to align items uh in the middle in order to align that um icon in the middle like that and also justify content in order to align it like that so vertically and basically horizontally okay now we can actually make the icon white so where is it color white okay and do we need anything else maybe add a certain width to [Music] let's fix all first of all the maybe some adding title so yeah we will uh should i add the padding on this uh or better add the padding in there let's see horizontal maybe or even oh no it doesn't look good no i need to fix this uh title at first yeah yeah yeah but no you know you know how how i think it's gonna work if you just provide flex one to the middle container saying that don't expand like over your limits just take what's what's there left for you yeah yes yeah smart let's add this in the front okay um maybe that's a little bit too big but maybe not yeah maybe maybe five will work just not to take so much space out of the screen yeah maybe five looks a little bit better okay is there anything uh you know what i am noticing let's see border radius and let's make 12. if i make it 12 minutes let's go huh people are cheering let's go nice so now if i make the border radius um on the whole uh border color here 12 instead of 10 then as you can see it lines up perfectly so let's make it 12. okay and i think this component is finished if i am not uh i would add some padding to the middle container of the text just because now the title touches the border yes yes and actually i see that i had some padding on the on the image as well inside but maybe we don't want that maybe it looks just like that i also have a right okay where is this one okay adding from five or maybe only padding vertical and yeah yeah i think this one this one looks good good enough let's say like that i would say perfect okay so we have this um component created already let's see what we all need actually what we need is to extract it to a separate component so in order to do that let's create a new folder in our not in assets but in our project and call it source and this source let's create components most likely we will not use this component uh in on in another place in this application but i think it makes sense to create it inside components because later on if you expand this application you might reuse this component in quite a few places yeah definitely so let's create another folder called order item or or the list item no order item today i'm behind the wheel so let's index it side and import we need view we will need uh actually let's i would just copy everything the whole application there yeah and just like that yeah so let's go here export default function order item but i don't like like that so me neither i don't know why i'll do it like this and then go to the bottom export default order item okay perfect uh what else so we can delete the status bar we can delete this view with this container yes and leave only the one that has tile save this and now i'm thinking should i move this inline styles in these styles let's just import it in objects yeah uh okay so let's delete all of this and that's this just to have a container for our applications yeah we don't need these as well here anymore you will need the dummy data so don't delete it yet uh oh yeah yes yes yes you're right okay and now simply let's import order item from uh source slash component slash order item and that's it here order item close it save it and see what's the problem none of these files exist oh because here we are importing it incorrectly so let's go with double uh more no even more now assets slash data slash orders save it and what's incorrect here oh uh most likely let's reload and see do i get nope no error i don't think it's even a bit here what can you zoom in a bit there oh this one yeah yeah i think yeah like you you just have to re reload it yeah so let's stop the server because yeah it's not reloading let's start it again go lucas go green averages let's go run the simulator i mean in the meantime let's drink some water okay and here it is we do see so sometimes reloading helps perfect we have this yeah in a lot of time perfect we have this order item already rendered here so let's open the presentation and see what's left we extracted and right now we need to send the data through the props into our order item component so let's do that actually i forgot even to do that but yeah so vadim said it correctly we still need this orders equals orders at position zero okay nope let's save it and in here we will have to pass the order a parameter like this and order let's save it let's take it from props and um yeah so vadim likes to do it that way maybe for a smaller component makes sense here as well let's go okay let's add some spaces save it and now we need to take all of our information from this order instead of from the order that we were importing here at the start so let's clean it up save it and everything works perfect um we can go and now you can you can show that you can render two separate two different order items i can render like yeah many order items send different data send orders at position one for example okay uh so then maybe or there's position one and just by doing that we have different data layer and it automatically renders different data i don't have three i have only two and these two are the same that's why i see the same data here because in our data uh let's see here i have jacob's duplicate and here let's change just the image uh you can change simply the image advantage like the number of image here where is url instead of restaurant one do restaurant two or three yeah that will show the difference yeah yeah and maybe we can even rename here to just so many people are rooting for you come on let's go i'm gonna start being endless okay so uh yeah we have all of these now we can go into the presentation and continue from here so right now we will implement the bottom sheet but before that lucas before that um shall we implement the flat list but the flat list will be in the bottom sheet let's just do it now and then we just move the flat list as a whole yeah yeah just to to make sense like why we created this individual components and how to render a proper list and after that like where we display that flat list like it's up to us uh wait a second wait a second i didn't show the that one what are you doing simply important flat list from react native and in here i am defining the flat list and flat list needs of data that we want to add into a list so let's simply pass orders and we don't need this one anymore and this one and also we need to uh also define how are we rendering this uh yeah how are we going to render this each item yeah like this each item in the in the flashlight so in order to do that let's define it like that and then the structure the item from the from this array that we just passed and simply do order item and pass each item as order into order item or save it and as you can see we have all the orders and they're in a list for now we have this problem with the nudge here but yeah later on we'll fix it as well let's right now maybe simply add padding top 20 40 yeah maybe even 50. okay perfect so now i think it's a good time to start implementing the bottom sheet that we will use like this so basically we will have this bottom sheet that will be able to uh scroll up open up and we'll see orders inside it all of these orders that we just created and while it's closed we will be able to see how many orders do we have in there so in order to do that let's go here and follow that the instructions so first things first okay we need to i need to open my as well here and then do you show the code nope let's show the code let's open the terminal in here open a new terminal and in here let's write expo install add and i will copy because i cannot pronounce his username but most likely gorham slash bottom sheet and we need version 4. so let's install it it's also in the presentations so you can simply copy paste it from here not to make any mistakes yeah after installing this library we need to install a few dependencies and those dependencies are react natively animated and react native gesture handler and do install it with expo install as well because it will select the best approved version so that's always good okay it's installed and actually for now we need to stop our development server because we'll have to uh rerun it either way so and last thing that we need to do is go to our babel config.js and add this plugin uh let's fix it here this plugin react natively animated plugin and it has to be the last item in here so you can have multiple items here but it has to be the last one in the list so yeah let's save this close it and rerun our server but i think we need to rerun it like with a clear no um we have a clear flag just to it should work but maybe that's a good problem would be a good practice after especially like for this or animated like uh but we added the bubble config and so one like it's mostly better to run it with uh where is it yeah we'll start [Music] if i remember it correctly of course well it worked something worked so let's hope so it's i think reset no no no no no wait it's clear yes okay so let's see what will happen here [Music] yeah let's hope that everything will work because reanimated especially second version likes to mess up a lot of things so yeah and what's so we can start working on the bottom sheet drawer right now and what we need first things first is to import import uh use ref because we will need oh not from here no no no you also have this issue yeah sometime and uh yeah so should i should it work here and then move everything into another separate component or let's do it right away in the separate screen yeah let's let's do it right now not to have to move a lot of things around let's move all the code to to a separate screen yeah let's create another folder in source called screens and in here uh let's say orders screen let's index.js and as i said we'll need to import use ref from react so we can delete this one from here and also probably right away import orders screen from force slash screen slash order screen and have order screen here now let's comment out for now this one save it and element invalid what did i mess up probably yeah i don't have anything yeah so uh let's create real quick no not well you're defining this component someone asked me if the full stack mobile developer of course has subtitles because english is not my first language so at the moment we don't have yet subtitles but that's something that we're gonna add as soon as possible because uh we have a lot of people from all around the world and not everyone is native speaker myself included so for that reason like we it's a must to have like the subtitles and they're coming very uh very soon after we finish uh other important major stuff there so we're gonna have subtitles there yeah okay so as we can see we have our screen here and we can start working on the bottom sheet so first thing that we need to do as i said is to import use ref and create cons bottom sheet ref equals use ref no later on i'll show you why we need it and how we use it but and also we will have to define one more function maybe first of all no maybe let's face it on the screen and yeah like do it step by step let's import bottom sheet from uh graham bottom sheet okay perfect and in here let's render bottom sheet so uh in order to be able to render this bottom sheet first of all we will have to pass our reference that we just created and also one more thing because right now it doesn't know where to snap and fix the opening so we need to pass a parameter called snap points and for now i'll simply you can pass an array of different values so for now i will [Music] and also the values have to be strings and in the strings it has to be percentage so let's pass 12 12 means it's closed and let's say 95 means it is open where is the percentage sign here so these snap points are where the bottom sheet will stop when uh you pull it up right yeah pull it first and then down okay and the first value in that array is the value of how much of the bottom sheet do we see when the bottom sheet is closed so in our case we still want to see something that's why i use 12 percent yeah i'll show when it's rendered on the screen i'll show and like explain a little bit better okay and let's say hello okay snap points we do have it here and let's see what are we missing oh and also let's add in here styles okay let's save it do we need to say uh at what uh snap point do we start no we don't uh index although it might be true i forgot about index this is like at what point do we start when we initialize rendering oh here it is yeah so i wasn't seeing it because uh my whole screen is not it's white as well as the bottom sheet so maybe let's add another view on top and give to this view background color in order to make it visible off let's say blue it's like weird and i think flex one yeah yeah and to display it on the whole screen yeah so an index actually means if so if i delete the index see what happens it means if when you uh open the app if it's index one that it will open open with this bottom sheet uh at 95 as vadim said and if it is uh not defined it will take the first value from the array which is zero uh so you can choose where you want your uh bottom sheet to be when it's open from these snap points array that you provided so if i i could say index uh 0 and then that would mean that i'm taking this value but even like 0 will always be the default value so that's why actually i'm not gonna use this one okay and here is the bottom sheet everything is working like it should so that's good um and i think this blue is just so annoying i may i'll make it light blue that looks more like water perfect we have our bottom sheet now we need to style a little bit our bottom sheet container as well because we want to see as you can pro did you open the presentation presentation yeah let's go yeah so we want to uh show that we are online and maybe later we can even implement uh a way to go offline but for now we'll just be always online and also we need to see all of the available orders so let's start working on that uh so instead of having this hello we will create uh saying a text saying you are on line and also another one saying available orders and also i will need uh orders here import orders from wait wait wait wait uh what happened during the last 10 seconds so the only thing that i did is added these two texts inside the bottom sheet view okay so you're online and for the available orders okay yeah and now i'm importing all of the orders in order to get those available orders let's go to assets slash data slash orders and simply pass orders dot length okay let's save it and we can see available order three and we were online so now let's dial a question does the button work in android as well yes it it works i've tested and it works so let's uh define style object for our your online title and let's first of all of course make it a lot bigger well not a lot but at least 20 yeah we are aligned i'll make it a little bit bolder so let's say 600 maybe um yeah something like that then i'll also as always add some letter spacing you like that yes and i think i think that's it maybe a little bit padding on the bottom in order to have this one further let's add in here a line can you close that left panel so we are aligning all the items in the middle here and when they're in the middle do i need for for available orders something probably as well some light styles like letter spacing and yeah and i will need some i know but yeah for now it's okay and i think it's not uh that bright so let's make it gray perfect so we have all uh this now we need to actually let's open the presentation and we've rendered everything here that we had to so that's good the next step is to render inside the whole list of items that we've just created in our app.js okay okay so let's go in here cut this part out save it come back here and under this yeah under the whole part let's paste it in uncomment uh fix this a little bit not sure the command of windows but yeah on mac is alt shift f uh okay we are rendering i think we will need to import yes we need to import ordered items so order item i mean probably the past will be incorrect yes so what's the actual path uh um components slash opponent slash order icon it can and we need to import also also flat list here perfect we we have them here that's already a good start so um let's see let's see actually maybe can you go back maybe specifying why now it works because uh i've moved them from this view that contains all of that and i will have to move it either way out of it i paste it in the wrong place because uh yeah so let's see if i delete flex one here yes and i'll simply add some margin bottom here around 20. maybe more 30. okay so yeah and that's it we have our list of items in here uh all the available orders and the this bottom sheet works like it's supposed to and it was pretty fast yeah that's that's actually very fast and i like i like the the experience that the bottom sheet gives to an application yeah yeah yeah same i really enjoy it and later when you have map here it will look even better so let's see what we need to do now okay so after we are done in this screen we can start working on our next and the only next screen that we will have today which is order pickup details so let's okay add to stream okay open this and create another screen called order delivery okay in here let's create index.js and go through the template if there are any questions yeah yeah yeah someone is asking if we build this for a customer how does the food vendor know that the customer order a food and reply to the deliver so for these we're gonna build in the fifth day uh the restaurant dashboard where they will automatically receive in real time new orders as the user place them so that's going to be their application where they will also manage their dishes like what we are selling and they will see a list of new orders they will start preparing them picking them up and so on okay and i think we can comment this out and import another screen which is orders delivery orders or not this one orders deliver save it and find rival orders okay yes and this one let's save it and hello perfect we can start working on this screen now so let's see the design uh okay so we need the same uh bottom sheet navigator we can go here and more or less copy so we'll see bottom sheet ref we do need that wait wait a second uh i don't see updates on your screen okay now i do i started seeing for me it was frozen a bit okay do you see now the update where did you take it from from the order screen that we just created okay so let's also import use ref oh my god these imports from react save it okay let's go back and simply oh and also i forgot here to show one thing in order to make the application a little bit uh more performant we can use instead of simply providing these two values because they will always always re-render after you open or close so we can do one [Music] we can use use memo and i think vadim i'm not sure i saw that you covered this in your course a little bit as well for sure a little bit but i'm not sure how much i yeah i cover it in the course like this is like more of performance and we didn't cover it a lot on youtube but yeah that's that's great like to um to to remember some values in order not to recalculate them uh multiple times so that's what we're doing and we will return uh so we will remember these values and only if they change we will then re-render it so which in our case they will never change that's why when we open or close the bottom sheet it will not re-render the whole component because you opened or closed the uh the bottom sheet so it gives a lot more also performance which is nice and sometimes you you need to like uh think critically if you actually need to use memo because sometimes because you also store it in memory uh this whole value which is also if you store everything in memory and phone memory it's not going to be good as well so you need to find a good balance and think critically when you actually need it and when you don't need it and in this case i think it makes perfect sense so let's copy it as well let's paste it and also import bottom sheet and this one what does it say here probably nothing okay let's close the tag use oh i didn't import it use memo here let's import it okay and now let's give as well some background in order to see our background color in order to see our bottom sheet navigator so we'll give it light blue instead of this slide blue like shortly uh in a couple of minutes we're gonna start implementing the maps so yes just be patch patient yes yes okay perfect we have this and now we need to uh display inside let's see what we need to actually display okay so we need to display the minutes that's left uh to go till i know your point and also the kilometers so we'll need some icons let me open where are my icons let's see uh i have oh okay they are here no not here it's from font awesome five shopping bag yeah yeah but i'll yeah here i found them okay perfect so um also there is one thing that we can uh do with this little uh i know handle let's probably handle so we can style it as well you can make it like completely remove it and as i see in our application it's a little bit gray so i'll show you how to also style it you can pass handle indicator style and just simply pass the style so just for demonstration let's also do gray which it may and also the width will uh and also yeah width will be 100 maybe one hundred two but yeah and not the color but uh background color yeah perfect so that's how you can adjust this you can also remove it completely it depends uh what you need okay so inside let's start working on the needed information first of all text can you close the left side what can you close the left side oh i always forget when i'm working i like to have this open because then i have my code in the middle of my eyes i'm not sure why i got used to this but yeah uh thank you for telling me and here let's say 14 men then we will have an icon which is here i'm going to copy that icon to two to two here it is so it's font awesome five with the name shopping bag yes font ah some five and also from uh expo now probably like this from how is it called expo expo slash vector or icons let me i'll check it myself okay it should be an order item exposed flash okay let's save it and yeah i don't have style here so let's simply save it okay and last but not least we also need five millimeters okay we have all this data in here so let's wrap it in a view because we'll need to first of all align them in a row and then add some style some more styles so let's start with simply aligning them in a row perfect then let's align all the items inside and center to make them centered like this and also justify content center to make them in the middle here okay that's good now let's see what we need for of course we need to make our 14 minutes a lot bigger uh text so let's go here style equals and font size let's see 25 maybe a bit too big maybe good well we'll see you later and of course letter space and the same styles to the kilometers because we need to be consistent save it [Music] i think it's uh yeah it looks okay maybe our icon should be a bit bigger but we'll see but now we need some icon styles and here add some horizontal oh what's happening um oh margin horizontal yes margin horizon some reason i don't get uh don't get that suggestions ten or five let's make it then let's see the design i think that that's more or less the same with from what we have in the picture maybe i need to make a align this container also in the middle did it change no i don't think it changed anything is it in the middle or no i don't really understand i not really i don't think so like the icon is not in the middle but the whole container yes because well oh yeah yes yeah probably yeah okay so then we can also add some maybe [Music] margin on the top let's say 10 yeah it looks a lot better now and okay let's not maybe add divider right now but i see that we have a divider there as well maybe later we can add it as well okay so we have this data that's good now let's start working on the restaurant information that's inside in order to do that we will have to import orders from [Music] okay uh yes one more assets slash data slash orders okay let's take one order save it and start working on the information inside so first of all we need a title so let's simple add a simple text with order order dot restaurant dot name save it okay we can see it here we also need to add the address okay perfect we will also need to add information about the user a little bit so actually only the user address okay and what else and also some information about the order that we have so we don't have that in in the dummy data yet so let's simply provide some hard-coded values and we'll be able to fix it tomorrow yeah onion rings big mac i know how many big macs did you order three big mugs for me okay then tasty uh two and i think that's uh no of course how can you do it without coca-cola bro we are not sponsoring this video okay here is i think all of the information that we need about the delivery and in this uh um in this view that holds 14 minutes the icon in kilometers let's add some margin on the bottom let's say 20 or something like that i would like to maybe have that divider because it looks pretty nice but we'll see okay now let's see what we need to do uh let's style the restaurant name so we can of course see that we need size increase to 20 maybe even more 25 yeah i think 25 will work so um of course we cannot leave without letter spacing and some padding uh adding vertical uh 20 yeah okay now let's say let's work on the address style address we need to make it a little bit bigger as well so font size 20 okay let's uh [Music] we'll add a little later the yeah color of course great the padding will add a little bit later and font or not here font want weight which is going to be 600 or 5. but i heard someone said in the crypto price tracker when i was doing stream that 500 front weight doesn't change anything on android device so i'm actually i wanted to test it but i've never had uh a chance to test it because i was lazy and i always work uh on the start of like in on ios so i'm really wondering if someone can i will check that i cannot say uh what's the default one size is it 400 font size or font weight font weight like the default one 400 yeah 400 okay okay address is i think styled and now for orders let's see uh let's add no user address i forgot but i think yeah that's going that's that looks the same doesn't it i think it's completely the same so let's copy paste the styles okay let's save it and add these order items in a separate container and add some more styles here can you scroll a bit just to have them on top not to cover them with yes or beautiful faces yeah like this style equals and add some okay so first of all of course we need some margin horizontal 20. no i'll add margin horizontal actually on the whole uh container and i'll add all of them in a view later on so let's not add margin horizontal here and let's um i have a border border here so let's add actually in here border top width which is going to be like let's say two no two too much one let's make it um border color gray okay and um maybe even light gray yeah this one looks better and i think that's more or less okay so let's add all of this information in another view in order to add some paddings around it i think it starts here doesn't it yes and oh it's already in a view that's perfect so let's add some styles here and we need some padding most likely yeah let's do a horizontal for now plenty plenty good yep i think it looks good with 20. okay perfect uh now oh i also see that i'm missing icons so i need to find those icons to to [Music] do you have them close to you so i have icons for for user and stuff oh yeah i found it already so for the addresses just to make it a little bit nicer so i will need all fontisto and also 1005. let's copy this one go to find here restaurant name and do it before no restaurant address and do it before the address paste it perfect and let's find the other one and user address paste it yeah voila which means we need to add them in another view i'm thinking like maybe i should move the styles to separate but i'm really afraid to make everything very confusing you start moving the styles now flex direction row okay perfect and the same for this one which is uh close the view no no no no no okay let's see what what's happening here perfect and um so in this style most likely we will have to add some margin left let's say [Music] is ten good maybe even more and same for the address okay now we can see that we also need some spacing between them so let's simply add to the top container some margin bottom 10 20 yep and same for this other container as well okay also i can see already that we need to align the text something of very little changes is a bad practice and i don't know why it's a bad practice just in terms of structuring your project and uh it's better when you separate the rendering logic from the styling logic from the business logic so in one file you have like what's rendered on the screen for example a view a text and an image and that's like your structure of the application in a separate file you're going to have a styles and that's going to be the styling of your application and pro in some cases you also take out them the business logic of what's happening inside your application in separate files uh just to have this separation of concerns the code is gonna be much easier to maintain to improve you're gonna know like if if you have a bug related to the style you're not gonna mess with jsx you're gonna go straight to the styles or vice versa like if you have a bug with how everything is positioned like you're not gonna look at styles because you just care about rendering stuff lucas is doing this in line just because to save space to save time here uh but yeah of course like you can take out and that's advisable to take out these styles uh in a separate especially in these places like look i'm reusing the same style in four different places of course after we like have a correct data we will not reuse it in four different places because we will render them in a map or something in a flat list but for now let's say and there are some situations when you do reuse them for example in here both restaurants uh addresses have completely the same style and i'm reusing them which would make a lot easier to simply have them in a separate object and import it like styles.no address so yeah and also let's add some margin on the top 20 no not here uh where is the not margin but padding so i'm not actually sure should i uh what do you think should i move this styles because i'm actually done here should i move the styles in a separate i would say so let's let's try to refactor a bit okay and also let's add the button before that's one last very little thing on the bottom it's not going to take too much time so let's add the button and we'll create the button ourselves that way we create another view here and let's see what the button needs so okay first of all it's going to be very green let's find the that green beautiful color it's three okay yeah just to scroll a bit to have it on the top yeah yes yes yes yep like this perfectly so this view can a background color should be this one no no copy again this one perfect also let's add inside right away text saying for now let's say accept order later on we'll implement logic to that okay except logic and also like redeem likes to do margin top auto and actually i like it as well to be honest margin bottom uh 30 that's too much or no that's going to be good enough okay so what we also need we are we need some margin vertical and actually yeah let's add margin vertical uh 20 and then we don't need this one [Music] not 20 but 30 and also margin horizontal which is going to be 20. or maybe that's too much maybe 10. that's good and also let's add border radius as always to make it look nicer then perfect now let's style the text inside so first of all of course let's make it white color white perfect we need to add some padding around it some vertical padding i would er any padding because it's still going to be in the middle yeah yeah true okay maybe more or it's good no maybe yeah maybe 15 yeah yeah yes yes this one a lot better font size uh i don't know 25 probably it looks more or less similar font weight 500 okay that looks good and align it in the middle thanks to like thank you very much and yeah go ahead improve this project create a business out of it i don't know it's there are so many opportunities like you almost have everything here in these five days challenge and you just have to do a couple of small details after that uh of course a big part of that is going to be like payments and so on but after that you can you can have a business out of it i almost forgot the one thing to add wow letter spacing i'm gonna make hoodie for you with a big letter spacing with a lot of letter spacing yeah so now we are done on the screen it looks very nice i didn't edit this divider i'm not sure if we need it maybe maybe not we'll see you later but now it looks perfect so as vadim said he wants to move the styles out of here so let's create another folder called styles.js and here let's import stop as you know what when i was doing like uh i think crypto price tracker uh i remember like i was doing uh all the like tutorial blah blah and then i started uh separating styles from the logic in the view and i remember one guy saying like it was good until now and now i got lost that's why i'm so afraid to right now do again the same thing but maybe it's going to be okay export default stylesheet.create and let's create it starting with a container and okay let's close this one order screen is this is the one nope nope this is the one that we're working out with the word delivery one right yes yes or delivery is it okay if i leave it like that maybe that will make more sense like what i'm moving where yeah maybe you can even uh put it on the whole screen uh on the whole screen what i mean like to drag it to that to the right like that yeah yeah let's let's do it in order not to make it confusing now i have in order delivery the sort like folder that we just worked on i've created styles.js file which i open here and when you open you can click right ma right mouse click and then split right then you'll have the split screen and now let's start going through the inline styles and adding them here first of all let's import this the styles that we just created styles from [Music] that styles save it and i'll start for example first of all container let's take all of what we have here cut it delete this and say styles.container and in here paste what we had cut from there save everything and as you can see nothing got messed up everything still is still the same let's go more and more and okay we see another inline styles let's cut this out name it here something like handle indicator and paste it in then come back here do styles dot handle indicator save it here save here go back we see the style indicator handle indicator is still the same okay perfect now we are doing the uh where is this view where does this view end okay so it's only for the handle indicator we can say handle indicate indicator container okay and let's take all of these styles paste it here and you see how much like i'm deleting right now and how yeah it will make so much more sense yeah yeah it will look a lot a lot better really fast it's easier to understand like what what do you have here on the screen yeah exactly exactly i save it here i save it here go back nothing is changing perfect we can work further cut take out this one call it minutes but i know that i'm going to use the same for kilometers so uh route details next that's the only yeah round details text that's the only thing that's uh annoying about this and you you have to know a lot of good names yeah to find out names that's yeah that's what we do a lot but it at the same time just by thinking about these names and putting them there like you will gonna structure your code better and you're gonna understand it better for example when you just simply look at the view as you said they're like okay where does this view end just understand what it represents but now if i look at that view i look directly at the name of a style and i understand the context okay this is the handle indicator container and it contains like that handle and so on yeah yeah that's true that's true so you can leave these like little one uh styles like in line and i think i'm going to leave this yeah it doesn't take much space it's yeah it wouldn't really make sense it would even introduce more work okay perfect let's go here we can see that this is the whole data container but for this one i will create because of what vadim just said so i will say order the delivery details delivery details container and simply take this out i usually take the whole but yeah no don't don't worry you mean like with the brackets right away right yeah but yeah i started saying and then like it doesn't matter yeah that's not not much uh yeah different okay now let's create another one restaurant name i really hate these like suggestions in in styles yeah let's cut this one out paste it in styles dot restaurant name let's save it here let's save it here go back from time to time to check if everything is still correct perfect and now we can go even more down okay so this we can already see that these two are the same so we can call this address container address and not like this address container okay let's cut this out files dot address container paste it in now delete everything here and simply styles dot a lot a lot a lot better i'm feeling so much better when doing this one uh and for the text now we can say the same for like not here address text got all of this out paste it here file address nope save it and the same here files dot address text but save it go back to check something is not right oh i didn't save this one go back everything is correct here and i think these are the last things that left so order details container i think i need to make it a little bit higher cut this out paste it in files that order details container let's save it let's save it and order item text okay well you didn't like the name no no no yeah almost there almost there files dot order item text okay so for this one uh we will have to delete some more like that like that paste it in wait oh no i copied the wrong okay i will always delete with that cut command like with command x and i think i got used to from you know i don't know teach you that so i saw that i don't know how i remember that you were always like control x control x control x when we're studying okay this is good and last is uh button con not last but button container and i will also need button text not that much left files dot button container fix it in save it save it right oh i of course i did it the other way around okay and here styles dot button text whoo let's see everything is perfect nothing got messed up and i hope not no one got confused okay i think um we are good on this page right i think so do we have anything else left before implementing the navigation uh let's have a look here um so i don't think so i think we have everything name address okay yeah i think everything is here so let's go and um yeah go further and implement the navigation in here so first of all okay let me share the screen again and yep in here open the terminal you can go to the previous view to have a the not in full screen view oh yes yes yes correct okay let's open the terminal and run the command expo install at react navigation slash native okay let's wait a little bit i'm going to copy the next command right away and as we told previously you have all the commands in the presentation okay so now we need to install uh all the other dependencies like screen react native screens and react native safe area context let's save it and actually we need to install one more dependency called native stack i'm gonna be back in a minute okay yeah don't miss me we do already okay so after installing this we can go back to app.json and in here we can simply wrap our whole application in navigation container but before that we need to import a navigation container from react navigation native then go simply here and wrap the whole application in this container just like that like that save it and let's rerun the server [Music] okay it's loading yeah perfect now let's run the simulator again maybe uh this view is better okay okay the y 98 perfect we have our screen that we were just working on so let's go back to the code close the terminal and create another folder and source called navigation and in this navigation folder simply let's create index file index uh white new index.js and in here we'll work on our navigation in this application we won't have many screens actually it's only two screens so it will be really fast and yeah we'll have to we won't have to do as much as navigation as in the previous application so if you want to learn navigation better with like tabs navigation bottom sheet navigation bottom tabs navigation i mean then you should go and watch the previous ubereats tutorial okay so let's import create native stack navigator from native stack then also let's import our orders screen orders oh wow it's a double s so maybe from where is it prince slash border screen okay perfect and let's let's import orders delivery screen from same screens and orders delivery perfect now let's create a object stack from create native stack navigator from this one we'll have to use it in a minute cons navigation create a function for that export it application export default okay let's save it and let's start working so first of all we need to create a stack dot navigator and in here we will paste our screens i mean we will create our screens like that stack dot screen close it like that and to name because so let now let's give a name to our screen let's call it orders print and then let's pass component which they should render when this when we navigate here so let's press this one let's create another screen for orders delivery screen and pass this component okay let's save it and go to go in our app.js and instead of the importing disorders delivery screen let's import navigation from [Music] not like that like this and then source and then navigation and then go here add it under view navigation i think we will delete that view let's reload the application and see it should render navigation i think was returned oh i'm not returning here correct i need to return all of this and reload perfect we have our order screen which should be the first one we didn't initialize any initial route name and it takes the first one from the the whole stack which is correct for us but we don't really want to display the header at least here for sure so let's um do we want to display the header in the next screen what do you think it will look the map will not look as good but then we don't need to work on the back button let's let's let's not uh show the header i think that it really looks when the map goes all the way and i agree i agree definitely okay so then we need to add the screen options to the whole navigator which will apply those options to all of the screens inside it and simply say uh header shown false david perfect we don't have a header anymore and actually we are done on this screen that's it we won't need to work on it anymore at all so we can close it and uh let's yeah let's just remove that view around it because we don't really need it and remove this these styles perfect so uh we have our navigation implemented and now the next step is to navigate after you click on one of these orders we need to navigate to order delivery so in order to do that simply let's go to order screen and actually no in the components order item and index in here let's import pressable from react native and let's wrap everything impressible yeah we can just replace a view with pressable because they have the same properties except the pressable has a one price event yes exactly okay and on press also actually before doing that we need to import use navigation from react navigation native and at the top of the component we need to create navigation object by like that okay save it and now we can create on press event which after you click should navigate you to do to do i think it was orders sir delivery screen and we will need to pass the id later on so let's do the no and but i don't have what path right now so i'll simply you have you have i think the word or itself oh yes order order does have id right yeah let's double check it um yes order does have an id here perfect so yep simply like that and now if we click here we will go to the next screen which is perfect and exactly what we need now we can close the screen we can close actually delete this from here because we're not using close up yes and start work actually let's open the presentation so what we did we set a set up our screens we showed you how to import the navigation object how to define it uh how to navigate and how to pass the data so now we can finally start working on the maps finally getting uh into the meat of this second day so in order to do that uh we firstly have to install it and to install it as you saw we simply need to run of course stop again because sorry because we'll have to rerun it either way and install expo install uh react native maps and save it and press enter okay let's wait a little bit okay it's done installing and let's go to order screen and in here first of all let's rerun our server and application run ios let me take a sip of water okay uh perfect and now in here instead of this blue uh thing where you need a blue bra blue background we need to show our map and it's actually to render the map it's really easy simply above the bottom sheet before doing that import map view import map view from react native maps and above battle the bottom sheet add map view just like that and in here we'll have to pass some actually before doing that let's do styles because we need to style it in order to define how big it has to be the map and i want it to be throughout the whole uh screen so i'll need to use dimensions as well here dimensions because we need to pass the height and width of the screen to this map view as a style so in here let's do height i hope i did it i've written it correctly height dimensions dot get window i'm correct and then dot height and let's do the same for width as well favorite uh first of all like let's do like this close this one close it save it and yep here is the map here is where i am somewhere in here so perfect we see our map but can i suggest a small improvement yes uh like by passing height and weave like this dimension dot get if you turn your phone if i'm not mistaken they will not update if the dimensions change while the application is running so for that solution there is a use dimension hook also from react native that automatically updates if the sizes of your screen changes that's happening when you turn the phone oh yeah so that it's okay but you can simply take them yeah the structure i need to destructure it it returns an object with width and height so i just structure width and height and you can simply pass it on the air like it's even going to be yeah that looks a little cleaner as well yep uh but uh yeah that's that's uh that's another let's see if it works use dimension i didn't did i write it correctly uh let's double check use dimensions maybe it's use dimensions dot something let me check okay oh it's use window dimension okay yes i see it let's just copy to and everything else is the same save it okay perfect that's uh that's a nice one yeah so here is the map but we still need to pass a few more things in order to see for example where i am but of course i'm not going to show that because i'm going to emulator first of all won't even do that but the exact coordinates but we need to pass show up show user location save it and this lucas are you here whose internet is here i will uh what uh it's laggy for me i don't know is it from your side or from my side uh the the map was laggy for me as well when i was scrolling the whole stream like was like for me but now it's better so okay what where are you after uh passing show user location we will be able to see my location but of course simulator won't show my exact location it will simulate the location as well which is in san francisco merrick but besides show user location we need to pass follow user location in order to see that i am moving so let's reload the application and maybe let's just close because i know if uh if it uh likes to to show the lithuania me another thing that we can show people is that we can manually update the location that our emulator is showing with yeah from from some settings but let me just first of all double check if um [Music] it should be showing it here maybe i have written let me copy paste the props maybe i made a mistake and yes i made a mistake so here i am yeah shows not show so here i am and this is my location and if i move it it will also move with me because i passed this follow my follow user location prop but um i can't really move with my whole setup so we i'll we'll use a thing um in here location custom location and actually no first of all let's show the movement so location and let's say three-way drive and now it will simulate a drive it's simulating that i am just starting the car and here the speed is slower and it will also simulate only uh this what's the speed limit top the speed limit so if it's speed limit is 60 it will drive 60 kilometers per hour that's why it will go faster here yes so yeah as you can see i am moving here and i can simulate that easily i can also add just a custom location so for example i had i want to be here click ok and then i appear here so everything is working perfectly okay yeah so what's next in our okay we rendered all of this and we also need to render now the markers so our markers will represent the order so i actually then decided uh what we should show either the restaurant that needs to pick it needs a pickup or a user location where we need to deliver as a marker i think i think restaurants i that's what i thought as well like most likely it makes sense because right now i need to go there to pick up and yeah only yeah you will decide where to go based on the proximity from you to the restaurant yeah most probably yes most likely yeah so okay let's go back to the stream and here we'll need to import from the react native maps the structure and import marker and also yeah i have all the orders here so instead of doing it like this let's add a closing tag to the map view and inside let's loop through all the orders like that with orders dot show first how we can display one simple market yeah yeah yeah that makes it to confuse uh map no marker so if i add a simple marker in this map view i can add a few different parameters here first of all it can be a title let's say hello and i can also pass description which we can say world and then most importantly i need to pass the coordinates so yeah where i want this marker to appear and so let's say the coordinates i have some coordinates so i'll uh show it in a minute but now we also in the coordinates need to pass an object with a latti dude i hope i've written it correctly yeah and uh also so let's say that's something and also a lot too you can take them from the settings of a terminal because you had their your location so you can show them somewhere near you i'll get a right yep maybe that makes sense you mean from here right yeah if you have a better option i had it like prepared but uh yeah i think this one will work just as good and just change some [Music] digits at the end you know not to have it like right on top of you nope and it needs to be a number a float not a string forgot to remove this one let's uh save it what's the problem here oh it needs to be a dot here yep and here as well save it and here is the mark perfect later on we'll and if you click on it you can see the title and the description which will display the restaurant name and probably the address later on uh we will probably change this icon but for now let's leave it like that and or should i change it right away probably let's see let's change it right away and then just we'll display more of them yeah in order to change it simply also add closing tag like this to the marker and inside for example if i add text saying marker almost correct maker that's going to be good enough if i save it i also need to reload it and oh again why they know my actual location but they yeah so as you can see the marker is there almost almost here it is behind me it says marker not sure okay okay yeah so it's rendering whatever you pass in there and i need an icon that i found which is this one from n-typo and this one so like just like that save it and probably i will give the marker different coordinates in order to make it visible and let me find yeah here okay here it is save it paste it save it paste it okay hello dominique how are you doing that's amazing uh welcome here we are building a full stack ubereats clone with free applications the driver side user side uh and also the restaurants dashboard so today we are in the third day of our challenge uh and we are building on driver side application in the previous two days we have built completely the user side application it's already there on the channel so you can also check it out navigating this with the keyboard is so nice and uh so where is the marker that i see it don't it's the green one it's here here it is it's still behind me but i've pasted the different ones did i oh no i didn't paste the different ones so just change some numbers like there are like [Music] i think it should be okay now you lost it but here it is i see here is the marker so if i click on it i can see hello world and maybe the color should be different i don't know what color should we use maybe just on a white background on a white small circle to have it because we like this v it um you lose it with other elements from the map so you mean to add it in a view with a white background in a view with some very like like white background like small circle okay it's already there and now we can add some uh [Music] heading maybe that's a little bit too much as well five and then border i don't think it will change much too let's uh let's do it another way like the uh circle with green and viking with white okay yeah that might work yes yes yes this one or the right is maybe more let's see to have it complete circle yeah yeah uh both ways i don't know what you prefer more okay it looks better though yeah it looks a lot better this one i think what do you think let's leave it like that yeah yeah perfect so yeah that's how we render one uh marker but we need to add all of the markers that are basically one marker for each order that we have and in order to do that we simply have to wrap this first of all map through our orders uh array take it from it from it marker and return this marker first we will have to pass right now because we that we are mapping through it we need to pass with something i what's wrong here uh you closed the marker yeah yes yes you're right in here perfect so and now in here i can paste that marker and something is still they're still complaining about expression you need to close one more no no no no okay no word there is map no i shouldn't hear this one it probably doesn't return anything and that's why if you add the marker let's say you simply add view for now no it's still complaining um word there is map i am missing i think here one yeah i was missing one more oh yeah yeah yeah now let's paste uh this marker and also because we are mapping through we need to pass keys to each of them and the key will simply be marker let's say yeah let's instead of marker call it order because it's actually an order it's going to be easier not this one yeah like okay and then for the key yeah we can give word already so first of all let's give the title which is going to be order dot restaurant dot name and description which is going to be order order dot restaurant dot address and also longitude and led to which is going to be order dot restaurant dot flat and same l and g okay and yeah and all of them should be involved although yes i yeah we will go there order id save it perfect now let's go back to europe we are traveling today brian you gave a shout out to lithuania and i also have to give a shout out to although yeah but those are yes those orders um are very close to each other so let me change the restaurant itself probably is very clear okay yeah yeah so in here let's do something like six and here nine and here for the restaurant let's give number nine and three i don't know where it's going to appear but let's see i hope it's not too much let's reload maybe i hope yeah now i am at least closer to muldo maybe i need to change even more so okay first restaurant let's leave it like it is second restaurant uh let's do i don't know here nine and six yes okay even more we can do actually so nine and six here perfect and then for the for the other one uh four seven seven so yeah as you can see we uh we can see all of the orders that are in here and click on them see the name and the address of that restaurant perfect that means it's working let's go back to uh yeah to our presentation and see what we need to do map directly here before we get into that uh we have a word from the sponsor of today's video and the sponsor of today's video is academy.notejust.dev so yes we've been waiting for this moment for a long time and it's finally approaching very very fast and yeah i know that a lot of people can't wait to get in but yeah it's happening very soon so we are launching the course that i have been working on for the past uh eight months um yes and i've put all my soul into that in order to teach full the full life cycle of building full stack mobile applications with react native and aws amplify so if you want to get to the next level uh you definitely should check it out because it's much more than you see here on youtube on youtube we are pressed uh a lot by time like we have to be uh to do everything like in five hours we're doing also everything live here so the experience is a bit different in the course like all the videos are pre-recorded we added them properly and we cover everything very in-depth like on a level where you build these applications and we are ready for production so um after yesterday when i discussed about the contents of the instagram clone uh that we have there i have a full stack instagram clone with a lot of features a lot of people ask me like if they are beginners and if they will manage to do it so the instagram part is um is more advanced and weird like we get into actually quite advanced features uh like following systems notification systems uh liking system and so on like very uh specific features but uh it's the course is perfect for beginners as well because i created one separate complete uh course that is included uh by default in everything that you are enrolling in and that course is gonna teach you the basics and fundamentals of react native i made it as beginner friendly as possible and in that course i uh the only prerequisite that you need is some knowledge of javascript and some fundamentals of programming at least to know like what a variable is what a loop is other than that like i don't assume uh that you have any knowledge like we take it step by step we start by installing the environment on your system both for windows and mac os depending on what system you're working on and after that we get into the react native fundamentals like what is jsx how to properly debug a rap native application how to work with core components that we have in rack native and also how to create beautiful ui screens um and also yeah like other features from react like hooks use effective state other hooks that are very important and we use it every day i have a time to stop and to actually teach you these things like in like in details and give them the proper time because in the live streams that we are doing now maybe we jump through that use the fact hook or use state and that's probably some of the confusing part but you write you manage to do it but you don't understand properly how it works behind the scenes so this is the course that is going to improve your fundamentals for react native and we do this in a very fun way by building a duolingo clone with a lot of questions like all the gamifications that is there so it's super fun um to to learn by building something that you can see in your hands like on your phone that is actually working so we've been testing this course with more than 200 members that uh trusted me and joined the course when it was still an idea back in august uh and i'm very thankful to everyone from batch zero that supported me and that provided me with great feedback on the course and yeah for you uh you are going to be able to join the course starting from next monday we are launching it on 25th april next monday and here you have all the times when we actually launch the course and when you will be able to enroll some people ask me that they cannot log in right now yes you cannot log in because uh the enrollment is not open yet and it's coming on 25th april and also the enrollment will be on will last only one week and after that we close the door and we start working close together with everyone who has joined the course helping them get to the next level as a mobile developer and helping them with all the problems so make sure to join the waitlist not to miss when we uh when the offer actually goes live we're gonna have a very good discount for the first batch so you definitely have to check it out with that being said you can find more details at academy.notjust.dev where you'll find everything all the details but if you have any questions related to the course feel free to write me on any social media or directly at vadim at no just.dev uh and i'm gonna help you with anything that any questions that you have with that being said thank you very much to the sponsor of today's video and we can get back to uh our directions because we have still some things to implement in our project today here yep very well said yeah highly recommend the course so guys don't sleep on it and take the action finally and start learning properly so yeah i highly recommend it as well so uh yeah now we'll have to go through some installations i'm setting up and first of all we need to install the expo location and also react native maps directions so for that let me share my screen open the terminal stop the server and do write expo install expo location okay close this one [Music] okay perfect and also let's install expo install react native maps directions enter done good so now we will have to enable directions api and let me go first of all uh to that website here you will have for in order to be able to use their google's api you will have to have google developer account then you can create it in google developer console let me open it and then [Music] yeah so basically if you go to google play.google.com console so this we need this just for like creating a developer account so you can go go to google play console and here login to your uh to your gmail after which you'll create the developer account it's like easy steps and if you want to learn how to create it step by step you can check vadim's video on his channel of for example uploading your application to google play store and you'll be like step by step with payments with everything you'll see how it's done but if you so yeah after creating this one we'll need to go to and do another word developer google how is it i need to log into it as well and now i'll have to maybe i'll open safari that will make it easier for me because i don't remember my password promo probably like most of the people just here and here okay so after you create your developer account you can go to console.cloud.google.com select your account that your developer account the one that like the has developer account and simply go to can you zoom in a bit yes simply go to apis and services click on it do we need to create a project first oh yes yes you need to if you don't have a project you can click on here and in here you can create a new project so but most likely you will have this google play console developer project created right but still create a new project go to that project like open then you'll be you can also select the project from here if you already have like multiple projects so after we are here let's go to enable apis and services click enable apis and service in here let's look for directions api enter click this one and in here uh you won't have api enabled so click enable api here uh after you enable it uh you get 200 each month for free to use and later on it costs uh five dollars per 1000 requests so most likely there is no way for you to spend those two hundred dollars i don't know what you have to do in order you have to release the application to the public and a lot of people have to download it in order to bypass this 200 every month and it replenishes each month after you create your directions api let me hide i'm afraid to show the some code so click manage there and let's see what it opens uh yeah after you click manage there you'll see something you'll see exactly the same thing like this and then you can go to directions api here and in here let's say go to quotas this is some security measurement in order to to make sure that your account is not gonna be charged a lot so yeah just set the quotas for how many requests per day yeah exactly exactly so if you want if you're testing let's say you can say requests per minute and you can say like five requests per minute in order not to create a loop and after five requests per minute it will block and you will no longer do requests which will which means you're not going to be charged and after a few minutes you'll be able to do it again and then you can also set requests per day and request per minute per user this is not necessary but i think it's uh especially if you're developing and the testing it really makes a lot of sense after that go to apis i'm going to minimize this again and go behind the camera to see after going to apis click directions api oh no not apis i'm sorry not apis go to credentials i mean i made a mistake okay let's see what it loads uh yeah okay so after going to credentials simply click create credentials select api key and you will generate this api key which you need to copy and then we'll be able to use it in the application and i'll show you where for some reason i cannot add my application uh my credit card which is our next topic that we need to talk about you need to add billing address to this account so don't delete your api key i'm deleting because i just can't use it so i have another one created but yeah after creating all of this keys and setting quotas enabling directions api go to overview and and in the overview in here billing you need to create your billing account so just click go to billing finish click link a billing account and finish the link it's only like adding your credit card information and that's it most likely it should work i really don't know why mine didn't but for vadim it did work so probably it's my card okay so and that's it just keep in mind i missed it did you mention uh about the billing because this is one of the most uh common issues why uh your you will not be you'll have issues integrated with eating integrating with by directions api and maps api uh and they don't provide like a very good error for that it's just not gonna work and you're gonna stay like what uh why is not working so make sure that billing on your google uh cloud platform is enabled uh yeah go to building here and make sure it's it's enabled and everything is fine there this is by far the most common issue yes exactly so after all of that remember to keep your api key and will be able to work further i need to check where uh yeah add stream yes we've done everything enable creating enable billing and setting quotas let's go here and now we'll work on order pickup screen so let's go actually to our order screen let me share this one because we don't have their map at all yet we aren't start start the server we don't have one we didn't added the map yet there on the delivery screen yeah okay let's go here run ios wow i see uh pankai just wrote a really nice comment right now about this channel hey this is the best rock native learning channel over the whole of youtube thank you for your videos you have helped me gone from wanting to learn react native to actually clearing advanced job interviews damn that's that's amazing like congratulations on your success and uh yeah like it's possible like if you follow a couple of these builds like you will understand how easy uh you get like after going for a couple of them but yeah like in the beginning it's hard like i'm pretty sure that in the beginning it was hard and i'd like to to hear more details about your story but after you go through a couple of them like uh it's gonna make a lot of sense and by building these projects that we are doing here like uh you you're doing it in a fun way you're not just doing uh like fury or making some to-do list applications where what everyone else is doing on the internet like you're actually building applications that you can use on your phone show it to your friends impress them and even deploy it make some changes to the design of course like i'm not encouraging that because everything we do is for learning purposes only but you could change like the design get inspired and actually implement some businesses because a lot of people are doing that and that blows my mind i think that is the only reason that uh i get so much so much joy of doing everything here for free on youtube yeah and also likes when you're following these builds or even especially during the live uh stream you can always ask questions if something is not working and you'll always get help so yeah that's also one big thing that for example in university okay you can get the same thing but there you have to pay like a lot of money here everything is free and if you want to have like a university level um i don't know um course but even mispreparing that even i think higher than university level university doesn't have time to like i had the react native course react course and they didn't had like time to go around everything so i knew because i was working like from the first course and i had it i think in the fourth course i i they didn't cover as much as i already knew during that time so yeah don't get me started on that on universe my team didn't had this course because he was going with another route i think big data or something like that so yeah uh okay uh what's next we need to add a map here so we can simply go back to our order delivery and now order screen and import first of all map view and marker because we will need those two what else uh actually that's it so let's under the bot now above the bottom sheet let's import this map view [Music] like that and then in here we need to pass again style and we'll do the same as vadim uh pointed out with use windows dimensions book which is coming from react native use window dimensions and simply pass here with and height save it voila we have already mapped as easy as it gets yeah also we need to add these two props here as well because we do need to attract it here even more than there so let's paste it start with save it okay perfect and let's um yeah i think we have a map uh already here so the next thing that we will have to work on is drink water and oh creating reference to the map and i'll maybe later should i yeah maybe i'll later show you how why we are creating the reference to the map when we will implement the logic so for now let's add only the initial region that we want to like load when the map loads and in order to do that simply go with initial region uh open like this and specify latitude will be allocation so maybe i should show how to get my location at first yes that's what we're gonna do okay now we're gonna get into some more uh yeah now i understand like uh yesterday you were always like oh there are so nice comments here uh but i didn't have time to read them because it was working but now i understand like what you feel like it's it's pure joy like seeing these kind of comments like this is the best channel for beginners intermediate and advanced developers in the entire universe damn yeah that's crazy i told you i'm pretty sure there is some aliens teaching react native better than me but until we find them and get a connection to them like i'll take the crown uh yeah uh i got my developer job by learning from this channel damn nice that's amazing that's crazy wow so yeah and i'll start with getting the user location where we are currently in order to do that simply import everything uh as location from expo location okay let's save it and now we'll need to create import use effect as well here and when we load this page fire use effect like this on ever on screen render so that's why we're passing empty arrays dependencies and in here we will also need to create use state and a state for my location let's do it above the references so const i'll call it driver location set driver location equals use state and at first i don't have any location so it's going to be no okay let's save it and in this usefx we'll have to do a few things and i think i have them in a presentation so let's do it like this we'll have to request uh for the location to allow to use their location because that's sensitive data and we don't get that right away after we get the location we'll be able to get the current location and later we'll need to we'll go get back to that one so yeah first of all let's work on requesting the permission for to use user location let's add this back to the stream make it this way and yeah so in order to do that we go to uh use effect and in here we need to create a function called const get because this is going to be a synchronous i have like two ways of doing that and i'll show you first of all this way because that's a bit longer but makes more sense and then i'll shorten the function get the uh get delivery uh location permission or what uh i will get here everything i'll get the permission if i get the permission i'll send right away the permission to you of the yeah the user it's going to be a synchronous so we need to say specify that and uh open this one so in order to request for the location we will have to destructure the status from the request and go for await location dot and this is going to be long request request yes foreground permissions sync yes like this uh so this will give us the first of all we'll show a pop-up asking for a user to give the location to the user to the yeah to us and if he accepts then we'll be able to work with it but if he doesn't so if the status is not there or hey they declined it which i need to check it with uh like this granted if it's not granted that means he didn't let us use it so we can simply for now count the log and say no no no and return what's the problem here unexpected word oh yes i forgot this one okay yeah uh yeah so if he accepts to share the location then we can get the location by doing a weight location dot control a bit down yes get current position sync so if we get this location we can set wow i said location so many times then we can set the driver location to a latitude of uh location dot coordinates dot latitude and longitude to location dot coordinates dot longitude so yeah now we need to call this function so like that get delivery get delivery locations because you can simply do and you as you can see we already uh get this experience needs permissions blah blah so let's allow it because we'll need to allow it now we set the driver locations location as well but that's one way of showing this function but it takes like a lot of unnecessary code that we can clean up a little bit and in order to do that we can delete this delete this wrap this whole thing in these parentheses and then simply call the function that that's basically the same as we had before but just with uh less lines of code and it will work so uh in order to check if it's working let's console the worn driver location and save it i could i do this like in day to day work because this is much easier but on youtube i always stand not to do it just because it's quite confusing like it's too many parentheses and people uh might say like what's happening there and if you forget to call the function afterwards uh it's not gonna work and yeah like what lucas did right now is just no no you keep it keep it keep it that's fine that's fine like perfect fine i'm just saying like we are getting in the risk of people getting confused here uh of how this function works like declare it's basic basically instead of declaring a function with a name and then calling that function we declare the function without any name and call it right away that's why we put it like in parentheses and then we have another set of parentheses basically we are calling that function yeah so yeah uh you you can use the the previous way if it makes more sense uh it will work completely the same but now we can specify our initial region which is going to be a latitude of uh driver why i'm not getting the node okay driver location dot latitude then longitude will be as well driver location dot dot longitude and we also need to specify two extra options in order to specify hi how close uh it has to be like the map is like i mean this way how close to i don't know the zoom level how yeah how much zoomed in it should be and it's called latitude delta and we'll go for 0.07 and also longitude delta will go for 0.07 as well so let's reload everything and see driver location yes it's because uh when we just render we don't have this driver location so we can simply should we go for a activity indicator or x uh access the initial region safely maybe activity indicator so if we don't have driver location yet so sorry that's that's not me then we can return exclusivity indicator for now you can already see that it imported from wrong place where is react native i don't have anything oh here okay let's delete this one let's make size large save it and now uh style no is not an object driver location.let's do where did i written it wrong but initially it's null so you're doing if okay i'm doing a check here later can we waiting yeah probably had a mistake there so here it is our initial uh location in san francisco finally it's showing the correct uh place where yeah i'm actually okay uh so that's good we have driver's locations location but we also need to set for example uh if i go from here click on here no i was showing it there correctly why uh to to follow user show user location are you involved are you doing the same in the order delivery of tracking the location oh my god you did it in the wrong screen yes don't worry it's okay it's okay we're gonna get here let's cut everything from order screen and take it easy because this is error prone so okay we didn't need that we don't need this one here okay what else so we don't use these but we will need these in orders delivery yeah so we don't need activity indicator here but we will need it here what else we don't need location here but we do need it here good good good this is good and we don't need these two here but we need it here i think that's everything yes most likely so let's quickly check bottom sheet snap points yes yeah so i did it in the wrong screen we needed to do it in order delivery screen which right now as you can see it uh does work so let's test it first of all we're here we open this one and we are in a correct location perfect i hope nobody got too confused so it's okay i think um we didn't have to move a lot of stuff yeah they use effect the if statement the state and yeah these are this initial region so that's good we have already our initial region we see ourselves but we need to see for example as i said when i go from there to this place i need to see the order as well like where do i pick up the order because if i for example let's go back here so for example if i'm here i don't really see okay i can see delivery details is to vadim and the address is abc1 and the restaurant is this but for example i myself i don't know the street names like i can't tell how far it is so when i click on here i should be able to see on the map hi how close the restaurant is to me and how close the user is to me so in order to do that in the same use effect we will first of all also create what's the plan markers uh the directions and then mark let's start with markers because what you said like we get into okay let's display like what we still need the state for them but yeah let's do a first markers i agree because but what what why do we need state for for them because this information will not change it will come from the order if i'm not mistaken but for the um yes most likely it will come from an order so if it doesn't change then we can use it simply from the order yeah yeah so okay no no you're correct it won't change i was doing when i was uh working like behind preparing i didn't have that uh data so that's why i was working with states but now it's correct we will first we will get those orders so let's simply create uh did i import it mark yes let's simply create a marker we need to create one marker for the restaurant and one for the user yes exactly uh so let's do like this let's do like this and each marker okay sorry yeah so each marker will get first of all we'll take i mean coordinates which will be which will come from do i have the order here yes order dot restaurant dot let yes but i need to make it an object so let it to like this and then also longitude from order.restaurant.lng okay so we have the coordinate we can add the title uh from order uh restaurant dot name name and then yeah and then address will make it description okay and now for for the marker another marker we will basically do the same things but just with user information so here is the second marker and instead of order restaurant long let we'll do order user let and order user launch and for the title we will say user name and user address save it and oh so that's why i did because our orders from here are in moldova so for most i need to take my coordinates in moldova to set your coordinates in moldova that would be easier i think as well yeah like either change your current location or change what orders to be near you i'm not even can you give me some moldovian coordinates uh yes one second let me grab it maybe you can take them from the orders yeah let's see let's say the first restaurant order uh no i'm taking the first one so from the last one okay so this one copy and this one okay yes i'm here and let's reload oh let's see if it won't change no i'm somewhere in the middle of moldova um but yeah so right now we don't see the markers because we didn't specify what it should display we just left it empty so oh yeah it should be empty so now we need to display icons that i have here you can copy that the one from the restaurant from the previous screen because we did that with like yeah so this one and yeah so the same for the restaurant yes it will be the same completely which is here and we'll also yeah um you're right we need to make it like with the white box but let's first of all include the other one to see if everything is working correctly let's save it and now go back and also maybe reload [Music] fail prop coordinate latitude from the user uh right yeah in map marker do i order user let long let's see i think maybe i made a mistake like writing this latitude yeah yeah latitude with oh wow this word is like so annoying and longitude did i write that correctly long g yes yes i did um and we are somewhere in the same place so the dummy data is not exactly very fast but we can adjust it and which one am i taking the first one and nine and let's see three yeah well maybe they're too close one no it's okay bro it's okay yeah like i know moldova that's a lot we're almost to romania yeah okay so uh everything is working now let's do the same styles as in order screen uh here so let's copy this one close it go here nope don't close it here close it here like that save it and make white inside yes like this edit paste it fix it save okay so now we see the restaurant and the user location where we need to deliver and where to need to take so okay we have the markers the next step is most likely already directions yes so yeah yep let's start working on them so in order to do that we need to import the library that we installed which is called import a map view directions from react native maps directions okay perfect and in the tutu in here in the map view that we have here we need to like [Music] pass this no not passing how's it calling like when you initially no not initialized i don't know the right word but yeah basically add map view directions here and in this map view directions we'll have to specify quite a few things so first of all we need to specify the origin so basically where are you and this is going to be driver's location okay easy we need to specify the destination as well so the final destination is going to be a user that we like basically because first of all we are going to the restaurant and then only going to the user so to access that we say order dot user dot uh flat and also probably i'll make another mistake la ti tu no i didn't do that and learn g2 which will be from order dot user dot longitude okay yes not origin but destination destination save it perfect now we also need to pass the stroke with stroke with that basically how fat will be the line how thick the hot thick yes let's uh do 10 and also lastly let's do stroke color which will be the color of the line so i have it prepared here let's copy it okay and last but not least we need to provide the api key so should i provide the one that i have or yeah should i edit some okay so the provide the api key that you just uh copied when we're creating the directions api enabling and then creating the key and paste it here after pasting it we need to save everything here let's try it reloading most likely i made a mistake somewhere but yeah let's see a missing api key did i spelled it yes i spelled it incorrectly api key with uh not with a capital so now let's uh oh yeah it's pretty far now let's try to reload and see what's the problem here okay yeah so here is the line perfect we can see that we are shown the path to the first of all the restaurant we can go here take our meal of course our restaurant is in the middle of the desert so there's no way to go there that's why it's showing this path like as the closest one oh no no no it's showing right now the destination which is uh the user and that's introduced uh problem because we need to show first of all where the driver needs to pick up the uh order and then we need to deliver so in order to do that we need to pass away points which will is basically array of stops that you need to do before you reach your destination and the start similar like in google maps when you add um a waypoint like a stop order [Music] dot restaurant maybe i should have liked the structured everything but yeah order that restaurant dot let let and longitude will be order dot restaurant.let do so that's basically our only waypoint and whoa what we want oh because i'm giving two latitudes let's save it and here it is now it's showing the correct path so basically we are going from here on the driveway most likely and going to this we are taking here the order and then going back to the user okay so we have all of this information but we don't have we don't see how long does it take for me to go there and what's the like five kilometers uh it's only a hard coded value but we need to see the actual value here so in order to see that we have a thing we have a function called in map view directions called unready which will be launched on yeah when the map is map view directions are ready so and it will return results which we will make use of not results but maybe result so let's create an interesting question uh i didn't we didn't we didn't plan this yet change color for each one i think he means like the color to the restaurant and then beer not sure if that's possible but why lucas is doing i'm going to research okay yes so uh because we know that our minutes and our kilometers will change i'm not sure how like yet how often but it will definitely change that means we need more states so one state we will need for uh total minutes at total minutes which let's initialize it with zero as default value and total uh set total kilometers also as zero at first let's save it okay let's go here where we have that on ready did i missed it yeah here it is so we need to set when um when our directions are ready we need to set set total minutes which uh we can get from let me take the documentation result uh dot distance a result uh to do result dot duration and we can get the kilometers by result dot distance don't forget to change here set total kilometers let's save it okay and now we need to display this data so where do we show it here instead of 14 minutes simply show the total minutes as well as total command save it and yeah let's reload everything as we then had it ready so from here let's go here oh yeah so you see the values are well let's say a little bit too big so for total minutes we can do two fixed and [Music] let's say one save it and for total kilometers we can do also to fix but we will show three digits after save it and um actually do we need to show i don't need to uh one after the minutes yeah it can be zero yeah definitely so perfect we can see that uh yeah and four kilograms like maybe only one digit because three is too many the thing is that after it goes past uh one like one kilometer it will show then all only like 0.1 like and if it's 150 meters then you will see still one point one so maybe at least the two digits yeah do you want to make it one no it's okay two typing you can work on these two like for example uh and calculate if it's uh for example now it's showing only 98 minutes but you could make it so that it shows one hour and like minutes and also for the kilometers uh but yeah for uh for the demonstration purposes let's leave it like it is right now okay we have uh this we have this so now we need to for example if we start moving here uh we need to update our path from time to time uh in order to like show different paths that we are getting closer and we need to update these values as well so for that we will create a listener and when we fire our use effect we will create a something called this for ground subscription which is going to be location dot and again watch position a sync okay let's uh and inside let's pass some options so first of all we need to pass an object of tracking options first of all let's pass the accuracy to which how accurate we should track the location so you can add like low medium or whatever accuracy you would like for example you think your application needs here is the values lowest low highest high best for navigation and balance i'll go for a high here because we need it quite accurate and also distance interval so what that means how often we should uh rerun yeah so how often we should rerun this and how often we should track their position i'm not sure how to explain but if you pass for example here 10 it will rerun this function that we will like specify a little bit lower is we'll run it every 10 meters when the user this little dot moves 10 meters we don't need it that often and for demonstration purposes probably i'll like do something like 100 no maybe one 100 not 500 but you can do like every one meter of course it's probably going to be too much but yeah something like that let's save it and uh that's not it we also need to specify after like uh specifying these options uh these uh options yeah we can pass a function and in that function we get updated uh location which is going to be a new location where the user is with all the details that we need and in this function we will set driver location to this new location so let's latitude will be updated location dot chords dot latitude and longitude detude will be updated location dot cord dot longitude let's save everything let's go here uh can't find variable oh and also like after uh i need to do the cons yes here but after um like after you leave for example this screen we need to clean up uh and in order to clean up in order not to run this like the uh on your application the whole time so after you leave the screen we need to return this and that way we will clean up this function and it will no longer run let's save this let's go here and now in order to test this there is only one so why this because you see here i'm only updating the driver location not the time and the minutes but every time we update driver location this map view directions will change yeah with the render and change which means it will fire this on ready event once more and when it fires we will be able to set total minutes and set total kilometers left so in order to showcase this one let's go to freeway drive yeah it's too far like i'm trying to drive from uh america to moldova so it won't we won't be able to showcase this how to show the movement now without using will the cpu run also do the same yeah everything that these simulations are done in america that's why i had those let's uh let let's see where the simulation is running and let's grab some um okay so then i have all the data for that prepared yeah actually yeah so um let me just find in my notes where are they [Music] here so let's set where are we setting the end location so [Music] here it is coordinates nope not close here here so destination will be uh let me copy these coordinates uh but let's change them in damage data no or yeah maybe that yeah because because we will have to go back here update the code so end destination is user okay uh this is the latitude this is the launch we'll try to update the dummy data after the video so if you're watching it afterwards like you're gonna not gonna have to mess up with um related and longitude that we we are doing now yeah let's save these oh okay so now i have the but i need to also update my own location to a different one so features location custom location and where i have that location can i do control d i hope it's this one not sure but no it's not this one doesn't matter it will be close enough okay uh and now let's copy this one look at you're working here but we are having like a nice conversation with people in the live chat so what are you talking about uh about uh girlfriends uh being jealous uh to their boyfriends because they're watching too much of me my videos oh wow yeah i received an uh a message from from a subscriber but every time like she hears me like oh again him someone suggested a nice um answer tell her these videos will help oh brand new ferrari exactly so here it is we can see our location the restaurant and also the so we decided to chill a bit in san francisco yes there's nothing there so let's do the feature location freeway drive and as you can see we have this line here and we can see that the time and kilometers change as well so let's see when we start moving and it will scroll let's go come on okay it's getting faster fast that's that brunette that's that brand new ferrari beam it updated automatically yeah so and but i see that uh kilometers oh yeah now it's updating everything yeah so as you can see the kilometers are updated as well the time will probably be updated soon as well that's going to be a long drive for delivering a meal but as you can see everything is working and that's what we actually needed so let's uh go to our custom location back and what now what else do we need let's see the uh slides okay we have the listening to changes we're updating those changes we are rendering the route no it's not demo yes it's not a demo yet but now we need to change so for example for now i am always able to accept the order right but if i for example just open the delivery i should be able to see this whole path like it is right now and then if i think okay 35 meters is not that far 14 kilometers i can probably make it in lithuania that's far but probably in america that's not so then i should be able to accept the order and then start a delivery and after uh i accept the order i shouldn't be able to click pick up the order because i'm still not close to the uh restaurant so i should be able to click pick up the order only when i'm like let's say in 100 meter radius of the restaurant and after i pick up the rest the order the route should change to show the route to the user and the same also i should be able to finish the delivery only when i'm in 100 meet radius of the user so in order to do that maybe i need more water because i don't have anything left so maybe you'll take over um do you want us to put the plugin for live share or where you need your oh i mean i need like uh oh okay okay no worries okay we are waiting you here everyone is waiting you here you lucas is doing a great job like three hours without any stop like going boom boom boom okay so what other questions do we have this is a very interesting idea can you make a tutorial on how to get a girlfriend alex we need to make a tutorial we need to make a tutorial people people are asking the secret is in ragna we just have to know react native people are asking can you make a tutorial how to get a girlfriend come say hi hi guys everyone wants to see you don't blush because nobody sees you so far all right so what's the secret i'm my actually imaginary girlfriend so there is no secret you don't have a girlfriend how could you [Music] all right dm this is a very good thing like i was wondering if you would uh like to other live stream only talking about like your experience about funny interesting stories this is actually sounds more like a podcast and it's something that i always want to do and we actually discussed like uh at the beginning of the year with the whole team uh of not just development about starting a podcast but we decided that it's not time yet just yeah we have to focus on what we're doing best but definitely like something like this is coming because uh i would like to just sit down relax and talk with lucas about anything that's happening um like interesting stories as you're saying yeah i like this idea maybe okay i'm gonna stop here oh my god i i'm struggling with limiting like the amount of things that i'm doing just because i want to do everything and i want to do them now and then i end up like overworking and not sleeping and yeah step by step step by step but it's coming yeah yeah uh i am waiting for that as well uh i would like to be the first guest maybe i'm gonna be with guests okay okay i would i would love to and then we could actually invite viewers to tell their stories because i can see that they have so many interesting stories that it's crazy so yeah i think that's a a good idea but yeah let's first of all focus on more important things which is finishing your course and for me right now finishing this uh delivery app yeah so let's go back to the screen and i know that there will be a few different statuses of the order as we can see here and i'm wondering like how to approach it better is it to create some something similar to enums in order to be able to track their order status or is there a better way so for example let's think if i go from here if i see this first screen that means i don't have yet an order but i don't have a way yet to check it because i don't have you know you know how i think uh we can start yeah first of all we need to understand if we accepted the order or or not yes the order that we are looking at at the moment uh is yeah like that worder but when we press on accept order let's save the same order in a state variable called uh active order or accepted order or something like that okay so we will take it from one place and put it in the active order and after that point uh we will think how to to to deal with the next states yes i think that's a good suggestion so let's do just that create another state with active order and set active order and at first it's going to be no so when you that means we need a function which will be maybe after use effect i don't know why i like to keep if i can use effect like at the top and probably after driver so const um [Music] on uh one button press because this button will have different name so okay so after the first time when i click this button i should give me one second uh all in one wants to know from when we can access the course and how to enroll uh you need the full stack mobile development developer course so uh you will be able to enroll in the course starting from the 25th april up till 2nd of may so you're going to have one week next week we are launching the course and during the next week you are going to receive more information uh about the details but go to academy.nodejust.dev and where you will simply be able to enroll by pressing enroll and you're gonna be there all set and i'm gonna invite you to our private community that we have with all the course members uh and i'm gonna share all the resources that you need to get started and start start leveling up your skills as a full stack mobile developer right away yep okay so now we can when a user clicks this button accept order first of all we will check if uh there is active order if there is no wait does it work my bad my bad i was not showing but yeah you just did that if statement right yeah only this if statement if the there is no active order that means we need to set active order to the order that we have right now and after setting into this order we will need to change the the route so uh i'm thinking right now by doing this now everywhere in our gsx we are accessing water not active order yep because that's what we're getting for i think like i was thinking with enums and like because we will need to do a lot of checks and everywhere checking like okay if we have an uh active order you know for example and when we're changing the destinations and waypoints because we will have to delete the waypoint after we have an active order so that's why i thought like enums would be the easiest way to say okay at which stage am i is it not accepted is it accepted is it picked up yeah okay okay i think i think that's going to work a bit better let's see we can improve later we i think that they will be for this stream so yeah okay so instead of uh yeah creating the state for active order i will create kind of enums which are called order statuses and i will simply have different order status first of all will be not accepted that's the status which is basically that means i still didn't accepted it that means it's at this stage like it is right now there will be another step for however let me send you like exactly what the exact yeah yeah you could do that we will need but you you can go with right like i think it's new the first one is new okay uh no yes the first one is new van is red ready for pickup we have van picked up i saw that you have ready for pickup without uh dash under here right yeah okay and then but we don't really need like ready for pickup after we accept we already going like okay that means it's already created we actually don't need the new one because if a worder is new but it is still in cooking process we don't need to send show it here we will show orders on the map only orders ready for pickup uh yes yes yes yes so so that means that we will need one more state between ready for pickup because the next state in our case we created picked up so you can write that's right what we're gonna do pick ready for pickup picked up uh yeah and then that's it and then complete it yeah i think i think it's called completed we don't really even need completed like if it's completed if you complete the order we'll just go back that we don't need that state there's only two states if i not ready for pickup it's this one after you oh no so after you accept the order we need one in between we need in between yeah that's what they were saying okay so um accepted were yeah i think it will be accepted or driver how to call it i think this one works accepted yeah you accept the order okay so yeah if we go to recap uh the life cycle of a worder user will place a place a water is going to be in a new state in that case drivers will not see it only restaurants will see them in their dashboard and from the dashboard they will put it in the cooking state after it is cooked they will put it in the ready for pickup state and when the water is in ready for pickup drivers will see them on the map and the first one who accepts it will move the water to the accepted state then he's going to drive to the restaurant he will pick it up from the restaurant when he pick he's picking it up it's going to transform to picked up and then he's going to go to the user when he gets to the user it's in the state completed so that's the whole journey yes yeah okay so that means uh where's that button did i delete the whole bot uh we have a super sticker thank you very much muhammad i appreciate cool nice but uh hey it's it's a nice sticker like i see it on youtube i don't see it uh later i'll check it uh so const on button pressed and in here we'll say okay if order so that means we need a also to have delivery status as our state because we will always change it in here okay later maybe we'll get it from the back end i don't know yet right now i don't have it so right now status uh set delivery status and our default delivery status will be from order statuses dot ready for pickup yeah i think that makes sense yep can you close the left panel yes yes so okay if on button press if our delivery status equals two orders that is that dot ready for pickup that means uh we just clicked on it and that means we are accepting the uh the we're clicking this accept order button and after we do that we need to do a few things first of all you remember we defined this um where is it oh where's the map reference do i have don't i have that no i said i'll introduce it when i do it so we need to let's first use ref o at first and then we go here where's our map view and where do i do i need to pass it yeah to ref equals uh map ref david so when i wanted you to do this so specifically for you amaze lucas is going to animate the zoom in automatically yeah so after you click uh to do after you pass the reference here we can use this map outside here so for example i can do something like map dot ref dot uh current because i need to take the current map reference basically and i can do ah where is any mate i hope i'm writing correctly animate to region so basically it will animate the change to another region where for example we need to pick up but in our case what i will do you can change the the longitudinal latitude as well but what i will do is set latitude to the same as driver location dot latitude i will set the longitude as well the same as driver location dot laundry no longitude but what i will change i will zoom in a little bit nicely so i will change the latitude delta to something like i don't know 0.01 and also i will change the longitude delta to 0.01 so let's save this and okay so after i accept it i will zoom in also i need to change now this state so set delivery status to order statuses dot accepted and do i need to do something else i think i don't you need to link the function to the button yes yeah where is that button uh yeah here so we need to wrap it in oppressible in order to do that let's firstly import pressable go here change this into pressable and pass on press equal on button press save it and for example okay yeah let's go let's say i already went to here i see the order i can x oh no i didn't do one more thing so let's reload yeah so after uh animating first of all i need to before animating i need to use this bottom sheet reference as well so let's go back to our function and say bottom sheet reference dot current dot and do you remember i think it's collapse is it uh and i need to check like if i have this current as well so let's save it let's uh go to one of the orders okay i see the initial order okay i think i agree with it i i want to accept it so accept it closes and zooms in nicely after which you can like change the zoom in whether you want it more less of it and then start tracking here so one thing that google directions api basically doesn't allow you and they specify this in their privacy policy is to make this directions api as a turn-by-turn navigation if you want to use turn-by-turn navigation you have to use their google maps basically instead of creating it your own bro wait a second today we are what's off jonathan thank you very much oh my god this is oh my god thank you very much without any message without anything thank you jonathan berber he said all the best on your upcoming course jesus christ thank you very much you are very welcome to join the course that is launching uh on monday wow all right i got goosebumps good night thanks guys wow thank you thank you jonathan i got lost what you are doing so uh yes setting delivery status and um yeah i think uh for for order status is that that's it we need to uh okay so first of all let's start with the managing the button because even though we accept it we still see accept order so let's do some managing and then we'll get back to the directions and for example because if i accept the order i don't want to see this route to the user yet because i'm still going to the restaurant so first of all i want to see only the route at the restaurant and when i pick up the order i want to see the route from the restaurant to the user so but before that let's work on a button okay so i will create a two functions one of them will render button title which i'm going to do it by checking that simply checking the order status um yeah so if delivery status equals order statuses dot ready for pickup it's going to be it's going to simply return accept order so let's copy this two more times if delivery status is accepted that means we need to show pickup order because most likely we will want to pick up the order as our next restaurant yeah from the restaurant and lastly if it's um picked up we will complete the delivery can you scroll a bit yes complete delivery yeah okay so let's go to our button and here instead of rendering this one let's do bender button title and call it okay so now it's in pickup order perfect but i am still i i can click on it um [Music] yeah i can click on it right now like even if i am one kilometer from the restaurant which shouldn't happen so i need another function which is called const is button pressable so you want disable the button depending on how far is the driver from his destination or restaurant exactly exactly yes so and in order to do that we will have to introduce one more you state which is going to be is a driver close that is driver close and at first it's going to be false but on every where is our map view directions on every re-render on every ready state we will check if yeah you seem like an experience for streaming that because i like keep it here and it's good that uh vadim is like telling always like either closer but they also make these mistakes maybe i don't know okay so we will check if the distance is closer than 100 meters that means we can set is driver close to true because that means we can already pick it up uh we can make it even closer if you want but yeah i think 100 meters for us will work so let's save it you know what i'm you know what i'm thinking uh not to get into a situation when this function is not called and you know why i think this way like we update the driver location every 500 meters every 100 what every 100 meters oh your update every 100 meter yeah okay then yeah that's that's fine then maybe add less than or equal so okay now yeah yeah like if that's would be smaller you might get into a very rare situation when the previous update was at 100 meters and you didn't set it to true and the next update never happened because you are updating every 100 meters so you are five meters from the home but nothing happens yeah yeah true so if now we can make our checks if our delivery status equals uh two order status dot not accepted oh we don't have so basically if it's uh wait if it's uh what ready for pickup right yes yes yes if it's ready for pickup then we should return that its button is is button disabled i probably i should call because i will return when it's disabled probably let's let me think uh so if delivery status or ready for pickup then bottle button is not disabled okay now if [Music] delivery status equals order statuses dot accepted and is courier is driver close then i should return also it shouldn't be disabled because that means i am close that means i'm returning false and lastly if delivery status is picked up and driver is closed that means i'm close to the user's house already so otherwise i should return true to disable it because that means i am nor the status is ready for pickup nor i am close to the restaurant and the order is not even accepted nor i am able to deliver to the user and nor am i close think that's correct if i'm wrong on the logic let me know guys and in here simply passed is it disabled uh uh is button disabled and called so let's see if it works now it should be disabled oh and also i need to change the styles of a button if it is disabled so uh in here in button container i will go i'll destructure it and add background color so if is button disabled then return gray else what do we return there else uh this one and delete this oh no no no delete this one maybe fix here everything uh here then return uh this one [Music] okay let's style it a bit save it and see if it is gray but is button disabled if it's true oh okay let's see it deliver status right now let's reload everything and check maybe i didn't accepted the order yet so now it should be green okay now i accept the order i'm able to drive there okay yes i didn't what now it's pick up order i'm too far i cannot click on it nothing is happening if i'm clicking on it so i need to implement more logic on button pressed so then if uh delivery status equals order status order statuses dot accepted that means uh set delivery status to order statuses dot picked up and lastly if delivery status equals orders order status is done uh picked up that means console dot warren for now delivery pin pinito finished so in here uh we will make some more changes later actually right now we need to make them so okay let me yeah so now uh we will work we finished with the button now we will work on the logic so as i said if i accept the order i don't want to see the route to the user which means i need to hide this waypoint because i simply don't need it anymore and this is the intermediate waypoint to the restaurant so in order to do that i have to create a check another one which is going to be the if delivery status equals to order statuses dot accepted then i need to return the restaurant location no then i don't need to show anything so it will make more sense if i would do uh let me check again my yeah ready for pickup so you want to show the waypoint only when it's ready for ready for yes and otherwise i will simply pass empty array which means i don't need any uh points waypoint anyway because in other cases you are calculating directly to restaurant or directly to user yeah yes yeah so let's test if it's working okay i'm accepting the order and i am for some oh yeah because i'm showing you right now okay so it kind of works i don't see that intermediate point anymore but that means that uh if i accept that my destination is not yet the user destination but it is actually the restaurant is my destination so in order to yeah have it here i need to let's just let what do you think about extracting uh objects of latitude and longitude in variables like user location restaurant location and driver location because because that's not like yeah oh i i missed that yeah yeah yeah like i think i even like maybe i asked you say i said like maybe we should extract these like into separate ones but then i said okay let's do it still like that but now it's getting out of hands yeah so okay we'll do it like that's one more last check so if order status is uh ready for pickup right then we will now if it's picked up then we will show the destination to the restaurant else we will show the destination to the user no not picked up what's the next after accepted yes it's simply accepted so if i accept the order i want to see the destination to the restaurant which right now is ah should we extract right now or just do this last thing and then extract orders it's like i just want to show it and then we want to show you that it's working yeah yeah that or dot restaurant.longitude [Music] and yeah so let's go through the whole route first of all i go from here to here i check okay this is uh my route i am accepting the order after i accept the order i start seeing the route to the restaurant which changes the minutes and kilometers to go okay after i am here or before the actual demo we should extract because now i will have to start playing around with changing the my location in order to check if this button is working so yeah let's do that in here let's define const restaurant location which is going to be the latitude of something and longitude of something where is the restaurant location oh so yeah what which it is order dot restaurant dot let and longitude is order dot restaurant dot longitude okay and also i need user location user maybe delivery location will make more sense user user okay and now let's go through everything and change where we need it um okay we don't need to change it here driver location that's okay here nothing here nothing here we have a lot of changes so if uh let's maybe do this save it and okay deliver if delivery status is accepted then i'm showing restaurant location otherwise i'm showing the delivery location and here the same uh i'm showing here restaurant location otherwise an empty array save it do i have it anywhere else i don't think so these were the only places okay i think we are done and unless i've missed something but i don't think so let's see let's see uh i think yeah you covered everything that we have planned for today but let's uh let's see and test a little bit as well so at first i'm seeing this i can check the order after checking the order we you should be able to go back yes that's what i forgot so let's test everything here and then yeah yeah exactly accept the order i can see everything changed i cannot press here but now if i change my location to to this uh restaurant location i think i can simply do this here one two maybe this one will be a bit hard okay now i'm here which means zero minutes zero kilometers i already arrived here at the restaurant where i need and i am able to pick up the order let's click the cup order okay i should have closed this bottom sheet but after i pick up the order i can see the route to the user house yes so let's see where is the user house features location custom location i'll i remember what i forgot also to navigate to the main screen after completing the yeah 30 okay this one and this one okay i am close to the user i'm able to complete the delivery with says delivery finished so a quick few things uh like after changing the status i should close close here also i need navigation here so port views navigation from native stack now in here fonts use navigation equals use navigation and in the button yep someone is saying works just for words at position zero yeah because at this moment we are working with dummy data we have focused only on the recognitive and the front-end part with google maps and so on but tomorrow we will integrate with our back-end that we have developed yesterday and we will actually fetch real orders we will display real data there and we will uh update the data on the on the back end whenever we change the status of a worder we will also update the automatically the location of a driver in the back end in a way that the user will be able to listen to these updates and the user will be able to see the driver on his map like with live location so yeah we're going to do that tomorrow another thing he is also to see the delivery button to addictively deactivate until you close to the customer yes i do not pick up that's yeah that's that's what lucas implemented there and tomorrow when we have the back end we'll be able to after or after completing the delivery um yeah to write it to the back and then as complete the delivery okay close okay here now i'm delivered complete delivery and i am here delivery finished perfecto so the only thing that's left is to be able to navigate from here back and most likely we will are we doing the icon button right yeah probably that's the easiest way uh do you have that icon from yesterday i can find it real quick let's go here oh so you know what experience was it screen detailed order detailed restaurant restaurant detail screen header probably it's not in the header one second index it's here and the icon is from ionicos i'm going to send it to you jonicon's name arrowback circle okay here i sent it let's go into our most likely here navigation go back arrow back circle white and and for the styles we need i think it's top i can its position absolutely right 15 and position and you need to render it either add elevation but the easiest way would be just to render it below everything like you render everything and then you render it and it's gonna show on top right now the map is simply on top of it okay so we approach that with z index and elevation but well it's a bit trickier left top right nothing right yellow okay well maybe black to make it yeah yeah i think it looks better and then if i go back i can go back so that's it and we need to probably disable it uh hide it if the water is accepted yes yes we do destroy it only when the water is ready for pickup delivery status equals order status dot ready for pickup someone is saying that the delivery after you pick up the order the button is pressable is it after the you pick up the order let's test it it's not that hard maybe yeah maybe we set the order now we can go to locations custom location and where is the restaurant here and this one here paste it okay pickup order a complete delivery yes thank you so it is definitely in this button disabled so if delivery status ready for pickup is not disabled yes if delivery status is accepted the driver is still closed so just set is driver close to false when you pick up the worder yeah yep right or no yes i think so as well because right now like it didn't change this at all it's still true because it's still close the driver is still close i didn't render this one no but i should have rendered this one and it's your set driver is close bigger yeah but but else you don't have an else here you don't set it back to false but if i if i were setting it every time to false because it will it's every time i render for example i'm driving 100 meters and if it's false then i'm just hitting false false false when do you think it becomes false i think after accepting the order i think you were right no [Music] no no no no i would say there is better because if the distance is less than it actually set is driver close the condition inside the if statement so it's going to set to true or false depending on the distance do you get what i mean so you mean in here uh the condition that we have results the distance is less than zero one yeah we put it instead of a true so in that case it's going to set to true or false depending on what yeah we could but of course it's like on every but maybe that makes sense actually but yeah like on everything yeah that's a problem yeah even if it's to reset to false it's not going to trigger any updates because it's the same value um now i need to read like change everything okay go here accept the order i'm already here pick up the order yeah yeah so thank you very much for your uh yeah that you spotted the book yeah thank you uh and also a question can notification be implemented to tell the user with the word or is complete we are not going to get into push notifications however we are going to notify in a way the user with the order has changed the status someone picked it up and we're gonna do that like with real-time data with subscriptions and the user will just look at the word on his application and he's gonna see like these updates of the position of a driver and so on but for push notifications like we are covering that uh we're going to cover that in the course so if you're interested in how to implement push notifications uh check out the course you might be interested um thank you thank you very very much okay i think uh we are done with everything today yeah i think so and it's under four hours damn that's good you're right so let's see if we have any other questions and if we manage to but yeah we managed to do it under four hours congratulations lucas amazing it was really a great stream yeah you needed a break i mean like 10 hours in a row like two days i did a 12 hour live stream didn't you i remember one time correctly but yeah like it's it's hard it's hard i'm not gonna lie i understand how how you feel right now so uh if we have any fast questions we can address them right now otherwise um i will i'll remember you that uh where the course is launching next monday 25th of april and you're gonna be able to enroll by following the url academy.notjust.dev and as well you're going to find out more details on the website about the course so super excited about that we are getting closer and closer to it and um i've been working for for the last eight months like every day to um to prepare for this day and yeah it's coming it's very close yep yep ah all right uh thank you guys so much for uh your time and effort thank you for being here yeah thank you when you're here guys it's like that stream don't go that slow and you don't get that tired because oh you interact a bit you code a bit it's like fun light everything is nice that way and i really like this um doing it together yeah yeah because otherwise it feels like i'm alone in this room also like we're doing together it's good like for example sometimes to brainstorm together to find okay the actual best uh way to approach it and also the viewers see that so i think they see the different yeah yeah that's that's also nice yeah we should definitely do a podcast yeah of course i'm in okay guys so by the way uh i didn't provide the [Music] okay so join us tomorrow tomorrow is another day of a challenge the fourth day and tomorrow we're gonna take the application that lucas built today for the driver side application and we're going to connect it with our back end with our aws amplify back end we're going to start by connecting it then we're going to implement authentication there so the drivers can log in and after that we will start by fetching the worders displaying them properly on the map uh accepting the worders and also updating that data in real time uh every time that driver moves uh towards his destination so it's gonna be a very interesting features and a very interesting live stream and i'm gonna see you tomorrow um yeah at the same time same place you know it uh well already um bro someone is asking a very interesting question i won i don't know you decide i said like okay you can choose there's two options a dinner that i propose or a clown makeup that users propose it depends whether you like how much you love your fans i'm gonna think about that yeah i'm gonna i'm gonna think about an excuse about that but actually i didn't look at the time like till we started today's stream and i was like let me check yeah i won i won you you have two options so maybe you can come up with something even better i don't know like okay do it uh okay so guys i think we should give lucas some time to rest uh and i wish you good luck i hope you enjoy this challenge if you do please support us with some likes and uh subscribe buttons uh it's weird but that actually helps us um reach more developers and help more developers and yeah this is our goal with not just development so um see you have a nice evening and i'm gonna see you tomorrow right thank you lucas bye guys bye

Channel: notJust․dev

Views: 118,134

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react tutorial, uber eats clone, uber eats clone app, ubereats clone, food delivery app, how to build a food delivery app, how to build a uber eats app, food delivery app development, uber eats react native, amplify tutorial, full stack mobile development, build a full stack uber eats clone, coding challenge, uber clone tutorial

Id: eTNvx8kdslk

Length: 239min 46sec (14386 seconds)

Published: Wed Apr 20 2022