🔴 Let's build Uber 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Google Autocomplete)

[Music] [Music] highly highly demanded uber we're finally taking the dive we're doing react native with uber let me know in the comments if you're excited right now we're about to blow this place up we almost have 500 likes and i haven't even started yet that is crazy papa fam i have so much coming for you guys i'm so excited we are gonna crush it i hope you guys are ready for this let's go ahead and see what we're building today guys uber 2.0 with react native ios android development tailwind redux all that amazing stuff right now get hyped tell me where you're watching from right now 450 likes almost at 500 let's go pop fam check this out [Music] uber watch this guys we have google places auto complete go ahead and hit some london let's go ahead and get a ride nice let's go ahead and go to hmm where should we go guys where should we go let me know where we should go right now it's a fully interactive map by the way let's go to let's go to s6 s6 boom complete navigation from a to b clickable points map resizes does everything it needs to do by itself we've got google distance matrix api calculating the distance for us absolutely crazy stuff guys crazy stuff look at this it calculates a price for us for each different one we can even click on each one crazy that tells us the actual travel time 55 minutes to get from a to b now i don't know about you guys but that is sick i see everyone coming dropping in where they're watching from right now we got manchester we got let's have a look buzzing stoked on keith oh milken's in the house what's up guys romania in the house nice luke says let's clean this up guys check it out and not only did i do that look at this it completely you can actually swipe back all right and then if we click this button over here boom back to the top start the whole process again let's go ahead and do let's check it out guys let's do london i will do from london eye let's go from london eye there you go london eye let's go to i didn't know you could do this but let's go ahead and let's do it to germany right let's actually drop all the way to germany boom it's gonna cost a lot but you can go to germany that is sick smash the thumbs up button if you're excited for that because i'm so pumped i set a huge task this time and i went ahead and built this out and you guys completely you know you can mess around with the map completely responsive even has things like if i go ahead and open the keyboard pushes the entire screen up so sick so so sick getting hyped for this guys we've got so much to look forward to i'm gonna break down this build in front of us right now so you guys can see what we're going to be doing in today's video okay so let's break down this build what's actually happening here right let me go ahead and say right uber clone you might not be able to see that but anyway it's cool uber clown right so in this build we're using react native right native nice and bear in mind i get loads of question if you know react you're gonna be good for this one don't worry take the plunge okay so we're gonna be doing you know tons of react cool react stuff today but i'm also going to introduce you to react native so you can build your own ios and android apps so much fun it's going to be hyped right we're going to use tons of google apis today so i'm not only going to be using one api i'm going to be using the directions api the places api even the district distance matrix api which actually allows us to calculate travel times all that crazy stuff right so we're going to be doing loads today right and also i updated the playlist so if you want to go ahead and check out you know sign up to newsletter down below and guys before i carry on i just want to let you guys know right we have a huge i'm not just stopping here with uber right we have an absolutely massive challenge coming up i'm not even finished elect airbnb next week starting tuesday go ahead sign up first link in the description right now a five day challenge starting next tuesday so i didn't just stop with uber i'm gonna go ahead and literally crush it with airbnb as well and this is a build that i've never done before we've got next year's tailwind versus i'm actually teaching you how to use mapbox with normal react crazy stuff go ahead and sign up before all the spots get taken and guys i've actually gone ahead and created an actual book yes an actual book for you all to go ahead and get so sign up for that challenge you'll get a free book worth 50 quid it's gonna be sick there's tons of prizes available first link in the description guys you know what to do and again as always if this is too hard for you second link in the description is to go ahead and get free access to my skillshare 101 basics react class so you know loads of you been taking advantage of that keep doing what you're doing guys keep enjoying the free value i'm giving you and as always you know i say keep supporting the buffer fan without this it wouldn't be possible let's carry on breaking this down uber clone react react native we're also going to be using tailwind css now a lot of you are wondering how the hell is he using tell in css in react native so i'm going to show you how to do that today and most jobs nowadays require something called a redux so we're going to be doing redux as part of this react native app we're also going to be using a really cool sort of kind of like how we implemented you know material ui back in the day we're actually going to be using react native elements all right so hopefully you guys enjoy that part of it so we've got react native elements actually kicking off as well today we just hit over 500 cucumbers that's sick that is actually sick all right wow this is crazy guys react native elements as well we're gonna have um tons more included in this build so there's actually react navigation so that's pretty much react navigation is how we go you know back and forward between all these different screens right we have so much to look forward to right all the hooks all the practice every single thing that you need to go ahead and get working you're going to learn how to do we actually got react native maps as well so this is ios and android maps you're going to learn how to incorporate this right here today so there's tons of stuff i've never done this before in a build i wanted to push the boundaries i wanted to keep on getting more and more higher in in what we do but keep it available so that you beginners out there can still keep along with what i'm doing almost my water damn get your water ready get your coffee ready let's jump into the build if you're hyped guys let me know i can see the comments going crazy right now and everyone's asking oh what are we gonna do whether we can do with expo are we going to do react native we're using expo today the reason why i'm using expo is because one should be using it because it's sick right and also two if you have an iphone or if you have a android you can literally use this as your test device to go ahead and develop too so remember today we're building an app which is going to work on your phone i have a lot of power right there all right so we've got loads of people getting ready for this let's go ahead and jump in guys awesome awesome stuff i'm going to read i'm going to shout a few of you out we've got guerraro gerard he goes i'm happiest to see you back amazing stuff arjun joshi in the house aldo's back what's up man we've got luke in the house we've got shops right what's up man we've got samira code uni ibrahim mohib pranav johnson i say guys i love you guys i appreciate all of you 600 likes sickest way to ever start a live stream i'm gonna go ahead and jump into this right now okay let's go ahead and kill it guys so excited for today's build right let's go ahead and get ready for this right so first thing you want to do is sign up to that challenge right first thing first link in the description sign up to that challenge and comment right now if you are signed up just say to me no i'm signed up and i just saw christian vargas actually took offer took the skillshare offer right now so again like i mentioned before second link in the description to grab that it's gonna be sick all right i've got so much stuff coming for you guys i've got free books ebooks all sorts of crazy stuff 600 likes boom all right whoa we got oscar what are these silly and guys and i you know i just have to tell you before we start i even have a 12 hour nexus tutorial coming we actually have all the netflix amazon builds everything being compiled into each videos of their own so everything is going to be available for completely free for you guys to go ahead and crush it and become a developer and kill it in your life okay so next tuesday is a place to be let's go ahead and jump in today's build let's do this proper farm first thing we want to do is set up the development environment okay so today what we're going to be doing is we're going to be using expo right so react native is essentially a kind of it's a very handy kind of library let's call it and it's essentially we're going to use react so the react that we all know and love so again if you don't know react html css javascript should be your fundamentals and then you just go ahead and like circle it around or layer it up with the react to build really cool web apps once you know you know kind of a basis of react you can move over to react native fairly easy like you're going to see today okay so it's going to be a hell of a lot of a nice transition for a lot of you because i know a lot of you haven't actually done this before so i'm hoping to go ahead and um you know help you guys out today so we're going to set up the development environment now the first thing you want to do is make sure you go to react native and on the left side you should see environment setup click setting up the development environment down here you want to go ahead and do mpm install dash g expo cli in your terminal now you're most likely going to have to do sudo npm install g i've already done this step so i'm going to skip this what this does guys is it goes ahead and actually can um sets this up so it installs the exposure like globally to your machine that means you can start using the expo commands in your terminal right we're going to need that because here we start using it okay now just a hint when you do this do sudo but also after it's installed close and reopen your terminal because sometimes it just takes a little bit of a kickstart to go ahead and get started okay another one nice guys we just got a nice donation i can't actually see what oh we've got vishal thank you so much dude appreciate you nice this is sick right let's go ahead and let's keep moving this is awesome guys and i've actually got a i'm slowly upgrading this up so we're going to get smoother and smoother every time so the first thing we want to do is export an awesome project so i'm going to open up a terminal you guys can feel free to code along with me today let's carry on guys open up this terminal and once this loads up we're gonna go ahead and say i'm gonna go into my i've actually got a nice documents builds for it i like to keep my stuff neat right you don't have to i like to i think you should always have it available at hand always helps out all right so with that said my life is going to completely change with this that's awesome right so now what we're going to do is we're going to go ahead and type in expo init right and we're going to give a name for the app so you can see it says export and awesome project here so i'm going to say export in there and we're going to say uber clone and i'm going to say yt for youtube i'm going to hit enter right now what this will do is it will go ahead and initialize an expo app into our uh onto our computer so i actually need to upgrade my exposure like so it's okay you know you can run that command it's easy to do but you're gonna get this option manage workflow or bear workflow now i am gonna be introducing typescript on the channel not today but i will be introducing typescript on the channel but here what we want to do is if you can go ahead and hit the blank right so blank is where we want to start with and that's going to have a managed blank workflow which means it's going to be in the expo ecosystem expo is really good for many reasons it allows you to easily test you know on your phone on android before if you had you know uh if you wanted to develop for ios you couldn't actually do it easily unless you had a mac in fact you couldn't do it you needed to have xcode so now with expo you can actually do this provided you have an iphone you can just scan a qr code loads up on your phone and again another really nice thing about expo is when you're installing dependencies makes it so much easier so i see a lot of you saying you know react native cli i've worked with react native for a couple of years trust me use expo until you need to do magnet fcli stuff trust me it works and it works for a reason okay nearly 700 likes wow that's insane guys that is crazy thank you so much right so we're installing the javascript dependencies right here the next thing i'm going to do is i'm going to run a quick google search because i'm going to show you guys how you know if you were doing this from the basics in the get-go imagine wanting to go ahead and introduce let's just say the redux toolkit into your application right so we're actually going to be using the redox toolkit today and you can go ahead click get started here and this is where we would go ahead and you know look through some instructions we would install the redux token into our app and then it would show us you know how to go ahead and install this now i'm going to if you want to read into a bit more you can look here oh another donation thank you so much dude appreciate you so yeah this is this makes redux easy right using the redox toolkit so i'm going to show you guys how to do all of that in extremely simple ways right so hopefully this doesn't take too long but we're gonna go ahead and in the meantime ah there we go cd uber clone your project is ready hurry so now we're gonna go ahead and go into our project so cb cd oops uber clone youtube there we go and in here what i'm going to do is i'm simply going to go ahead and hit so once we're in our project i'm going to do code dot and this will open up our code editor with that project photos or structure already intact okay now what i'm also going to do is i'm actually going to probably uh we could do we need that's right it's all good okay so what i'm going to do here is pop this open like so and then what i'm going to do is i'm actually going to kill the old app i'm going to kill the old app right now because uh we're gonna start from scratch right so i'm stopping my old server i'm gonna close this get my environment set up and uh and this says hey brady the best from kosovo nice dude that's awesome 10 years old uh we got a viewer 10 years old oh my god 700 likes boom let's go guys keep going 800 i think we can do we've got 600 people watching right now that is sick that is huge that's the biggest i've ever had thank you guys so we're going to go to app.js this is the starting point for react native app okay you know we're used to app.js this is like a starting point for many apps and you can see a few differences here first thing we've got view instead of divs that's the first thing that you should get recognized with right you have a view instead of divs in a react native and this is because think about it when we when we're sort of you know coding up for react and all that stuff it's a div which is a html element on a page now we're coding for phones and you know ios and android which means we have to take a slightly different approach really nice thing about react native is we have these view components when we use a view component it goes ahead and when we build the app that view component will get trans like sort of you know so compiled let's call it into an ios component oh another one thank you so much ifosa appreciate you dude because this is going to be sleek please consider rebuilding netflix and oh i will do that actually right but when you have a view component it will go ahead and compile down into an ios app and also an android app version okay so is it not an ios component and a android component that will resemble and act like a div let's think of it like that okay so that's how you can in simple terms put it so how do we actually run this thing right second thing you want to notice before i mention that it's not class names it's style so that's a quick switch and also here we have styles.container and this is how we basically go ahead and write our css like styles because these are jsx or style properties so what i'm going to do instead here and we're going to be using a mixture of tailwind css and normal style sheet style properties here so i'm going to show you how to incorporate tailwind because we love tailwind let's be real it's so sick all right i'm actually going to go ahead and get into a coding vibe here there we go we've got our colors back all right so i'm going to show you how to do all this so command j and let's go ahead and do oh thank you so much you're doing amazing work sonny keep it up thank you hashit we're gonna do expo start so this is how you actually kick start your app okay so i'm gonna hit expo start and let's watch this kickstart the application so what this will do is this will actually kickstart and open up localhost 1902 okay so i'm going to go ahead and actually open this up on our browser right now and let's go ahead and pop this over here and it's opening up chrome for me oh damn it i don't want chrome all right i'm gonna close my chrome because chrome is gonna kill me today if we keep up with chrome so you can see it already as soon as i open up chrome it already does damage there we go chrome is out of here especially when i'm live streaming hell no not letting chrome through the door all right so local host there we go so now you can see we get this screen a metro bundler now what is a metro bundler and what the hell does it do right metro bundler is because remember we have that compile step where like those view components get compiled down into like the ios component the android component we need something called a bundler right the bundler runs by itself is very simple to do we just do expose and it handles the rest of it but this is the screen that we now have access to right so the first thing you can do is grab your phone and scan that qr code right so obviously you can't scan mine because it's local right now unless you went ahead and change this to tunnel but you can actually scan that with the expo go app you can actually go ahead and run your local code environment on your phone provided you're using the same wi-fi network so that's sick and i would highly recommend that all of you do that okay so definitely recommend that and it's going to be it's going to be a lot of a lot of fun okay so let's go ahead and carry on so we're here we're going to click on run on ios simulator now if i'm using ios simulator again this is actually preference based so we're not going to do the web browser we're going to do either android or ios now like i mentioned before ios is going to require xcode right so you need to download xcode and you would literally have a ios simulator available android requires android studio but again if you if you find it so slow i always get the comments you know it's so slow i hate that or it's clunky or whatever you can just use the qr code with a real device okay so whatever works for you you do that but i'm going to click run on ios and you see it says attempting to open in a simulator now you do need to have your simulator open so in this case you see i've disconnected so i'm actually going to go ahead and go to my home screen here let's actually go ahead and restart my little phone so how do i oh damn it i can't click it right so what i'm actually going to do here you see it says opening on iphone 12 pro max right so what i'm actually going to do here is move my phone over to my coding screen drag this a little bit more put this over there so get a nice little neat set up and you can you see where we also ran it in the in the um expo start in the terminal you can see that it also comes up here that qr code also pops up here and we also have options here so the way i would recommend to run everything from now on is whenever you console log inside of a react native app it comes up in your terminal here as opposed to your browser right whereas you know we're used to browser and react and all that stuff so i'd recommend this but what we're actually going to be doing here is if you type in i so i'm going to hit it says opening on ios and if you ever need these commands by the way you can just hit question mark and it will open up as you need it to um in fact this is actually being a bit slow right now so what i'm going to do is i'm actually going to force it to kind of restart itself so if i do r see it says reloading apps and i'll kind of force it to kickstart and it says new update available building a javascript bundle so you can see down here is actually sort of compiling the app now the first time you build it it will take a little bit of time but after that it will be a lot quicker right so this will take a little bit of a hit on your machine or computer when it's first doing the bundle process after it's done it's pretty relatively smooth and it's not so bad okay so we shouldn't have an issue once that's bundled up and you can see even down here we get a progress report everything works don't be afraid of react native that would be my you know my main piece of advice don't be afraid of you know rank native and it's slowing my machine down it is hard and it's not you just need to break it down and we'll make it simple okay so there you go running application finished building blah blah blah and it says open up app.js to start working on yeah hooray we made it okay this is our first starting point so i'm do command j to hide my terminal command b to hide the sidebar and this is where we start so i'm going to go ahead and say let's build uber right hit save and you see we have fast refresh fast refresh is actually in nextgs so it's really nice sort of you know coding experience as we do it whoa frank what's up with the 20 dollar donation he goes let's go sunny this will be an awesome reacting build thank you so much frank for tuning in appreciate you 20 dollars u.s i appreciate you man always commenting clutch that is that is hyped beyond we just hit 800 likes as well i can't believe it 20 minutes in we're already at 800 likes already at 20 20 quid on the chat donations 600 people are watching this right now you guys are sick if you are watching and you haven't already please smash that thumbs up button and hit the subscribe button because there's like 50 percent of you who aren't watching who are watching right now who aren't subscribed it helps the channel grow massively helps me continue to do this full time so hit the subscribe button and remember subscribe to that um subscribe and hit sign up to the challenge it's gonna be massive okay it's gonna be huge and i'll keep bringing the value i promise all right so let's camera so you can see instead of a h1 we now have the text and status bar is actually referring to this at the top so right now we don't actually care about status bars and get rid of that the reason why it's centered is we have this container you can see it's got flex 1 backgrounder color aligner and justify content now quick rule of thumb right when you are doing work with react native typically we are used to having flexbox default to a row very important point here when you are using react native flexbox defaults to a column because think about it you're on a phone it doesn't make sense to always have in a row so flexbox defaults to a column remember that and i'll keep on saying it over and over again throughout the build flexbox defaults to a column everything about our app is using flexbox and how it styles itself you know it gets designed so it uses a column based approach right so that's how we do it all right let's do this guys let's build some uber so the first thing i want to do is i'm actually going to go ahead and set up a redux okay so the first step is we're going to set up redux so let's actually step this out so set up redux that's number one second step we'll do is we'll go ahead and set up something like um let's just do readouts and we'll just handle it at each each at its own point right so the first thing i want to do with redux is actually go ahead and you know like i mentioned before like i'm going to show you completely transparently how you can go ahead and do it if you were starting this out so you would type in something like redux toolkit you know you want to go ahead and use the redox toolkit it's pretty good option for me i would say it's the most simple way to use redux in your app and here you can see this is what you would typically be doing if you're using you know create reactor we're not doing that we're just using an existing app um so we're going to go ahead and do yarn add redox js token now you might see that i'm using yarn you can check what you're using based on your lock file if you see package lock then you're using npm if you're using yarn it's your unlock it doesn't matter if you want to switch you can switch just delete the other lock file first i don't have two right kartik says i love how sony breaks stuff with comments thank you so much you appreciate that all right so i'm going to go ahead and install this right now so i'm going to hit the plus button to have a second terminal so you see a second terminal and we're going to wait for that to come in and load itself right and then here i'm going to go ahead and say yarn add redux js toolkit go ahead and hit enter on that right and this will go ahead and install redux toolkit into our application right so let's keep on moving guys wow oh my god what harry collins just dropped a 75 pound donation what the hell dude thank you so much that's huge that means we just hit a hundred pounds on chat revenue at like 25 minutes guys i'm sorry if i keep interrupting but that is crazy 75 pound thank you so much harry collins man i appreciate you dude and then jeremias also dropped a lovely 75 i'm not sure what what currency but that's huge as well man that's sick thank you so much man and yes we will be using both in the future but yeah that's it that's crazy wow wow that's crazy i'm going to keep bringing native guys you guys are loving it right so we've got let's build uber all right we we just went ahead and installed um react native right so i'm not sorry redux toolkit so the next step that we want to do is actually go ahead and actually set up something called a provider right so this is our entire app this is the high level kind of overview the entry point of our app what you actually want to do at this point is have something called a provider right so a provider is basically a wrapper which injects our app or sort of levels our wrap up so that way we have redux inside of it so we import it from react redux like so right and actually you know what i might need to actually install this i don't think i did so we're actually going to have to do a add this as well so we're going to do yarn add and i'm actually going to go ahead and say react redux as well okay and then we can go ahead and install that as well so yarn add react redox wait for that to go ahead and load in today's all about patience okay it's all about patience and in fact what i'm actually going to do is i'm going to quickly make a little tweak to my environment one second but yeah all about patients today guys do not you know freak out if things aren't making sense don't worry if it's kind of you know getting scary or anything like that just take your time and it will everything will make sense as we continue with today's build okay okay let's keep going right so once you've got that we're going to go ahead and import provider from react redux now i just went ahead and restarted my uh uh vs codes i'm actually going to have to do expo start again on my first terminal and i will open up my second terminal on the side okay let's keep it going and once we've got everything running it will be smoothed right now we just get a bit of hiccups while you know everything gets you know up and running it takes a little bit of time in the initial get-go otherwise it's all good oh god it's going to try and open chrome again all right brace yourselves guys so rahu in the meantime is rahul says is this for react native uh newbies yes don't worry if you're absolutely new to react this is gonna be awesome for you um just go ahead and like i said break it down i'm gonna take my time with today's boat so that way you guys you know don't freak out and everything sort of makes sense for you i'm gonna click open on ios again and this should be good to go right nice so now we can breathe we can relax a little bit um my sort of something's taking up my cpu a little bit but again should be all right once we get started okay so what i'm going to do now is i'm going to go ahead and we've already got the redux js toolkit so the next step naturally is going to be to go ahead and wrap our entire app so what i'm going to do here is i'm going to go ahead and wrap the app with a provider oops provider like so okay now with this we're going to go ahead and say and also guys i want to mention all the code is actually going to be available in the papa github repo which is in the description so make sure you go ahead and check that one out okay if you want all the access to these today's build so you want to grab the rest of your app and actually throw it up there like so right this is the first step now this is not all you need to do for react you need to do a little bit more you can see here it says undefined is not an object it's time to freak out already right this is because when you use react you need something called a store now if you're sorry when you use redux you need something called a store now all redux is right it is essentially a data layer for your app so imagine if i'm in any component inside my application and i want to share data amongst them i introduce a data layer which surrounds my entire app and then i can go ahead and push data in and push information into the data whenever i need and i can go ahead and pull data whenever i need as well so that's going to help us out again we're going to be using that that's redux today what is happening david blumen just says looking forward to tell when interested to see what library use make sure you take that water break 20 pounds don't the guys i'm speechless i have no idea what is happening today but thank you so much dude wow i'm gonna have some sushi then i'm gonna cool my bun and we're gonna have some sushi that's insane guys thank you so much dude appreciate that that's huge right and we just hit 900 likes wow i'm just gonna keep the fire coming guys damn so we need a store right and this is basically how we set up that global layer that data layer all right so let's do this oh my god another one what corey 20 donation keep it up brother thanks again what is happening this is crazy guys thank you so much oh my god i'm sorry you know if you're watching this as a replay you can feel free to skip this part it's all good but i'm just i can't not shout you guys out that's insane i appreciate you so damn much god damn thank you guys wow that's insane right so we're going to go ahead and create a store right now okay so to create a store all you need to do is go ahead and do store.js and this is pretty much where our store or that data layer is going to live now if you're wondering where the hell did you get this code from like i said it's on the actual documentation for the website uh for redux and when you're looking through that stuff so i'm just breaking it down to make it extremely simple for you today okay so what i'm actually gonna do i'm gonna copy in some of the configuration right so you can go ahead pause it and actually copy this out the first line is configure store this is something we take from the redux toolkit and it actually allows us to set up that data layer that i talked about the second one is called a nav reducer now you're going to notice inside of a folder and it's called the nav slice now remember i talked about the data layer right we can actually separate the data layer into different areas now we're going to have one primary layer in today's build where we're going to store information and that's going to be called the navigation slice as you can imagine this is where the user is going to store their navigation information what is the origin where is the destination and how come how and then we can basically pull that information wherever we need it inside of our app right whatever component we're inside of i can go ahead and pull it as necessary so we're going to have something called the nav slice which is at that area and then what you do is you have something called a reducer the reducer is basically just setting up the store right that global layer and you basically connect it to your navigation size so don't worry if that doesn't make sense i will explain it and we'll go for it in a second so i'm going to go ahead and create that navigation slice right now okay so i'm going to go and create a folder called slices once again it looks like i'm grabbing this out of thin air but this is actually simply from the redux documentation so if you do want to go ahead and read it i would recommend you read it as well and it's going to help you out all right so i'm going to go to slices and i'm actually going to create a file inside called nav slice and this is going to be responsible for everything that is inside of the navigation so that's okay so i'm going to go ahead and set that up so inside of nav slice we're going to go ahead and import something called create slice okay now there is a very nice example from the redux uh sort of website so if we go to tutorials overview or quick start i think is they've got a really nice sort of you see this is where i got the initial code base from and the second one that we need you see you pass in the store and do all that stuff this is the one that you can pretty much copy so it's called a counter slice right and you can go ahead and grab this if you want to to get started but i've actually got this thing set up already so i'm going to show you how we do it now what we first need to do is define what the initial sort of state of the data layer should look like so we're going to have three primary pieces of information we're going to have something called the origin which as you can imagine is point a this is like you know where where where are you no yeah where are you right now pretty much you know the first question you asked when you got an uber where are you right now oh i'm over in london and i want to go over to like let's just say i want to go to germany right with an uber so you can do that in this app so you can say i'm going to do origin no and i'm going to do destination no and these are the initial values that we're setting up when we do this okay so then we're going to go ahead and say travel time information and what we're going to do eventually in travel time information is we're going to have information which is regarding the sort of you know the time that it takes to get to a from a to b and we're going to use apis to you know fill this information out and so forth so again take your time with this because you know it's one of those things that once we do the setup it will all work pretty smooth right so the first and next thing we need to do is we need to go ahead and create that slice right the way we create that slice is we simply go ahead and create the following so you just need to go ahead and put this information on the screen so export const nav slice equals create slice and we get create slice from the toolkit which makes our life so much easier and this is an object inside of the parentheses right so we're executing this function and we're passing it an object so we need to give the slice a name so that data layer you know the slice that we have inside of it a name so in this case i'm just going to call it nav and the second thing we want to do is pass the initial state of the sort of data layer so i'm going to just pop that in there third thing i need to do is called reducers now when we push information into that data layer we need a way of actually you know we call it dispatching an action into the data layer right and what we can do is we can have different kinds of actions so the three actions that we're going to have in today's build is going to be set origin set destination and set travel time information so first one imagine you know you go ahead you say i'm from london or where where from london it will dispatch this set origin action into that data layer and then now it's part of the data layer right and then we can pull it whenever we need to same with set destination same with you know set travel time information so that's essentially what we're doing here and this is all inside of something called a reducer okay so this is actually reducer and we're going to pop this open and then we basically you know we create those actions so the first one we call it set origin right and this gives you two things right so it gives you two arguments when you have set origin so this is called narrow function and what we have is the state which is the current state right so this is the initial state but this is the current state the current what does that global you know a layer look like at this point in time we actually get access to that through the state object and we also get something called an action okay and an action is basically when i make that dispatch from the component to the data layer so when i basically say okay change this piece of information in the data layer that's called an action so we also get that available so now i have the current state and i have that data and then you can imagine you can just do do something with it i'm changing there though right so now we've got this state action i'm going to go ahead and pop this in so let's say for the origin when i get for example an action come through i want to change the state of the origin to the action and we basically the information inside of the action is something known as the payload right and again do not worry if this doesn't make sense you know again this is all about practicing learning over time and this and that right so this will go ahead and help you out okay wow almost a thousand likes guys let's keep going this is sick all right so this is how you would do it so now when i dispatch the action set origin i can pass in a value and that value will come through here and it will go ahead and update the data layer so this is how we do it right so i'm going to have two more examples of this and when we come to use this it'll make a lot more sense and that will actually help us out a bit more so i'm going to go ahead and pop in two more examples like i said for destination and set travel time so i'm going to go ahead and pop those in here so destination set travel time exact same you know sort of procedure and we're going to go ahead and manipulate that part of the data layer with the action when it comes in so this is all part of the preparation for getting this up and running okay i love you guys your positivity guys everyone's saying nice you know we've got sean tino scratch thank you so much guys for your positivity it really really is awesome stuff we just hit 1000 likes already in 37 minutes jay if you're watching this my assistant god damn dude we're killing it this is crazy wow tina says what playlist are you using for the music on your stream we're actually using the papa fan playlist it's available in the description right now we need to sign up to newsletter we send you it straight away so definitely do that if you're enjoying the music because this is my personal coding playlist i listen to this when i actually code so it's tailored or how i enjoy to code okay so we've gone ahead and prepared that data layer right the second thing i want to do is obviously we have this beautiful data layer i need to expose the rest of my application to those actions so that way i can use the actions otherwise if i kind of hide it away in this file how the hell is supposed to know so we need to export these you know actions so the rest of our app can pull it in and use it where we need to so here i say export const right and basically we pass in all the actions here so i'm going to say set origin set destination and set travel time information and we're going to go ahead and pop this in now this is something called destructuring and what we're actually doing is we're exporting our navigation slice actions and we're pulling out these three things but basically all we're doing really right here right is we're accessing our navigation actions and we're just exporting each action available so that way the rest of the app can go ahead and tap into it that's all we're doing here okay so this allows us this line here allows us to go ahead and you know grab that outside the app um so when we do imports elsewhere that's why it's working okay and as always guys if this is a you know this is just tricky for you like i said react basics 101 is free second link in the description you can get it for free on skillshare so make sure you take advantage of that while it's live second link in the description yeah like i said i'm trying to help you guys out wherever i can so hopefully that should give you guys a bit of a boost up okay so the second thing we need to do is actually have some selectors so when we push information into the data layer like i said we need to pull it back from the data layer as well so we just figured out how to push information to the data but how do we actually go ahead and grab it from that data layer right the way we grab it from the data layer is we go ahead and include something called selectors okay now a good practice for selectors is you have one selector for each item in your initial state so in this case a selector for the origin the selection for the destination a selector for the travel time information so i'm going to write the first one and here we do export again we're going to use this selector to pull information elsewhere in the app so i need to export it const and we're going to say the sort of standard is you say select what the variable name is so in this case select the origin and again we get access to the state so whatever the current state looks like and all i'm doing here is i'm doing a direct return so this is an arrow function where if you don't include the curly braces it's actually a direct return so it'll return when you call this and we're all we're going to do is return the state we're going to go into the navigation slice right so imagine how it's kind of divided up right now so state.nav dot origin so what i'm doing is is when i call this or use this selector it should go into the state don't have the origin and give me the current value that we have inside the data right i'm going to repeat this for destination and travel time information okay easy as that the final thing i need to do is actually export you know my navigation slides so that way you know i can hook it up to my store and it all works the way we need to okay so what i'm going to do now is i'm actually going to do so a forehand says i love your content will you be posting a video later on yes dude i will be posting this video all my lives go straight up afterwards okay so enjoy it and uh hopefully it's useful for you so we're gonna do export default because we want to have one primary def uh sort of export from this file and we're actually gonna call that nav slice dot reducer now remember we had reducer somewhere else and you're probably wondering where the hell did the reducer you know where did i hear that before we actually have the reducer or we sort of imagine like a string that connects us to the store that actually is called the reducer and we go here and ah here it was we pull that navigation reducer through from the way we export so it goes from here to here and then we connect it to the store and just like that we now have our store set up right so this is actually configured that data layer so that was probably the most tricky part of the entire build right so i kid you not that was probably the most tricky part of this build so now that you got past that well done right so and i see we still got 600 people that are with me now so let me know if the comments if that was you know clear enough right but that should have helped you out and that's the first part of setting this up we have the store now we export it which means in our app i can import it so if i go ahead and say store equals store and i should be able to import this from my store right so if you're wondering how i do that trick yeah i go to the end of store control spacebar and you see here it says store and it says auto import from source if i click it boom it found it it imports it into the file so we just set up redux right done we can get rid of it so redux is now inside of our application let's see if the app runs right so i'm going to use command j and then here we've got a little bit of a freaking out happening so i'm going to do a refresh and it says reloading let's see what happens new update available downloading so it's building out the bundle so give it a little bit of time be patient with it let's build uber amazing right that's amazing that means it works ryan says super helpful details love it right thank you so much mahidi as well awesome stuff you explain redux each time with these thank you so much michael i was really worried that i kind of went a bit fast but i think that was a i think i think we nailed it guys i think that was good i'm almost about to hit 1 100 likes i can't believe it i can't believe it you guys are getting this is a permanent smile on my face right now all right so we have the provider done okay so now we have our you know our react native app and we have a supercharged ship with redux so redux you know everyone says it's so hard to implement redux see we did it right don't worry about it it's not that hard right we actually figured it out pretty good so the second thing we're going to do is create the home screen this is going to be the first screen that we see on the page and this is going to be where the home screen lives so what i actually want to do here is you should typically have a high level overview on your app component so at this point i'm going to create a home screen now what's really nice here and what i would recommend is go to your extensions right now and go over and type in es7 react to redux graphql snippets make sure you install this because it will help you out a lot and it also works for react native and then what we're going to do is actually create a screens folder so this is a standard you go ahead and create a screens folder and this is going to represent each of the screens in our application so what i'm actually going to do here is create a screen i'm going to call this the home screen and all this is is a functional component so what i can do here is like say react native functional export component so a functional command which is exported and do an s to add a style sheet in as well and there you go and if you're wondering can you do the underscore one which doesn't include the import react you actually need to do that right now maybe they'll change it later for react native but right now you need that okay guys the retention today is sick thank you so much guys uh and please don't expand the chat thank you arjun for cleaning up all right so we've got the home screen so i'm gonna say i am i oops i am the home screen and i don't know if you guys know but like this vibe is sick right you know we're coding like the music so if you like again it's available in the description uh be sure to check it out so we've got the view here with some text on the home screen so to get this up and running to get it working the way that we want it what we now need to do is go ahead and hit so let's go ahead and just import like a normal component say home screen and you can see again it auto imports so home screen if it doesn't you can feel free to type in but it's pulling that home screen in so now we should see i am the home screen let's wait for it let's see if we actually get the i am the home screen so i've got this let's see why it's not really refreshing let's have a look come on j let's do a refresh r on the app and let's see if it came through okay interesting we're not actually getting this up let's have a look if it's oh it's there so it says it's way at the top right so it's stuck now can you see this little kind of notch at the top right this is called the safe area right this way this is actually not the safe area because a lot of these phones nowadays have a notch right and we don't want the information to ever go into that notch so what you have to do is you have to use something called a safe area view if you use the normal view it will go up into the notch oh we got another donation what the hell oh my god jelena just donated 50 dollars she said drinks on me thank you for everything that you're doing for the community being a member of the papa fam and learning from your code helped me and i land a dream a dream job as a react native developer long live the pop fan jelena she's an awesome member of our community and if you want to join it as well link's in the description but wow thank you so much guys we are literally i i we're like nearly 200 pounds in we just hit 1.1 k likes as well i'm speechless this is like insane oh my god wow this is just like i'm speechless on that we hit 1.1 k likes jelena drops on fire nearly a 200 pounds on the chat revenue you guys are sick thank you i'm gonna promise you i'll keep this coming right so we've got the view over here so what i'm going to do is actually have a safe area view so i'm actually going to import a second one called safe area view right and this one basically just accounts for any you know unsafe area so depending on what phone you're on it will account for it so now all i need to do is replace the safer uh the normal viewer that hit save and then you can see look it actually goes inside the view now so that prevents you know that issue of you know having uh sort of things creep up into that on the space that we don't want it to go into okay so there we go we have the home screen looking pretty decent right now now what we can do is i'm going to give you a quick example of how you can style something so imagine we've got this text and i'm going to say style equals and then we've got our style sheet down here which is similar to what kind of css and yes you can export that and having a separate file but here i'm going to say styles dot right and for this text i just want to show you an example if i did like text right and i said the let's just say the color is blue and i went ahead and did styles.text you can see it changed to blue right now you can code like this there's nothing wrong with coding like that in react native right there's absolutely nothing wrong with it but what i would recommend is it gets a little bit kind of you know i think it gets a little bit tedious in my opinion i don't like it i love tailwind i like the quick speediness of heroin so what i would recommend guys is instead what you actually go ahead and do is oh what's up roland from uganda yeah what i would say is instead you do you include something called a tailwind so it's actually called tailwind i'm going to show you guys tailwind uh react native class names so it's this one here okay so i'm actually going to go ahead and drop this into the uh application right now what this does is it allows you to go ahead and have a tailwind like syntax to go ahead and do things and you can also have android to only apply a style for android and so forth if you're new to tailwind definitely check out another build all the tailwind youtube channel is sick them guys are doing an awesome job over there and if they're watching this ever you guys are awesome so carry on doing what you're doing right i love what you guys are doing and it helped me out so much in terms of coding so we're going to install this so i'm going to go ahead and grab this i'm going to do yarn add let's go ahead and do command j second terminal and do yarn add and paste so yarn add tailwind react native class names and i'm going to show you how it works now it doesn't have every single thing right that is uh you know available in tailwind but it has most of it right i mean well i mean most of the stuff that you probably need right and that's for various reasons remember it needs to go ahead and compile down into ios android and all that stuff so it needs to be you know it's a bit harder to account for everything so what we do is once we do it we just import this tailwind object okay now imagine i'll get rid of these styles so we should go back to the boring you know oops let's get back to this should go back to the boring sort of you know black text okay looks pretty boring right now so i'm going to go ahead and say style equals and i'm going to do tailwind and then backticks okay now i can use my typical tailwind stuff so if i went ahead and said text let's say red 500 we actually get red text and if i did p 10 we actually get a padding of 10 as well so you see how much like quicker it is to use tailwind with this now if i wanted to combine tailwind with um what we're doing here right with the normal sort of style syntax i can put an array here and i can do a comma and then i can have my normal sort of you know i can either at this point type in styles.txt and so forth so you can actually combine this so if i do this now it will apply this then it will apply styles.text in which case it overwrite or override it or you can actually have inline if you really wanted to here and you can have like color let's just say purple and then you can see it goes to purple okay so that's my introduction into going ahead and doing this right so so you should now know that we can combine the two and that will help you understand how you go ahead and build the rest of it out okay so what i'm actually going to do is for the safe area view right now and we're actually going to include a style and this style is going to be taro and it's going to have backticks and it's going to say the background is going to be white so bg white and i want to have a height of a 4 i want to have a full height basically okay now if i want to show you if this is actually working bg red 100 you can see it change the color of it and you get all the different shades so if i do 900 you'll get that as well i'm going to do bg white so we get a white background this is going to be the home screen right so it's going to be relatively nice simple to have a home screen up here okay so this is looking pretty good right now i want to have the uber logo next okay so what i'm actually going to be doing here is having a view right i'm going to have a like sort of a container inside our app so like it's similar to a div right so instead of this i'm going to have a view okay and inside my view just remember whenever you see a view just think of a div very similar to do right we still have 600 likes wow 1 100 likes guys we're about to hit 1 1200 keep on you know smash the thumbs up button if you're enjoying this right now and uh awesome stuff right karthik says where do i sign up for the challenge first link in the description so check it out dude okay so we've got the view here so i'm gonna go ahead and use an image tag this is new this is actually something which we use um in react native so we're going to import this from our lovely react native uh module and then we've got this now so what the first thing i want to do here is actually have an uber logo so i've made it very simple for you guys i've actually shortened all the urls so what we have here is actually a nice sort of source attribute that we can pass in now i'm going to pass in a jsx sort of tag right here so we have to put the quick squiggly brackets and then i'm going to pass in an object and then here this takes something called a uri which is similar to url uniform resource identifier and here i'm simply going to pass in the url or the image all right so you can go ahead and copy that i made it it's pretty simple for you guys to copy now it's not showing that's because we need to give it a style okay so we need to actually pass this in a style and you guessed it i'm actually going to go ahead and use i'm probably going to use an inline style here actually so for this one i'm going to pass in a style oops sorry style and i'm actually going to say something like let's go ahead and have sorry what am i doing it should be style equals wait a second what am i doing oh yeah okay there we go i've got a bit mixed up there outside right so for the source here here we're gonna have a star i was wondering i said what the hell is my you know was it everything going wrong all right so we've got this now once you can do an inline style here and say width should be let's just say 100 um height should be a hundred and you'll see there's times where i use tailwind there's times where i use the normal stuff it's because in some situations i can't i don't have the right x you know i don't have the right modifier in tailwind so i just use the actual native css and here i'll say contain okay now you'll notice when we're doing this it has camel casing so that's just a slight difference to know about there we go uber right so we have uber there now uber's touching the side i don't like that so i'm going to go to the view which is surrounding everything add a style and to make our life easier we're going to use tarouwind backticks afterwards and with a padding of five and if you just do p5 it means all around top left bottom right boom pads out now it looks a little bit better looks already quite nice right um okay this is looking sick where's carol going guys so what we're going to do now oh nice george says what's up sonny you're amazing man keep it agreeable i appreciate you george thank you for watching dude and still 600 i can't believe you guys you guys are incredible while i've got you remember sign up for the challenge starts next tuesday first link in the description airbnb huge challenge next week and it's going to be complete from beginner or if you want to go ahead and you know up your skills with if you code it before and next react and you haven't done next year's perfect place for you 10 000 for prizes it's gonna be sick be there first link in the description okay so we've got uber up here now what i want to do next is i'm actually gonna go ahead and have let's think about this a single place i'm gonna have firstly let's have the navigation options right so the navigation options are going to be the stuff where you saw you know it says like get a ride or get a sort of order some food but i'm actually going to have those things first all right so we're actually going to create that right now so i'm actually going to create a new folder called components because i'm going to create a reasonable component here so components inside the components folder i'm going to create something called nav options dot js okay and for nav options this is going to be again like i mentioned these are going to be two sort of cutouts they're going to have everything that we need to react native functional component with stylesheet there we go simple as and inside here we're going to use a few new things so you're gonna get introduced to quite a lot of new tech today we don't actually need access to the style sheets we can simplify ourselves here okay and all i'm gonna do is i'm gonna pop this in inside the home screen so underneath inside of our view i'm actually going to have nav options like so so it's imported up at the top and there we go we've got another options okay so obviously we can't see anything now because we have nothing in that options but we're going to keep on creating keep on crashing it with this okay so it shows out so i'm gonna say hello world hit save and we should see hello world that's because nav options is being populated there now i've got two pieces of information right now okay so i've got let's check this out i've got a data array right so this is a an array which has two pieces of information in each one has a unique id in this case i've kept it simple one two three four five six because any kind of you know item in a list or anything which is shown in the list format should have different ids so we've got ids here the first title is going to be get a ride the second title is going to be order food all right so this is going to eventually render out the two sort of you know things that you see on the screen each one's going to have an image one's going to have a picture of a car one's gonna have a picture of some food and then the screen that you hit so basically when i click that button what screen should it go to so right now we're on the home screen but once we you know implement react and navigation it should go to the map screen and this one goes to the eat screen which we're not going to build today right so it's just a sort of demo a demo feature right so you see that's why we're going to change in future so whenever you have a list of items that you want to render out in react native to render it out optimally you use something called a flat list now a flat list is one component it takes some data in this case it's an array of data we call it there and then what we do is we have something called a render item so it will go through that list and for every single time it sees an item on there it will go ahead and it will render out whatever you tell it to render out so i'm going to do that right now and we're going to see the example of that okay so rather than a view we're going to get rid of that we're going to say flat list okay so auto import from react native and then it's a self closing in component and this will actually sort of eventually render everything that we need okay so what we're going to do um we're actually going to go ahead and say first thing is we're going to pass in the data all right so this is actually the data and then the second thing is typically it's a vertical list by default i want this to be a horizontal list and then i'm going to say for each item what shall we do right so we should be doing something in this case you actually get the item itself what that you're iterating through so you get this and so basically first thing is it's an arrow function that returns something okay so this is an arrow function which is going to return a component but every time we loop through we get a destructured item so basically this means that we get access to the individual item that we're looping through so what i want to show on the screen if i use item.title for example i'll get to get a ride when i'm rendering something on the screen so let's just give this a quick test okay so i want the actual sort of things that get rendered on the screen to be touchable i want to be able to touch them and then it looks like i'm actually touching a button so in react native we call this touchable opacity because when i touch it the opacity should change so it looks like a sort of touchable element so i'm going to say render out a touchable opacity and you also have a few other things touchable highlight and all sorts of other stuff pressable is another one touchable opacity so i'm going to import that from react native there we go and this touchable opacity is actually a parent component and inside of it i'm just going to say for a quick example text i'm just going to say item.title right so item.title and then let's go ahead and hit save right so you see glitter ride order food so right now they're just being rendered next to each other if i got rid of the horizontal you'll see it renders like this and notice how flat list is a list so it's draggable okay now if i click it you see how the opacity changes right so obviously it's a little bit hard to see that but i can't zoom into the phone at this point so you can see now that it looks pretty pretty good right now okay so obviously we're going to make that look beautiful now whenever you have a list you should have a key right so what they have is a nice little fun attribute here it's called key extractor and what key extractor is is it simply goes ahead and gives you the item so again when you loop through the item id you know all this stuff it'll give you that what we're going to do is we're going to select the item.id to be the unique identifier for our key and that that keeps it optimal and efficient now if you don't know why you need a key you should always be using a key i show all my builds with keys uh it allows react to know which part you know like if we add an item in the list it says don't re-render everything just re-render the one one the one sort of entry with the new key right so it knows which stuff has changed allows it to be a hell of a lot more efficient okay so this looks pretty good right next thing i'm going to do is actually going to go ahead and let's create an image that gets rendered out as well so we've got our i'm actually gonna do something a bit more complicated than just have you know a bit of text out so i'm actually gonna have a view inside so imagine like a div and inside this i'm gonna have an image a text and a an icon so we're going to introduce some icons and react native elements in as well so i'm going to firstly say i want to render out an image now we already used an image we know how to do this right so it's not relatively you know it's not going to be super new i just did it before with the uber logo so firstly we need to actually import that in so i'm going to go to this control spacebar at the end of our component go down it should say auto import hit enter it's now imported nice then we're going to go ahead and say source right so source over here source should take a argument and again we can pass in a uri or so we're going to pass an uri and this uri is going to come from the data so the item so in this case item.image so item.image hit save and there we go now again we can't see it because we haven't given a style so in this case i'm going to give it a style and each item that we see is going to have a width of 120 a width of 120 and a height of 120. okay so a height of 120. let me know if you're enjoying this by the way 1.2 k likes that's what i'm talking about guys the energy today is sick we still have 550 people watching this so amazing to have you guys here honestly 1.2 k likes let's keep on going guys absolutely incredible stuff right width high unless carry on so we're going to have uh also resize mode contained and this is basically like you know it's going to keep the aspect ratio so we've seen it contained before and there you go we have a car and we have some food right so this is looking good already and that's because it's looping through and it's showing it now again i actually want to put back the horizontal because i want to be a horizontal list right nice we've got two options coming up this is looking pretty clean at this point right tech guy and says hello sonny what's up dude um you can change it to classes remember all up anytime i do an inline you can class it right you can also add tail into it i'm showing you a range of different things today so that way you guys can use it combine it however you want right it's just to teach you how to you know you can actually have multiple things it doesn't have to be one okay so the next thing i'm going to do is i'm going to have some text now this text is going to have item.title there you go and now we should see get a ride order food okay and then i also want an icon right i want an icon actually underneath it which is kind of like a gold sort of arrow sign right so for this we're going to be using something called a react native elements right so before i actually do that i'm going to style this a little bit more so it looks a little bit decent before we carry on so i'm going to go ahead and go into here add a style and we're going to be using our beautiful tailwind all right so tailwind if we are going to use it we're going to get going to need to import it up at the top over here so import tailwind from native class names hit save and then here i'm going to say tailwind and i'm going to give it firstly a few different changes right so i'm going to give it a padding of two right so there it pads a little bit more padding left of six right so i'm gonna give it a padding left of six i want to give a bit more padding on the left padding bottom of eight for later all right so if i do that right now you can see a bit more spacing and i'm padding top of four right so i've actually overrided a lot of the padding too and then we're going to say background should be gray so bg gray 200 keep it kind of light and then you see they're touching right now so under a margin of two so that they're not touching and a width of 40 gives it a nice kind of space right so that already is looking pretty damn good right oh you know you guys are saying hydrate do you know why i'm not hydrating so much because i don't know what it is guys the bladder is not holding as strong as it used to and these streams get on for longer and longer so i will hydrate i'm gonna literally do a dab today i will you know we'll keep that that's enough for now all right so what i'm actually gonna do is i'm actually gonna sort of i've got some new tracks here as well so this i actually like this track i was going to the other day that was kind of cool all right so let's get to 1.3k likes guys let's do this google says thank you for your videos they helped me a lot amazing stuff jesus said yes sir that's what we're talking about guys this is looking pretty good right we're doing a good pace let's carry on with the momentum right so for the text i'm going to say style right and can you guys hear the music well by the way or not is it too loud too quiet let me know right so here for the style i'm going to say luke says gotta go something but i'll be doing this over the weekend amazing stuff dude luke thank you so much once again yeah so here i say style and then i'm gonna say tailwind dash dash sort of the backticks and then i'll see mt uh mt2 right uh margin talk to you and i'll make the texts kind of larger there we go looks a little bit better now font semi bold right so font semi bold as well and look at that it looks a lot cleaner thank you so much we just got a wicked donation from korea says i'm your korean big fan i can't read the name it says i can speak english but just a little bit i'm starting to react from your youtube channel thank you very much i appreciate you dude sick nice that's awesome man thank you so much so that's looking pretty clean at this point right okay and then let's continue on so now i want to have a logo right to finish this off i want to have a nice little logo so to have the logo i'm actually going to be installing react native elements all right so i'm going to go over here back to my browser and type in real native elements and i'll show you guys this is an awesome library with the material design system so we've got nice material like designs click get started and then here you can see yarn added react native elements to get started up right so i'm going to do this and you can use npm it's up to you we're not going to get into a debate yarn out react native elements see what i mean it's going to catch you right i find saying this build will go viral hell yeah dude next week's challenge should go viral remember first link in the description sign up right there we go we've installed it we just did or react uh what do we do we just did uh yarn add react native elements awesome stuff guys continue on just got a job as a front end dev thanks to your bills thank you so much mameek das that's sick all right carla says looks a bit more complicated but yeah don't worry about that dude remember if you're if you're finding this complicated second link in the description is react nate the react basics 101 pack that i give you for free on skillshare so check out that link it's only for a little bit so it will go after a while so check it out now okay this is pretty cool we've got that as well now the next thing we need to do is actually add in the icon pack so you see here yarn add react native vector icons so i'm going to go ahead and pop that in as well so yarn add direct native vector icons i just says it's a guitar yeah it's proper it's catchy you know i find it work at you all right while that's loading up yeah it's just a little change of scenery there we go let's carry on nice okay so we've got uber clone youtube there we go we've done it react native vector icons once we've done that guys we need to now go ahead and also finally add in this this is the yarn add react native safe area context now this is not the typical safe area that we know this is kind of for the icon so that way they know where they're at and they don't kind of go into dangerous areas so we need to go ahead and actually install that as well right so let's go ahead and do yarn and react native safe area context again it's different to the one that we were using previously okay awesome stuff all right segan see gun says great job sonny thank you so much dude appreciate your support let's carry on so we've done that now and then we're going to go ahead and actually see this import from react native safe area context provider and then we're going to actually wrap the entire app again app should be a high level overview of your entire app right makes sense because it's called app so we go over to app dot js and then you go ahead and do import safe area provider and it's up to you where you want to put this i actually have a preference here i would say chuck it underneath your provider here let's go ahead and pop it in here so let's go ahead and chuck it there so you see notice the the convention here you have providers these are just known as higher order sort of components right so safe area provider has actually damaged this bit a little bit so i'm going to fix that in a second uh we'll sort out don't worry about it all right let me hit save and now we've got safe area provider with our home screen okay so i'm gonna go into my home screen and let's check this out so my safer review interesting so right now something screwed up so let's just go back to my actual application and let's just refresh the bundle r for reloading there we go something went weird there right and again use this for your sort of controls right if you have hit um question mark to get all the sort of options as well if you ever get lost right that's always kind of a handy thing that helps me out and if you need to kind of access the developer tools you can press d here oh no oh damn it i opened up okay here we go we're opening up chrome wait for the computer to start screaming right oh god when i'm live i do not use chrome it's horrible okay there we go see oh my god it maxes my ram when i do that right chrome's not a friend when we're live guys okay let's carry on so it's looking pretty good okay now when i click get all right suppose you just add in the logo uh the icon i guess nav options let's go over to navigation options and let's go ahead and add in the logo down here so what's really nice about this library right and what's pretty cool about um react native elements is that they give you a bunch of things you get components like over here you get tons of different components that you can go ahead and use they give you examples the one i'm interested in a lot of the time is icon packs okay so you can actually go ahead and use the icon packs they have quite a nice little directory where you can actually search as well um you can just type in react native elements icon search and you'll find it and that's where you can pretty much search through but you see you get access to all these different icon sets okay so all you have to do is pass in a few values that will actually allow you to go ahead and get these different things right so what we can do is we can say access the ant design icon set and get me the you know the arrow right or something like that and that typically works really really well okay so let's carry on so we're going to actually use this to get that built now so i'm going to go ahead and pop in the icon okay now the icon is going to be so there we go adjust the music a little bit so we've got the icon over here and guys we're so close to 1.3k likes let's keep going so the icon we're going to go ahead and say here the type is going to be from ant design and design and i'm actually going to go ahead and pass in the color and the name of the sort of exact icon that i want right so you can see it says can't find the icon variable that's because we need to import it from react native elements like so all right pop that in there and then we should be able to see it pop through in just a second right if it does ever get stuck you can go ahead and just do our r to reload your app manually it says new update there we go boom and then you can see now we get a nice little icon right but that's not all right it doesn't look that good at this point so i'm going to go ahead and go to my actual icon itself and i'm going to override its style i'll actually add in some more styles right now this is what i love about tailwind you can do so many nice little circle tricks i'm going to say style equals tailwind back tick back tick material margin top two give it a little bit more distance from the top and then i'm also going to say oh sorry padding of two sorry padding of two and then i'm going to give it a background of black hit save and then we should see in a second so it's not actually hot refreshing quite that nice let me double check did i turn tight enough let's do um so refresh toggle opening developer tools open up blah blah blah select project toggle menu m hot refresh oh we're good we're good okay so i guess i'll hit save afterwards and it'll work so do bg black and then here i'll say rounded 4 and i'll do width of 10 and a margin top of four okay now hit save on that if i go back to my app and just hit r to refresh right sometimes it's not going to refresh well but there you go that looks awesome right that looks really really nice right so this is the annoying thing it's a very good question actually this is the auto complete work for tailwind so that's the only thing i'd say it doesn't work when you're doing react native unless you found an extension i didn't right but um overall yeah that's what i found okay so this looks pretty good at this point so that's pretty sick now when i click get a ride i want it to shift me over to another screen and that screen we actually provide over here so map screen is this case right so the first step is i'm going to create the map screen itself so that way we have something to shift over then i'm going to implement something called react native navigation which will actually allow us to have that screen switching and you know that really nice kind of swipe back functionality or on android you have the back button all of that stuff will work once we implement this so get ready for that okay smash thumbs up button if you enjoying this right still have 500 people half thousand people watching right now that's sick let's keep going guys so come on b i'm gonna go to my screens and then here i'm going to go ahead and say map screen all right so i'm going to do map screen dot js react native functional export with starship boom right and then here i'll say here is the map stuff dot dot dot save okay so we've got the map screen over here and then what we're gonna do is i'm actually gonna have so right now in app.js we only render a home screen right so how do we have you know two screens how does that work and how do we do all this sort of navigation stuff so we're going to use something called a react native navigation this is an awesome library that allows us to do a navigation for our native apps so you can go ahead and read the docs and again i'm showing you this because it's going to be handy for you to go ahead and do it in your journey and go ahead and you know research and see how i'm doing this stuff and i think that's going to help you out quite a lot right so let's keep on going guys and remember if it's kind of hard for you second link react basics 101 from skillshare for free it will help you get up to scratch and then you can come back to this build so i'm going to click yarn yawn add react navigation native come back here come on j come on b to hide that annoying sidebar now come on j come on b and then second terminal and i'm gonna do yarn add react navigation native okay aditya what's up dude now what we're gonna do is we have to install a few other things right so in this case you see this is interesting here so expo install not yarn out or yarn install this means that expo is going to do a bunch of more kind of complicated installs and as i mentioned before expo is awesome because it will handle the ios dependencies and android and all we do is do expo install right we have to handle all this other stuff which if you've done react native cli stuff you know what i'm talking about expo simplifies it so i'm going to click copy here go over to my code and paste that and you can see expo in store and there's a bunch of different when it has a spaces installing more than one dependency so these are all the things that we need to allow us to get you know our react native navigation working okay uh kartik says i like how you say native native native delcio is this guy is awesome thank you so much dude appreciate you if you're new to the channel let me know right now love to see who's watching for the first time okay so we got this up and running and we got that working pretty good we've done all of this stuff now i'm going to go ahead and i need to import this into my app.js file to get everything loaded in the way i need it so go back over to our file pop this in at the top gesture handler that's all for the swipe back and all that stuff right and then we go down and then we need to do the navigation container so another provider like syntax okay so i'm going to go ahead pop this here and where do we wrap this one right so safe area providers here i would say have it this is sort of you know still presentational kind of so i would say above underneath the provider and i'm going to say navigation container so underneath my redux provider i mean i'm going to grab this pop this up here hit save and then now make sure it all works right so it says refreshing if it freezes like mine i think it's only freezing for me because i'm live i'm gonna do r to refresh and then you see it comes back right everything's good i would recommend you know constantly doing that because it's going to actually help you out a little bit right 1.3 k likes boom 500 people watching this still so sick so so grateful wow i can't believe that guys honestly right react native content is killing it right so we've got the safe area provider home screen okay cool so the next thing we're going to do is click next and i'm showing this again because i want you to go through it yourself click yarn and you want to install this stack now what the hell is a stack right while it's installing i will go ahead and tell you what stack is so a stack whilst installing stacks all they are basically imagine if i'm on one screen and i press the button to go to the map screen think of i have a stack so when i'm on the home screen this is my stack right when i press like the go to the map screen or i go to that screen i stack on something now when i swipe back it knows to pop off that thing and it goes back a screen all right so this is called a stack navigator that's why it's called stack because you literally stack screens up and then you can swipe back swipe back swipe back and then you can keep going down and down down that makes it really kind of cool to do pretty pretty easy stuff and that build is built in with you know the swipe back feature on ios the little back button on android everything works kind of you know quick and swiftly out of the box so we just went ahead and installed that the next thing i'm going to do is actually go ahead and set up our stack navigator okay so you see here it says create a stack navigator so we're going to import the create stack navigator let's go ahead and we've got oh we got ukraine in the house nice awesome stuff guys if you're watching you're not already subscribed please remember hit the subscribe button it helps the channel out hugely and uh yeah i really appreciate it so what we need to do is actually create something called a stack right and again this is just preparing us for that stack of pages where we can swipe back and all that stuff right so we're going to do cons stack equals create stack navigator and then what we need to do is actually create something called the stack navigator right so where am i going to put this i'm going to put this all inside of let's put it inside of the safe area provider now what i'm actually going to do is you know get rid of that for a second so it's all in the safe area provider and i'm going to say stack dot navigator okay and this is going to be a navigator and basically what we do now is we include all the screens that we can possibly navigate to right so in case we've got map screen home screen and the way we do that is we say stack dots this is similar to like react router right so similar to react router and the different routes that we can have very similar approach all right so this is actually going to be stacked screen with a kappa os make sure you don't make that mistake it's a self-closing component and it takes some attributes the name of this screen is going to be home screen now this is important these these names because you use that to navigate to different screens down the line what screen should render when we're here we're going to say we should render out the home screen component when we try and go there home screen okay and then you can pass in you know additional options right so i'm going to leave it as that for now and show you what happens i'm going to get rid of my home screen here and we should see that this actually works pretty nice all right so if i go ahead and do this again i need to do command j and hit my manual refresh for some okay there we go it worked and now you can see look we're on a screen called home screen now in uber yeah i don't really like that right i mean like that works pretty nice in the beginning yeah and and what happens is if you go to the next screen it will have a nice little back arrow and all that stuff well i want to do some custom design today right so the way you can do get rid of that is you can do it two ways you can do it in the component home screen or you can do it here right so here we can do options and we can pass an object array okay so i'm gonna go ahead and save an object array of options now here i can say header shown oh we got we got donation from cut skills keep it up man don't worry dude i really appreciate anything that's huge thank you so much man i really massively appreciate you for watching and tuning in awesome stuff man okay so let's continue on oh this is so sick man you guys are awesome all right so headed now you can see it got rid of that header right so what we're going to do here is we're actually going to create another screen called the map screen okay so what i can do here is i can literally copy and paste and we're going to call this one the map screen and this is going to be for the map screen component and you see each one can have different headers shown and all that sort of stuff now did we create our map screen yet yes we did okay so here is the map stuff so what i can do now is go back and i can import so go to the end of the line here control spacebar and uh sometimes it doesn't work but let's try and find it did i import it map screen now so i can just you know rename this to map screen and change that match screen there we go we've got our map screen hit save okay is everything still working good we're happy we're good we're pretty in a nice place right so now what we're gonna do guys is we are gonna go ahead and say oh nice john smith thank you so much dude i think you just dropped a little donation i got it came through somewhere but i appreciate that i did um okay so now what i'm gonna do is i'm gonna go ahead and when i click get a ride i want it to navigate to that screen so you're gonna see how we do navigation now okay a few ways you can actually approach this so we go to the home screen now because the home screen is you know it's rendered here underneath our navigator we can actually get the home screen like something called a navigation prop now this can be kind of you know like a tedious it looks a bit messy right so i like to use something called the use navigation hook also thank you so much for brian creighton who just dropped five dollar donations and your videos are always fire appreciate you did you guys get me hyped up today i have so much energy honestly i was pretty nervous by this one i was like it's a huge build now we're gonna do it i'm gonna do this one but you guys are killing it you guys have been awesome thank you so much for being you know just strong as always this is what papa farm's about right i'm almost at 1.4k likes let's keep going all right so when i click get a ride we should be able to transition over right so how the hell do we do that so when i go to my we're actually going to do on the click here so i'm going to go to my nav options and then for the touchable opacity so which is each of these things that get rendered out so when we render the item out what do i want to do right so i want to get access to that user navigation uh sort of you know that that navigation prop allows me to navigate around someone say const navigation equals use navigation and you see i get a bunch of auto imports so i can go ahead and help myself out here and this is the same thing as doing this and pulling but except we get nice auto complete we got a bunch of other stuff and it's just better in my opinion looks cleaner it's a lot more easier to help me out with i i prefer this approach right i'm gonna hit save now and then what i'm gonna do here is i'm actually gonna have some cool navigation stuff happening so when i press the touchable path so typically we're used to on click on react right here i do on press and what i do is i pass in it takes an arrow function so there we go on press instead and i do navigation dot navigate right and here what we actually do is we pass in a name or string and that string directly correlates to the name that we gave here for the stack screen so that's how it knows where to where to to go right that's how it knows what to do and where to go in this case that map screen comes through on the props here so you see a map screen so what i can do here oops i've got a call coming in oh there we go get rid of that all right so what i'm actually going to do now is go ahead and do the following oops where's my stuff going where's my music on there we go we're back right so what i'm going to do now is i'm going to go ahead and say oh my god yeah item.screen so i'm going to do the follow so i'm going to say item dot screen okay and then save right right in the screen so now if i do this oh navigate over right now obviously we don't have a safe area of view for that component but if i swipe back now oh that's smooth guys that's really nice right and if i try and go to this one it says oh you don't have you know a screen that's loaded do you have a screen named each screen so you see it makes sense i hope that makes sense smash the thumbs up button if you that did make a bit of sense right uh what's up nancy what's up julius what's up adria nice stuff good stuff guys all right so in this case get a ride works right that's awesome so we've got some navigation work in right now okay so what i'm going to do now is i'm actually going to go ahead and create these under sort of ui components right and then we're also going to have the google auto places complete all that good stuff happening shortly right so right now in fact you know what let's do the auto let's do the places api i want to have an input field where when i type in it comes out with some pretty cool stuff right i want to have you know when i type in the input field it will say yeah like london you know like um you could say like america or canada or you know germany and the different locations addresses and everything i want to do that stuff right now and that's going to use something called the google places api okay almost 1.4k likes amazing stuff guys so what i'm going to do now is i'm going to go to my home screen and i'm actually going to render out the following so on my home screen i've got where is it going yeah i've got the i'm going to create actually use a package called google places auto complete okay so they're very powerful sort of you know package what i'm going to use now so if i go over here and type in react native google places auto complete we're going to use this github library okay so this is a helper library sort of a nice little module that we can use and this is the goal that we want to achieve here right so we're going to have this kind of auto complete functionality first thing we need to do is we add this package to our project okay and we need to get a google places api key as well okay so i'm going to go ahead and do this now so i'm going to go ahead and say command j go to my zsh yarn add react native google places auto complete there we go right the the energy today is actually untouchable i think it's actually the most insane energy i've ever seen on one of our builds it's it's it's just crazy mind-blowing remember i am running a challenge next tuesday so sign up first link in the description for the airbnb react xjs challenge it's gonna be huge ten thousand pound well surprises right so it's looking pretty good right now so what i'm gonna do is i'm gonna go back to this and then here we need to go ahead and set this up now when you get these keys right so what i mean by the keys are we're gonna be using the google directions api right so there's a there's three things that we're actually gonna be using in today's build it's gonna be the directions api the google places api which is for the auto complete and then the distance matrix api which allows us to have you know all the different things for you know like uh where it tells me how long it will take to get from point a to point b and all the other stuff right so i would recommend that you need to go ahead and you do you i mean you do need to enable billing on your google account but it's completely free up until a certain point so don't worry remember these are demos they're good for you to learn and stuff like that so you just need to do that and that doesn't mean you just freak out at this point and leave it means you just get on with it right you do this so we're going to click on this google places api so what you need to do to get to this screen is go to in fact what we can do is go to google cloud platform so type in google cloud platform okay and then what we do here is we go ahead and we go to cloud.google.com okay and now here you want to go ahead and have your google account click on console okay now i've got a few different projects it'll probably load up one of my old projects um so we've got netflix we've got a bunch of other stuff so what i'm actually going to do here is go to the top and you just need to create a new project now there's two there's a few ways of doing this if you create a firebase project say you want to use firebase online you create firebase project it will get created here as well or you can go into cloud.google.com and do it from here yourself i'm going to click on new project over here right so new project and i'm gonna go ahead and say something like uh let's just type in uh uber club we'll just say uber demo youtube right and then create okay this is nice and it's gonna create the project over here right so once that's done i can click on this drop down here and i can see you see it's creating that for me all right so if i click that give it a second uber demo youtube i'm going to click that and then one that once that's done i can go down here to my navigation menu i'm going to go down to apis and services now again as i mentioned you do need to enable a billing account here right so to make all the sort of api stuff work create a billing account set up i'm not going to go into it now but you're going to need to do that it's very easy to do by the way then you go to your dashboard for your api and services okay don't worry don't let this freak you out remember just take the video slow right and do it at your own pace it'll work and you'll enjoy this trust me 1.4k likes that's what i'm talking about let's say 1.5 wow right and then what we're going to do is click this enable api and services and i'm just going to enable all of them right now while we're here right so first thing i'm going to use is the directions api so this one right here directions between multiple locations so i'm going to click this and i'm going to go ahead and set this one up right now okay so i'm going to click on enable right so this one's going to be enable right here and give me one second right so that works pretty nice right so we've got the directions api and uh and then we're going to go ahead and also use places api as well right so we've got directions api here and i'm also going to do places api so we need to find down here that usually has the similar ones here so place today but i'm going to click that as well make sure you're in your correct directory here as well so we're gonna enable that as well okay and click enable here okay awesome stuff wait for it wait for it wait for it let that sort of do its thing and now we've got our second uh api and it's got the directions api places api for the auto complete and the final one is the distance matrix api and that's for all the sort of you know calculations lot of stuff we need to do as well so i'm going to click enable here as well right and now we've enabled all the things it gives you the pricings and everything but you do get 200 free which is huge for your quota right so now we've enabled all your three apis that's the first step the second thing we need to do is we need to go over to our credentials tab now i'm going to click here and just double check there's nothing sensitive here but you click into the credentials tab to get a key and this key is really nice where the way it works right so i'm going to show you my credentials tab so we've got this so you've got api keys now right now you have no key but what you want to do is click create credential and what's nice about google platform is you click on create api key over here and it says create an api key oops okay i'm gonna actually gonna i'm gonna i'm gonna delete that key after i'm gonna do that right now anyway but point is you have an api key right you wanna copy this at this point and we're not gonna restrict it okay so we're gonna click close and then you have your key here right now i'm going to generate another key in a second so that way that key is not exposed but the point is get that key right copy it get that key and copy it okay now once you have your key that's going to allow you to actually go ahead and access all of the different apis that we have attached over here okay so that's going to allow you to have all the different apis sort of attached here right so once we've got that key that's like our you know that unlocks access to everything so what i would say at this point is go to your your code go to your sort of the app.js level and hit plus and we need to store this key in something called an environment file now by default this is getting put into github for some stupid reason so you want to go ahead and add this to your github ignore file so that way it doesn't get committed you want this to be private you don't want to push this to github okay to add this to the git ignore file now once that's done we're going to go ahead and actually add it over here so inside of your environment file what you want to do is have your something called google maps key equals and then this should be your super secret key so super secret all right something like you know that's going to be the one that you copy and paste right you want to paste that here now i'm going to go ahead and pop mine in inside of here and then i'm going to hide it that way it works for me so i'm going to pop this on my screen right now and there we go so i've just added mine in and then i'm going to close my environment file so i've just done that exact thing and you don't add the little air quotes right you just add the value in itself straight away okay so now i've got my environment key working okay so my environment key is inside my environment but in order to use environment keys these are very handy by the way because you can actually have a production environment key when you deploy your test development key and all that stuff i'm not going to get too far into environment variables at this point but what we're gonna do uh is go ahead and check this out so um we're gonna create we're gonna we have to actually load something called a dot n v right so it's actually a far a nice little package called uh react native.m and this allows us to use environment files inside of our application so i'm gonna do command j and i'm gonna do the following yarn add react native.m okay and it doesn't just magically work environment files are very easy to use in things like you know react and normal sort create react app and next chest when using react native you need to a little bit of configuration it's not that hard don't worry all you need to do is go to your babel or bible however that how do you guys say it bible.config frank fernandez says yo saying i'm late to the challenge but i'm gonna finish it for sure thank you for your contribution to community appreciate you frank thanks for tuning in dude nearly at 1.5 k likes let's keep going strong guys all right so here we've got babelconfig.js i'm going to go into my bible config and we need to add a few things over here okay so where we have presets we actually need to add something called plugins right there's actually going to be plugins and it's going to be an array now what i'm going to do is i'm going to pop it in here and show you exactly and i'll put it on the screen right now so you can see it right so plugins is an array we've got an inside array there and then we've got the this right here so you can literally copy this out as you're doing it right and what this is doing is it loads in react native dot inverse so into that bundler right because what we need to do is we need to bundle those environment variables into our apps that way when it gets built the environment variables are there to use remember environment variables are there for sensitive information right easy to go in there right so this point you've got the module name and this is actually pretty cool this allows us to just kind of have uh when we do an import rather than having some really weird kind of from react native. and we can just say from atom and it was kind of nice and this is the path to the environment file okay hit save now what we might need to do i don't know if that works out the box but maybe we can go right so that's pretty much done now now it will load in okay so now this will load in okay so at this point we're gonna go back and go to app.js okay so it's looking pretty good so at this point what we're going to do is go over here and we're going to go ahead and continue on with the build so we have our key and we're going to use that google places autocomplete to go ahead and get that nice functionality right so google places where has it gone um i'm going to close my credentials tab because we've already done with that stuff so the next thing that i want to do is inside of my home screen i'm going to add in the react native google places auto complete functionality so this was actually this one right here remember that gave us that nice little auto complete all right so we're back here let's carry on now so i need to import this as follows right so for to get this working so i go into my home screen import at the top and we have google places auto complete from there okay now if i want my key how do i get my key i go ahead and i say import the google maps api key from that environment file and that's what we used we use babble config to go ahead and set this up so you see there's a lot of like kind of you know threading the needle in kind of in the right place to kind of get everything set up but once it's working it's pretty simple right so you just need to go ahead and take your time to get it right everyone should have a water break i'm sipping today the bladder kind of come gives up for me a little bit redox gives you like global variables in that yes that's a very good way of doing it jackass so uh sorry i didn't pronounce that right all right um it's never too late i have to have a sunny adventure there you go all right so import the key like so and then what i want to do is i want to have the google places auto complete you know component inside my app so you see it takes a bunch of things here the key itself you know all this other stuff on press what happens blah blah blah you know do you want to fetch the details and all this other stuff so i'm actually going to show you how we're going to get it to work in the way that we need to get it working right so underneath our image tag above the nav options i want to have that being rendered out okay so i'm going to say render google places auto complete it's a self-closing component and a few things are going to happen here right so the places api that we're going to use is called google places right search you need to add that in so google places search and this allows us to search for the different places in google's kind of directory let's call it and then the thing is when i type into this input field i don't want to search on every single type so i'm going to use something called a debounce so they can have a nice little functionality called debounce and this means that imagine you're typing only after you stop typing for 400 milliseconds will it execute a search that's going to you know be a lot more generous so you always want to have a debug in these sort of circumstances okay it looks pretty good at this point i'm gonna have a placeholder as well and this is gonna say where from okay hit save probably an error at this point so it says cannot be found in your project okay so we already you know we set up barbell but what we need to do is when we do that we actually need to restart our sort of you know our compiler so at this point i'm going to do ie to open on ios i think we may need to actually restart it properly but let's see what happens unable to resolve the module okay that's fine so at this point what we need to do is cut off our server because whenever you add something at that level you have to restart your server right expo start and then we're probably going to get chrome eat us up right now so brace yourselves guys brace yourself all right isn't it so unforgiving right but it's gonna it's gonna cause me to lag a little bit chrome oh god my cpu just takes a hit when it opens right so now it's going ahead and loaded it up and then when we've done that already i'm going to do i to open on ios don't worry this will go away in a sec if it doesn't then we just need to set up a few more things we just need to double check what's going on opening on ios okay and then i need to do r so it says new update available downloading so now it will rebuild the bundle because we added something into that barbell bundle okay so just bear with it do r to refresh okay so i mean we're still getting this issue so we need to actually do a little step here then in that case let's go ahead and check out what's happening so let's do uh reader react native dot m and let's just go through this up again i think i might have missed something react native.m we've done the install we've added this in we've done all of this stuff that's fine in safe mode you we've done that already duplicated okay so in this case whenever you have this issue just go ahead and do a few little run-through steps do a npm install or a yarn to go ahead and make sure everything's up to scratch again and in this case yarn start reset cache so this this is a problem with our cache right this is where we've kind of you know there's something wrong with the cache and it's causing this issue to happen what i would recommend here is to go ahead and completely close your simulator and let's go ahead and give that a try now we'll figure it out don't worry so open up the simulator as well i'm going to open a new device ios iphone 12 pro max and then we're going to reboot our phone [Music] we can do these steps you know you can delete your node modules when you're uninstalling a lot of stuff it's going to take a while i don't really want to do that every time let's give it a sec this is all because we made a big change to our barber config which is fine you know we were prepared for that um we just need to quickly get over this issue and then we're good to go and i'm going to check my bible config to make sure i'd make the made the correct changes okay i'm going to copy in my config and see if there's any differences here so i'm going to go ahead and check yeah we're good okay to this point we're going to go here and i'm going to go ahead and open on ios and we still get this issue okay so not a problem we can fix this we're gonna go ahead and this is what i like you know you guys get into debugging situations with me it's natural it's normal okay so bible preset expo rant native.m or all good let's see if it still finds it okay we still got this issue so delete no modules and run okay so when this happens there's a few things you can do right what i would say to do is try this one first you do rm dash rf node modules okay so node modules and what this will do is it will delete all of your node modules in your directory right so this will actually get rid of all my node modules which has like a full clean out a full sweep right um and then we need to reinstall our own module so that's going to take a minute right so we're going to give this a little bit of a second and then we're going to go ahead and figure this one out okay and then once we've done that we can go ahead and come back and you know figure this one out again right now this is deleting our node modules folder from our project you just gotta be patient with it okay so the m-file has to exist we've already done this on defined we've already done that as well so it's annoying right now we just have oh oops already messed uh okay i actually messed that one up should have just done this should have done that beyond star ox but damn it that's the one i needed expo r dash c okay i was a silly mistake of mine but instead we're gonna do yarn to re reinstall all of our node modules this is a debugging step okay it's okay to do it an environment file you don't have to do that that's not the the solution for it all right so we're just downloading our sort of environment files again we need to start expo again but with dash c that was it so you get rid of your cache okay thankfully no just is super small yeah ryan hell yeah they're so small dude well that's why we're here for 23 761 files right and trust me guys once this is done we move pretty quick right so the next thing that we're going to do is we're going to go ahead and set up the autocomplete we've already set up redux which is actually you know one of the big things that we need to do now it's going to be quite a smooth transition the next step would be to go ahead and incorporate the maps a bunch of ui elements and then we go ahead and pull data from different places push it in the way that we need to to get an uber experience built out so if you're excited for this smash your thumbs up we are nearly at 1.5 k likes support as an energy today has been incredible and while we're waiting go ahead and sign up first link in the description to the airbnb challenge and the second link is for if you need a refresher on your react basics okay so make sure take advantage of it it's absolutely free and i would not say it if i didn't mean it like it's helped out a lot of people it will help you out too okay where is the fiber internet fundraiser you know it is it's because of the house right we don't actually have bloody fiber here this house otherwise i would have you know a gigabit speeds if i could right i'd pay however much they wanted for that okay so we've got this up and running we've got the dot env file for this okay cool and then once that's done well i'm actually i'm going to stop running my my server right now and this is one of those things you know don't freak out don't don't get scared when this isn't working you know just go ahead and take your time with it it's very easy to you know when things don't work to be like oh my god i'm not a developer yeah i freak out and it's okay it's all good right in the meantime let's go ahead and have a look at some things let's have a look at react native maps this is what we're going to be using so react native maps this one right here and it's quite a nice little component right so we need to go ahead and install this afterwards and then you can see you you can pass in a bunch of things and this will actually load out the different maps whether on ios it would be apple maps on android it would be google maps so here you go okay uber clone done and we've already done so now we go back here and we need to do expo and what was the command again it was expo dash export r dash c right so let's do that expo r dash c right and this is kind of restarting expo i guess okay so it's gonna start up expo with zero cache so this should fix our caching issues which should force the environment file to load we should fix our issue okay uh it works on my local as well which is a bit annoying so it's all good we'll figure this one out all right uh manisha's my first session works loving it thank you oh go chrome brace yourselves right i think there should be a meme on this every time chrome comes in the attack on the computer all right there we go nice so at this point we've got this up and running i'm going to do i to open it on ios ignore this for now this is a dead screen this is ode okay and then dismiss that right now and it says opening on ios opening on iphone 12 pro max and then if all went well then you just seen a live debugging fix for what we were doing i hope it does because although it's going to be super annoying evan says keep on you got this exactly dude i don't know why i said american accent i just got like an american vibe of that new update available downloading okay interesting building javascript bundle okay we're getting progress right and it's building out the bundle okay so let's do let let do its thing and in the meantime we've got react native maps over here so like i said before we're going to be setting this up and you can even have markers on this that's how we do like point a point b and all of that stuff happening right game alex says first live session love it so i'm talking about amazing stuff peter says nice code that's what i'm talking about dude yeah so we try and keep the standards quite high here so it's building up the bundle and yeah let's just be patient with it as i mentioned before guys we've done all the heavy lifting at this point so now it's actually quite a smooth build process believe it or not we've got quite a lot of like interactivity a lot of kind of you know cool things to look forward to right now we're going to be building the sort of auto complete functionality then we're going to be having destination so how do we get from point a to point b right we're going to do all of this fairly quick i think right it's gonna be pretty fun once we get moving with this and then once that's done we're actually gonna have you know the calculating the travel time and then passing all that information rendering it on the screen and i've got a nice little calculation to figure out how much your ride should cost okay so 98 done let's see how this works out yeah jacob fry we're using tailwind dude awesome okay nice yes that's what i'm talking about ah the demo goes to being nice to me today it's not bad uh lyanna dp says let's go sonny you're a real inspiration thanks for you do i appreciate it dude thank you so much for tuning in almost at 1.5k likes let's go guys and if you haven't already remember subscribe to the channel thumbs up it helps the channel grow and hit the first link in the description sign up to the airbnb challenge it's gonna be sick it's gonna be this level of energy for five days straight with me and i've got an ebook that i'm giving you to for free just for being a part of the team all right okay we've done this crazy environment crap right so now we've got the environment's uh navigation stuff working cool so now we're going to carry on with that autocomplete stuff right so we went ahead and popped in google places auto complete so right now it's not showing right so obviously we need to go ahead and fix that so what i'm going to have instead is on the home screen we've got some styles that we need to apply right so i'm actually going to do some inline styling here again it's no rule right you can you can use whatever styles you want to do class make it into a class if you want i'm going to add a container style here and the reason is is because the classes that they have you can override them all right so the class the part that i want to override here is flex zero and you just need to do these to get it on the screen right trust me i've tried it a lot i've done a lot of few things right so it works and then you can see text input i'm gonna make it a little bit bigger and you see how it comes up when you say font size is 18. i want to make it slightly bigger there we go okay so right now if i type in nothing's really happening okay so the reason why is because we haven't passed our key through it has no idea how to query google so in this case i'm going to add a query attribute and here i'm going to pass an object in now for the key i'm going to pass the google places key okay so google maps api key there we go import my google maps api key and what i'm going to do is comma and this one i'm going to say language is en for english right and obviously you can do different languages or you know add internationalization to the app uh kazuo says you're my hero amazing stuff dude thank you so much appreciate that man all right so i'm gonna hit save okay now at this point right we should actually have you know if i type in let's just have in london oh that's sick 1.5 k likes as well clutch timing i tell you man honestly that's so sick look at that guys we just got our first kind of you know interactivity element where you've got you know like if i type in let's just say uh germany boom look loads of stuff in german didn't mean you get some texas stuff happening as well but germany psa all right i mean let's just type in like let's say scotland there you go scotland road liverpool okay you've got loads of different places point is it works right looks sick works and it works just as i wanted it so at this point i'm going to do the minimum length should be two so you should add two different things because you know you might have uk i don't know but you might have that right and then you see right now it says powered by google i don't actually want it to say powered by google so i can get rid of that i can say enable powered by container is false and now it gets rid of the enabled by right it's that way kind of you know white brands it i guess right so that kind of makes it a little bit nicer guys you're killing it today absolutely crazy energy okay so at this point enable power buy container is out and then by the way you know when i kind of press this okay we actually do fetch some information so what i'm going to do is i'm going to say on press and what this gives me back is an arrow function right and then it gives me a few details with it the first one is data the second one is details now we need to protect ourselves here and say that the details is by default no unless we say fetch details which we are going to do here the details include things like you know geometry locations this includes things like the coordinates now the coordinates are crucial because i'm going to be storing those coordinates rendering it on a map afterwards and again where do we store it we dispatch an action which goes into the data layer aka redox and then we use a selector which we set up earlier as well to pull the information from the data layer aka redox use it in the component okay so looks sick we've got the here happening so now i want to do is just to prove to you that we get some stuff back i'm going to console.log data and i'm going to console.log details and now if i click save and i open up command j and i go ahead and just go let's just pop in something like uh london london bridge click it and now you can see look we get a console log and you see all of these things like one of the best place in the world a beautiful bridge at river thames so this all comes from the details api that comes back from google right now if we go all the way back up uh you should see the first thing that we got logged out was data so we've got a bunch of information here right now if you look into this you can see there's loads of things i've saved you a bunch of this effort and i'll tell you what to get out of here but there's loads of things that we might want example geometry location longitude latitude so that's what we're actually going to be using to kind of get what we want out of this right so let's go ahead and get this done uh mohammed says keep going that's what i'm talking about this is a good way of learning and react native yeah man that's what i'm talking about so okay we've got the information coming through from an api now right this is coming from google places api now what we want to do is i'm also going to add this a little bit it's kind of this nice little functionality where if you enter the return key you go ahead and get the search right so i'm going to do that as well so if you hit the return key on the keyboard and by the way if you want to bring up the keyboard command k brings up a keyboard sort of on the emulator it helps you sort of figure things out okay so when we press the uh the the when we press the option like in london bridge whatever i want to now set the origin to the location where i press okay so we already went and set up the data layer when we first started when we first started we set up the data layer so what i'm actually going to do here is get a few things to actually push information into the dll so in order to do that i need something called a dispatch action or a dispatch or variable now the dispatch is remember we have actions which allow us to like change the data in the data layer but we need to dispatch the action so to me the way i like things dispatch is like a gun we shoot the action into the data layer with the payload which has the information that we want to change you know or manipulate in the data in this case to get the dispatch we say const dispatch equals use dispatch and then we import it from react redux okay so that gives us our dispatch you know variable and then with the dispatch variable we can go ahead and we also need to import something from here so i actually i'm going to import the set destination and set origin actions from our nav slice slices okay so this is actually going to be very very helpful for us in getting this working the way we need to okay rizwan says these sessions are much better than udemy cause that's my goal dude i i'm not a fan of you to me i prefer to do this kind of teaching okay so at this point what the way we sort of push data into the you know redux store is we say dispatch and then we push the action in so in this case the action is set origin and the payload so in this case you can see it is action creator with payload right so we pass the parentheses and the argument that we give in is an object and the object here we can define however we want right so i'm going to store two things inside of this object for the origin the location and the location is going to be a set of you know there's going to be some information from the api response so that long api response geometry.location right so what i'm actually going to do is it's going to be details.geometry.location and what this will do is it will give me an object with the latitude and longitude and we're going to store that inside of the redox store so that way when i'm down the line then i go ahead and use you know um john pablo thank you so much whenever i go ahead and access it down the line in a different component on the map component i have access to it okay so here i'm going to say description is the second one and this is going to be like some text which kind of helps me show on the screen or you know whatever is where i'm searching right so in this case if i type in london uk i want to store that somewhere aka the description so here i say data.description okay so this is the information i want to keep from the response the second thing i want to do is i want to make sure that you the destination is null okay so i'll by default it is no but imagine if i go back and forth between the screens i just want to make sure that i dispatch and i see set destination as null okay so i said destination as no okay this is looking pretty good right now okay so we're gonna set the origin set destination at this point so we test it right so we make sure it's refreshed we do london uk yeah right okay so nav set origin is not a function okay interesting so we've actually messed something up here we do dispatch set origin and it says an app slice is not a function okay so we need to fix something here we've got set origin set destination and i'm importing this from here slices nav slice and in in nav slice let's go over to now slices just double check set origin is a function from our reducer that we are going in next point i'm just going to double check that i've actually coded this up right by the way um so there we go let me just double check water what changed nothing change to that oh okay well good um if i go ahead and do this let me go back let's just try this out one more time let's do london bridge okay so it's just a refresh that we needed to do everything was actually pretty good as we saw it so let's go back to our sometimes in react native it can be a bit kind of you know it can be a bit weird to be honest when we're out there so i'd recommend sometimes just do a proper refresh and do a reload of your app and see if the problem still exists now if i could get a ride okay so this is now actually storing in redux right so if i do london uk it's actually storing the information in redox the next thing i need to do right is actually on the get a ride screen is render out a map so if you're excited for the map start part smash the like button subscribe as always sign up to airbnb challenge first link in the description and we're going to go ahead and set up the map now okay so we're going to go over to the map screen so we've already got the origin information set up as we needed it so the second step is the map screen okay this is where the map stuff goes basically all right so for the map screen a few different things um we're actually gonna have um we have a view and then we have a an actual map okay so you see when we render this map it's going to be half of the screen so this is going to be half the screen over here and then the other portion where we've got all the details it's going to be another view so what i'm actually going to do to prepare everything here is i'm going to have two views i'm going to have one view and i can use emit here i can say view and i'm going to have another view there's like two divs now for the for each view i'm going to give it a tailwind property of basically it's going to say height of one half so we'll take up one half of the screen each tailwind we're going to say height of a half of the screen and this will give each of them an equal distribution across the screen we do need to import tailwind so i forgot to do that my bad don't hate on me react native compiler right so save okay and then and also yeah happy friday everyone yes i hope you had a good week guys i'm definitely having a good week this way so now we've got this and then let's just load up that screen so get a ride okay we're on the screen cool and then you can do safe area review but we're not going to need it because i actually want the map to kind of push into the dangerous area so that's why i don't want to have the safer review and then for the map let's start with the map right so i'm going to create an actual component for the map so we've got all the logic separate so i'm going to say map.js r n f e s react native functional export with start sheet okay and here i'll say i am a map okay whoa andy b super chat two dollar donation thank you so much mail man delivery and wish me luck and my interview dude good luck at that interview i love when you comment man you know i'm gonna call sonny the mailman because he always delivers that's awesome did thank you so much for tuning in and good luck man jonas it says greetings from kenya awesome stuff my dad was from kenya okay so this is pretty cool we've got this working so map so on the map screen i'm gonna have in the first view i'm gonna render out the right map then here i'm going to go ahead and render the component for the map so we do this and you can see i am a map it's hidden up there let's get rid of the hiss i'm the map text okay but the map right so it says i'm a map over in that dangerous zone so how do we actually get this thing looking kind of nice right so what i want to do now is have a map view and that comes from react native maps now i showed you before previously how to get that kind of up so let's go ahead and see where has it gone uh yeah so here react native maps right so it's a github repo awesome repo and let's go ahead and import this install it firstly so we're gonna go ahead and do yarn add react native maps right so when it doesn't tell you you just do that you need to install that so yarn add react native maps like so hit enter and then once that's done we're going to go ahead and import map view from react native maps let me know what's your favorite part of the build right now import map view from react native maps let me know and quick water break as well again let's get dry dude 16 nearly 1600 likes and guys we're almost at 70 000 subscribers that is insane right this codex box says i've been following you from the first video list oh nice learn a lot but i'm working full time at text up in nigeria with the juicy pair that's sick man well done okay we installed the react native maps okay so the next thing we need to do is actually have the map view rendered on the screen so i mean let's go ahead and copy this example here and just see what comes out right and then that way you get some indicator of what's actually on the screen so i'm going to go ahead and simply pop on the actual map view as our entire component so that view cannot render map view where the hell is it it's basically what it's saying to me i'm going to import that and the marker because eventually i want to have that little dot that pin that kind of drops on the screen so hit save let's go over here and we don't see anything now the reason why we don't see anything is because we need to give it a bit of style right so we need to go ahead and say style equals and i'm just going to give it a tailwind style of flex one so it's going to use up as much room as it can flex one and it's already in a half container which means it should use up half the screen i always forget to import my tailwind let's fix that right now right let's go over here chuck it down here save get a ride boom san francisco baby look at that sick that looks awesome man look at that look at that ah smash the thumbs up but that's cool all right so at this point this is looking kind of nice right and um we're gonna have now uh sort of actually so you can imagine where we're going with this eventually the origin will get pulled through here and i'll show that stuff out i'll show you how it works okay so what we're going to do now is i want to actually have it so that when you click get a ride it shows my origin that's the first thing right so imagine if i have london uk click get a ride it should show london here all right ricardo olivieri thank you so much for five euro donation you're doing a great job bro i'm really grateful for everything i've learned from you best robots from portugal i love how we're international thank you dude appreciate you so much for that donation you know guys i'm gonna have a nice sushi tonight i'm telling you uh but thank you so much guys really really appreciate it and this makes me honestly keep bringing more and more value so i really do respect you guys for doing this all right now among uh right now it's very busy the map it's got loads of different things which aren't really useful when we're kind of you know having navigation so you can change an attribute called map type to mute it's standard and you see how it strips the map down i personally think that's way more better when you're doing this because uh it's you know when you've got navigation all you want to see is the actual navigation so that would be my advice here right so [Music] let's continue on so we've got the style we've done there okay nice so the next thing we want to do now is actually have the let's have the the location pop up here so how do i pull in my remember if i push the information into the data layer how do i pull it all right so first thing i want to do is say const origin equals use selector which is how i pull something from the selector remember we created all those selectors in the nav slice at the bottom right so i'm gonna close that now if i select origin so i'm gonna use that here and say use selector select origin and what that does is that in its in essence is actually gonna go ahead and go into the state nav and give me the origin so whatever the value of the origin is in the global store it will give me that and that will get pulled through here now remember that was an object that i set it to so for the initial region here i'm actually going to do something pretty cool i'm going to say origin.location.latitude okay and here i'll say origin dot origin dot location dot long okay hit save now it should okay there you go it's london now right now for the delta and long distance delta this can be extremely confusing when you're starting off right so i'm not going to go too much into what a delta is but for now i'm going to i've actually implemented a very nice way so typically we set this to this if we want to have you know a street level kind of distance right now this is the only time we're gonna have to modify that value and then afterwards i promise you'll be easier okay so i'll show you a different little trick to get around the delta so you don't want to have to calculate your deltas it's annoying it's a headache what the hell is even a delta it took me ages to figure out but um that i've got a nice little solution around that that will help you out and it'll fix so much headache and time for you okay so right now if i go back and i type in let's just type in scotland okay scotland uk get a ride and now you see it's taking me to scotland i guess where's this let's take this type in something like la let's do los angeles los angeles california usa get a ride los angeles so we're somewhere in l.a right now see that nice awesome let's actually do somewhere a bit more kind of you know identifiable so let's do london bridge london bridge luke uk get a ride london bridge nice that's awesome right whoa beethoven crusader super chat 20 mexican dollars keep all the good white bro greens from mexico i love this guys thank you so much this is just crazy honestly i can't get over it thank you so much guys nearly at 1.6 k likes let's continue on so the first thing i want to do is actually drop a marker as well on that bridge right so what i'm going to do here is underneath the map view i'm actually going to firstly make the map view no longer a self-contained component so it's actually going to have a children so i'm going to make it a actual parent component and then inside the map view we can put other things like for example a marker now i only want to render this little kind of pin if their origin is there okay um so at this point what i want to do is i want to say origin and this may be undefined so i want to protect myself by saying it's optional which means that it could be there but if it's not there don't freak out don't break basically it's called optional chaining and i'll say if we have the origin location then i want to render out a marker component so i'm going to render out a marker and we did import that earlier on this is a self closing a self enclosed component and this marker what i want to do is i'm going to give it a coordinate right the coordinate for this marker is going to be the latitude and longitude from the origin so very similar to what we did earlier okay and there you can see we get a little pin drop right awesome stuff and also if you want to look at that look around you can hold option and then kind of zoom in around and this does actually support zooming in and out of your app as well which is awesome right so you see we've got a little pin drop now what i can do is i can give it a title description and identifier all right so what i'm actually going to do here is pop in a title a description and identify and hit save and now if i click here origin london bridge london uk so you could say like your starting point you can change that to whatever you want right live location i didn't include because i didn't want to have my live location pop up but you can easily kind of implement that if you follow the documentation um but yeah so this gives you a very nice starting point for that but say we did something like um give me a give me a location guys let's do something like uh facebook headquarters facebook i don't know headquarters yeah facebook i don't know dc headquarters street north so it found somewhere and i guess that's where facebook headquarters is yeah look so it's got some kind of i guess facebook's there i guess right but it works right so at this point what we're going to do is we are in everything india all right so i want to actually kind of hide these options by the way as well if you don't enter the origin so how do we do that as well so i'm going to go to my nav options and i'm actually just going to upgrade this a little bit so that way if you have you know if you haven't filled out your details there it's not going to actually be it's not going to be clickable because we don't want to go to the map screen if you haven't got our origin so the way that i do that is i say touchable opacity is disabled if there is no origin and because we're trying to access origin i need to pull the origin in with a selector so i say const origin equals use selector from select the origin all right so that's how you always pull information about once you get used to that pattern relatively simple now it looks the same right so the way that you get it to look a bit different is you can go ahead and say for the view i'm actually going to keep this one pretty simple i'm going to say the style of the view here so the container that you see over there this view style is going to be tailwind so we're going to pop in some towing did i import yes i did and then i'm going to say okay only actually apply this tailwind so i'm going to put in a print you know jsx little tag i'm going to say if there is no origin then i want to render out opacity 20. right so now if you see if there's no origin then we should be rendering out blah blah blah okay so if i my app's just not restored let me go back here and do r to refresh our app and let's see now okay there we go so now it's only gonna you know show me something if i go ahead and pop in an orange so as soon as i hit london then it becomes a clickable button then i can click it then i get london so that's how we can pretty much go ahead and do it right so that's going to help you out a hell of a lot um oh wow you got loads of people rotterdam way merlot park warsaw right now i'll tell you what i'll do someone let me go ahead and pick uh one hacker away all right let's go and do one hack away one hacker away oh look menlo park and wait for it there we go facebook's building look at that guys i hope that smash that thumbs up um that works you know um so all the times by the way will be in the description after this video goes up where we chuck it on this straightaway afterwards so within you know a couple of hours they'll be up and you guys can get free you know complete access to this video it's gonna help you out a lot when you're watching this back okay so at this point we're it's looking very good so now we need to implement the bottom section okay so we're gonna go back and over to our map screen and we need to go ahead and continue on with the rest of this so i mean let's actually head over to our map firstly and see if we need to do anything else over there for now so i'm going to hide that one j to hide now over at the map screen right now i think we're pretty good so far okay we're pretty good at this point so far we need to build the bottom section now so going back to map screen the second view so the second half you see tailwind half this is what we're going to be doing next the map screen okay so for the map screen this one's kind of cool right so you know how we have a stack navigator here you can actually have a nested stack navigator which could be the size of this area here which can have its own sort of swipeable stack i remember as i mentioned before swipeables pretty much be you know you can stack forward like no i mean back and all sorts of stuff but yeah this this should help you out quite a lot right so at this point oh nice cameroon in the house all right so what we're going to do now is we're going to go to the bottom and i'm actually going to create a new stack navigator okay so for the map screen i'm actually going to go ahead and say const stack equals create stack navigator this is gonna be an in like a sort of i guess it's a lower level stack navigator right so we've got the main one in app.js you know this stack navigator so similar principle and now we have one in our map screen okay and what we're gonna do is this is gonna live inside of here so stack dot navigator all right so we're gonna have a stack navigator and then we're gonna have two screens that we're gonna render here the first one is gonna be the navigate card and this is going to say where do you want to go to right and then basically when you click you know you enter your options blah blah blah it will go to the next screen which will say ride options card and that's going to be the one you know uberx uber xl uber lux and all those things okay so what i'm going to do now is i'm going to go ahead and do stack screen it's going to do stack screen and we've got navigate card and navigate card component which i don't have at the moment so i'm going to create a navigate card component to prepare later on so navigate card.js react native functional exported component with style sheet and say yo and then hit save and go back go back to our map screen and import the navigate card component so uh to import that i just need to do the following so i actually need that there let's say import from and it's not going to be the map it's going to be uh navigate card navigate card there we go okay and now we see yo right so you see here we've got yo nice we're gonna have another screen which is gonna be four ride options card and that's gonna be the one where we pick the ride you know like uberx uberxl uber lux and all that stuff so i'm going to go to my ride options card component over here which i'm going to create dot js and again react native functional export with the starship there we go i'm gonna say pick a ride pick a ride right okay awesome so at this point it may not be clear as to okay how the hell is actually doing anything or working right so firstly we need to fix this and have an import for the ride option so i'm gonna go here and do a ride options card save and then you see if we go to let's just say london uk get a ride we're in london yo and now we can actually have a navigate and then navigate here would go through to the next area on this screen okay so at this point what we're gonna do is um nice what's up guys we got so many new people tuning in make sure you hit subscribe if you're enjoying this content it's gonna absolutely be coming more and more often literally one like away from 1.6 likes who's going to break it i wonder who's going to break it oh there we go 1.6 actually went straight to 1.6 1601 but thank you so much guys that's so sick absolutely crushing it today um oh wow make sure you're subscribed right if you're not subscribed and you're one of those like us please just hit the subscribe grow the channel all right it's such an amazing vibe from you guys right so what we're going to do now is build out the actual navigate card okay so navigate card we're actually going to go ahead and set a few things up here so firstly i want it to be the safe area view because what can happen here is you see underneath here you don't want it to go into this dangerous area as well you kind of want it to be above that at all times so you don't want to kind of break that zone so here i'm going to do a safe area view and i need to go ahead and import my safe area view like so and you see it doesn't look much different here because it's not touching the bottom but it will prevent it from damaging the bottom okay now this is actually a gray background so we're going to go ahead and change that right um and yeah so let's go ahead and check this out uh thank you so much frank he says i really wish the best for your channel it's really invaluable thank you again man thank you so much dude for tuning in there's people like you that make this possible so i appreciate every single one of you all right so we're going to add a style here and this style is going to have a background color of white so you can do it two ways right you can do background color and white and all that stuff as i'll show you usually you could do tailwind and you could do flex 1 bgy all right so in fact we could just do that let's just do that let's go ahead and pop this here tailwind let's go ahead and pop it here tailwind dash dash and we can say bg white oops bg white flex one now you can see it's white all the way if i do bg red 500 you see it's that bottom half right so we're gonna do bg white flex one so it should take up as much room as it can the second thing i want to do is i want to say good morning sonny right so you know like on uber it says good morning now obviously we're not we're not got login and things like that in our app right now but you can upgrade this app after you're done you know sharing your stories by the way if you're watching this and you are enjoying it make sure you shoot an instagram story and say i was watching and you know everything else my instagram handle is on the bottom is sss right so you see it right there on the instagram tag but make sure you do that because i love it when you guys you know shout out and and see i can see you guys who is actually watching behind this video it's awesome to see we're gonna have good morning sunny here and i'm gonna say you know and you can have your name there to make it cool for you text center so i want to send to the text so you see it gets centered padding from the y so top and bottom of five and a text should be extra large so the text should be excel there you go looks really nice already right um carter says we show the code the code is available on the public github repo i'm going to be pushing it straight off this so it's all available over there if you want it make sure you grab it uh the next thing i'm going to do is add a view now this view is going to be responsible for a few things we're going to have a google places auto complete here as well similar to the one that we had at the top over there and that's actually going to say where to and that's going to be setting the destination so very similar to previously and then we're going to go ahead and have that okay so what i'm actually going to do now is for that view i'm going to style it accordingly so i'm going to add a bunch of styles in here so let's go ahead and do style i'm going to add a border top border grade 200 there's a border top for the view underneath grade 200 flex shrinks it should be able to shrink as and when it needs to and i'll show you why we need that later okay so inside of this view we're going to have a another view which has the google places auto complete inside of it okay so inside of here i'm going to actually put in the google places auto complete so i need to import a few things to get ready for this i need the google google places or complete and i need google maps api key from our environment variable okay so let's go ahead and hit save on that and then inside of here we're going to do the same thing as we rendered before google places or complete component like so self-closing component and let's go pop that in and let's go ahead and start putting things in so we're going to say placeholder equals where to all right so it's very similar to uber's experience you see where to right the actual sort of let's go ahead and check this out the actual wow the likes are still going up this is sick oh my god all right so we're going to do the same thing we have to specify which api i'm also going to give a debounce of 400. now if you don't remember what the dbas does it means as you're typing in you don't want it to constantly be searching on every single one you want it to be after 400 milliseconds if the user stopped typing that it does it what is happening oscar bonnelli 50 mexican dollar donation i think it's pesos right i'm not sure um thanks only for your tutorials it has helped us a lot to improve our react native and reaches portfolios that's sick man thank you so much dude appreciate you all right so we've got this that's awesome man thank you so much dude so for the styles here i'm going to show you how you can have you know like i showed you before you can have tailwind styles or you can have you know your own styles and it's not so in this case i'm going to show you how we can have in this case we're just going to say input let's say the 2 input box styles so it's gonna be the two sort of styles and we'll show you how we can do it in here as well right so for the container override remember these have certain overriding fields that we can override so the google places one for the container i'm going to do background color white padding top 20 and a flex of zero so hit save on that you can see that it's very hard to tell because the background is already white and there's two more fields text input and text input container so if i do these oh it's actually it's not even being applied right now because firstly what i'm doing is i'm changing the background color to a slight kind of gray border radius 0 front 18 and then a bit of padding around the container so i'm going to connect this here by saying all i need to do is to say styles oops styles equals there you go so i've shown you inline styles i've shown you style sheet styles and i've showed you tailwind styles right so you've got all you know all the different ones as well so i think that should help you guys out quite a lot in terms of you know that way you can use your flexibility and creative knowledge as to how you want to use them okay let's keep going right so the stars is two input box styles awesome stuff and then we've got the d-bounce so now i'm going to also add in the fetch details we want to fetch the additional details as well i'm going to disable the powered by container so let's just test it out let's do london and right now we don't see any results and that's because we don't have the query remember the query the query is where we put in our key and where we say what language we're going to do so google maps key goes in here and now let's try it let's do london boom now it has a key to go ahead and query your google apis for okay um so this hopefully should well yes it should be fun for you right now okay so next thing you want to do is have a return key which has so when we hit the return key it's going to also have the search oh that scared me that scared me for a sec the connection dipped oh god all right we're good we're good we're good we're good we're good we're good connection dip for a second we're all good let me know if your stream's still good and i think we're all okay all right but right now what we're gonna do is we're gonna we've got on press okay um let me just double check all right all right we're good yeah oh no bloody scares me so much all right so now we're gonna do is let's say on press and we're gonna say we've got a jsx function we're gonna say uh arrow function sorry and this gives us two things remember it gives us the data and details so i'm going to say data and oops data let's just be data and details and remember we need to protect ourselves by saying the default value is no okay so that looks pretty good and now we're going to do is remember we set the origin this first way but we're also going to go ahead and do the um someone said i paid you a thousand dollars well really where crazy dude um i'm press so at this point i'm going to say dispatch and then set the destination right so we did it with the origin i'm going to do the same thing for this but in order to do that i first need my dispatcher so i'll say const dispatch oops not dispatch equals use dispatch import from a reactor redox it's a hook that gives us the dispatch object and then i'm also going to import my set destination um action from our navigation slice so set destination like so and then what we do is we say dispatch the set destination with the payload that is something like the following so remember before we did the location and the description location and the description okay so it looks really nice at this point location and description and uh guys the retention by the way is incredible so i want to thank you all for still being here it's insane right now after i do that i do want to navigate right so i want to navigate them to the next screen right so at this point after that i need to go ahead and get my navigation uh like sort of item so i say navigation equals use navigation imported from the navigation and then after we actually select something because the natural behavior is you basically put in a you know an address here and then when you hit another like an item here it should navigate you to pick a ride right so here i should say something like navigation.navigate and the route name we gave it earlier was ride options card okay it's saying whoa whoa where is navigation so that's because we need to go ahead and do that no wait what's happening so we've got a dispatch that's why and this right now is oh yeah my bad that's why okay so now let's try it let's do something like we go from london to let's just say scotland and then wait for it my something's not working for me scotland okay so i'm going to refresh my app again don't freak out just doing a refresh i'll request timeout oops okay so hopefully i didn't kill my quota but london and let's just do something like scotland in scotland uk okay there you see that it went ahead pushed the destination into the redux store and then they pushed us over in now if you want to go back you see how we can do that we're gonna swipe back nice so now we have the destination working right so this is actually incredibly powerful we're moving very fast because we've now got quite a lot of power to the app so now that we have a destination we can actually upgrade our map so we go back to the map component now okay so once we're over at the map component now what i can do is i'm going to introduce the actual directions api right so this is actually going to be the directions part of the the sort of you know the build and the way we do directions is actually pretty slick okay so i'm actually going to include a react native dependency here so we're going to go ahead and install a dependency called yarn add it's going to be react native maps directions enter okay so what this does is it sits inside of our map view component just like a marker does but it provides us with you know point a to b directions which is awesome right so what i can do now is i can firstly go ahead and grab my we grab our origin here but i'm actually going to grab a destination as well from the store so i'm gonna say use a selector select destination we're gonna import that as well so now we've got our origin and our destination and what i'm gonna say is if we have both at the origin and at the destination then i want to render out the direction so i'm going to say if i have my origin and i have my directions oh destination sorry destination oops and i have my destination right then what i can do is i can go ahead and say uh let's render out the map view directions component which we need to import okay so once you've installed that package i need to go to the top and install it uh import sorry import like so and then we go ahead and pop it in like so this is a self-closed component it just takes a bunch of attributes to work and in order to get it to work what we do is we go ahead and oh my god we're almost there yeah 1.7 k likes let's go all right so at this point we're gonna we've got the origin and destination so i say origin is equal to the origin dot description so this actually takes some text so that'll do that we say the destination is equal to destination.description and that was actually the text remember when we set it in the store the api key we passed through and this is actually going to be the google maps api key so that is actually we need to pull it in from our environment variables so we go ahead and pop that into you see how it's quite nice how it forms afterwards right so we do that and we say google maps api key there we go and then we're also going to go ahead and say we've given it the key we've given it the origin destination and then they've got these two nice of you know configuration things which are more for the appearance so stroke width and stroke color so one is going to be you know for the width and the color is black uber has black lines around it right so if i go ahead and hit save wait for it oh look it's directions it's got some directions right now um okay right now i need to figure that one out so trying to do something but we can go ahead and now it's got a direction here right so it's doing some kind of directing for us but if we went from rather than scotland let's just say we went to uh let's say london bridge london bridge and then you can see look it goes around the roundabout down the road and then up here all the way over to i mean it's gonna go to london bridge and then it goes to london bridge right nice so we we've got some directions working now right so we've got so a few problems one is we want the map to zoom out at the point at which we have a second so when we have a destination i want it to zoom out and go over to the point where we have um i went to zuma and go to the point where we have the you know a and b both in the map view so to get that working i've actually figured out a really nice way right so what we need to do is we need a reference to the map so that way i can manipulate this map so how do i do that well we're going to use the use ref hook the user f hook is like a massive pointer it points at something you can point out anything so we're gonna have a reference to the map so that way i can attack the map or you know change things with the map whenever i need to say const map reference equals use ref which is a nice little reference uh hook in react and we initialize it with the value of no to begin with we attach it to the map view so all this is doing now is it saying point towards the the map so we're attaching it to this component now this is the cool part okay so this is the part where you've got to pay attention we are going to have a use effect now i use effect i cover in the react basics 101 again the second link in the description you can cover all your you know the react basics use effects what the heck is that you state use props quick little breakdown of use effect this bit of code runs when the app or component re-renders it runs once if i include these dependency brackets but in this case i want this to re-run whenever the origin or destination changes so this is the dependency array so this bit of code i'm going to have here is dependent on origin destination which means if it changes any time this is going to rerun this code okay so i'm first i'm going to say if there is no origin or there is no destination i don't want to run this code right so i want to kind of exit this block right here so we can protect ourselves by saying if there's not that you just immediately return don't carry on okay but what oh well almost knocked out some water um but at this point what i'm going to do is i'm going to say map ref okay so what i'm actually going to do here is i'm going to zoom and fit to the markers okay so i'm going to say map reference dot current so you basically get the current thing that we're pointing at right and they have this very nice function in on this map view called fit to supplied markers okay and what i can do here is i can go ahead and put a and for the first argument it takes a markers string array now the first markers are going to be origin and destination now if you're wondering what are the markers you know like there's actually this one here identifier origin so i need a destination marker all right so i'm actually going to quickly add that one in now as well and then we can carry on with that little uh top bit of code i'm actually going to copy a block in this exact same as the origin except that we change the destination and then the identifier to be destination as well right now destination we get from here as well it's saying that you need to import the user effect so let's go ahead and import our use effect like so so we import that from react at the top and now what i'm going to do is i'm going to fit so i've passed in the origin and the destination markers and the second argument is actually going to be something it's going to be something called the options okay now what you can do here is you can pass in something called edge padding now this basically means when it zooms in how much room around the side of the screen do you want to give towards you know the top left middle right and all that so i'm going to give everything like a 50 i think right that means it won't zoom in like to the point where the each mark is touching the side i want to kind of pad it a bit all right so hit save unless you give this a try right so let's go ahead and do london uk okay cool and let's go ahead and do something like essex okay boom aha check it out guys that's sick right we have our pointer which goes ahead and say destination is essex origin is london and then if we go back and we change it because it's inside of a use effect which means that whenever these changes will re-trigger off the value let's go ahead and say something like birmingham uk boom now i'm sorry but that is sick right that is sick you don't have to mess around with deltas and all this other stuff it just works right so if you've ever done reactionary maps and you've ever gone to that kind of sticky situation that's how you get out of it right you use fit to supply markers and it will save the day and it will help you out i'm nearly at 1.7 likes i think that deserves a punch to that that was awesome right so this is looking pretty good at this point okay so let's keep the pace all right so we've got this down here which is making it look pretty nice okay so we've got this over here and now let's go ahead and say let's just imagine we went to london bridge or let's just say london eye so this goes and navigates over to london in that case it kind of had a weird little kind of corner case but let's do something like scotland scotland uk and i love how it zooms out as well you get like a nice little slick animation right so the next part is picking the ride and then obviously we're gonna have some ui components down here to make it look and feel a lot more like uber right in fact let's do that right now right so over on this screen we're gonna have two extra buttons down here so i wanna have those buttons ready and done now so if we go back to our home screen component we're going to have these two extra fills down these are pretty much ui components right they're not going to have any actual functionality to it you can upgrade this definitely on your side to have more functionality but what i'm going to do i'm simply going to call it nav favorites and this is kind of like where it says go home or go here or go there so we're going to go ahead and create a nav favorites component right so i'm going to go ahead and create this component over here so i'm going to create now favorites.js now components folder react native functional exported with a stylesheet and then this is going to be where the you know the favorites live now what i want to do for this part is i want to have it as a flat list so i've already got the data prepared for you so i'm actually going to pop the data in on the screen so you're going to have this data here now this data can actually be outside if you want it doesn't have to block things up so you can actually have that outside and this day is just going to be one to three it's going to say home and it's going to say location home code destination and you can actually code this up so when you press it it actually enters in the destination if you wanted to do that you can do that ibrahim says when's the five-day airbnb challenge first link in the description it starts next tuesday the third of august make sure you're there sign up say i'm registered now if you've signed up already and remember second link is for skillshare basics 101 rep basis 101 so hit that airbnb sign up right now it's going to be huge i'm telling you right so at this point they think about it guys look at the quality we're dropping today like i'm just not gonna stop we also hit 1.7 k likes man what is happening today that is insane i'm gonna drop so much fire for react native now honestly you have no idea what is coming i'm going to keep this coming right so now over here i'm going to actually have a flat list right so i'm going to import it and i'm going to have a flat list which is a self closed component okay now for the flat list we're going to have remember we have a few things here we have the data itself that we pass in so we pass in the data and then we also have something called the key extractor in this case the key extractor okay now the key extractor is where we pass an item we want the item id to be the keys for each of the loops and the final one was render item right and for this one you get a let me just pop it down there you get a uh an arrow function right with some code that gets returned for each item and then you destructure the item here okay and what do we want to render each time well we actually want to render a touchable opacity because it's going to be a touchable looking button okay so in this case i'm going to do a touchable opacity so attachable opacity and then that's going to be as uh that's going to be apparent component and inside of there i'm going to have some an icon and the icon in this case is just going to be i'll show you exactly what it is in a second um but in this case let me just do some text and just say test or something right so before we get too ahead of ourselves say yo hit save okay so we've got this out on the screen so on the home screen now i'm going to import my nav favorites and we should see yo yo and these are both touchable buttons okay and the reason why we're going to do this is i'm also going to have this on this screen so i'm gonna have it in two locations and we're also gonna have a menu button that goes back to the menu in case you don't want to swipe back so lots of things still yet to come we're moving at a very good pace and we are gonna crush this build we are literally smashing it right now and honestly this is like this is insane so let's keep going guys i'm enjoying this so much okay so for the now favorites we're also going to go ahead and say now favorites and then inside of here for the text we're going to have some icons here now as you can see what i've actually done here is each of the items themselves have icons attached to them so what i'm doing is i'm using the icon set from react native elements and i'm going to go ahead and say okay render row an icon with the following styles which i'll explain so we're going to render out the following icon so tailwind margin writer 4 rounded 4 background grade 300 and the padding of 3 with the icon from the item now you can see we haven't actually got the icon so what i can do is i can do es6 destructuring which breaks into the item and gets a couple of things in this case i want the location destination and the icon from these components all we're doing is we're basically breaking into this component and making it simple to go ahead and do it all right so sunny me and my university are massive students for you oh that's awesome dude um and i just nigel carter says we are waiting for uber to clean some uh for quite some time now yeah honestly that's it man uh yeah i love you guys i'm reading all the comments as well hit save and now he says it doesn't have tailwind so i always forget that my bad don't hate me all right do that save and now you can see boom we get these two massive things right obviously it's not that nice i want to clean this up a bit so right now i'm going to say remember by default it's columns right so what i'm actually going to do here is a style is tailwind back ticks and then here i'll say flex row i don't want to have flex column i'm gonna say item should be centered so because i might have more than one thing in that thing and i'm gonna say padding five okay looking nice already and then i'm going to have a view and i'm also going to show you some metrics like view with some text inside so view with text times to boom i have two text fields inside of a view and the first one is going to say the location and the second one is going to say that this destination i keep saying this description and you can see like home and now you can see where i'm going with this right so you see when on uber you have that sort of you know clickable sort of thing where you can have your favorites so that work home work all right now let's just style these up so they look perfect we're going to say for this one the style of tailwind backticks and this one's going to say font semi bold and it's going to be text which is large okay that looks nice and then for the destination i'm going to say it should be a style with a tailwind back ticks and it should be text gray 500 the reason why i love tailwind is why is because you have such a nice color palette that you can always use as well which is really awesome okay that looks pretty damn good guys i really do like that now if i want to have separators between items in a flat list we can actually add in an additional sort of thing here which we can add in is it called item separator component here what we do is we have an arrow function which returns some you know jsx and this we can pretty much pass in a view so i'm just going to pass in a view a self-closing view by the way and this one is going to be interesting i'm just going to say it's passing a style and this style again i'm going to show you you know typically you can use you know just tailwind stars and all that so i'm going to say bg gray 5 200. but if i did like a height here of one you see that's quite a thick line and i can't go lower than that in the height for tailwind so what i'm actually going to do here is i'm going to combine tailwind stars with our you know inline styles i'm going to say give it a height of 0.5 notice how i made it an array syntax now we get a super thin line which is a divider between the components and if i add it in another one now the nice thing about flat list is you see it would just add on to that list okay boom looks good what's really nice about this is i can go ahead and click get a ride and i want that to appear underneath here as well right so what i can do now is i can go ahead and say if we go to our map screen and i go down to let's go to our map screen now it's underneath where's it going it's actually going to be in the uh it's actually going to be in the navigate card so navigate card so inside the navigate card at the bottom underneath this view i'm going to have the nav favorites and now boom it's there as well so this is what i love about react in general that we reusable components completely upgrades the app right and it's completely reusable which is sick right which looks really nice at this point so now we've got two things now obviously i'm going to set that as a challenge for you guys it's not that hard you know you could do on press whatever's in there you can add that to make that the destination then you can have a quick shortcut to it i'm pretty sure you can figure out how to do that after watching this build all right we've explained a few of the steps there pretty sure you guys can do that you guys are awesome okay so nav options are done now at this point i want to have this bottom part here now before i do that you see when i do command j ah that's an issue and you're gonna find this in a lot with react apps that's not a good user experience at all and imagine on a smaller phone that's going to be a damn headache right so the way we fix this in this case because the entire thing is a component and i want the entire thing to shift up we're going to use something called a keyboard avoiding view right now this is one of those things that can become a bit of a nightmare when you're learning react native but i'm going to do it over at the app.js level just to be you know a completely basic introduction to this now what you need to do is you need to import something called the keyboard avoiding view from react native okay so i'm gonna go ahead and here and put in the keyboard avoiding view now we don't actually need the style sheet here get rid of that and we can get rid of the style sheet there so we have important keyboard avoiding view and what we do is we're going to put it above the navigator level so below the safe area provider for the icons um but we're going to put it there okay i'm going to put all the navigator contents inside over here okay almost a 1.8 k likes guys keep on smashing that thumbs up button if you haven't already and let's keep this thing moving and now you realize you can't see anything and you're probably wondering well no a lot of hard work this is just because we need to go ahead and give it a flex of one right so you can do it two ways tailwind or this way i'm just gonna give it flex one and that allows it to use up all the space it possibly can okay now what we can do at this point if i do a command k now still still a bit of an issue right so what you need to do is you need to give it a behavior attribute now to make this work correctly on ios it handles slightly different to on android so that it takes a property called behavior now the way we sort of do this shift up motion in ios is through padding and the way it works on android is through height manipulation so the way that we can sort of be you know sort of check this out is we can use something called platform which is something which react native gives us so we can import this from where the import is from print native we say if the ios platform is being used use padding otherwise use the height okay so that's the first thing now if i do this and do command k oh oh that's nice all right so it actually moves up now so we have enough room to work with now right so you know imagine you can still type in you still see all the search results looks awesome works right now there is a final little difference you can do you can actually add something called keyboard vertical offset and the lucky charm for me in this case is to say if you're on ios do minus 64 um which means if afterwards we're going to have a little bottom component and i kind of want to crop it out by 64. but on android they handle this for you hence we do zero but on ios i need to do mine 64. okay but now if we do it see how it crops in a little bit there's a reason why i want to do that right because afterwards i want to add in one more ui element at the bottom but we're getting there guys we are damn well getting there this is amazing all right um let's carry on we still got the i love this comment so uh juwan pablo says 1.7 k likes you break the matrix honey i love that you said that just at the moment we are going to do the distance matrix work for the google api so uh that's pretty sick i have registered online i can't wait thank you for the valuable lessons you're given online probably at abraham thank you so much dude and guys also while we're here we're about to go on to the you know finish off this one little navigator section then we're going to do the time traveling all that stuff in a second but ready comment right now if you take an advantage of that second link the skillshare link which is for react basics 101. i recommend even if you know your react watch it i would binge watch this stuff if i had it at the time when i was learning so the second link in the description free month of skillshare what you get with my react basics 101 that i've sorted out for you guys so make sure you take advantage of it trust me it will help you guys out okay so at this point we've done that work so we're gonna go back to the actual map screen and back to the navigate card and inside the navigate card we are now going to go ahead and do the following so um we're going to go ahead and drop a view underneath here so underneath here we're going to have a view and this is basically going to say it's going to have a little rides button all right so this is pretty much what we like to have we have a rides button also and also yeah guys if you enjoy the react basics uh sort of you know content on skillshare please drop a positive review massively helps other students find and reach it when you do that because it pushes it higher in the list and it helps us grow and it helps me do it full time so would really appreciate that thank you so much guys right so we're gonna have a view underneath here right and now inside of this view we're gonna have two buttons a touch two touchable opacities and one is going to say you know rides and one is going to say uh ubereats sort of thing that's just how the normal uber app works and looks okay so at this point um arthur says keep grinding just wanna say complete shift first words on css concepts that redux on one to me this is actually got a lot of redux in there that's why i kind of did this sort of intimidating build today right so let's carry on so i'm gonna have a first one inside of it it's gonna be a touchable opacity okay and this touchable opacity is going to have an icon and some text inside of it now this is going to be relatively simple so i'm just going to pop it in an icon which is going to be from font awesome which is a picture of a car color is white size 16 and the text is going to be text white through tail and styling text center and it's going to say rides okay we save this it's going to freak out because we haven't done our imports so i'm going to import the icons up above hit save what else are we important let's do this we've got uh okay so it's white at the moment that's why so detachable opacity i actually want to make that a different color right somewhere here i'm going to say style equals and this one's going to be tailwind and this one is going to have flex and it's going to be flex row and to make sure that you can see it right now i'm going to do bg black so you can see what i'm doing but now you can see that rides comes up okay so this is going to be a width of 24 i'm going to give the padding on the x-axis a four and a padding on the y-axis of three and you can see it already it's nice and we'll make it rounded rounded four so that's why i love tailwind guys it's so nice to get stuff like that working as smooth and slick as it is like that right so it's just so quick to do stuff like that right and then i'm going to have another attachable opacity this is going to follow the exact same similar approach i'm literally just going to copy uh the attachable opacity right now and chuck it down here and you can pretty much go ahead and pause the video and see the difference only difference here is i didn't do bg um black instead i made the text of the color of the icons black and i didn't do bg white or text white sorry here i just did black text that's why we've got this nice view here now this bottom section by default reflects his column hence why it's stacking up on the view here i want to do style equals tailwind back to backtick i'm going to say flex row so that's the first thing you want to do flex row and you can see it goes into a row now bgy right oh it's a nice song yeah and when do you justify evenly justify evenly i think i have the best code in playlist i'm just going to say out i'm gonna i'm gonna throw it out there and start a war right i think i have the best coding playlist i take pride in my coding playlist right because it's just a fun you know playlist to go ahead and go with right so justify evenly and then i'm going to go ahead and say padding y of two margin top of auto because i wanted to basically take up the majority of the room at the top if we don't have margin top or just stick above you know where it can i want it to push all the way to the bottom i want a border on the top and then i'm going to say border gray 100 right border gray 100 okay and there you can see now we've got a nice little border at the top as well so you see how nice that looks now the rides looks a bit squashed there doesn't it all right so for the rides what i actually want to do is we have the icons and stuff like that over there all right so i actually want to fix that a little bit because that looks a bit squashed up right now so i'm gonna check can i go it's slightly different here i think i've just skipped a step let me just go ahead and see if it's different there's the minor difference there but oh yeah oops so for the actual touchable passing any justify between justify between for the icon justify between i completely forgot to do that and there you can see now the ride's shifted over now when i click this button i want to navigate to the next screen as well right so for this one i actually want to do on press right for that button i'll say on press equals and what this will do is it'll say navigation don't navigate and we haven't actually embodied this which is why i can't see it i don't think and it's ride options card so this will also take you to the next screen right so now you can click on rides and it will take you to the next screen as well so you see that you get a nice little rides as well as well as when you do this so london i've actually done london to london now so especially but if we do like london to birmingham you see now okay so now we're moving over to the ride option screen so the really fun part now is where we calculate the total travel time the total mileage and in addition we're also going to say what you want to ride in uberx uberxl and uber lux and i've actually implemented my own little custom pricing which means that the further away you drive the more it will charge you and so forth and then we also have a surge pricing parameter so imagine you know sometimes you're on your uber and you'll you see that message where it says you know it's actually quite busy at the moment so we're offering such a surcharge so i'm going to show you how to do that as well okay so it's going to be fun guys all right nearly at 1.8k likes holy all right let's carry on wow okay so for this one now i'm gonna do is i'm gonna go into the this screen okay so this screen is actually gonna be the ride options card and this one is being rendered from the map screen under our second stack navigator which is why i can swipe back and forth like this okay so inside of ride options i'm gonna go ahead and set up a bunch of stuff now okay so first thing is we're gonna have a safe area view because remember we have you know some area stuff that we don't want to you don't want to mess it up i'm going to import that in here and sometimes it doesn't work properly so there we go okay and then i'm going to have uh at the top i'm going to have a sort of you know our own custom header so i'm actually going to have a bit of text here saying select a ride let's go ahead and say select select a ride okay and this will be centered and then we're also going to go ahead and center this out so i'm going to say style oops so tailwind back tick back tick text center okay padding y five and text should be extra large okay dope oh nice dude thank you so much uh story time web design five dollar donation just signed up for the skillshare class thanks for putting this content out there sonny appreciated massive thank you for that and if anyone else wants free react basics 101 second link in the description go and enjoy it right now for free right it's going to help you out and i appreciate you dude thank you so much for that donation all right let's do this boom save okay tailwind hey it comes through nice all right so you can see select all right so if i do london uk boom we're in london we say let's just say scotland scotland uk okay let's select a ride nice we're on this screen now now as we see you can see that there's a slight background difference white and grey so i'm going to go ahead and change that as well so here for safe area view i'm going to say style should be tailwind back to backtick vg white flex grow okay and then now you can see that should and just to prove this to 500 and there you go guess it is doing that right i'm gonna get paranoid by stuff i'd like to make it look perfect right so we got that now we're gonna do 1.8k done oh my goodness let's change color a bit oh my god that's insane that is insane jay if you're watching right now oh lee oh wow let's carry on okay so safe right select and wide so i'm going to go ahead and we have the text up here and i'm going to surround this actually in a view i'm going to move this into a view because on this one i'm actually going to have a touchable button someone say touchable opacity and this is going to be a button with an icon inside of it which is going to be like a back sort of carrot right so it's going to have a back button which is going to navigate back right so touchable opacity and that's going to have an icon inside of it the icon is going to be chevron left from fun awesome so we just pop that in like so okay and now you can see and uh thank you okay get effing i just had a three alcohol with a cool center regarding website and honestly think you're a better development than the whole team ah thank you dude appreciate that i think we can hit 2 000 likes today i really genuinely think we can hit 2 000 likes today guys if you think we can do that that would blow my damn mind so let's do this all right so at the top i need my navigate because you see we've got this nice little kind of carousel there but i wanted to oh sorry carrot i want this to kind of look a bit nicer so this view should actually be styled out now the way i need to do this is we have the icon we have select a ride and right now actually what i might do here is i might absolute position this because i don't want to shift anything around but i always want it in that spot so what i'm going to do is for this touchable opacity i'm going to say style equals tailwind i'm going to do absolute positioning i think so i'm going to do absolute i'll say top should be three and i'm gonna go ahead and say left should be five let's hit save and you can see let's wait for it to move touchable plastic style absolutely oh oops there we go i messed up so it should be tailwind tailwind there we go and now you see it moves over a little bit nice and then i'll do padding of three and i'll do rounded four because i don't know yeah i do want something there eventually but when i click it right when i click this out i actually want this to be um it wants to take me back right so in order to do that what i do is i say on press okay so what i do is i say on press on press and then i go ahead and say an arrow function and i do navigation so i know to do navigation i need my navigate object so navigation equals use a navigation and then here i'll go ahead and say this like i say navigation dot um and then here you can do can go back and all sorts of other stuff in this case what i'm gonna do is very clever actually if you do navigate to the previous card it will handle it for you so i'll say navigate and then we're actually going to go back to the navigate card so check this out now i can either swipe back or i can click this and right now why is it not clickable um let's have a look we've got absolute top left three blah blah blah padding round four okay and then we've got a touch of opacity bg flex grow touch more opacity okay looks pretty good okay there we go so weird little fix there actually i had a yeah i found yes there's a weird one if you add if you don't have these um curly braces i know it was there it wasn't nice you don't need that yeah it was just a bit stuck okay so now you can see here i can click a little so we've got our own custom header here so you see you can do it that way as well right several ways of you know fixing issues okay so we need to render a list of cars that you can potentially you know access and a lot of stuff so how do i do that okay now what we can do is we can go ahead and say for the flat list so i'm gonna actually have a flat list underneath now so underneath select a ride so underneath this view i'm actually gonna have a flat list i'm gonna import it and this is self-closed component so similar to the exact flat list that we have used before and here i'm going to say console data equals i'm going to have my sort of you know data above this over here so this data is going to be uberx you see each one has a different id right ids just need to be unique in this case i've done uberx one two three or excel four five six uber lux seven eight nine the title of each that's going to show uber actually breaks over belox the multiplier this is gonna be the cost multiplier so for an uber x is gonna be the normal cost for an uber xl is going to be 1.2 times the cost for an uber lux it's going to be 1.75 because it costs more to get a luxury part right and then each of the images i've gone ahead and saved you a bit of hassle and you can go ahead and use that okay so at this point we've got the data okay and then what i'm going to do is i'm going to pass the data through for the flat list so we're going to say the data is here okay and what how do we actually render this data out okay so i can have the key extractor firstly because we want to get our keys and we're going to say the item id is going to be the keys okay and then for the rendering and this is always a render item and then for each one remember we get the an arrow function where we return hence the parentheses and we destruct an item and that item is going to be you know each of the things in that list and then inside of here what we're going to do now is we're going to go ahead and say a touchable this is a bit where you've got pay attention it's going to be a touch more opacity firstly so touchable opacity and this i'm just going to go ahead and say text for now and say car so now you can see that three cars come rendered out on the screen so we know something's working at this point that's what i would say you should do right we're close to 1.9k likes as well guys smash the thumbs up if you're still watching hit the subscribe button if you're enjoying this let's keep on going we're so close to the end now okay so we've got the car okay now obviously i don't want to just say the car i don't have an image firstly so for the image we've used an image before so i'm going to go ahead and save us a little bit of time pop an image in here and the style is going to be a width and the height of a hundred the resize is going to be contained to keep the aspect ratio and the source is going to be the image of the item now i don't want to do item dot image i'm going to destructure the item here say id title multiplier image right and now and if you are if you are destruction but you still want the item you can actually get the item still like that so many of you may not know that trick but you can still get the item if you do that okay so you can destructure all the properties but still get the item and for the image component i'm actually going to import that from react there we go and let's go ahead and go from london to let's just say scotland okay and there you go got my cars nice that looks pretty slick right nice is it looking good guys looking good we're almost at 1.9 kilos that is insane okay so the next thing we're going to do is we've got these image tags and then i'm going to have the actual sort of title so uberx uber excel uber lux and so forth so at this point i'm going to have a view and this view is going to have the text so i'm going to have oh so i'm going to show you a little metric rather than saying that i can say view with text times by two and we get the little nice little snippet and i'm gonna say the title should go in here title should go in here and then here i just want to have let's just say travel time dot dot dot so we're going to estimate that afterwards so we're going to have uberx travel time and you see there's a scrollable list okay so for this view um i want to do the following so firstly for the touchable opacity you want to style this up a bit because right now it doesn't look that good i'm going to say style tailwind i'm going to say everything should be in a row because right now it's kind of in a column so that looks better but i want it to be in the center so i say items center and they go central and i say justify the items between themselves so justify between save and then you go it kind of pushes it apart right so at this point what we can do is i'm going to say padding x of 10 should be planning x of 10 okay right so it looks a bit strange at this point but i'll show you why we do this and what we're going to be achieving when we have this right so this isn't the end will be or don't worry the style will change it's all good all right so panning x of 10 and then i'm also going to say okay so i'm going to show you afterwards as well if you select it how you can highlight the the sort of selected option i'll show you how to do that in a second as well okay so we've got the title the travel time and then we're also going to have the money aspect of it okay so i'm also going to have a final text thing over here which will say something like just to say 99 pounds but we want to make that dynamic afterwards right so for this text i'm actually going to make it a style and this is going to be tailwind text excel so it's going to be a little bit bigger text excel and this is why i like tailwind it's so fast to style right otherwise it will take ages if you're doing that normally now for this one the other view i'm gonna pull that a little bit more left so i'm gonna give that a negative margin left so tailwind uh negative margin left of six pulls it a little bit more that way just a nice little tweak i thought right for the title little style tweak here tailwind i'm gonna go ahead and give up dash dash and say uh text extra large next extra large and i'm also gonna give it a font of semi bold font semi-bold and then you can see boom we get a nice bigger option okay looking good guys and um okay this is looking thick all right so sunny seems so tired no no no i'm good dude i'm i am full of energy we're nearly at 1.9k likes i could not be more awake water break okay always use glass balls they're kind of you know they're good for the environment all right uberx uberxl uber lux okay so we've got the three different options at this point and obviously we're gonna plug in the google distance matrix that way we can see what the travel time is how many miles we're gonna be traveling and then calculate a price accordingly right all of this to come so it's a lot of fun right stick with me guys okay so at this point we're so close by the way so close all right so at this point almost at 1.9 oh my god if we hit 2k lights i'll screen this place down all right so at this point we're gonna have to do the following so when i click it i wanna how do i get it to show me which one's highlighted so when you have a flat list you can do a pretty cool little thing what i'm going to do is i'm going to create a piece of state to keep track of what's selected so in the react you can say it's a simple react stuff we say selected set selected and this is basically preparing a piece of state which by default is going to be no so nothing is selected and if again if you don't understand this feel free to check out my second link in the description react basics 101 for free on skillshare so get a recap of that i would binge watch it if you don't know what that meant right i would recommend doing that okay so once you've got that down you want to go down to your uh when you go to your touchable opacity button over here in the flat list we're going to say on press and now what i would do is i'll say set the selected item set the selected item to that right so basically when you press it i want to say when you press one of those rows it's going to set the selected item to this right and there's a reason why when this is going to be pretty cool in a sec right we need to import our use state hop in from react at the top there you go hit save boom go back to our screen let's just go to london let's go to scotland okay um oh what we're done here you stay oh damn it okay stay one more time london uk scotland okay look how nice the flow is right we've taken it for granted that this was all done right now so sick iran in the house what's up dude right so you go if we click this now it's actually storing the state for the selected car or the item right so what we can do now is we can actually apply a conditional style so after this i can say okay if the id of the thing that we're mapping through is eq equal to the selected and something might not be selected so i'm going to optional trainer selected id then i want to apply bg gray 200. boom aha look at that guys how sick is that and now you have a selected thing and if you're wondering well you could have just used the id you know you could just set the id in there no because i want to use that information at the bottom afterwards just show which car you've selected okay so that was damn pretty cool right um nigel carter says when you hit 2k you would decide on complete part two yeah we reached well you know maybe maybe we'll see i think we're about to hit 1.9 and then we can maybe hit 2k i think we can do this okay so we've got this happening right now select a ride awesome stuff we can go back and forth so clean i say so clean right so at this point we're gonna have the little button at the bottom that we need to implement okay so that button at the bottom is going to be simply it's going to be outside of the touchable opacity right so we've got the textural opacity and what we have here no sorry we've got the flat list over here there we go we've got the flat list over here and we're gonna have a view okay so inside of this view we're gonna have a touchable opacity touchable opacity right and this touch of opacity is going to have a piece of text inside of it which is going to say choose you know choose a car right in this case if you if you have a car selected it's going to say selected dot because it may not be sorry optional chaining it may not be selected selected.title now if you see down here see how when i select a car it changes all right so that's going to be the basis of the button right that's going to be the basis of the button all right so now what we're going to do you can see how this is starting to fly together right and and this is the beauty of tailwind right native everything coming together uh tailwind and we're going to say text should be centered text should be centered text should be white and i want to do text should be extra large they're probably wondering why would you do that you can't see the button now but what i'm going to do now is i'm going to say the style is going to be um tailwind bg black gg oh that light is good there we go black man there you go nice look at that starting to look better and then we're going to say the padding on the y-axis should be three and we should also have a margin of three you can have it touching the side if you want i mean it looks pretty cool i'm gonna have a little bit of a margin so it's not touching and because we're in the safe area it's not gonna go down here okay oh seattle in the house what's up daniel guys if you're new remember first link in the description next tuesday we have a huge reaction uh react to airbnb challenge five days of me coding react and airbnb so if you're new or anything like that hit that you know registration link and let me know and guys sign up ten thousand my fans worth of prizes so it's gonna be so much it's gonna be so much fun okay so let's carry on what we're gonna do now is uh oh so close to 1.9 right so now we've got this happening i'm going to also say that this button should be disabled if you haven't selected anything right so i'm going to say touchable basically should be oops should be disabled if there is no uh selected item and also if there is no selected item i'm also going to say that the background should be gray so i'm gonna say if there is no selected item then we should apply bg gray uh 300 okay now if i go back and i go forward you see how it's nothing selected and then when i click it then it says uber choose uberx that looks sick right see how when i come back boom awesome okay guys so with that said now what we're going to do is we're going to go ahead and complete the build by adding in the distance the google distance matrix api now this allows us to calculate the total distance from point a to point b right and what that will do is it will allow us to essentially be able to say select a wide with the miles it will tell us how long it will take to get to the destination with the uber and then we can use the relevant information from that distance matrix to calculate a price that we can then charge the customer okay so a lot of stuff happening right now so what we're going to be doing is i'm actually going to go ahead and have uh the following occur so we actually need to go ahead and inside of the map screen is where i'll have a lot of the logic for this because the map has this function i think it's actually inside a map we do it yeah so inside of map we do it because all of the details are stored you know around the maps it makes sense to have it here so what i'm going to do is i'm actually going to create a use effect right and this use effect is going to be completely responsible for um calculating the travel time okay so it's going to be completely responsible for calculating the travel time and what this is going to be dependent on is on based on the origin the destination and the google maps api key okay so it's going to be these three things are going to be you know this use effect code is going to be dependent on these few variables okay so this is awesome right now what we're going to be doing is we're using the google distance matrix to make this happen so anytime you want some asynchronous code asynchronous because we now need to make a request to that api to say here's the origin here's the destination give me back the information as opposed to how long it will take the time blah blah blah stuff all right what i'm going to do is i'm then going to push that into redux so that way i can go ahead and go to my other component the one where i select a ride and pull it from there using the travel time selector okay so let's carry on so to do so at this point we're gonna have to use effect and i'm gonna say const get travel time so in order to have an asynchronous spare code you have to have a an actual block of code inside and then you invoke that code like so get travel time but we're going to have an asynchronous block you can't just use async away you can't do this inside of hooks because like a user factor it breaks the rules of hooks and if you're not sure about that then you're going to check out the second link in the description guys we just hit 1.9 k that's insane we're about to hit 2k likes in one video oh my god if we hit 2k likes i am i'm gonna sit here in shock that like i never thought in one video would hit that just from me you know being live it's crazy honestly all right let's keep going so we get the travel time so at this point we're going to say we're actually going to protect ourselves again we're going to say if so before all of this i'm going to say if wait for it if there is no original destination returns and we have the same you know careful code there and um what we're also going to do i mean you can have that inside of this block if you wanted or you can optimize it a bit more have it there if you want that's fine and basically we're making a fetch to a google api so this is basically called a a get request right so what i'm doing here is i'm making a call to quite a long query url right so the const the url that we're making a query to is actually this one right here okay so it's this url and now notice how i use backticks because i can interpolate some values from javascript inside so this is the one that you want to do map store google apis dot com forward slash maps forward slash api forward slash distance matrix json and then here we set the units to imperial and the origin we pass through at this point now this origin we're getting from redux the destination we pass through here so destination description so we're giving you know like london uk scotland and then the key we're passing as well so this is like the magic to url okay so what i'm going to do is instead i'm going to say fetch right so i'm going to say fetch this information right so fetch it which means basically make a request to that endpoint to get some information once this comes back we should get a response now this response we need to pass it as a json object so we do it like this okay and then after that what we do is we say dot then and then we have access to the data now this gives us a bunch of information back for example how long it takes to get from point a to point b and all that stuff now i've already done the hard work for you so what we're going to do now is we're going to dispatch this travel time information into it but to prove that it works i'm going to console.log data i'm going to show you okay because i want you guys to see for yourself you see now if i go ahead and do console log you see how it came out with the destination in scotland origin is london and then in here we got the distance matrix so it says 470 miles and then it says uh oh god that freaked me out someone dropped on my desk and then here it said a text is eight hours seven minutes and then we have this very handy little value here that we're going to use to actually calculate the price so you guys can see how this is working right so what we're going to do now is we're going to go ahead and make a sort of you know we're going to store this information inside of a redux so i'm going to use the dispatch so if i got the dispatch i need to get my dispatch so dispatch equals use dispatch and i'm going to say yeah use dispatcher and then here i'll say dispatch and i will say set oops set travel time information so remember we set this up earlier on and the payload for this is actually going to be i'm going to basically i've already done the hard work for you so that information that came back i only want to get this bit of that there right so you see we've got to access this kind of object that comes back and all that stuff so i've done i've kind of saved you a lot of the headache for this but we actually already have the origin and destination do i know i don't need to keep that so what i can actually do here is you can say data dot rows we're gonna access the first array dot elements and it's an array of axis in the first element okay so i've saved you a bit hassle there don't worry think thank miller right all good so now we have the travel time information available to us which means i can go to any component because we just dispatched an action to update the redux global store with that information which is awesome it allows us to then access it anywhere inside of our components okay so in this case i go to ride options and now here i want to grab that information so what i can do is i can go ahead and go over to my inside my ride options card and i can go and say travel time information so travel time information oops in formation information equals use selector import from our react redux and i'm going to go ahead and get say select travel time information and pull that in from uh nav slices as well so now inside of here we now have access to it which means if i say select a ride you guys are going to be blown away with this right now right smash the like button if you're enjoying this right now and when you select the right dash and then here what i do is i say wait for it oh man this came at the right time all right i'm gonna say travel time i don't know where we're going yeah dash and then i'll say travel time information it's optional because it might be you know asynchronous or loading and here i say distance dot text so this is actually the information that came back before distance dot text hit save select a ride 470 miles now i understand essex essex you so sick all right and then for the travel time what i'm going to do instead oh i kind of cut out a little bit i think we're good all right i think we're good jay give me a heads up if we go but okay cool so yeah travel time 32.6 miles right oh no sorry that's the distance now i'm also going to go ahead and say the travel time here instead of this i'm actually going to go ahead and do something else i'm going to say the actual distance so i'm going to say travel information dot and this is going to be again uh duration.text now creation.txt okay and this one is going to be and i'm going to add travel time afterwards so travel time aha look at that guys 55 minutes and just to prove that this works let's say i went to like germany right it's going to take ages all right so if i go to germany and i think i've timed out on that so let's do london you have time to start so sometimes because i'm i keep spamming it's rate limited so i can do is like refresh i can do london to get a ride say germany let's go as a germany 10 hours 24 minutes travel time haha so sick 500 miles and now the price the price is the final piece of the puzzle are you guys ready to do the price so for the price what i've done is if you notice that from here we actually got back a distance of value so what i did is i figured out a nice little formula that works well with it that figures out an approximation of the price okay first thing we need to do is actually have a const let's like a constant right and this constant is going to represent a surge price right so in this case we're going to say const and i'm going to call it the surge charge rate and this is really good for like if you have you know like surcharge or you know like when you how many of us have been on uber and it says you know currently there's a lot of demand in the area and we are charging three times the amount to take you home all right so in this case 1.5 is the current rate let's just say right but imagine that if it was busy that could go up to 2 and you can make that you know a piece of state and modify it you can do whatever you want right but this is kind of a little architecture point so a surge charge rate now with that charge rate for the price i'm going to do some pretty cool stuff over here so i'm going to use the internationalization javascript api for mouthful but basically what this does is it allows me to format a piece of text using a natural javascript api so it's literally built into javascript and then we're actually going to be able to use our you know custom formula to make this work so what i'm going to say here is for the price right and i'm going to go ahead and space this out so you guys can see exactly what i'm doing so i'm gonna say new international so this is built into javascript dot and you can see number format is what we're gonna do parentheses and i'm gonna say engb because i wanna do great brand okay i pass in an option and here with this option i can say style is i'm going to pass this number based on the currency okay this is going to be a currency passing number okay i'm going to pass the space now guys let's hit 2000 before we hit the end of this video come on that's going to be crazy right style currency and i'm going to say the currency itself is going to be gbp okay so we've got style currency and the currency itself is going to be gbp okay the next thing we do is we have that number formatted and we say a format sorry the number and we pass in a number here or a value now for this number i'm just going to give some space that we can see exactly what number this is so i'm going to say okay this number is basically going to be the travel time information which is an optional because it may not be there in the beginning duration value so this number will be higher if the duration is longer okay i'm going to times this by the surge charge rate so by 1.5 by 200 or whatever and then each car has its own multiplier so i'm going to apply that as well so if it's uberx it'll be 1 1.2 1.75 and then i'm going to divide this by 100 to get up like a because there's a hundred pennies in a pound divided by 100 hit save now are you ready for this guys are you ready as soon as i hit save we should see pricing hit save check that out 561 pounds to go to germany from london which sounds about right right so i'm going to do something a bit more realistic essex from london 49 pounds 17 17. perfect that's literally pretty much with exactly what it would cost you to go uberx costs 49.17 uberxl cost 59. uber lux costs 86 pounds how sick is that how crazy is that guys that is absolutely insane right keep smashing those like keep smashing that like button because now i'm going to give you guys a rundown of the app and we're going to go through every single feature that we have built in this insanely powerful uber app this is incredible guys all right the final little piece of the puzzle i'm going to do is you see when we scroll down and add a nice little border to that view i'm going to say style equals tailwind dash dash i'm going to say mt auto border top border oops order gray 200 hit save and now you can see oh yeah now we get a nice little border gray i know it's very hard to see what i've done there but if we do five see it's actually there it's there we just can't see it you see that boom it's there but i want it to be super subtle it's a gray little a border but it looks nice all right look at that dynamics uh-huh let's do the whole flow let's reset this app and do it from right from the beginning let me know what is your favorite part of this so far right but look buttons are disabled in the beginning let's go ahead and say you guys tell me where shall i go right now you tell me where shall i put the origin right now and then i'm going to go ahead and pick a slot this is a react native uber clone we use heroin we use uh redux to push information this you guys love redox for this build so much awesome awesome stuff is happening in this world right now so you guys let me know where should we go all right i've got turkey i've got a few places i'm going to need both origin and it has to be drivable okay so let's have a look you got loads of people saying india interesting new york oh new york new york okay let's do new york new york i was in london to malaysia i think you could drive we'll try afterwards let's do new york ny let's go ahead and say new york um new york university nyu all right get a ride so i'm at new york university right here and let's go ahead and go somewhere else in new york so new york let's go to the bronx botanical garden aha 28.82 to go from look at that new york the bronx uber xl uber lux how sick is that guys smash the thumbs up button if you thought that was cool i'm going to do an india one in a second i just got finland we've got loads of ones happening so california as well we have in dubai okay let's see if you can drive from india to dubai right i wonder and then also we need to do the menu icon right so i'm also going to do the menu oh yes you know what let's do the menu icon right now because the only way to go back is to do that right so smash thumbs up button if you thought that was cool once we did i'll do the final one so i've got to do the menu icon so over on the home screen right now it's actually the map screen sorry we need a nice little button which allows us to have a home button right so it's going to basically navigate us back so above this where we've got the you know the half half split i'm gonna have a floating menu button so this is gonna be a touchable opacity so touchable touchable opacity and this is basically gonna be a component parent oh this song came at the right time all right and i'm going to import the icons and then we've also got our tailwind ready nice and then i'm going to have an icon here which is going to be a menu icon right and then you see right now it's kind of weirdly over here somewhere we can't see it so what i'm going to do is i'm going to change the style of this button so style and this is actually going to be a tailwind button and this is actually going to be something that's absolute right so it's going to be absolute position so it's going to sit above everything top-16 so you can see you can't really see it right now so i will find it in the second left eight where is it gone right we'll find it i'm gonna do bg grey 100 bg grey 100 okay still can't see it yeah we'll find it we'll do a z index of 50. so now it comes to the top because that index is basically the layering in which things appear on the screen and we're going to do a padding of three rounded four there we go and now you can see okay but the way that we make it pop out is we had a shadow behind it that's the little trick for the front end devs shadow large and now boom nice little icon which floats above everything okay i can see loads of things happening i will do a search afterwards if we hit 2k if we hit 2k all right so touchable opacity and now i'm going to do and now i need my navigator so i'm going to say const navigation equals use navigation use navigation and then here what i can do is i can say on press of this button then i'm going to have an arrow function fire up which says navigation go on navigate and this is gonna say go to the home screen okay let's start out home screen boom sick okay we keep on moving we keep moving so at this point i'm gonna go from let's say india let's go to uh let me see uh bangalore everyone's saying bangalore or something right so let's do mumbai mumbai maharashtra india i'm sure that is but okay so we're in mumbai right now so anyone recognize this right i'm gonna go to dubai let's see if you can go from mumbai to dumb dubai dubai oh okay that's uh undefined on object travel time so this is because we might have an undefined at some point so to protect yourself against this you do travel time information where's it going travel time information and where we use it all you need to do is basically go ahead and protect yourself so at this point it is where am i using it travel time.distance.txt so dot distance dot text just trying to find this an example of where we're messing this up so we've got distance.txtdistance.txt this is where we are breaking so basically we just need the optional chain here while it figures out that's why that happened okay so at this point we can do let's do i tell you what let's do london to dubai for london get a ride to dubai and now we should be protected by united arab birds okay so i've made the same mistake this is the same place where we've done this duration.text duration dot text and this is happening over here duration.txt so see we need to optional chain it that's why london uk to dubai you know i remember there we go so it's an expensive drive but i'm sure someone will you know 4 000 pounds to work right it would you could pay 4 000 and it will work right so at this point you see how we overcame it all right that's one thing i want to say to you when an error comes up you don't see me freak out and be like no it's not working i'm a crap developer you take a calm pace and then you go ahead and you just you know you just break it down you use your tool kit like optional chaining you do all that stuff and you break it down we are 15 likes away from 2 000 likes now i'm gonna wrap up and show you exactly what we've built in today's build in just a second guys 14 likes away right so it's extremely expensive i wouldn't recommend getting an uber to from london to dubai but it's interesting that you can all right very interesting let's do mumbai to new delhi oh look at that guys again an expensive drive but it works right awesome awesome stuff yeah i mean i wouldn't recommend that honestly especially look at that one day as well who who fancy sitting in the uber for one day if you do then you know 2 000 oh my god what is happening me and jay right now and in a separate chat going insane that is oh my god dude wow that is oh you know what guys that was absolutely incr crazy build right that was i think i think i come on let's put a vote on it i think that was the best build we've done on the channel so far the uber react native clone let's do a little demo of what we learned today guys we built an uber clone which has the google places api the google distance api and the google matrix api google did google was it no it wasn't google distance it was uh the directions api sorry for the direction from a to b we use google places api for the auto complete and then we use the distance matrix api for the mileage and all that stuff crazy stuff guys absolutely insane let's go ahead and demo through uber you can type in you know let's go ahead and do london bridge get a ride right and you can also you've got nice little ui elements over here get a ride you go ahead and pinpoint it you can even click it it says origin london bridge let's click on where to and let's go ahead and say let's go to birmingham from london so birmingham uk and then boom 132 pounds to go to birmingham 127 miles and you can scroll around on the map you can click it it says destination birmingham you can now click between the two you can select a ride we even have optional styling being applied perfect lovely ui we can click we can either swipe back between screens or we can click on this absolutely position button to go back to the home page that has been absolutely incredible guys it has been insane to build that with you all today and uh yeah that's that's just absolutely insane i'm probably gonna make a separate entire react native video on deployments and all that stuff because deploying react native apps is completely different but what i would recommend you all do build this out you know literally on an instagram right now tag me it's sss has sanger and say like you know i've reached to the end of this video firstly and also like i would love to see some instagram stories up today and also guys while i have your attention as i mentioned before if you thought today was good right we have a huge challenge happening right and it's going to be absolutely crazy you can go over to proper react.com we have three days 20 hours left before the challenge begins so if you enjoyed today and you want to see more crazy content then you can go ahead and check out the five day react challenge we have over 10 000 pounds worth of prizes crushing it right absolutely crushing it we don't stop on an uber build when i just maxed out on effort we just go ahead and say screw it we're gonna have a challenge next week as well right so we have a huge challenge where you're going to get a portfolio you're going to get an entire front-end build calendar search functionality i've never done this build mapbox integration and it's a react-nexus build and the finale you're going to get a new book that i've written so we have an absolute huge that's 60 pages by the way right i'm so i'm valuing the book at 50 pounds worth and you're gonna get it absolutely free by signing up and showing up to this challenge prizes are huge we've got loads of prizes all you need to go ahead and do reserve your spot it's limited seats so make sure you've reserved your spot right it's going to be an absolute game changer of a challenge it's going to be so much fun we're going to have so much enjoyment throughout this challenge it's going to be intense and as always guys as even before right before i even show you that i'm actually going to even like go ahead and mention that we have an absolutely huge skillshare opportunity right now where we even have react basics open on skillshare so if you're watching this video the first link in the description a second link in the description gives you a free month so it gives you my entire react basics 101 class right and this is huge this is goes down all the basics of react every single fundamental that you want in react i cover it absolutely free only possible through skillshare second link in the description that's actually a part of zero to full stack here that that module so if you want even more and you even want to level up even more i suggest you check out zero to full stack here at papaya.com but guys i want you i want to see you at that challenge comment right now if you're already uh if you're already registered for that challenge but this is absolutely insane this is absolutely absolutely insane guys such an awesome pleasure to to be able to teach you today uber with react native all right on that note guys i think what i'm gonna do is i'm gonna you know i want it's only right to go ahead and drop it with the proper fam anthem i'm gonna go ahead and end this one on a bang right 2 000 likes for this video react native which you've never done before the biggest ever build that we've ever done on this channel the uber the old so far it was crazy hard it was crazy intense 2 000 likes on this stream over five six six hundred people current reviews at one point crazy stuff 30 000 plus playbacks you guys are sick register for that challenge why where's it going i don't even know where it's gone all right register for that challenge and be there at the airbnb challenge next tuesday this is your boy papa react and as always guys i will see you in the next one peace [Music] [Music] hey

Channel: Sonny Sangha

Views: 205,728

Rating: 4.9507928 out of 5

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: bvn_HYpix6s

Length: 225min 6sec (13506 seconds)

Published: Fri Jul 30 2021