🔴 Build the Uber Driver App in React Native & AWS Amplify (Tutorial for Beginners) [Part 4]

what's up now just developers welcome to a new episode in our uber series i'm very happy to see uh you here and i'm really excited about today's project because today we're going to start a new application in our uber ecosystem and today we're going to start working on the drivers application and this will be the application that is going to be used by the driver he will receive notifications about new orders he'll be able to accept them uh yeah and the most important and interesting part about this uh this application is that we're gonna connect two separate uh mobile application with the same back end we're gonna share the same same data and we're gonna implement the uh g live geolocation tracking and sharing between user and the driver and i think that's really awesome and yeah we're gonna learn a lot in this build so let's uh let's get into it and see what exactly we're going to build so today we will be focusing on the front end uh the front end is a bit simpler uh than the back end because in the back end we'll have a lot of work to do with data with connecting and i don't want to rush it so today we're going to focus on the front end in react native of a driver application next week we uh we take time and implement everything properly with a back end and share all the data and information so yeah today we're going to build the home screen which will have an application a button to to start searching for new orders uh it will show you how much money you uh you made during this day uh this uh the second screen will show you uh a notification whenever a new order uh appears and then you'll be able to pick up the order you will the application will show you the direction till the user and then after you pick up the user it will show you direction uh until the destination so yeah we will have to work a lot with maps with directions with yeah pins on the maps uh and so on so yeah so if you're new here uh hello and welcome to the channel my name is vadim i'm a full stack developer for over seven years at the moment i am the cto at a small startup in the fitness industry called vitinium yeah i also worked at amazon previous summer i think yeah and i'm passionate about coding building impactful startups sharing this knowledge and my experience with you guys and the most important thing is that i'm not just a developer so if you're new here and you love what i'm doing uh it takes a lot of time to build these clones to prepare for everything so i would really appreciate uh if you subscribe to the channel and turn the notification bell on not to miss any new live stream because we are live streaming every friday at 3 p.m gmt so thank you very much for the new channel members uh eroslav um he became a channel member during the previous week's live stream uh so yeah thank you a lot for your support uh it means a lot to me and uh you are helping me build this and yeah sustain this youtube channel and if you will would also like to become a channel member press on the join button down below and yeah i would really be happy to to have you among the channel members so uh guys in the chat how are you doing where are you joining us today from hello george hello guys hello danish chico all right so um coming back to our application so what do you need in order to follow along this build because i highly encourage you not to just watch this but to follow along if you uh intend to learn react native intent to learn edwards amplify and a lot of cool technologies that we are using here i encourage you to follow along so uh in order to do so you will need a ver rack native environment setup we're going to use react native cli uh you'll need a google developer account uh that you can create um and you will need the dummy data images icons pdf this pdf presentation all the steps that i'm using and you can get this bundle on assets dot not just dev slash uber so if you go there you will receive a folder with all the files that you would need to follow along with so the this is the third no this is the fourth episode in the uber clone uh you can find vowers on the channel if you're new here however if you want to start from this moment and didn't follow along the previous videos that's also possible uh and uh yeah it's possible because we are starting from scratch this application so you will not have any uh anything to catch up with however yeah you can also clone the repository uh that you can find on this url and make sure to clone it [Music] the branch called part three and this will be the part that we have today at this moment in this video that's where we will start working on because if you'll clone the master it's definitely going to be a more more inform more code there that will develop today so clone the part 3 of the repository create a google account get an api key install all the libraries run the project and then we are at the same page and we can move on so i i'd like to quickly show the user application that we have built uh during the previous videos we will not need it uh in this video because we will create a new application but here is uh here is the application here is the user side application let me uh zoom it like this yeah so yeah this is the map on the map we can see uh the cars which are available and they're displayed uh facing the direction that uh that we have saved in our database and yeah all of these cars are already saved in the database it's not dummy data we created everything connected with the database there is also authentication so you can log in and sign sign up and so on here you can choose the current location it will fetch some locations around you based on your current location and then you can say where you'd like to go for example where it will go to the next screen where we can we will be able to select the uber type that we want to choose it will also show the destination and then when we select uh different uber types we will be able to confirm and that will create uh in the database a new order and this order should be displayed [Music] on the driver's application so he can confirm it or reject um so but yeah as i said today we start the application from scratch the uber the driver side so let me put it here so yeah i think we can get started um so someone is asking uh to teach how to connect an application to a server yeah that's what we have done during the previous video we have connected this application we we created the backend using aws amplify so now all of this is the data that is coming from the server from the backend from a graphql api so yeah that's uh that's it [Music] is this okay for react beginners uh yeah that's that's totally fine for react beginners we have a lot of people in our discord channel who uh said that this was their first application in react native so they managed to build it until this point so yeah that's awesome if you uh want if you want even uh more beginner-friendly content i have a tesla clone on my channel so you can check that out that's even more simple see even more even simpler okay let them learn english who's gonna be the first one to to tell me that is this the fourth part of the series yes this is the fourth part in the first three we have built the user side now we start from zero with uh with a driver's side of uber so you can follow along from here or you can start from the first video it's up to you hi from brazil hello uh you're one of a few awesome people building on rack native cli most youtube instructors teach expo i also have built in expo and to be honest expo is really awesome uh previous week i have done a 12 hour live stream so i built an application from zero uh until the end in 12 hours and i did it with expo and it was so much uh faster some of the things and especially when i wanted to deploy it to build it yeah they they are doing a great job because for people like me that hate configuring environments and stuff like that expo is really nice it's much easier to get started where is the join button for the membership it should be near the subscribe or on the channel page but if you don't have it maybe it's not available in in your country i'm not sure all right finally caught your life hey welcome we are here every friday at uh 3 p.m gmt time yeah i took care of that alright guys so i see a lot of enthusiastic people here it's really nice to see all of you guys i would love to chat with you more but i think we should get going uh because we all came here for this build so at the end we can have a q a and after i implement some features oh we will have to wait a lot of time for things to build and install today so i will have a lot of time to talk with you guys so let's get started and let's initialize the react native project for the uber driver application uh no this is not the last uh um okay let me focus no it's not the last video of the uber app we will have one more that will connect the driver's side with a user side okay guys so uh here i have a uber clone folder so what i want to do and yeah this this is the folder that you can get if you clone the part three uh branch of the repository so you'll have this one okay now uh we will need to create two application uh we have two options to create two repositories one for the user side one for the driver side or we can create two folders inside this repository and put everything there so i'll try to do the second one in order to keep both application in the same repository i'm going to create a directory called user up and i'm gonna put everything that they have here in the user up hopefully there is no okay i really wish i will not break anything but let's see let me oh this might take a while maybe i should do it the other way not from the id because id tries a lot of things to to refactor a lot of things so i'm gonna do it the other way i'm gonna open it here or i can do it from here open in finder all right all right oh okay so we take everything accept user up and move to user application will you work yeah i think it did yeah let's hope that uh that will work okay here what do we have should index refresh do you have something reload from disk all right not quite everything okay these are the these files were hidden so we didn't move while indexing all right let's wait until it index everything so why is it okay updating indexes it's gonna take a lot of time but however meanwhile we can create a new directory called driver app no we're going to do it different way let's open the terminal in the root uh let's open the terminal in our root folder the one that contains the user up folder so if i do ls i see here the user application folder so here i can do npx react native we need uber driver or i can call it driver up driver up yeah and let's initialize it this will also take a little bit of time until it initialize everything all right making user app was really fun thank you very much are you going to publish this to android no i don't think i'm allowed to do that because this is for pure educational purposes so i don't intend uh to get in any troubles by publishing this application however i'm publishing the application that we have built during the 12 hour livestream previous week so yeah yesterday i finished all the touches but i uh i didn't have time to to do all the stuff on the on the marketplace on the platform where you have to put the description screenshots and so on so hopefully this weekend uh i'm gonna deploy that web application maybe for future patreon memberships um i'll have a look into that i'm not sure if i want to go that way but yeah we'll see thanks for recommendation hello vadim what is the difference let me while that is building let's let's have some questions so do we have it here nope hello vadim what is the difference between xamarin form and react native well uh to be honest i don't know about submarine i heard about it i have no idea what's that but yeah react native is a hybrid mobile development using javascript based on react so yeah using javascript you build mobile application and that's really nice if you're coming from from uh you if you have a web background because a lot of things are very similar to web and i don't have a lot of web background but i did native development like in android studio in in uh in ios in swift and man vets that's that's horrible like for me that was a nightmare like i i was always like going crazy uh with everything that comes to native development especially like in android studio with yeah kotlin but here everything works magically so i really love react native okay so the driver side application has finished generating and i think we can also move the rest of the files in the user application and hope that we didn't break anything okay so for the driver application let's go into that folder see the driver up and then let's do yarn start this will start the development server uh yep that was successful and in another one in another terminal we again go to the driver application and do yarn ios to run it on ios this yeah this project should be running both on android and ios it's just my personal choice to to test it on ios but if you are on windows with android emulator and do yarn android and that's it or npm run android uh well uh yeah let's let's have it here well i recently completed my full stack course and i do want to get an internship will suggest me how should i get one i also love working on react native well regarding internships um i think the best way to apply and that will maximize your chances is to actually show them what you have built uh because yeah you can show them like that you studied there or you so you know that and stuff like that but people care about like okay show me what you you build show me what you can so by building um my building project personal projects um yeah doesn't mean that they should be clones uh from as i'm doing here uh you can build some application that you love some ideas that you have and want to implement and put that into a portfolio and when you apply like people really uh really consider that i think that was the most important factor that made me get an internship at amazon it was like my involvement in startups and yeah all the contests and stuff like that so start building build a portfolio and apply to as many companies as you as you can one of them will definitely say say yes okay it's taking a bit of time until everything builds yeah today we are gonna install a lot of things a lot of dependencies uh to make sure that everything is set up like maps navigation vector icons and so on so if uh for people that are just joining i think i still have time until it builds so i can give another short description of what we are building here so yeah today we are going to build the uber driver application in react native uh naws amplify did i write it correctly i'm not sure okay so yeah we have finished uh in the previous three uh episodes of this uh series we have finished the user side application uh yeah we created the interface uh the mapping the direction and in the last episode we connected everything with a back-end we created the graphql api authentication and uh and a lot of interesting stuff there so today we start working on the driver side uh user interface which will allow him to to start the right to receive orders and to navigate to the user and to the destination and during the next week we will connect this with a back end and we will connect them together with the user side application so whenever a user creates a order the driver will see it will be able to accept it or decline and so on so right now we are creating them we are setting up the project indirect native and we are waiting for it to build for ios usually this takes the first time it takes around like three minutes after that it's much faster but yeah until it builds the native code for uh for all the libraries for all the dependencies yeah it usually takes time um yeah someone mentioned that i made a video on how to get an internship yeah i did that one of my first videos about yeah the process and how i applied and how i got the amazon internship what is the difference between netlify and aws amplify uh netlify netlife i'm not very aware of netlify i think i used it to deploy some um some simple web applications uh i don't know like the full range of like and functionality that we have but yeah aws amplify is is a service that allows you to easily connect your front-end and mobile application with our aws services in order to create like this really easy and fast uh back-end architecture in cloud so yeah here we talk about authentication database storage for images and all our files analytics machine learning yeah a lot of more push notifications and really a lot of a lot of stuff like we're just scratching the surface so if you're interested like i highly recommend getting into all the details about amplify there is a lot to learn there and so we have an error i had it before um today it says something that something regarding flipper so i found the solution to fix that yeah that's good if you also have this error like i'm gonna show you how to fix it so in the driver application in ios in pod file we go here where it's enable flipper and yeah i tried by just commenting out these lines but the solution was a bit different so let's try the solution that they suggest so they suggest adding the flipper foley version so maybe there is a mismatch between versions so uh let's add this after use flipper make sure that you type it correctly and then let's try again yarn ios and see if this solution would will work uh yeah the next comment medium i hope that when the user and driver are connect i'm gonna get back to that i just saw that again error so then uh i think that it's time just to comment this out and disable flipper because we are not using it so let's try now yeah oh i think i had to okay yeah yeah wait wait a second i forgot to stop so maybe the previous um maybe the previous version the previous solution would have worked because this is the pod file so we need to install the pods uh one more time so for that i'm gonna go into ios folder by doing cd ios maybe if you cannot see this if the font is too small i'm gonna say and when i'm in ios folder i'm gonna remove the pods and the podfile.log in order to install them from scratch and after that i'm gonna do pod space install in order to install all the pods so okay let's see how much it will take so uh yeah i hope that when the user and driver are connected there is a push notification tutorial too i didn't think about that but thank you very much for a recommendation maybe indeed this is uh the perfect uh scenario to implement these push notifications yeah this uber series is is yeah the biggest series so far because there is so many like side functionalities and we're just doing the the most important features i'm also trying to add the panic button your in your user application for safety of a rider which sends your location and help request it to nearby police station yeah that's really awesome i saw that uber has something similar to this you can share your location with some of your friends or you can also call 9-1-1 okay so the um i'm going to go back to to the screen but the pods are installed i'm going to go back in the folder cd dot and from here i'm gonna try again yarn ios come on come on following from zimbabwe hello sri lanka hello muhammad i think flutter is better someone's had yeah if it works for you better that's i don't think there is a better and worse in uh in this scenario all of them are good for the specific needs so yeah i don't want to to put any hate on flutter because that would be unfair i didn't try it i saw that there is a lot of uh buzz around it uh recently but i saw some code of flutter and it makes my eyes bleed i don't know like the coding flutter from the first side like it looks so messy and a lot of nested uh things yeah it's but maybe yeah maybe i saw bad code there so maybe there are developers that are doing it better oh god it takes so much time so yeah now is the time to ask questions if you have any is anyone new here or have you followed the first three videos or that's interested interesting to me what's your opinion on switching switching to react native what do you mean switching to rack native i am using rock native aldi is asking why one more video on uber could have taken our app clone we already have free videos for the same uh yeah because a lot of people are asking to continue this series because we are following along so uh i think that this is a perfect use case to show some functionality that we don't have in other applications for example connecting two applications to the same back end i think that's something interesting um also this real-time sharing of geolocation uh yeah i think this feature is common in a lot of application for example in taxi application in food delivery application and in yeah so i would i would like to cover these steps but yeah it takes a it takes time you see that i'm 30 minutes in and i'm just waiting for replication to build and yeah that's why it takes a bit more time but yeah uh i'll be saying need to cover all the free first still in my to-do list yeah i totally get that and [Music] i think you've got a point there and i agree because if i go on with the same build for i don't know three five ten episodes there will be less and less and less people watching the next one because uh for every new episode people would think like okay i have to do all like seven uh other uh episodes in order to get to this point and they'll just give up so that's why i'm trying to cover only the most important features and uh and yeah start new builds because yeah i also have a short attention span so i'm always excited to start something new and never finish but don't tell anyone about that yeah this this build is an exception so i'm really looking forward to to this uh yeah are you from india bro no i'm not from india i'm following you from the time you have posted the last video of user application oh that's awesome did you start building it um puppy g i'm not interested uh at the moment in um yeah in a a position i have a lot of projects at the moment so i'm trying to keep up with everything that i have on the table with a startup with youtube finishing university regarding vendor neutral um i might do some tutorials in future using node.js and express um yeah i have that in my mind but i really love amplify and how easy it makes for for everything i'm just thinking like how much time i would spend to implement like authentication uh yeah storage and stuff like that in in a bare like node.js express server and that would be i think three or four videos only for the backend but yeah i'm thinking like how to make it like concise that's awesome the young glorg lord so finally our application has built it didn't take even 40 minutes yeah okay so here we have our all welcome to rank native i'm gonna move on with the next step because yeah as you see installing things takes time so the next one is to uh add the vector icons so i'm gonna run yarn add vector react native vector icons you can do npm install if you're using npm so let's do it but be careful to do it in the ios folder pfd uh yeah in the in the driver app sorry not in bios in the driver app folder so i'm gonna do uh react native vector icons and meanwhile let's open them the react native vector icons because we need to follow one step from there for installation so here where is the installation ios yeah we will need to take all these ui up fonts from here and put them in our info file so let's go to ios uh driver up and here we see info file we will scroll scroll down until the end and before closing the dictionary let's add some space here and uh paste the ui up fonts values so yeah you see before closing the dictionary i pasted in the fonts that i copied from the github so let's save that [Music] um sorry oh god uh for android for android uh we will need to apply these phones in let me take them from here so for android let's apply these phones in up build.gradle meanwhile we will run npx pod install that will install the pods for this react native library and while it's installing we go to android app build.gradle and here at the bottom probably we will add a new line to apply from uh yeah react native vector icons and yeah np export install we did that and i think that's probably it i'm not mistaken let's hope so let's go in our app.js okay we'll i will create the source directory we will need that in source will have component components and screens so in app.js uh what i want to do i want to try to see if the library has imported correctly so i'm going to import a font class i think and type obvious how it's called from react native better icons but that's not how you do it and typo and where for example here somewhere in the code in a text component for example here in step one i'll add the an icon and typo name i know user will this work unrecognized font in typo because we need to re-run the application yarn ios this time it should take a bit less time um are you using amp apollo in this project no i'm not gonna use apollo in this project i'm gonna query uh yeah using the amplify library which is the best country for good salary to work as a front-end developers well nowadays you can do that from anywhere in the world so you can work with uh countries like i don't know usa and europe countries being in a country with where the cost of living is smaller and you would be like rocking um yeah if you you you can google that i think i know that like usa uh great britain and yeah canada i think is good uh okay we have it there uh i see the icon is very small there but before step one i see the user icon which means that we install the vector icons correctly so we can move on with installing the next step maps uh i think yeah this is the first one react native maps so we will use this um this library in order to display the maps to display the user on the map the driver uh so let's open them the package page install it installation instruction uh let me zoom in a bit so yeah we will uh use yarn drag native maps you can use npm of course to install the library and we'll follow along the installation guide to see what other steps we need to take so yeah since react native 0.6 we don't need to link so it will auto link the library let's follow the steps where it says react native 0 60 and higher we don't need this tool move lower here we will need to install pods okay that's obvious uh yeah we can do it right now npx for the install and that's only if you are developing for ios if you are using if you are on a windows that will probably not work to install the pods but you will follow the android setup enabling google maps uh on ios direct native old version if you want to enable google maps we need to provide the updelegate.m and we need to give our google key here okay so we will need to import google maps and let's close this one let's go into our ios folder then driver up and here up delegate m at the top let's import google maps and also this one at this line i'll copy it with a comment as well uh as the first did finish launching with options yeah i think this one uh i guess it's here so we need uh to provide here our api key yeah go ahead and register on google platform if you haven't already and grab your api key so i'm gonna go in my user application to steal it from there clone i'm delegate m and you should have the same here in the user application so i'm going to copy that key from here and i'm going to paste it here save okay that's uh that's done then do one of the following this let's check the 060 version here add the following to your pod file above use native modules okay let's copy this one in the pod files over driver app driver ios pod file and he said before use native modules so before you use native modules yeah before this at the top of the function here yeah that's okay let's say when we should rerun np export install to update with these libraries and probably for ios that's it we will test it let's follow along with uh configuration on the one android um okay we will also check only the version 0.60 and above and all versions if you define project y dependencies okay let's um i'm going to check the build.gradle for user project and see what i have there so user android build.gradle let's close our tabs and i'm going to open the same file in user in driver app android build.gradle so in user here we see that we have a play service android map utils version i'm going to copy these two and i think that's um that's the only difference yeah if i look now there's the only difference so yeah that's uh that's what we have to to paste in we play service and android maps util uh recognitive all versions if you do not have project wide no but we did it yeah yeah we did specify your google maps api uh in our manifest android manifest file so uh let's copy this to rows make sure it's a child of application okay so on driver up android application uh source main and here there is android manifest uh application starts here yeah i'm just gonna add some space here before closing the application to make sure that it's a child of application uh paste it here and we should paste the google api key in the metadata to get it we will use the same one that we provided to nothing for up delegate so this one yeah paste in your user api key google api key save let's and probably [Music] yeah probably that's it to test that but it's still working uh i'm gonna close everything to start okay source screens uh let's define a home screen where we will render this map just to to make sure that it renders correctly so here we will have home screen i'll declare the index index.js and i'm going to generate a functional component called home screen i have a shortcut to generate this file but you can see what i import here and do the same i'm going to open the app.js from the root over driver application and i'm going to delete everything from our scroll view so i'll leave only the status bar and the safe area view i'm gonna delete also the styles because we will not use any styles in the root of application we'll keep it very clean to to display yeah only the entry point of application and our logic will be in our screens component and we can import the import home screen from source screens home screen and we will render it inside our safe area view home screen like this let's save let's run it here and we see not just a component at the top which means that we have um render correctly our component and let's include our map view there [Music] we don't need this one in the maps installation yeah let's go in the documentation of the maps just grab a simple map view rendering a map with initial region okay let's do that map map view we will import it from import map view from react native maps save record native component air map was not found in the ui manager and i'm not sure if i did yarn ios again but let's do that and one more thing i'm gonna define the provider on ios the default provider is apple maps but i want to keep this consistent for both ios and android and use how is it i think from here pro provider google and i'll send it to the map view this way we specify that we want to use google maps in our map view and not our maps yeah let's wait until it builds again is this real time video yes this is a live video i'm gonna get back to your q to your questions if you have any guys and i can do it right now while it's building so let's check visit india once uh i would like to i really love to visit in them for icons i used from my ui design with rack native svg library good for more custom design yeah that's that's good i prefer to use vector icons because i don't have to care about designing the icons myself and vector icons contains all a lot of icons there but if you want some custom designs then yeah definitely japan hello from japan you look handsome oh thank you does my hair look good uh well i guess we can now work remotely from anywhere yeah that's that's really true and um it was true even before but with this pandemic i think that more and more companies will move remote and this will be the new norm and there will be more opportunities for for people uh in other countries and yeah that's why i moved to an island where it's always hot because i can work with anyone anywhere uh what's happening there are you running no you're not running um i would give some styles to to the view to make sure that it's not because of a weave let's say with 100 height 100 save and no come on you don't want to display are you updating you're good yeah it's updating let's have a look at the user up and see if we missed any configuration from the map view source components home map and let's open the whole map here map view okay we need a map view here it needs um it needs some width and height so it was there it was always there hiding from us because it didn't have a width and height all right so that's that's a good start i would say if i don't give anything to this view will display full screen yes you will yeah that's uh that's awesome and that's that's a good starting point um are we done with installation no we need to install one more library before starting developing the screens we will need the react native maps direction in order to show uh directions on the map from point a to point b and we'll need this in order to display uh the direction from the driver to the to the user to the client and from the client to the destination so let's follow a real quick the installation guide here i hope that's going to be easier i think yeah the installation here should be easy so we are not direct native maps direction where is it here yeah this is the last library that we install and then we get our hands dirty with the code and start implementing and that's it that's actually it and i just can give map view direction just to test it out and i'm go yeah i should put it inside the map view so for that reason i'm gonna expand the component put the map view direction here [Music] and add the variables for origin destination and the import statement up here origin destination api key api key we will take it from where is it i'm delegate m this one a by key save and [Music] i think they use the same yep i hope let's check it out yarn ios uh why does it no it shows so if you look here on the map there is a black line connecting the the two destinations i'm not sure what origin and destination they have but yeah they they do display uh that means that yeah we have finally finished installing all the libraries uh go away uh and yeah let me just get started commit everything so we we are clean [Music] setup driver up like this and we can start working at them at our screens so uh are you following guys shall we get into it give me one minute and i'm gonna be back i need to do something important all right i'm back all right gonna be a good build thank you let's go the first screen is our home screen this will render the map uh we'll render the user location on the map i mean the driver location yeah in this case the driver is the user uh and yeah we'll render all the buttons in all four corners yeah that's that's an interesting design uh we took advantage of all the corners but where are in the application and we will implement the switching from offline to online when we will press on the go let's go let's go the first step the first step we need to show the user location on the map right we can do that easily with map view show user location equal true uh it will ask us for uh permission when we add show user location to use you have a location so so i'm gonna allow while using the application and yep it should show our location but i don't know where is our location so i'm gonna reload not sure if it will center on the user location no um so should i just grab yeah i'll probably grab the relative and longitude um the initial region from our user application because i know that um it was somewhere there oh map index yeah i'll copy these values in our home screen save and i think you want to reload you want to reload yeah now we can see the user location here on the map yeah that's the first api to to render the map with user location on it okay uh the next one will be to render all the buttons and also to render this bottom um bottom bar where it shows like you're offline so probably we will start with this bottom bar sorry if you don't see it properly i can move it like this so yeah it's it's a white bar with a text in the middle uh and an icon to the left and to the right so let's do that in our home screen um yeah i'm just going to create a new file for it just to keep it but no that's not necessary to be honest i'm going to delete the text view and below the map view let's add a view style style styles dot bottom container the bottom container will contain an icon a text and an icon so the first icon is looks like a filter so let's go go ahead and search for react native vector icons directory and choose an icon for it hello bloody slov how are you doing uh for i can filter no filter okay what how can i search for this icon um i just i don't know volume it's not a volume oh come on can't find any proper icons menu okay um i'll choose this one for the the one on the right and yeah let's just use any of them from a typo for example and typo name what's the name menu let's import the library then i'll just duplicate it and in the middle i'll put them the text text style styles dot bottom text and it says you are offline i guess yeah you're offline all right let's uh let's declare the style file and style this styles styles.js stylesheet so here we will have the bottom container and also the bottom text let's open our confine styles yeah we need to import our styles here on the top where is where did i generate the styles home map user app why did i do that there all right not sure why i did that but i generated the styles in the wrong place so i'm gonna move them back in the home screen and in the index i'm just gonna import them save and yeah we are back here bottom container where are you bottom container height 100 pixels background color white save is it behind the map but why did it work on top of it and not on the bottom if i use flex 1 will you work probably not hide autumn oh come on it pushes it out of the screen so i i can try for now for example 90. this is not the best one i'm gonna think how to how to properly do it but or the the best the better way would be um dimensions to get the height of a screen minus i don't know 100 or something like that so dimensions get is it gets get window dot height something like that minus 100 pixels so import the dimensions from react native save um yeah probably even 150 yeah something like that would work better and that will yeah i will always be 150 on the bottom all right the container here flex direction row in order to display them in the same row justify content space between to spread them apart like that and align item center to put them in the middle what else [Music] let me check something all right yeah it's until the bottom bottom text [Music] font size 22 want weight bald is it something like that probably it's not bold and it's with a gray color come on not gray not white gray now it's too yeah i'm gonna just choose the color from here yeah probably that's good so for the um icons i'm gonna put as well uh size 22 even 24 good same here and i'm gonna give them the same color color equal to this gray and for the whole bottom container i'm going to add some padding um 10 to give them some uh room from the margin 15 yeah i think that's uh that's better okay that's the bottom um that's the bottom bar me make it yeah i think that's uh that's okay you can go ahead and search for a better um icon i couldn't find that fast enough so uh we'll move uh to the four buttons which are in the different corners of the map uh we will be able to position them like that with position absolute so let's do that right now okay after the map view let's add these the buttons as pressable in order to register the press on press and right now they will not do anything they will just console worn okay let's import repressible from doesn't give me good enough suggestions so from react natively importable we give it a style styles dot round button and inside this inside this we will render um an icon so for for the first one we will render this menu icon and this one should be top top left where is it so round button let's define the styles for this one do we see it somewhere yeah we see it here at the bottom so we can say um position absolute it moved to the top that's okay we will actually position the button from the index because we will reuse the same styles for all four of them so here i'm just gonna say background color white padding probably five border radius then save can't see it properly let me move the map a bit uh yeah border radius is a bit more 25 to make it round that's yeah where i can start a big bigger 10 padding 10. yeah i think that's uh that's already better okay we're gonna go with that so in the index uh for the styles let's uh add some cells here in line and we will add it for top 10 left 10 will that work yeah that worked so we will copy paste the same pressable four times because we have in the four corners um this will be not left but right save is there then not top but but done and yeah here as well and here not left but right save then okay for for one on the bottom we need a bit more uh not i think 160 should be uh 30 that's okay 130. all right so now we have a button in each corner of application um 110 okay 110 to be more precise so that's that looks pretty similar to these ones uh yeah of course the vikings are different but it's just a matter of finding the pro proper icon and rendering it here for the middle button here we need just a big blue button with the text go inside okay we can do that let's just copy paste this one that's gonna be the goal round button okay for them it's gonna be the go button inside the fit it will display a text text go go style go text go button go text for the go button i'm going to copy the round button styles i'm just going to edit them a bit go button position absolute white padding um [Music] border writers where where is it so here blue okay it's there [Music] let's adjust the color with a picker i'm so bad at uh picking the colors okay but that's good enough so for the go text go text the font size will be even 30 i think okay border i just i'm gonna increase that a bit and the color of a text will be white and the font on weight it's going to be bold save okay so we now we need to position it in the middle and that's the interesting part to be honest we now have this one um with padding it doesn't look uh around so i'm gonna try with with 100 height 100 justify content center and align items center to center the text enter okay so 100 is too much 50. so small okay that's always like that 75 75 save okay so we need to move it in the middle of a screen on the bottom okay uh we can do it with 110 is it like that yeah and that's interesting i think there should be a way um position absolute middle options where sliders work for that icon okay thank you very much i'll see if i'll have time to to change that margin left and marginal uh with margin left and margin right auto let's try margin left auto right auto no it doesn't work uh what if we go with left auto and right auto it doesn't go left and oh okay so you basically make the whole view left yeah we go with both margin right and left left is zero right zero but won't that stretch it well what's going on um left and right yeah i think that's that should be for a view that contains it or we can go with calculating the left using that dimensions so we can say dimensions dot get window or screen was a proper way to to take it wind though with we divided by two and we subtract the half of a weep so that's i don't know 37 can find okay we need to import it yeah that's in the middle okay so the last thing that we need to render here is the amount of amount of money here on top so let's go ahead and do that [Music] where is it yeah let's take them actually that is not pressable but all right just gonna put it as the first item here balance the text will be balance button text so it's going to be we have a dollar sign and then we have a space and they're 0.00 uh because for visual or sign we need to declare a different color so that's why we need it to put it into a separate text i'm gonna go with green not sure yeah it's here on the bottom so balance text and balance button let's and balance text okay for the text let's take this one yep probably not 30 but something like 24 but we'll see when we adjust it uh for the button i'm going to take everything from here and in this situation we have top 10 because we want to display it on top here uh we don't have width and height here we will work with rubber padding and yep that's better um or actually we need to know the the weave in order to be able to 150 yeah in order to be able to subtract here properly like 50 so it will be centered yeah because otherwise uh yeah my my ocd will i'll have troubles save yeah and i think that's um was pretty good uh actually here at the bottom we see that there is the logo over google underneath the button so it doesn't look that good so there is a way to to hide it in the map view we can show uh hide no um google let me just open user application i forgot what is the name of that property so components home map index and here we should show user location and it's not in this one and which one home search route map oh probably that was for um yeah that was for autocomplete i'm not sure if on for the maps you can hide the powered by google logo all right so um render the map we did that render all the buttons on the screen yeah that's done switch from offline to online okay we can do that uh in in order to switch from offline to online uh we will need a state here in home screen uh state to keep track of whether we are online or offline so const is online and set is online and initially it's gonna be false use state from react and whenever we click on the goal let's implement it as a function to on go on go press const on go press we will switch we will toggle the is online uh value so set is online to the inversed value of is online so if it was true we'll set it to false if it was false we'll set it to true and let's let's do that first here for the text if we are offline we need to say you are offline otherwise we need to say you're online so to do these checks i'm going to say if is online then we want to render this text otherwise we want to render this text let's properly adjust it if it's online render the first one you are on line otherwise render the second one let's save uh and it renders actually both of them uh why okay because i didn't delete it from here save if we press on the button now button now we see you're online if we press again you're offline okay that's good probably also the button text should change oh that's going to be interesting or we will have to adjust them if is online the text will be go stop i don't know uh end not sure what they exactly display there so you're offline no is online if it's online we want to end otherwise we want to start yeah like that i can put them in same okay like this so now yeah we have a switch to to go online and to go offline and now it's just a switch but in the next video we will implement uh the actual query to the database in order to say that we are ready to receive uh new orders so that's what's going to happen in this function later on but for now um our home screen of the driver application is ready so yeah we render the map we render the bottom part with all the buttons that that we need to to start searching for orders and to stop it and all the buttons you are able to click on them and so on okay so how are you guys am i am i online are you still here guys okay um it showed me an error so i thought that i'm not online let me have a look at the chat i can confirm that slider is vikon what you're looking for okay let's let's have a look at that sliders sliders we will take it from options let's check options options okay options i think looks better options from ionicons let's import them here and my bottom one here it's going to be eonicons and name will be options okay now it's better thanks so i can put here for it as well i think yeah to have the same size as ours so what other suggestion did you have guys hello scored hello hello foreign okay so great uh we finished the home screen now uh the next step is to show a pop-up whenever a new order is received by the driver whenever an user creates a new order uh which is nearby the driver we need to show this pop-up uh yeah it's going to be a pop-up on the bottom on the top there is the decline button so yeah let's get started i think okay for the pop-up let's create a separate component uh word [Music] new order pop-up something like that new order pop-up can you share with discord link in the chat can anyone share it from the description of a video not so i i could continue you can find in uh in the description of the video all the important links are there uh yeah let's create the index.js on the new order pop-up and the styles because we will need them and let's import the styles from the beginning import oh uh all right in the home screen let's go back there and let's import let's import our new order pop-up because that's where we will display them so import new order pop-up from the components and we can display them here at the bottom new order popup yeah the item is there uh because in the view styles uh styles dot root we need to display them with position absolute absolute background color black save uh with 100 percent not 100 percent to be honest okay we'll we'll figure that out um bottom 10 somewhere there or even more 50. um i think i'm gonna work with two views in order for one to make um wait a second in order to easier align things so this is root this is um pop-up container okay so the background color will be on the pop-up container and here we will say can we say with 100 percent yes um and for pop-up container no for the root we'll add some padding like 20 save so yeah now you see that our pop-up container doesn't touches the borders uh all right so um probably here we'll have a height of i don't know how much we'll need okay isn't something similar to what we need we can put it even uh even lower not bottom 50 bottoms zero and with that 20 yeah i think that's i think that's good for this pop-up container i'm gonna smooth the the borders with a border riders of 10 like that okay yeah that's uh that's good enough okay for the contents of this pop-up container we have um the top row which will display the type of of order uber x the user the stars then to our rows with the minutes and the the distance so we will have three rows for the first one it will contain more more items so i'm gonna put them uh here text the first one will be uber x then we'll have a image for the user so image i'm not sure if i have image not sure if i have a proper image for this one source equal to yeah i'll provide the source shortly and the other one is text and yeah we need also them and i can for the stars star and design let's try this one import and design from vector icons and design so before the 5 we should display vm and design name star save okay so uh below we will have another text that will display two minutes two minutes and another text that will display 0.2 miles or whatever miles there will be so let's add the styles for all of them minutes and distance this will be styles.row yeah we'll see if we need the styles for this text and images yeah let's let's start with i think with this minutes and distance that's going to be good so color white save distance these stands let's see that as well for a pop-up container uh we will align items center all right minutes font size 40 36 for the distance font size will be 30 right or even 26. yep something like that so we have a slight light gray oh whoa come on like that for them where is it roll uber type let's define the styles for this one bird type 20 the font size probably then where is it should they do the same here yeah that's probably good and for the end design we can give a size of 22. save 20. 18. perfect for overall we will need to define it as an actual row with justify uh no flex direction row save very all in the same row so for the uber type let's add some margin horizontal margin horizontal 10 will be enough to spread them apart and now we need to figure out with this image let me check if we have any images in the user app um user applications source assets images no we don't have any so i'm gonna oh but i can i can use an icon here yeah why didn't i thought about that so right instead of the image i can use a view with an icon inside and icon will be user user onto come on which one okay i want awesome user not here but inside the view right here awesome name user color light gray save uh yeah it's there for the size 50 too much yeah 35. yeah but that's good so for the styles i'm gonna add styles dot user background a background color some blue do we have it here somewhere so let's change it to blue ah that's good enough let's add some padding 10 and border radius border radius 10 no no no a lot here 50 even more 60. and we will add instead of padding we will add a fixed width of 75 75 and right as well align items center and justify content as well center justify content center okay um 50 let's try 50. oh god okay and i don't like this light gray color doesn't look good yeah like this it looks much better for them where is it pop-up container besides the line item center i'm going to go with justify content as well center or space around space around no space around is good space around and for that row we will say align items center yeah to have a uberx and that icon at the same place [Music] yeah i think that uh but it looks it's it looks pretty good we have uber with all the texts that we'll need to display yeah i think it uh it looks good so how how are you doing guys are you still here this app has a lot of features yeah indeed this app has a lot of features so that's why this is already the fourth episode in this series and ideas how many parts in total is going to be definitely one more where i want to to connect the driver's side application with the user side application uh so that's going to be the next um the next friday and yeah probably that's going to be it but we'll see if if there will be any other ideas to implement because uber has so many features like come on like i would be able to to do it for one year and that's just gonna be the surface like we have it's a huge application orion hello welcome uh he's saying justland here that's why he's asking questions how come doesn't he use expo did he mention a reason before that for not using expo i have other builds on the channel using expo and i really love expo but yeah i just switched around from expo to rack native cli so everyone would be happy the the previous week we did a live stream of 12 hours so that was using expo so if you are interested you can check that out uh have a dim in your twitter clone tutorial you use dsx files and now you use js in twitter we were using typescript and here we don't yeah typescript if you're not familiar it's the same javascript only it has types so it's a bit it's a bit more safe when you develop it because uh if you're expecting for example a number you're pretty sure you're gonna get a number in javascript you can get a string you can get null you can get undefined so you always should be careful about that uh yeah that's the difference between javascript and typescript i decided to go with javascript now just because typescript takes a bit of time in order to to properly set up all the types that you're going to use so that slow down a bit the builds but yeah love typescript all right okay uh yeah let's let's move on uh we still have some some features to to build here some screens to render uh oh by the way here for this pop-up we have also the decline button that we didn't take care of see i almost forgot about that so the decline button is on top here the decline button new order pop-up yeah i'm gonna put it here as a pressable on press on press will be on decline let's define the function right away on decline oh come on come on i forgot to show the screen so yeah the only thing that i added is in new order pop-up i added the pressable you see i didn't even import it and i created the function uh on decline so here i'm gonna order i'm gonna import the pressable yeah sorry for for that i'm gonna import repressible inside the pressable we will have a text with decline the style will be style decline text and for repressible it's going to be decline button decline button okay it displayed here let's first of all style it here somewhere decline button and decline text so for the text for the button the background color will be black height or should we just add padding 20 and border radius of 15. let's save all right that's interesting and here for decline text for decline text we have a color white uh font weight let's go away for bold okay uh decline button y takes too so much space it will figure out but the thing is that the root uh of this pop-up now should be the whole screen so it should have a height of 250 50. it should have a height of 100 save now the pop-up container will have a height of 250 right 250 250 like that and the root will justify content space between like that and for the bottom button the client button let's try to add a wave okay that's how we will do it 150 last 100 okay and align items center that's uh that's good so if we press on the decline on decline uh order and also uh the whole pop-up container uh should be oppressible because whenever we when we press on it we accept an order i know that in my opinion that's quite a bad user experience because yeah when you press when you press on a pop-up you just accept the order but okay so on accept let's duplicate this one on accept on accept order here we will do all the logic in the next stream on accept order on decline okay so we have um we have this with a decline with accept this is going to be like a pop-up let me try something can i do that background color and transparency background transparency is there such thing unexpected is not valid style property okay but if i add here 0 0 but if i add here 10 yep uh 99 okay yeah i think that's better even less just just to hide everything behind so the user will be focused on them yeah on the on the pop-up itself yeah i think that's uh that's better i'm not sure if they do the same uh but yeah i'm gonna do that okay that's uh that's it with the new ride pop-up so let's commit everything get add get commit new order pop-up and let's move on with the next the next features yeah regarding bad users experience i saw in multiple places in in the uber application that for user experience experience is not the best for example in user side application there is like an input and whenever you press on that input it actually takes you to our screen so that that input behaves like a button which is very not user friendly okay then next step the next step is to uh whenever yeah whenever we re we accept the order we will go into the like this pick up the client status and which and this will show us the destination from our place to the client to the client to pick him up okay let's think about that um yeah we can do that we will need some uh some data let's close everything in the home map index no this is the user side up be careful home screen user here uh yeah i will add i will add a dummy order in state so const order set order equal use state and here i will provide them the state of order let let me think about how i will properly do that so we have an order so this will be the order that we uh but we act that we actually took so um we can do it like that const uh new order or this is gonna be an array or just a new order but we will send to we will send to the to this popup so new order uh set new worder let's do it like that first use state so for the new order here let's say that it will have an id it will definitely have a type let me check them let me check the user up uh and the schema of how our order looks and if we have everything that we'll need there come on schema so our worder has id created at type okay type uber x then it also has this origin latitude and origin longitude this is where is the user coming from and where he is going and we can take it like some of value latitude we can change here from four to zero origin okay did the mistake there origin longitude uh this one oh no no no i'm working with working with these values latitude 28 and longitude minus 16 here we can say 8. then the destination so for destination again we're gonna hard code some values to zero what else uh the user it will have a user and the user will have rating and now let's say that it's 5.0 and that's it yeah i think that that's it so we will give this new order to new order pop-up new order equal to new order and we also have to give the function because all the logic of accepting and declining a worder will happen here so let's say on decline on decline will be the function one decline that we will implement in a moment and on accept and we will call them on accept and pass the new worlder on accept okay let's define here on decline const on decline so when decline the we can just simply do set new order to with null so we will just reject it or just query another order or something like we will see what the actual logic will be here however however on const on accept and now let's say that we set that order with a new order that will receive new order here so we display the pop-up only there is a new order if there is no new order we don't have to display the pop-up so we can do that by using this uh and inside the new order let's receive the new let's call it just worder or no okay new order then on except and on decline is that how we call them on decline on accepts on accept okay so that means that we don't need these functions we'll just use the ones from what we receive new order uh let's instead of rendering dummy data let's render the ones that we receive from our new order so instead of uberx we'll render new [Music] order dot type let's save we are still on uberx what else we have there the user stars new order dot user dot rating and for example if the rating here will be 4.8 we're gonna see here updated yeah and these two options we will also receive them we will also receive them come on duration and distance let's render the duration and distance yeah right now they are undefined because we didn't send anything here as duration and i don't know let's say two and distance 0.5 save yeah now we are back to where we began however everything is handled from the home screen so if we press on the decline now the water is gone so let me just refresh the application because yeah once it's gone it's gone come on reload so when we press on this uh we should take the worder and yeah when we take the worder let's also set the new worder to null set order and set new order to null then all the information will be in our order which means that we took the order so now we need to render the time the distance the user and the line picking up and the username okay we can do that so if we go here we will extract everything into a function because it's gonna get messy there are gonna be a lot of if statements here so let's copy this and let's call render [Music] bottom title or something like that let's define the function const render bottom title and here in a function it's going to be much easier to do to do this so for example if is online we return this text [Music] yeah at the end of a function we will just return this text and now we need one more if statement at the top so if uh yeah if order if we have an order we will return and yeah later he will have our if statements because are we picking up or are we dropping off or what's the status but uh for now we can uh if there is an order we will render yeah uh time image this distance and the text picking up uh and the username so for the text we can say picking up uh order dot user dot name we don't have it in dynamic data but we will add it right now so user name save and define is not object order username order what because if worder if wonder let me just try to rerun the application why sometimes it's it doesn't want to reload if word return order what's happening here order and let's debug oh oh oh okay this one should be null yeah that's why uh initially the order is null so driver up here uh initially where there is no then we take a order and here we see picking up uh and the username that's good that's good and now we need to display this okay we'll have a view here we'll have this text here and on top here we'll have another view that is going to display the minutes let's say one minute then it's gonna display the same for the user yeah this one and then zero point two miles and i think yeah for one minute i need to put it inside a text because everything should be in text all the texts same from here save i'm gonna style everything here in line because we have a lot of components so justify content no flex direction row perfect uh this view will have a style align items center that's good align items center the user background the user background will have background color add green come on how to choose a proper color here okay that's that's okay uh padding or let's say we've uh third 40 height 40. align items center it's going to be so many properties here center justify content center and border radius 20 okay that's good uh for the size of um icon 20 will be enough and for this row here align item center and and and and and let's add some margin horizontal to this one how much 10 okay that's that's better that's how it uh for the height and weave we can decrease it to 30. save yeah i think that's that's a bit closer to what they have there the color is i know it's awful yeah this i think is better all right so when we confirm the order we show that we are picking up the client and also we need to display the direction from user location until from user location to the client so origin latitude do we have here map view direction origin will be okay for now it's hard coded origin and destination will be okay these two where is it destination will be order dot uh origin launch latitude it should be an object it should have latitude and longitude latitude and longitude order dot origin latitude and here order dot origin um i think i made a mistake there like this origin or aging origin yeah like that and we should display this direction only if there is a order so if there is an order we display it copy paste it here and for initial position for initial positions we will need to query them but yeah let's just copy this layer just to see if it actually works save save save save yeah it somehow shows us these directions for directions let's add some styles there map view direction and we can take it from our user side application source is it this one source components route map index and here we should have some styles for our yeah stroke five like this yeah we can see it a bit better so how can we get the user location from a map view let's have a look at the map view documentation react maps on location or location tracking location no uh i have to go into the map view component and here go through all the props initial camera initial camera so where is it show scale show show um yeah i think events to access event copy with this called once the map is fully loaded yeah there is this one user location changed colby that is called when underline map figures our user current location make sure show user location set to true coordinates location on user location change okay i think that's what we need so for the map view show user location and let's define this one user location function in order to know like where should we make the destination from and to because we need the [Music] user uh location so here i'm not sure what we will receive so let's just console log the the event console log event all right so let's open the debugger here okay nope not this one user location let's try to update it come on reload okay user location here a lot of things there we need to check the docs uh yeah we have coordinate do we coordinate is trusted coordinator i don't see it let's try to destructure it from here coordinate and cause a log here so going back to yeah let's re-run the application come on reload [Music] no it's not going to be 12 hours no no no we are almost done uh so user location is undefined why is that why is that the case what if i no it doesn't want to show the location on user location we call that one user location change coordinate location call back that is called when vendor line map figures out why doesn't work we have a user location definitely because we can show it how is it called on user location change so it doesn't say that it's only for android or something like that it's a callback fingers out let's go back and go through the event and see if we can get them something valuable from that event where is debugger here reload so here is the event bubbles cancelable current target yeah that's very weird because on user location change let me just check by issues if that's a common issue uh keeps going even when user has not changed and not with type location yeah let's check this one to access event data you will need to use e native event for example on press e native event will log the enter event object to your console are you accessing the native event property okay let's try that event dot native event will that change something come on reload and now yep yeah we have target we have heading speed longitude latitude accuracy um and a lot of interesting information latitude longitude okay uh that's uh that's really good and we can set set it in state so we will keep them uh const okay my position let's call it my position because user position might be confusing because it's actually driver's position set my position to know then whenever we dot core nade set my position to that object okay and now whenever we um whenever the origin for the direction will be my position so let's try to just call my position it has multiple things there but yeah let's see so for the sake of being safe let's reload the application you need native event yeah thank you very much uh let's confirm and now it shows us the direction from the blue dot from the position that we are at until the destination which we set somewhere here so yeah that's uh that's pretty pretty awesome it shows us that we are picking up a client shows us the direction um and yeah i think that's it with the state when we uh when we pick up the client um map view direction uh i think the there is something interesting from this library to take as well like um the the time yeah the time and uh yeah duration come on and distance come on yeah yeah yeah so uh we should be uh on ready yes yes on ready uh let's have a look at what on this already on map view direction uh on ready on direction found on direction found and let's have a look what we what and when we get that because that's important const equal to event and let's console.log direction found and direction event event okay let's refresh come on yeah we should first confirm this one direction found distance and duration okay that's awesome we can yeah we can um set this distance and duration here at the bottom uh so should we add it to the worder yeah i think we can we can we should add it to the just with a worder so here set worder if were there if we have already an order we will set order to everything that we have in the order and also we will set them the distance and duration and there is also waypoints so the event.distance okay distance event dot distance and duration duration event dot duration open the duration uh that means that here we can say order dot distance or i don't know or a v sign and the distance will be too fixed or um yeah let's say to i don't want to show a lot of now alex yourself no please alex so i'm not sure if i'm still online that's a bad thing why why it has to happen like this what's up with my internet let me check my internet i don't know it's has been connected reconnected successfully so weird i'm live okay let me just figure out everything because i've been disconnected and i have no clue if i'm live now or not so people from discourse says that i'm live that's some good news but yeah let me try to just to make sure of it and the quality is still okay i'm not sure what happened with my internet come on and live on youtube i want to see the i don't see them youtube chat it doesn't load for me oh come on and it's asks me to it asks me to connect with the streaming software so guys i'm not sure if i'll be able to get back to the youtube chat i hope it will reconnect automatically somehow do you see my messages in the chat but yeah i think that um i'm gonna continue working on on this feature because we are almost done and yeah please um let me know in the discord if you have any questions if everything is all right so if you'd like to to help me that would be awesome so continue don't stop yeah that's what i'm gonna do thank you guys and if there is anything wrong please let me know in the discord so because yeah i'm kind of blind now i don't see anything so yeah let's let's get going i think we we are almost we're almost done yeah things happen come on where we were left so we wanted to display the order distance in our uh on our screen so cannot read property to fixed or undefined because at some point the water will be present but distance is not calculated yet so in order to fix that well i'm gonna put a condition here if order distance then order distance to fixed otherwise um we can put a question mark or zero something like that and that's the same for them uh distance oh that was time order time time time save and now uh if we accept this one initially it's going to be question mark and then for the distance it found and i think they give it in kilometers but i'm not sure about that so um for the time that did we already did correctly duration okay duration and hair duration save okay 7.2 minutes 5.1 kilometers and this is based on the distance that was calculated uh here from the from the directions on the map yeah i think that's uh that's really cool because it shows you actually how how much time it calculates so yeah now it's time to drive to the to our client and pick her up because she is waiting okay this this step is done pick up the client uh it shows us the navigation how we should go then it also shows us the actual minutes and kilometers until it so then we will uh we will get to a point when we get to to the destination so pick up the client okay this one is yeah after we pick up a client it shows the direction should be from from the location of a car until the destination yeah until the destination where user wants to go that means that from somehow we need to to understand when we are close to the user so we can know when to switch this state to understand that we picked up the user to do that we will need to we'll need to get the distance from the from the car to the to the to the client to the user and i think there is a simple formula uh i think i implemented this um distance from coordinates formula and we can easily calculate that so calculate distance and bearing between too late to analyze oh gosh that's some pretty interesting math oh but you know what uh i can go on youtube i think and just open the chat there just as a viewer so the point 1 distance 0.2 distance oh gosh that's interesting i don't want to ha to do anything of that so the difference between latitude divided by two oh my god okay that's in javascript const are let's try this one let's let's create a function for this let's see if we we can get the actual distance from the two points um oh wait am i that stupid i think i am basically we will always update the the distance and at one point the where is it but the distance yeah we can we we don't need to calculate it's there already so we have a distance okay all right so based on this distance we need to know if we need to switch uh we will we will add the use effect on the order so whenever the word changes we will check the distance and we'll check if it's less than i don't know 0.2 then we'll save it okay we are at that location so um let's do the use effect here this effect will be called whenever the order changes so let's import the use effect use effect imported so if order and order dot distance and order dot distance is less than 0.2 probably then we can set order uh we will add to the order that we already have we'll add a property um i don't know picked up picked up equal to true so here is let me just open the open the chat so i can be updated maybe not everyone is on discord but i don't know why you you aren't already alright it's loading so slow i hope that the quality of the video is at least good picked up picked up all right all right and that means that okay here no let's do it better in the render bottom title because now we should render a different title and the title will be the same dropping off yeah different text and a red background for the user like this okay i'm gonna copy this one if order and order dot um picked up picked up then we need to drop her off center the background will be red and the text will be dropping off save oh i'm back in the uh i i see the chat guys can i pop it up okay all right so the dropping of the user if you order a pickup okay okay okay how to test that we can test that easily by saying that [Music] where their latitude to set the world latitude uh origin very close to the where the driver is currently located where i can change my location uh by using uh features location custom location here where is it here 28 4 5 0 0 41 okay that's close enough and for this one will be two six three eight let's save and now i'm very close to the order and it says dropping off sierra that's good that means that it already understands that we're picking her up so but now uh the only difference is that the map view direction should show a different origin and a different destination and i'm thinking whoever to put them just in state okay destination destination i can do it like this uh get destination get destination which will be a function this component is pretty big and complex get destination if we implement the whole i think we will have to do some refactoring event uh return this one however if order um and word or dot picked up then we will return and different no no no please please please please um if we pick her up will not take the origin but destination destination no no no does it have one or origin and dest not destination save and now it should show us a destination to the user okay yeah i think that but it actually works i'm not sure why minutes are not calculated properly for the destination i can move it a bit farther seven okay let's pick up picking up we picked up and then now it says dropping off so dropping off a lot maximum data fx no no no no why zero kilometers is it too far away two let's try a different one maybe didn't calculate it and dropping off zero kilometers what's happening there on user location set direction found if order oh we set the order and the dependencies is water and it calls it again and again and again [Music] okay okay we can do it a different way we don't need the use effect at all we will do this here so is picked up is uh true if the distance is equal is less than 0.2 render viewer who's been expected okay let's re-render because we deleted the hook there and the app crashed okay we take this one picking up dropping off picking up and dropping off home it switches okay uh i know how to fix it uh so basically the event distance changes when we try to drop her off because the distance is a new one and in that case okay i will do it like this so it's picked up so if it's true it should stay true picked up or the other one yeah picked worder picked up order dot pic dot picked up come on picked up or this value so whenever this turns true it will never go back to false because this will be true and it will always return true however if it's false it's going to depend on this value so let's try to save dropping off and it stays like that and it actually shows us how much time we will it will take us uh to drop off the user so if i um come on what what what what let's refresh and see it in action oh come on come on uh real load uh okay oh it's so slow i cannot bear it come on come on come on yeah i think i think everything is is almost there not sure why it the emulator is so slow so pick up the client yep pick up show to the destination we did that and complete the ride okay the last step will be to complete the ride reload what's going on with you just doesn't recognize my clicks okay now it works so let's accept it picking up kyra then it knows that we are already there and it switches to dropping off and it shows the destination of a ride okay the next step is uh to understand that we finished the ride and that means that we arrived at the destination of of a user so if we arrived we'll have a button complete uberx complete uh yeah the drive so uh to do that we will also have here in the own direction found uh a property based on the destination so uh the property will be called is finished finished if is finished will be uh finish cannot we cannot finish our water without picking up a user so the first condition will be if order uh picked up and the second condition will be event distance less than two this might be a bit confusing um because it's basically the same here is war and here is end but when you think about it it it makes sense the second one is easier because uh we finish the ride only if we picked up we picked up the user and we are less than two kilometer point two less than two hundred meters from the destination and here why it comes this and like we picked up the user and we are less than 200 meters from the destination in this situation our or makes sure that whenever we pick up a user we will change it we will change the origin the destination will change and we don't want to go back to false we don't want to go uh yeah we don't want to switch we speak up uh to false so that's why we put order pickup war so if this is true if this is true the result will always be true no matter what basically means when we start this is false so don't look at this just uh execute this this statement so if it's less than 2 we will set it to true if not we'll set it to false however if this is true after we set it to true then we will ignore this one so let's visit the logic there so we have is finished we have is finished so let's um have here yeah here in this in this function we will need a button there complete uber x oops okay okay okay if order and order is finished then uh username and then we'll have just a simple button with a simple text the text will be complete uberx complete uh order type dot upper case so that's gonna be a result function okay it doesn't matter doesn't matter [Music] flex direction row align item center let me put here i want to see this one so i'll put if true if true do this so okay complete uber x background color red save with one hundred percent will you will you work well will you work okay i can play around with some justify content center some padding then okay that's that's good enough uh i'm not gonna try to be perfect on this button because that's not the most important part of this uh of this page and can go so and continuous designing it so here i'm just gonna say color white complete uberx won't wait bold okay so we have it here what's what's popping okay order is finished uh all right all right all right all right i can do it i can now simulate all the steps so the origin uh will be i don't know three and this one is zero not sure what where that will show me okay we get an order we accept it um dropping off no i don't like it we're too close to the yeah we're too close let's check here free okay picking up uh sierra now i'm gonna go in the position of the location of my emulator not sure if that's possible on um android but here is possible so i'm gonna move towards the destination so it's four five this is free probably but we automatically switched in uh we have picked up the user now we need to drop off sierra okay let's drop her off you're dropping her off in the sea probably so let's um features location custom location and the destination is four five two nine okay that's probably enough sixty two six and here is zero let's try this one and we see that we arrived at the destination and we see the button complete to borax which we will implement in the next video so with that being said i think we have everything that we plan to do and yeah that's that's a lot of work with maps with destination with uh checking the location with states oh my god yeah my head already hurts so but yeah i hope that uh it was helpful and it was easy uh during the next week what we are gonna do next week the same time the same day friday at 3 p.m gmt we're going to connect this driver up with the actual user application we're going to synchronize the data over worders so whenever a user submits a worder to the database we're going to show it to the drivers so whoever picks it first will pick it and it will disappear from other drivers of course uh we'll also implement the real-time jio tracking of the cars so whenever the car of the car moves we will show the car position moving on the user application so it's uh real time geo tracking uh and yeah we're gonna connect these two application to the same back end it's gonna be interesting i'm looking forward to that build um because yeah it's challenging even for me and but that makes this build interesting because yeah we we work with a lot of new stuff here and i'm learning with you guys a lot of information so questions with some problems with by internet but i think we we managed to to complete it are you still here guys how do how is it doing great love from india hello from me from uh spain i'm in spain yeah okay are we going to add login authentication to this app we have already added the login authentication to the user side application so yeah of course we're going to add the authentication to this app as well yeah sorry i didn't mention that because it's so easy to add it with amplify and i already take it for granted but yeah we're all gonna have authentication uh this is looking good thank you very much uh it was great thank you for the video thanks for watching guys and thanks for sticking till till the end yeah i see some people that are here from the beginning so thank you very much for staying with me can you create a casino game on ragnay tv yes i can but will i i don't know it was great thank you how is this free i'm a good person so take it for free because we need to share the knowledge we'll release it nope i'm not going to release it i explained why at the beginning of the video because this build is purely for educational purposes so i'm just teaching showing uh how to build it and it probably would be i probably would get in troubles if i would uh release it because it's the same design as uber so i would have to adjust the designs in order to to be able to deploy it but i don't intend i will however deploy the application that we have built during the previous week's 12 hour livestream so if you didn't uh watch that we built an application from zero till the end in 12 hours uh and that wasn't a clone that was a original application original idea of mine so i want to deploy it and you can play around with it and invest in crypto with virtual money just download it and you'll get 10 hundred or 100 000 dollars for free okay we are virtual but still uh okay are you going to integrate post notification uh you mean push notification uh it depends we'll see when i will plan it next week so if if it will be a lot of work and i will not manage to do it in three hours uh then probably not but i'll try i'll try to to make it i have some questions but i'll try to follow the tutorial first yeah i encourage you following the tutorial if you have questions join the discord channel in there i can help or if i'm busy other people can help yeah the community is really helpful after installation do i have to uninstall react native or yarn for a new app project nope you don't need to uninstall anything just initialize a new project and move on yeah we need a end for this this application as well but we're going to connect to the same back end as we have for the user side uh did you publish yet uh v crypto i didn't i didn't publish uh i'm in the process i just need to to fill in all the details like screenshot description and to submit it for review and it's gonna take a couple of days until it gets reviews so hopefully this week is gonna be available is this scalable if we change the design could we deploy it and potentially monetize it yeah to some extent this is scalable however you you can understand that during this live stream i cannot build everything so in order to deploy this you will have to implement a lot of more features that like are small features but are very important um so you you'd have to do that because it takes a lot of time i'm i'm focusing only on the main features so these main features are quite scalable uh how many video left at least one at least one next week okay guys uh i think it's time we are here for more than three hours right yes more than three hours so yeah i think it's time i gotta go so thank you very much for joining if you enjoyed this video please subscribe to the channel turn on the notification bell join the discord channel where we share our knowledge we help each other and we have fun building together projects what else yeah i think that

Channel: notJust․dev

Views: 29,802

Rating: 4.9559469 out of 5

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react native live coding, live coding, javascript, typescript, react tutorial, react native, javascript tutorial, react native clone, react native app, react native for beginners, learn react native, react native project, react native project tutorial, build uber clone, uber clone react native, uber clone tutorial, uber clone, lyft clone, taxi app react native, taxi mobile app

Id: NAos0QKgyxw

Length: 202min 39sec (12159 seconds)

Published: Fri Feb 26 2021