🔴 Build the Uber clone in React Native (Tutorial for Beginners) [2]

what's up not just developers welcome to a new live stream uh yeah it's been a while until we everyone was waiting for this live stream and today we're gonna continue our uber clone in react native so i'm very excited about this project everyone else seemed uh to wait uh for a long time and people seem to enjoy the first part so uh let's get into what we're gonna do today if you didn't see the first part that's not mandatory so i'm gonna show you how to to start from here if you just if you're just joining the channel so um okay so what we're gonna build today uh let me share the screen of course yeah this is um yeah our uber clone in rack native uh part two and today we're gonna speak about advanced ui uh elements gps tracking and much more interesting features so we are going to build uh the places auto complete because if you followed the previous step we implemented a very basic places auto complete but today we're gonna build the exact places auto complete that we see in uber uh application uh then we're gonna do uh jio tracking uh to display the current user location as you see here a dot on the map and also to display the cars on the map depending on their direction where they are heading so the next step is to implement navigation to put everything together that we have built uh so far uh to navigate between screens to send data between screens that we need and also to implement this cool drawer navigator uh work as it is called the hamburger menu the one that uh the side menu so okay uh for the technologies we're gonna work with react native we're gonna write javascript we're gonna use the latest features of react uh and react native such as functional components hooks and so on uh yeah for the navigation we're gonna use the react navigation library version five uh vector icons google maps um apis and packages in order to display these maps display this autocomplete features and so on okay so what you will learn first of all you'll learn to work with to work with and to also customize the maps uh in order to display uh different cars with different rotation and so on also to customize the google place is auto complete uh because as you saw the one that comes out of the box is not enough for us we need to customize it then we will also implement tracking the user location in real time in order to display it on the map and also to suggest nearby places in the autocomplete input the next app will be the basic navigation you'll learn how to structure your screens in the navigator how to navigate between screens how to send data and so on and the last one is the drawer navigator the one that comes from the side okay so who am i well thanks for asking so my name is vadim i'm a full stack developer for over seven years i am currently the cto at a small startup called vitinum uh we are doing something amazing in the sports industry i'm also was working at amazon as a software developer engineer i am passionate about coding building impactful startup and sharing this with you but most importantly i'm not just a developer so uh from the prerequisites uh you will need a rec native environment setup uh i expect that you already have it you will need a google developer account you can uh create one for free and also you will need the dummy datas that i'm we are using in order to make your life easier i prepared everything i put it into a bundle uh it includes data images icons pdf this pdf presentation if you want to follow it along so if you're following along the build this will be very helpful i updated the assets from the previous from the first part because i added some new information i updated the presentation so you can get them at assets.notjust.dev uber okay so what is the starting point uh this video will be a continuation of the previous part where we built the uh the basic ui we set up a project we started from scratch uh i'll show you shortly what we managed to build uh but if you can find the video on my channel uh it's called bill vuber clone interact native uh and i suggest you start there watch it uh implement it yourself however if you don't want to implement it i don't know maybe you say like it's too easy i want something more challenging you can do you can start from this point so here are some of the steps that you need to take in order to start from this moment if you don't want to follow the first video for the first part so first of all clone the repository that you can find on this url saving by dim 1312 uh slash uber clone slash three part one this is important i created a separate branch with the code that we did in the part one because if you're watching this video sometime in future then the main branch uh will be updated and it will contain the changes from uh vendor v stream and if we will update it in future as well so uh check out the branch part one then you're gonna create a google developer account create a project enable all these apis that you see here and then get an api key from the credential page and replace the world api from the code with the new api that you just got from google so it should be in five files uh and for easier for you to find where you need to replace just do a search on this um old api key and replace it with your new one then install all the packages npm install yarn install depending on what you're using also install the pods if you're working for ios run the project and we're good to go so i think that that was the intro right where is it where i am yeah okay so let's have a look uh at what we have managed to build during the first part and then i'm gonna uh say hello to everyone in the chat i see a lot of people that are joining so yeah say hi there and i'm gonna be i'm gonna talk with you in a moment so let's have a look here because we don't have any navigation we will start with uh displaying the home screen let's save and here we can see uh the maps with the cars uh yeah some information some messages uh and uh input which is actually a button uh that asks like where to like where you would like to go here will be some um previous location from uh history or the saved location like your house or something like that so after pressing on where to we will be redirected to um where is it search uh destination search so here is the page that we have developed the previous time it doesn't look good we're gonna fix it today uh and it also doesn't work i don't know why probably because of the api key uh the last one will be the destinations the search results and here uh we show different types of uber cars that you can choose from and also the map and also you should see them the how's it called them direction like the road that you the car would take but uh it doesn't load right now because uh the api key is uh is an old one so we're gonna change it and we're gonna see it so okay that was the intro so shortly we can get started um okay who is uh here in house with us uh hello alexandra hola hello everything this is uh from canada a small request that you can go in developing a little bit more in instagram clone login logout little bit in terms of bottom top navigator yeah probably sometime in future i will come back to instagram but i have so many new new ideas and so many new projects that i'd like to to share with you guys um yeah we'll see can't promise anything right now hello eunice um my team is back in house yeah with new powers any suggestion for bottom top navigation tabs for switching between the tabs and directly adding photos videos from device library yeah i think that uh that alexander gave you a great suggestion to uh watch the whatsapp clone where we implemented uh something similar um manoj i love your teaching style thank you very much i appreciate it hi after a long time yeah it's been i think three weeks from the previous uber clone but we are back and we will be on time uh yeah it was because of my relocation hello uh okay okay so um yeah i should zoom the code people are saying salute sergio so let's try to zoom a bit the code preferences 15 is not enough 20 is this better or even more i can go more i think foreign is saying i would love to buy your udemy course uh i don't have any udemy course right now everything is for free take it and follow along and i'd be the happiest is this better i think it's too much but okay we we can try i've got a new monitor and that's why like the sizes and everything is changed so that's why it's a bit late all right guys so uh first of all i think i would i will have to um to get my uh google key so i'm gonna go to consoledevelopers.google grab my new key and replace it in our code all right where is the credentials just one second guys come on not just a project the project structure is a bit too small not sure how to increase the font size of that one [Music] yeah i really don't know how to do that editor tabs uh so let me grab that api key and let's uh replace the api key with a new one or if your your apache is working and everything is all right you can continue using the same one as you used in the previous video so um i know that it i should find the old one somewhere in android source main and here okay so this is the old api key so i'm gonna do a replace the old one with the new one uh yeah i'm gonna do replace all replace and now let's try to refresh uh i think okay this one works but direction works i'm interested in if uh all the api works so i'd like to test the destination search to check if the suggestions are working no i don't think these are working but i think we just have to do yarn ios to rebuild the project because yeah we added it into the native code of ios so hi samuel welcome uh to the live stream i'm glad that you made it uh hello from vietnam hi yeah it's weird because the camera is here the chat is there so we have to okay so the app seems to have been built let's see if now yeah now this is working and also the home screen i'm pretty sure that it's working and the map load yeah the map is loading okay guys so what is our uh first task in our plan um because we the last thing that we did previous video was to implement the the cars on the map uh or wasn't this the last one but nevertheless um currently our cars on the map are all in the same direction so in future when we will implement the gps tracking over drivers then these cars will move very weirdly like sideways and so on so we would like to display to rotate the car on the map depending on the direction uh that the driver is going so later on i'll get into details on uh exactly how where is it yeah i'm i'm gonna get into details of exactly how we will get this value when we will uh implement it dynamically but right now uh let's just add a value to each car uh that will be uh called heading and it will represent the direction like you have the direction uh in which the car is going and this will be in uh degrees uh from where zero degree the car is facing north 90 degree the car is facing east uh 180 degrees south and so on so um let's say that heading here will be i don't know 47. let me yeah these are just degrees of where the cars are going so i'm gonna add some random ones now but later on we will take this heading uh dynamically from the gps so i don't know 99 and and zero one will face north okay let's save um yeah this is above the dummy data and also in images uh make sure that all of them images where that contains top the ones that we are displaying here are facing up because this one is facing up the uber x uber l is facing up however the uber com comfort is facing down and this will give us problems it will be in the opposite direction so if you downloaded the assets that are updated right now i already modified this but if you have them from the previous time you can reverse this so i'm gonna open just make sure that the car is facing upwards i updated my os so now i don't know youtube uber source assets images and this one come on what's happening how how to oh rotate and one more time and save and now our car should be pointing up yeah now that we made sure that all the cars are pointing up uh let's uh find a way to rotate the cars on the map so we will go into um screen we will go in no into components where is this map so this is the home app index um home index and here we render the markers which are uh all the cars from our dummy data okay so we can we can give a style to our image that will represent how we want to rotate the the image itself so i'm just gonna put them into new lines so the property is transform transform and it contains i think an object an array of object and the first item is rotate and rotate expects a string with let's say 90 degree let's save and check the map now all of them rotated to 90 degree if we put 180 all of them will face down and so on so uh yeah this is how we rotate but we want to instead of hard coding this value we want to take it from the car object so i'm gonna replace this with a template string in order to add the javascript variable inside this string so it will be car dot heading let's save and now all of them have different um yeah different headings can you go away please okay so yeah uh and if we go into our assets data and if we change for example this one from 0 to 180 uh it's the black one and it's updated yeah so now with that done later when we will implement the tracking of them of the cars and if they will move then it will make more sense that the car is moving in that direction and so on so i think that that was an easy feature that um gave us a cool yeah ui experience okay so um yeah before going to the next one let's see if everything is all right in the chat uh see a lot of people from russia privet privette hi vadim do you have any full-fledged course with react uh react native that i can purchase keep up the good work not yet my friend not yet everything is free on youtube so yeah stay tuned and maybe later on i will do something uh more in-depth like a course can you zoom in the file names unfortunately i cannot where i don't know how and um i'll i'll figure out probably for the next stream uh so that the file names will uh will be seen um arun thank you very much so for everyone who is just joining uh we are building an uber clone in react native so this is the second part of application of the other build in the first one we have built the basic elements the basic screens everything that we needed we integrated maps we integrated direction autocomplete and so on and during this live stream we will improve everything that we had we will integrate some uh some advanced ui uh elements uh gps tracking and so on um so yeah the plan for today is to finish and integrate the places autocomplete that will have a unique design uh the same as the uber does also to display the video tracking for the user location then we will put everything together with a navigation so the user can easily navigate through the screen scan uh yeah order an uber and so on so yeah the technologies i see some people are asking in the chat we are using react native uh we created a project with with react native cli uh we're not using expo for this project if you're interested only in expo projects i have some uh some expo projects on my channel uh yeah comment down below if you're interested in that and i can uh tell you which exact projects are in expo so yeah that is the plan for today you can run android emulator yeah i can run android emulator this is just my choice but i am testing it on an ios but we at the end we will test on both ios and android to make sure that everything is the same on both platforms and everything will work on both android and ios because that's rack native okay so let's get going okay yeah so let's get going uh with the next step uh the next step is to work on the places auto complete and i think it's pretty obvious what we have to do uh during this step we need to take the page from this design to this design so basically uh the challenge the challenge of this is that um this component comes from uh from the package from the google places package uh and yeah i can show it in code but yeah everything that uh that we see here comes from the package so that's why it's a bit difficult to style them to put them where we need to put the inputs close together because this space is reserved for the suggestions like for these rows of suggestion from the first input and this space is reserved for the second input so that's uh that's one of the challenges then we'll implement some more interesting features with them okay so one of my ideas was that we can play around with some absolute positions and uh give some styles to to the input to position them absolute uh on the screen and also to uh the list view down below so let's try to to do that now where is it so yeah here it is yeah one second i'm gonna open my notes if something gets out of control all right so let's open our source directory in source we will open screens and in screens we will open destination search index so yeah this is the the file for the destination search so first of all we have the first the first input um yeah but before that let's open our app.js from the root directory and replace here home with a destination search so we can see it in our emulator so we can know like what we are working with okay so um the first component google places autocomplete belongs to the first input and you see the placeholder is where from the second one belongs to the second one and you also can see the yeah the placeholders so yeah [Music] this google autocomplete features uh uh you receives a styles object and here we can style different parts of this uh individually so let's start with styling the whole container of the places autocomplete which will include both the input and the list view down below so container and we will want to give it a an absolute position so position absolute um let's save and yeah we can see it somewhere there now we can play around with top bottom top left right values and we want it to be displayed like around 50 pixels from the top 10 pixels from the left and 10 pixels from the right so just to have enough space between um between the margins so we can see it there that's okay uh let's do the same thing for our second container which is here uh and now the only difference is that okay this one can be 50 but the first one should be a bit upper so let's try 20 10 yeah i think 10 is okay or even zero yeah let's let's let's let's go with uh with zero uh and there we have maybe we can put put 55 to have some more space between between the two okay so for the second one if we search something we see the results here uh that's good however the problem is for the first one because if we place the results are displayed underneath so you cannot see it but they are displayed underneath so because yeah for a you can see that the first one is area 51. so for vet we can send some styles to the first uh input to the first yeah to the first input and we'll send it a list view styles and these styles are i can show you what they are for they are for um where is it why it doesn't work container list view position absolute top 50 let's try a bigger value to see if it works i don't think it works list view did i made a mistake style for that this is for the first one right text input container list view and to assign it any view let me try to uh ignore all the styles that are coming from the library with suppress default styles and see if that works yeah i think that works position absolute background color red no yeah now it works so position absolute uh probably will be i don't know 110 uh and this one let's suppress the default styles for this one as well a bit so i'm just trying to understand if they are on the same place i think that the red one is a bit lower it's a lot of we have to play with these numbers to to make it like the same so i think that now it is better still some a couple of pixels but you know what i think we can give the same styles to the second one to have it position absolute and have it the same oh yeah no it's not gonna work like that no let's leave the second one as it is um and yeah i think this is good enough uh okay what's next next thing is is to style them to style the results in order to to include the icon to include um uh yeah the information about place and so on so how are you guys doing are you following this let me give me one second to set something up okay moon if you have any issue you can describe a problem in the discord channel okay yeah so alexandre is helping the people thank you alex okay so um okay so um currently um the uh the the rows uh of suggestions like the each row with text uh is rendered by default by the by the library but we can send a custom component if we want some custom styles for it so that's what we're gonna do right now uh let's create a uh in the destination search folder let's create a new file called place dot row.js and yeah let's generate the style back of the component not the stylus of course so uh yeah it's to be called place row and yeah it will return a simple component now in our index for our google places autocomplete we can send a new property called render row and this will receive the data and we'll send it to our place row as data equal to data like this come on we need to import the place role uh import from yeah from the same folder and if we save we should see yeah everything as a simple text there so yeah let's give some styles so for the top view the styles will be row we'll define the styles in a moment then we will have uh we'll if we look here we will have an icon so vikon is on a dark background so for that background we need to declare a view because we will put all the styles on that background so this will be the icon container inside vikon container we can render an icon called in typo and typo will you be able to import it in typo from react native vector icons and typo okay the name will be location pin size i don't know 20 will be okay and we can give color white okay this is uh about the where are you are you here so let's see if styles not defined yeah because we will have to import import styles from styles and now we should see them i don't see anything okay because vicon is uh because viking is white and it's on a white background okay besides the icon we also need to display the text and this will be the the location text uh and the text will come from our props and we send here data so uh first of all let's see what data contains console.log data let's save let's open our debugger oh this one will also be won't be visible right but if i i cannot zoom in data is not defined okay not data but uh yeah we need to take the data out of our props let's save let's write something here and let's look here what we receive in our application okay maybe how to do a zoom do i have something no okay yeah so uh the important thing is that each data point contains a description and that's what we want to actually render in that row so i'm gonna go ahead and write data.description save it and yeah as you can see we we see the descriptions back in our components so now we just have to style the row we have to style the icon container that we added and also the location text one second so uh yeah let's first of all start with the icon container we'll give it a background color let's start with a random color and then choose a gray color from here yeah that's uh that's a good color uh then uh what we can do next is to put the the text and vicon in the same uh row so to do that we will we will add the flex direction row to our row component yeah we see it here and also let's make sure that we have a line items center to center all the items vertically all right so let's continue with our icon container we'll add some padding to it padding to make some more space between the background and the icon and i don't know let's try a five to make the uh with the background rounded we will add the border radius of yeah let's say also five um no probably more than 50. that's and to make some room uh to add some spacing between them the icon and in the text the area 51 for example will add some margin right [Music] 15. okay now it looks better so for the location text do we need anything there thank you such a sweet girl stay hydrated guys stay hydrated um okay so um let's think for the road do we need some um let's say margin um vertical to add some spacing between the elements okay we can do that and we can do uh that maybe we can accomplish in a different way to add a separator uh separator between them so uh in our uh index where we have our google places auto complete uh component for our styles let's try to add a style for the separator and if we just add background color and choose a gray color will it work [Music] do we also need a height for it then okay yeah we need but not that uh one and the color should be lighter even lighter it's like almost white yeah i think like that yeah it looks pretty similar to what we we expected right uh so where are we uh let's copy paste the styles for the separator um well instead of copy pasting the styles uh for the separator uh down below i would better uh take them out and put them in the style file so in the same folder with styles.js i'm gonna add a style for our separator and this way we can keep our code uh cleaner so here separator will be styles.separator and the same thing we can give to the to the second one so whenever we se we change the styles of one separator uh it's going to be changed for both of them so you won't have any issues with that um [Music] yeah because in the second one we didn't call the render row so let's copy render row in the second one so we have the same styles for the rows like this yeah they are both the same let's think what else we can [Music] what else we can put in the styles for example the list view yeah we can not to have here so many things styles list view and here just list view and also for the container yeah we can uh the only difference is that the top position here is zero and to the bottom uh input is 55 so we'll have to override that um yeah the input container or auto complete container will be these styles so the container will receive styles dot autocomplete and here we need to override the top position with a different value with 55 so to do that we will yeah create an object destructure all the styles that we have in our styles dot autocomplete container and this will just copy and paste and the styles from our styles but we want to override the top position with 55. save i hope it works yeah it works so now yeah our styles are a bit better in my opinion yeah what else what else yeah right now it looks it looks better what do you think guys so um yeah there are some other cool uh properties that you can give to google places autocomplete and you can find them all in on their page where is my google chrome here debugger so yeah you can find the more uh react native uh places auto complete no no no no no no no no not like that please yeah this uh the first url and here you can find all the properties that you can give one of them is let's say where is it enable powered by google container and this is something interesting because i thought that you cannot take this container out because you're required to do that if you're using it but apparently uh you are not required to do that so you can paste enable power by google and send it false value and do the same over here and save and now there is no powered by google at the bottom which is really nice to further customize them the autocomplete features okay so um yeah i think that's um that's it with uh the styles uh the next step is to render this these dots which are something interesting that we probably didn't do before uh but but you can see on the left here can i zoom here i cannot zoom anywhere okay nevertheless so uh yeah these two dots that you you see uh near the uh from input and where to input so apparently that's uh actually not that hard to to develop you just play around with some views and with styles so this is a view with a background color with radius border radius to make it a circle this one the square is even simpler just background color width and height and for the line the same like it's a square of one pixel width and and uh very high tall so um let's do that right now uh i'm gonna add them at the bottom of this file so below the second google auto complete i'm gonna add the first one um here so view let's say let's add some comments maybe it's going to be helpful for someone so this one is circle near from input or let's say origin input then we will have [Music] we will have a line between dots and here is the square near destination input so yeah let's [Music] i think i will have to add some styles for the text input uh i need to make some room for for these dots here because right now there is nothing so we can [Music] give them here in the styles to the text input we already have some styles for the text input so let's go into our styles file for the text input let's add margin margin left 20 yeah this is better so here our dots will go we can actually put it on the whole container if you want but i'm not sure if that's that will look better okay so let's play around with uh view styles circle let's keep it simple i'm gonna copy paste because i'm lazy line and square square okay so uh let's go in styles and down below add the styles for the circle styles for the line and our styles for the square i think the square is the easiest one so we're gonna start with it so first of all it's going to have a width of let's say 10 pixels probably that's a lot maybe it's more like five but we'll play around with it a height again with five pixels it will have a background color black a position absolute position absolute top position will be the top position of this input 55 plus something because we need to put it in the middle so we will try uh 80 and left 10 and let's save yeah the dot you can see it there i'm gonna try to uh to make this a little bit bigger so you can see so the dot is there i am okay with with the placement probably we can save it left is 15 to make them in web yeah something like that is better yeah for the circle it's pretty similar we just copy paste it we add a border radius of 5 save and we need to put top to 30 uh 25 save 20 yeah 20 is good so now that's a circle and for the line uh yeah let's copy it and just adjust some things so the width will be one uh the height will be much more like 30 i don't know background color will be a gray so let me just grab a light gray here position absolute top uh top will be 20 plus some padding so it's going to be uh 25 left is 15 and we should put it in the middle so i guess it's 17.5 no 17. i think it's perfect uh top a little bit more 30 and this one 16.5 yeah i'm gonna play around with these values until i sorry for people that have uh ocd if that bothers you but i'm gonna move on not to waste a lot of time and still will continue to to adjust the values so the height will be 40 even more 50. something like that yeah that's not perfect but that's good enough you know and i strive for good enough because that saves time so does this look something similar to what they have there uh i think so so yeah that's how we display some very simple shapes on the screen uh okay so place is auto complete style we finished that okay so yeah the next step is something interesting so guys let me have a look at what you are talking there are you talking dirty behind my back um can you move emulator a bit to the left to see the full screen uh to see the full screen of emulator yeah i'm gonna do that um no worries like this i think that's the perfect position right like something like that uh i just uh zooming in to to to show like this those small dots uh okay so let's see is it for both passenger and driver right now we're working on the passenger app on the driver app we will be working in the next videos in the next weeks so don't forget subscribe to the channel and we're gonna come with new uh builds use command plus to zoom in i think i tried that in a couple of places do you have any plans to teach online courses i see that a lot of people are requesting online courses um yeah i am i'm planning to do something more in-depth uh but i'm still limited by times so hopefully uh in the next months i'll have more time and i'll start working on something cool because it will take me a lot of time with how perfectionist i am and how how big i want to make it like if i started it it's gonna be a very ambitious uh course of i don't know maybe more than 40 hours of content or something like that we'll see uh bogdan yes and no i'm not from russia and i'm not native english speaker i'm from uh moldova which is post of it country that's why my accent thank you john okay guys uh i see a lot of great questions there uh i'll try to stay after the stream for at least half an hour to chat with you uh to answer all your questions uh but if i if you have to go or if i don't manage to answer your question join our discord group uh that you can find in the link down below in the description and where we can talk uh more you can ask me questions there i'm trying to help as much as i can as much free time i have i stay on the discord channel speak with you guys and yeah the community is great it's it's growing pretty fast and everyone is trying to help at least but that's what i see so okay um [Music] let's uh yeah um save some questions for for van guys and i'm gonna come back to you and yeah alexandra if you are watching this also you can uh save some good questions if there are any uh i mean there are a lot of okay let's uh let's uh continue so uh we can deleted webplaces how to complete styles uh the next step will be uh to make this presentation work but it doesn't where is it oh in tenor if it's raining okay the next step is to add the current location because that's how um that's how uber does and that's really a great feature uh for a lot of application if you're trying to learn this in order to implement in your application or uh yeah in any other project that you are working on uh that's a really great feature because uh you just press on the current location and it selects like uh your location based on your gps in order to set this up there are a couple of extra steps we need to install some packages uh some additional packages but the installation process process is quite simple and also we will need these libraries uh for other features in future so for more details uh yeah first of all we need to install the jaw location but for more details if you want you can come here in the react native google places autocomplete and this is the library that we are using for the autocomplete and here we have more examples and the first one in more example is get current location so we click here so extra step required uh we need to install either react native community joe location or react native geolocation service so i'm going to go with variac native community joe location service let's open this one and follow the installation guide here so here you'll see the installation guide first of all we need to install the library i'm using yarn if you're using this one should also be very small what tab maybe from here view mode okay i'm not sure if you'll see it uh very well but yeah i'm just uh writing yarn odd i copy pasted the aren't command from their documentation to add the react native community java location and let's wait until it it installs so apparently it installed let's go to the next step in the documentation so i think here i can make it a little bit bigger um yeah we don't have to do anything with from this step because we have react native uh a bigger version of we have 64 i think rack native and auto linking is already supported here so no extra steps required there uh the next step is to configure the permissions and this is because we are using the project with native code and if you would use expo you don't need to follow these steps but because we are using react native cli we need to take some extra extra steps for ios we need to include either the location when in use description or location always and when in use description in our info file and because we ran rack native in it this value already exists there so by default its location when in use description and this will give permission to the location only when the application is open you will not be able to track the location when the application is in background uh in order to do that you can change it and use the the location always and when in use description okay so uh for ios we don't have to take any steps i'm not sure if we if we didn't say anything about installing reports but uh i'm just gonna do it because i feel that we need to to install the pods so i run npx pod install and yeah for the android to request access to location you need to add the following light to android manifest okay let's copy this line that's a lot of boring part where we have to set up and we have to make sure that we do all the steps because if you skip something it might fail it might crash it might fail without seeing any errors and then you are struggling okay so here on top that's a lot yeah pods are installed so i can close my terminal and below the internet permissions we'll also add access find location okay so for android api more than 23 we need to take one extra step and to use the permission android api in order to request this permission when the application uh starts so here is an example of how we can do it uh so let's just copy paste this request this is a request camera permission we will change it to request the location permission but that's actually what we need so i'm just gonna copy paste this because i don't like to type that much and that's not some interesting code so i'm gonna open our app.js because we need to request these permissions uh as soon as possible it depends like uh sometimes you want to request this permission only when you get to that specific page because if a user never gets to that page why do you need the permissions but in our case we will just add the ask the permission as soon as the application opens to make sure that we have this permission when we need them so in our app we'll add a use no we'll add a function android per missions that will handle the permissions for android and this will be asynchronous permissions permissions like this and i'm going to copy paste the um and i think the permissions code that we took from the example so we need to import permission permissions android from react native so from here permissions android request permission android permission not camera but uh something with location let me try to find exactly how it's called yeah here are all the permissions that we can request so i'm gonna go with uh find location this one permission access find location okay here you can provide some titles yeah needs access to your location uh you can adjust everything all the messages over up uber and so on so you can take awesome rides uh let's save you can use location location permission denied okay so we have this function but we didn't call it anywhere so we want to call it whenever up launches whenever about the up component mounts uh and in order to do that we're gonna declare a use effect here is going to be a function and as the second argument we send an empty array and this is uh quite confusing but what it means is that it's going to run only the first time when the component mounts let's import the use effect from react here save so here we need to uh ask for android permissions but we need to ask it only if application is running on android we don't need to ask that if application is running on ios so in order to check that we can import platform from react native and check what platform are we executing the code so if platform dot os is equal to android then request not request but callback function that we declare android permissions uh else for ios we also need to request permissions um actually ios asked the permission automatically but in my case it wasn't very stable and sometimes it managed to get the permission sometimes it didn't so i checked the documentation of uh our react native jaw location and there is a function uh request authorization joe location yeah where is it let's first of all yeah first of all let's import a video location from uh the library in our in our app here then this means this is ios ios and we can call the joe location dot which location is called yeah your location dot how is it called the function request uh request authorization but this function uh failed for android so it only works for ios maybe that's a bug in their library but it fails on android but yeah in this case we are executing it only on ios so let's uh save our application is null because we have to rerun the application yarn ios and let's let's just test if the application asks us for jaw location permissions so come on okay until it builds um we will need uh to take one extra step everything about the react native joe location library we uh set up from this uh installation guide and if we go back to the rack native google places auto complete if we follow the yeah the get current location guide here they say that to make sure that we assign the geolocation package to our navigator.joe location and this is uh some legacy code and that's how it was it used to work but apparently our libraries depend on this so yeah the same thing is uh in our geolocation uh installation guide in using guide where you usage so where is it for something with migration yeah here if you need to have your location api aligned with the browser close platform apps where you want to support backward compatibility we need to add this line uh at the top of our app.js uh here after the import statements we assign a navigator jaw location to our package so the application didn't request us for permission but it might be because i already was testing it so i'm gonna just delete it and let's hope that it works you're in ios so build successfully and the application should run shortly yeah we see uh that the application asks for permission allow uber clone to use your location and we can allow it once we can allow it uh while using the application uh because that's what we specified in our info i mean that's the default values so let's allow one in using and now um we have access to the location of a user so what we can do with that because right now we are not doing anything with that we just ask for permission um i'm going to come back and test the android permission we should be working but at the end uh if something is not working i'm gonna fix it so i will just assume that in android it it works as well uh so uh moving on we will implement them where is it places yeah place is autocomplete with a current location so we installed the geolocation we requested the permission to use location and now we need to use the location in places autocomplete component to do that it's actually pretty easy so let's just close all the tabs let's go in source screens destination search index and for the first google autocomplete which is not this one but this one we will send a couple of more uh parameters uh and the first one is something like user [Music] location true [Music] yeah is it no it's not i messed something up i forgot the use location or something like this location current location current law okay current location true and current location label okay these are the two uh properties that we need to send to our google places autocomplete and now whenever we will press on the on the first one i'm not sure why it doesn't display it but i can try to what uh rerun it yeah now we see that whenever we press on the first field it suggests as the current location and if we press on the current location it goes and fetch all the all the places around ourselves because yeah it it will give you suggestions like uh depending on the place like where like which places are around you so um the problem that we see right now is that the the text is not displayed and uh in in order to debug that let's try to uh to to display like what data we we receive there what yeah like what data because it's something uh wrong with this data so i'm gonna go into the place row oh but i'm already consoling console logging data so let's open our debugger uh oh here we go okay that's nice so are you i lost it let's open the debugger because it was closed for some reason and whenever i write something it shows because if i look at the data we see here the description and that's what we render however in this case if i choose the current location it will give me um a different uh structure for the object or for overall objects it will also contain the like the latitude and longitude and everything that we will need but it doesn't contain the description so uh the only thing that i saw that we could use uh that looks like an address is that we see vicinity and here it says the address number and something like that uh so we need to render the vicinity if we fail to render the description so here in data.description we will render either.description or data.vicinity yeah if you are new to javascript and like the modern the modern javascript then this might feel weird like the operation the war operator but what it means is if there is a description render this description if there is no description if this description is null then render the vicinity so it's a simplified version of an if statement and the statement would take me like uh three lines like e-files and so on so that's much easier to render this so now we can see that yeah we have a lot of uh places suggested near us yeah and we can select it and it shows there the thing is that the address here when we select it is different from here because this is the um the name of the place of a business uh that it found but the the one that we are rendering there is just the the address so we can do the same thing by providing where is it yeah here render description and this render description is is a function that will specify how to render the the text here in the input text so it will receive a thing data i guess and again we will render either data description or data vicinity will it work current location cafeteria yeah now it displays uh the location that we choose here so yeah that's how that's how you render you suggest location around the user based on the user location that we requested so yeah that's uh it's really nice it's not that hard it's a lot of steps just to to set everything up and then it's just from the coding side it's just sending some parameters and actually there are a lot of parameters that you can send in order to customize how you receive these values so i suggest you read this documentation and play around with it and see how they differ because yeah you can for example query uh the location only let's say like 50 meters around the user location or you can request a location only like like 10 meters around the user you can uh indicate like how you want to sort them and so on so it's it's a lot of options to to adjust and to customize this component for your needs okay so um add okay use the location in places autocomplete and other cool stuff is the predefined locations so uh that's something that actually uber has i'll scroll up to see if i can find a screenshot about that yeah you can see here we have some predefined location for example home and work yes of course you have to set them up in your profile but that's easy because you can set them up once and then use uh use them multiple times so our google autocomplete library enables us to do that as well and that's also some um here in the more examples uh the second one is search with predefined options so uh yeah here we can define two uh places home and workplace for example which later one we can take from um from database from the user if we want and we can send them as predefined places predefined places to our google places autocomplete yeah the these component props like gets long and it's not even half of what uh what the possibilities are like to to to adjust them so uh yeah let's save and in our application uh i'm gonna try to reload it come on come on reload i just need it to reload and let's see yeah it has a current location it has home it has work and also you can adjust this web icon based on the text so here for example you can say if i think data.description is equal to home then you can render something else you can render a different icon so that's what i'm gonna do okay that's here that's here and typo here yeah so um i hope that the typo has a i don't know some other like home save and now you can see that uh our home row contains a different icon we can also define different styles if you want uh but yeah like it all depends on your needs for example here is as well a different background color we're not gonna go into that detail i just showed you how you can adjust uh based on the data description you check like if it's home if it's something else you display different icons different styles and so on all right so uh where i was there not here um yeah i think that we finished with the current location with a geocode of a user we installed the geolocation requested the permission to use the location user location in places autocomplete added the predefined location home and work and one more thing we can do with with this library for example i mean we go in our app.js and let's render instead of destination let's render our home screen let's save and we can actually render the location of a user on this map and that's also not very hard in the components home map let's open our home app uh and here uh we need to send it a property which i forgot is a location user show user location true and i think that's that's it yeah and now you can see that the map shows the dot for the user location uh where the user is so that's actually cool you saw how easy it is and we can also add it for example in our route map to make sure that we have it everywhere we show the location of a user on the map so he can he will not get lost okay so that's uh that's it with location later the next step will be to go into navigation which is the interesting part so how are you doing guys seriously here how are you following along with build or you are planning to to do it after well afterwards on your own pace so uh yeah you can ask me some questions in the chat i'm gonna be back in just one minute stay tuned hola hola i am back so yeah got some water uh let's see some questions do you have plan to use a stripey next project you mean strappy stripe is trappy what's happy stripe you mean stripe what's trappy is the next gen headless cms i didn't hear about that but i'll give it a look sound something interesting all right could you increase the emulator size for us it's too hard to see fine details increase emulator size if i increase it like this you will not be able to see the bottom part but yeah if i will work on the bottom part i'll make sure to show it or i can actually move it a bit to the i don't know hopefully that's better do you know how to connect your app with some hardware by bluetooth there are some libraries for if you want to do that for react native there are some libraries uh to integrate the bluetooth i haven't worked with them but i know a friend of mine had a project with some hardware involved so they integrated it um hello anton privette uh to increase what i know you do the live stream yeah finally i do this live stream so you're making a game uh no so uh apparently there are new people in the live stream uh so welcome hello uh today what we are doing we are uh doing uh where is it we are doing uh uber clone uh we are cloning the uber application in react native and yeah we we've done a lot of things uh until now we cloned almost all the important um ui screens with vera in the uber application and now the next step will be to implement the navigation so the user can navigate from one screen to another we're going to implement the basic navigation and also we're going to go with uh sending the data between screens that's an important stuff in a lot of application uh and also to implement a side menu a drawer navigation a lot of people were asking me to integrate one in one project and i think this one is a great way to to show it how it works so thanks for asking we can get back to work thank you abdullah okay uh so the next step will be navigation i already introduced like why we need navigation now let's install react navigation library follow the installation guide and then set it up in our project so let's open uh react navigation navigation here docs so first of all we will install the react navigation native so let me see because i know that we need more more libraries that it depends on so let me make sure uh okay so we need some other libraries but we don't okay this one so we will need the react navigation native let's install that one and the next step will be to install the dependencies uh into our react native so yeah i'm gonna copy the installation command here run it again wait until it installs um we will also have to install the pods if you are on mac only so yeah the library is installed successfully let's run np x for the install and the next step is to import react native gesture handler in our app.js and this is an important stop part to initialize dependency library of our navigation so we will do it just above all the imports we can import this just a gesture handler that's a hard word to pronounce so ports are installed if you're billing for android or ios do not skip this step your app may crash in production even okay um all right so let's uh wrap our hole up in a navigation container uh but i'm not gonna put it into our application uh but i'm gonna put i'm gonna create a new folder in our source i'm going to create a new folder navigation and there i'm going to create a file root.js and this will be our root navigation so here i'm going to create the functional component root navi gator and here we can use the navigation container as the root element so let's import it from react native not react native but a rack navigation native and replace everything that we have here with navigation container navigation container doesn't have required children okay so navigation container we will add them initially just the home screen for it not to complain but it doesn't have children poor navigator okay so let's clean that one um and we need to import the root navigator in our yeah in our up dodges so yeah instead of importing this search home screen the destination screen we will not need them anymore we can delete it we will import just the navigator or let's say router from navigation source and navigation and then root.js and we can render it here router and save now let's rerun our application on ios to make sure it still works let's find it so hello daniel hello thanks for joining [Music] atarva is saying great content loved it building with spotify clone yeah if you're having some issues um it's better to ask me on discord this way if other people uh have the same bug as you are experiencing they can get help as well and also other people can help but i'm trying to to help as much as possible on discord so yeah let's wait until the application rebuilds yeah what to do what to do i i'm practicing my english accent so especially for you coming love i'm gonna improve it i promise so yeah the application seems to to run which means that we installed the navigation library correctly so now the next step would be to to define all the screens in a stack navigator uh so yeah we currently have three screens destination search home screen and search results and all of them should be inside the stack navigator so we can navigate between each other and when you navigate in a stack navigator the new page is put on top of a previous one and when you whenever you go back it it reversed to the previous page that you were in so let's search here stack navigator and see uh yeah we will import not sure if we have the react navigation stack let's just check or we have to install it so in our package stack no we don't have it so we have to install vest tech navigator as well let's do it now and in our route we will import create stack navigator from react navigation stack not native but stack it's not there yet but it should be react navigation stack so our stack will be equal to create new stack navigator uh okay so in our navigation container we can use our stack dot navigator as a wrapper of all our screens that we will have and inside this stack dot navigator we need to input all our different stacks that we have so stack dot screen the name of the screen first will be home and the component will be home screen the second one will be this the nation search the component will be destination search and the last one will be search results search results let's just import our components yeah from screens and this one from there so now if we save come on if we save we still see um we still see our home screen however however right now we also see a header on top so if we want to adjust that we can send some parameters here as options i'm gonna do it from new line so i think it's header shown false not option but screen options because we want to define options for each of the screen that we have here save okay we hit the header the title of the page what else i wanted to do here so here we can also say that by default default screen uh easy default screen we can say a different one so we can see that it changes not sure if that's how you do it default header title come on props okay it's a lot of them initial route name that's what i was searching for so that's how we can see if the stack works and if it will show a different one not sure why it doesn't yeah now we see that uh it doesn't display the home screen it displays the search results screen if we refreshed it so it means that it works uh we don't need this property because we are okay when home is our default screen the first screen so i'd have to refresh it again come on come on so this is the basic structure of our stack navigator and the stack screens inside it the next step will be to implement the navigation between screens themselves so whenever we press on this component it will redirect us to the to the next one to the destination search so we can do that by going to our components let me think where was it first of all it's in screens it's in home screen index and here what do we have uh home map covered message and home search okay this is what we want to open the home search component so in our source components home search folder let's open it up and we see here the view with where to so in order to receive and do something whenever the user clicks on this element we will import a component called pressable and we will replace the view that holds this component with a pressable because uh it also contains styles and i think we will not mess anything just that was my son will be assigned to a non-empty uh pressable y let's save on press okay here we need to define the go to search and this function will do the navigation which will implement soon go to search now we can just console worn come on search save and whenever we press here we see the search warrant at the bottom so in this function we need to uh to do the navigation so in order to navigate we will import the uh the use navigator hook import use i have my alarm at this time navigation hook from the rack navigation native and using this hook we can get access to the navigation object by calling use navigation hook and with this navigation object we can easily navigate by calling navigation.navigate and providing a screen name so in our case the screen name that we want to go to is home screen no where navigation root is destination search so yeah we want to navigate to the destination search let's save and if we press we go to the next page that's [Music] that's nice and i think it's not that complicated to navigate between screens we just import the cook we get an access to the navigation object and we call the navigate with the screen name it's more complicated when you have nested navigations because uh these parameters can get nasty but for simple navigation it's pretty pretty pretty easy so let's uh let's move on with the next step so whenever we say that okay we set the current location and also we we selected the the destination location it should automatically whenever we have both of them it should automatically redirect to uh the this search results screen so in our let's close everything in our destination search in index in screens destination search index here we have a use effect uh and we can we actually have a logic here because we implemented it in the previous video so real quickly this use effect will be called anytime the origin place where destination play changes but we change that whenever we [Music] whenever we press yeah here one whenever we press on um on a recommendation we change it in our uh state so whenever we change we check if both of them are not null if they both are valid then we need to redirect to the results so we do the same we import import uh use navigation from react navigation native somewhere at the top of a component we get we gave a navigation from our hook use navigation missing import statement did i misspelled it navigation yeah and here we will call navigation dot navigate to them screen name called search results i think save so i select the first location i select the destination location and nothing happens and nothing happens let's uh console warn hello no it actually um that's weird because it read it's either a bit slow the emulator or it redirected me too late so if i'm gonna go back and select a new place nothing happens but whenever i click on something it does the right direction which is which is quite weird the use effect happens during the next user interaction it doesn't happen automatically let's try it one more time now it worked maybe maybe my my emulator is slow because i suspect it should work let me try to refresh it so first of all let's press on where to uh here we select the first location second location and do nothing yeah it doesn't redirect um can you do that here can you assign a callback function [Music] i'm going to put this inside a separate function because not sure why we've used effect it doesn't work const check yeah check if needs yeah check navigation and does the setter contain um a callback function where is it let's just try save go back let's update it come on come on come on so yeah let's uh go to this screen insert here something state updates from the state so to execute the side effect after rendering use effect yep that's what i was doing [Music] man why you're not working here i just can't figure out if it's just slow no now it works yeah now it works yeah if i select it it automatically goes there let's try to refresh it let's try it from scratch yeah now it works perfectly okay uh so that's uh how we navigate between screens and we implemented the last navigation which takes us from the search screen to our results screen and yeah what's next the next step is to send data between screens because for example from our search screen we need to send this origin and destination to our results results screen in order for the result screen to do the actual query so how we can do that uh yeah it's pretty simple so in our navigation.navigate we can provide a second parameter and this will be the options so here we can uh send the origin uh place origin and no not yeah origin place yeah i can do that and destination place and by this we send additional data when we navigate so let's have a look how we can receive this information because we go to the search results so let's open our search results screen search results index so here we need to receive that information that was sent to us so to do that we will use similarly to how we used use navigation hook we will use the user route hook because all this information is contained in the route from react navigation native so uh let's take uh the route from our using our hook no probs and let's console.log route dot props props props props okay it's there let's open our debugger and see if something yeah right now it's undefined let me try to refresh it come on hey garwith so let's check the navigation if it still works right location it i will just clean this console logs real quick and that was in the destination search index yeah let's clean this console once and in our place.row console.log database one we don't need it so go back here clean everything so we select the current location uh we don't support did i just left the second parameter there and let's go in our this no yeah destination search index not yeah and let's remove this check navigation uh as the second parameter because uh i forgot it but it shouldn't be there save okay let's select this one and nothing happens and nothing happens unless we click on something unless we interact with a screen wait a second the the error message someone is screaming route params thank you very much but yeah but um i was checking something else so let's go here again yeah now it works and uh the origin place here is what we console uh using the params from the routes and we can see that we successfully send the destination place and the origin place through props through navigation uh to our screen here and later on we will be able to use the data for example where is it or the details geometry location latitude and longitude and do the query uh to our back end in order to get all the data yeah thanks guys for helping i see here an error and i would like to fix it once i'm here so it says that um when you loop through through some components and render multiple of them for example here each of the child should have a key in order to for react to optimize it properly when it re-renders so we are in search results uber types this is a component let's open uber types and here we have types dot map uber type and besides the type i will give it a key which is uh yeah let's say key equal to type so right now well you'll complain about that children with the same key the key should be unique which are with the same oh type dot name or something like that or id we have id type dot id save no will you work come on yeah let's navigate now yeah the error is gone everything works as expected we send the data we do the navigation properly what's that water thank you very much stay hydrated okay i hope not to mess anything wait a second important stuff going on here mihail the key structure is for a flat list but here i'm not using a flat list i'm just simply mapping through the types but probably i should have used a flat list not sure why i didn't um okay so i think that where the navigation the simple the basic navigation works we installed the react navigation library we defined all the screens in a stack navigator we implemented the navigation between the screens and finally we showed how to send and how to receive data when you navigate from a screen to another screen this is a very common this is very common things that you would do in any application the head that has like more than one screen uh so yeah if you learn it you you'll be able to use it in other projects the next uh step will be more interesting uh and something that we didn't implement yet in any of our clones and this is a drawer navigation and a drawer navigation is the side menu that you can access by um by swiping uh right from the left side of the screen basically you know what i mean um a lot of application has this like the menu the drawer navigation and a lot of people have asked me to implement one so let's uh get into the details and start implementing a drawer navigation i'm going to show you how to search on react navigation the same website that we use to install our navigation library let's search for a drawer drawer navigation so we need to install a separate library for our drawer and yeah here you can see [Music] a gif of this navigation so let's install the drawer so before uh getting into that uh i will create uh i will extract better to say let's close everything else i will extract this tech navigator from our root fold file to a separate file called home home navigator uh and you'll understand why i'm doing this shortly so home.js i'm going to copy paste everything and just delete a couple of things for example i will delete the navigation container don't forget to do that um yeah and everything else and i'll rename from home from root to home home navigator and we'll export the whole navigator and in the root to make it uh work because right now we will delete it because we don't want to uh do it double times so we will just import the the home na the gator from them so let's delete these screens and import home navigator from home like this so let's save and it should be working fine as it was working before and now now now we will add our drawer navigator yeah and all the navigation all different types of navigators for example stack drawer tab navigator and others that you will encounter follow a similar uh pattern so for example now we will not need this tech navigator but we will need uh to import like similarly import uh create drawer navigator from a navigation drawer when we um yeah we declare this navigator const and drawer is equal to create drawer navigator and uh okay i'm gonna remove this uh for a bit uh and here the first item in our navigation container will be our our drawer dot navigator and drawer navigator will expect the multiple screens and one of that screen drawer dot screen the first one with the name home will be our stack navigator that we just declared so the first item in our drawer navigation will contain a nested navigation another navigator that will contain these routes i don't know if that's clear hopefully it is so component is home navigator uh let's save and i'm gonna show you what that means if i scroll from the side come on come on here we see the home screen and when we press on the home screen we are presented with the home navigator which the initial the initial screen in our home navigator is our home screen and then from there we can go to our screens so uh yeah this is our first screen in our navigator uh if we look here uh uh uber has uh our screens like your trips help wallet settings and so on so i'm gonna um declare a dummy component here just to render for both screens let's view style [Music] i'm gonna add justify content center align items center i need any flex direction and i'm gonna add text no no no it's not a good time [Music] dummy screen and we will receive props and inside props we will receive that name of the screen just to show something on the screen prompts name text yeah let's import view and text from react native import view and text from correct native uh yeah i think that's um that's good so uh yeah let's now add different uh screens here uh the name will be your trips and for the component we need to send some props to this dummy component so in this in this case we will not send any com any props so instead of sending the component like this we can send it as a child of our screen so if we do it like this we can send now as a simple component here dummy screen name your trips and i'm just going to copy paste it for the other screens that we have here help wallet and settings help help help you know what i want to space them a bit so we can see better which one starts where and the last one is settings settings yeah that's good and wallet let's be perfectionist and do everything wallet okay let's save and now let's uh check got any for children probe for the screen your t trips it must be a functional function returning a react element okay it should be a bit different so this child they expect a function that returns a component so function that returns this component yeah um just gonna add it to all the screens save yep and if i look at the at the drawer navigator now i see the home your trips and if i open i don't see anything for some reason [Music] flex one yeah now we see your trips here if we go to help we see help yeah we can see that we can move through different pages and if we go home we see the home screen from where we can navigate to our screens from our home navigator yeah that's how you structure some nested screens with drawer navigator with with stack navigators and so on so um let's go back yeah that's the structure of everything i hope it is clear if you have any questions drop them in our discord channel the link is down below and we can move one with uh yeah we set up a basic drawer navigator and now we should customize the drawer navigation then there is a lot of uh of properties and stuff that you need to customize i will need to access my example because i will probably get lost there so that's nice when you have a program or girlfriend because she can help you and do this component herself uh so let's remind ourselves what is there uh all right all right all right yeah i think that's um it's pretty clear so uh our navigation container our no the our drawer navigator uh you can send a function to this draw navigator that will handle how uh how everything is rendered because did they introduce what we want to do yeah we want to uh to render a custom drawer navigator where on the top we see some information about the user we see it on a different background uh and so on so in order to do that custom we can um provide a custom component to our drawer navigator navigator we the property drawer content and this prop this will receive a function with props and we can uh where is it what are you yeah and here we can render a custom component that will implement right now so custom drawer and let's not forget to to send all the properties uh to that component custom drawer yeah i'm gonna implement it right away but why do you complain props like this dim will this be better let's hope okay so uh let's create a new file for this custom drawer where we'll define the how how the header looks and how everything is rendered so in our navigation let's create a file custom drawer.js let's declare it as a functional component custom drawer properties exported and in our root let's import the custom drawer okay let's see uh what happened now what we will see there we don't see anything we just see they are not just component it's very small and underneath them the notch but that means that we can customly design our custom our drawer so now um yeah now uh we need to import some components some default components from our drawer navigation um react navigation come on react navigation not native but drawer and we will import for example um drawer scroll content scroll view and uh we'll use this uh as the root element of our custom drawer let's copy it in our root custom drawer like this and we can um we should send them all the props if we want to style it not from here but if we want to style it from the navigator so yeah now we see that when adding drawer content scroll view our component is not hidden behind the notch but is displayed in a safe view properly here okay the the first problem that we see is that we lost all the links that we already have in the drawer so there is a way to render that list using a drawer item list component and we will render it here so drawer item list and we'll send again all the props so it will know what screens it contains if we save now we see back all our links there and we are what we are left with is to customize this top [Music] yet to customize this top component in order to display the things that we want to display there so let's see what's there okay that's a lot of things to do and to think about what should we start with i'm gonna use all the styles here in line so bear with me uh maybe later we can move them to i'll put it like this so first of all we will have a view like this and this view will contain everything here on top like this black view so it will have a style background color black save okay what it will have here it will have um user role and this will be this role showing the information about the user uh it will contain the messages row and it will contain do more and the last one will be make money okay i think that um the easiest one to implement is the last two options but do more with your account and might make money driving and we're going to implement them using a pressable because we will want to register presses there and and a simple text so for them i'll start from the bottom for the mac make money we'll put it inside the pressable and inside that pressable will add that text and the text will be make money driving let's save and see what we've got there okay for the text we need a style color white save okay that's uh that's good okay i will add some padding to the parent com component to have some space around everything so here i'm gonna add padding 15 will it be enough save and let's check it here yeah right now we can see make money driving so on the press of all we can declare on press add the function and just console worn for the moment because we don't have any screens make money driving okay if we press we see the console one that means that everything is good there we do the same with do-more with your account we take it let me check the chat is everything all right just joined looking forward to this uh yeah we are almost finishing but the video will be uploaded so in this video we um we cloned the uber application so now we are finishing with the navigation your account and here the color is not white but uh gray which i'm gonna select from here like this do more with your account and that's good um [Music] i will add i will add a style here on the pressable and bottom button or no no no we can do that for the text we'll add some let's try to work with padding five save padding vertical five and we add the same to the second one so there will be space between them yeah like that okay we have this tool uh now we can move to the messages so the messages will be kind of the same we will be inside another view that will contain this top and bottom style how's it called borders top border um top border width one bottom border with one border color uh a gray save will you work i don't think so actually also do top border color um border color weave and what else weave color and lighter back a bit little bit grayish okay we can try that zero zero zero for the black and then we can like this something that we see i think it looks better why my borders are not working so let's try just border with one border color red i think there is one more no this one is working top bottom come on am i that top border react native adding border to only one side is border bottom color border bottom oh okay it's vice versa border bottom uh with then border bottom color and the same thing for the top top and here as well top bottom top [Music] i am yeah i'm tired i think two border top border top save now it's better we can adjust this color like this we can give some padding vertical 10. maybe five and this one will contain messages messages not this one but dm copy this one come on come on you can do it some water let's do it and also some margin vertical to yeah to have some more space between these options yeah we see different messages when we press on them okay so the last one is the user role and yeah there we will have a view uh we will have our uh image but i'm gonna go with just a white view right now because i didn't prepare the image background color can be grayish uh the view will have a weave let's try 30. height height 30 border radius border reduce 15 that's it we'll check if we need anything else what do you complain here because it's not closed okay now is it better okay after review we will have another view that will contain this middle part and view and here we'll have a text for the username and text for the stars 5.00 stars like this okay so let's style them so for the first view we will say that justify content should be a row not justify content row direction justify direction flex direction yeah that's the one is equal to row to have them in the same line this one okay for the text style color white font size 24 and almost the same styles for the stars light gray font size let's leave it as default save what did they mess up 24 font size oh no no like this okay align item center to have them centered vertically center now the image is centered um margin right to the image to give it some space maybe not 2010 is enough and let's have a look if it's something similar to what we have here probably the image is a bit larger so i would try a 50 maybe two too large uh no that's actually good and the border writers should be 25 yep image name stars uh messages yeah and so on i think that it's pretty close to what we have in uber uh if you'd like to take it one step uh ahead and adjust it more you're free to to do so and you can send me your final result i'm pretty interested but yeah i'm pretty happy with what we what we have right now and with some additional styling you can accomplish even pixel perfect designs so uh i think that's um that's everything that we wanted to do today so we finally managed to do a live stream shorter than three hours yeah okay so what the did we manage to do today let's have a look so right now our application uh has a sidebar menu um from here you can switch to different pages and from the home page uh you can see first of all the map and also you will see first of all your location on the map which is nice you will see the cars uh and they are in uh rotated in the duration direction where we are going then if we press on where you want to go here you can write an address where you are or easily you can save it okay take me from home or take me from the current location and based on your gps location it will suggest you multiple location for you to choose from so let's take this one for example and i want to go to something else okay this one now it will redirect you to the next screen and you know what we actually uh can do one more step let's do it real quickly up uh in the source screens search results so basically we receive uh the origin and the destination but we we don't do anything with that but we we can do something interesting with it so we have our origin and destination place and each object contains details details contains geometry geometry contains location and that's where we've confined the latitude and longitude so let's remember that route map okay so yeah let's uh let's send the origin um and destination to our route map so first of all let's take them out of params or region destination route dot params and let's send them to our route map origin in order to compute the route based on the destination that we chose so in our route map we will receive in props the origin and destination um and the origin okay origin location because we need to we need to to access this location from origin dot details if i remember correctly dot geometry dot location i think that's how we should access it and this is destination like this destination lock location so let's send them here to origin location and destination location save and let's just hope that it will work unexpected token where destination oh here let's come on let's rerun and see if it works so from current location i'm gonna take i want to go to santa come on why is there santa cruz yeah i think that's where country property details of undefined cannot read property details origin and destination route params our origin place and destination place okay origin place and destination place yeah we just missed type them now will you work current location to sun crews so let's wait a bit i think it it will still try is trying to compute it or invalid uh property origin supply to map view directions i think the okay maybe the route map let's console log origin location yeah it's and no it has latitude and longitude but they expect [Music] i'm just ctrl z to see what uh what this library expects all latitude and longitude okay [Music] okay so lady shoot is equal to this dot light and longitude origin detail geometry lng yep that's right and here as well latitude is location dot latitude alone longitude lng and here is location and origin location come on will it work now unexpected token where um again here yeah now as you can see it shows the direction from our location to the auditory data which is really nice and this is the information that we provide from the autocomplete features okay one last step that i want to do is to test it on android but before that let me just close the ios emulator because i'm afraid my computer will take fire yarn android and let's make sure that everything works there i really hope and then we can get into some q a so yep here it is what is the world one android emulator runs so slow i don't know guys if you're still here uh and if you have any questions yeah prepare them and we can get into into a short q a session first of all i'd like to ask you how did you find this build um yeah what do you think about it uh was it clear enough was it interesting did you have fun will you implement it and we will wait until uh android runs mikhail yeah i could use a simple icon person another background color to that yeah let's see if meanwhile i can commit everything thank you very much guys thanks and git and part two yeah now i pushed everything to the git repository so you can access everything what we did today in the git and if you have some issues and want to see my source code and see if in my case it works then you can easily clone it install it and uncheck the code but if you're trying to learn i highly recommend you to follow along uh look at the video and do the same thing that i am doing do it yourself and this way you will learn better and yeah even if uh and after that you can also try to implement extra features or i don't know uh if you didn't feel that you uh if you didn't feel that you learned a lot and you don't know if you could do it alone try it try to do it alone uh and whenever you get stuck refer back to the video and remind yourself like how how it went there and yeah that's that will even help you better like to to memorize and to to retain this information yeah implement additional features if you're done with this because there are limitless uh opportunities to do this um yeah there are people following my bills which are going one extra mile adjusting them implementing extra features like cool features putting their own design and then publishing replication to the market which i think is really really cool so yeah i encourage that if to work on your own projects and to take these builds take them as an example to to develop something better so here we have our travel uh our our come on uber clone so let's see yeah the map seems to work where from current location come on what you are doing [Music] are you just too slow because most probably yes yeah uh here is the emulator uh android emulator and i don't know why is it too slow or let me just open that debugger no it's opened dmvs you can use the location so the location permission worked correctly uh now i'm thinking why it doesn't give us recommendation hello i updated the the key in up dot source main android manifest uh yeah update i updated the key or i didn't let me check credentials yeah it's updated then why you're not working save let's remove the application where is it okay and let's run again yarn android okay back to all the questions until the android builds uh any udemy course you have in plan yeah a lot of people are asking this today so um i don't think i will do a new udemy course but i'm thinking i think that sometime in future i will do a similar build that i'm doing here but i'm gonna go extra with that like i'm gonna go into uh like every detail and all the par all the things that it takes to build a production ready application from start to the to to the end until like publishing and deploying it to market uh integrating it with payments and stuff like that like notification pagination like analytics everything like besides what i'm doing here and that's probably going to be like a course of i don't know 30 hours or something like that and pro most probably i'm not gonna host it on udemy but we'll see we'll see so let's let's check let's check again allow uber to access this device location location let's allow it hello let's go here come on work no no please come on why um really weird and it doesn't say anything oh no no no no debug hey what's happening here components destination search index i wonder if i wonder if the previous version was working on android so let's go to but the key there but no let's try it get check out uh part one part one then i'm gonna replace the key and try to rebuild it uh yeah this is the world one this is the new one replace all and let's confine route object yarn android so uh fahad is asking hey how is it going thanks for the great content it's going great if it would work on android so yeah thanks yeah and he's asking to do a clone with firebase and not with aws amplify i think that all the all the next planned application will be with amplify but later on i might um experiment with with firebase as well but i just love amplify and i think that this is the future so no it's not working here as well damn boy or am i doing something wrong so first of all i'm gonna stash everything go check out two main and think why it doesn't work yarn android so native autocomplete let's see if we missed something from the installation guide so we yeah we have those apis enabled let's have a look google maps geocoding geocoding and api web service places api and nothing else enable google if you want okay that's interesting oh i think with on emulator it it can the problem might be in the emulator or no yeah might be them later but the problem is that i cannot test it on a real device right now android nothing like that yeah i think that or is this an old version okay i think i'm gonna have to debug the vc issue on android i don't have a cable what yeah yeah the issue is that i don't have a cable right now because it's charging my laptop and i cannot test it on my device so i'm gonna have to check and test it afterwards on a real device and see if it works there and if not i'm gonna find a solution and we'll we will fix it during the next video uh the android but let me know down below if it works for you maybe i'm i'm doing something stupid right now so uh i need to more about react native with firebase i think there is a lot of content about firebase and react and rack native maybe fi iraq native with firebait like firebase with rack native not that much but firebase with react i saw like the youtube is full of that you can use proxy debugging to capture vehicles um it's okay it's okay all right so i think that we can wrap this up if there is no more questions okay so thank you very much guys for watching um it was really uh nice to see everyone here and i had a lot of fun developing this application this is not the end of applications so come back next friday we will do the next part uh during the next live stream so yeah i'm a bit tired right now mumbling so yeah thanks again a lot for joining don't forget to subscribe to my channel if you enjoy this content yeah i'm gonna try to publish more uh interesting and helpful content for you guys in future i'm working right now on uh some videos as well besides live stream so a lot of things a lot of things are happening okay take care stay hydrated right link od and i'm gonna see you next

Channel: notJust․dev

Views: 58,838

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: _U4zgWcw2Ws

Length: 191min 30sec (11490 seconds)

Published: Fri Feb 05 2021