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

what's up guys how is it going first of all i wish you a happy new new happy new year and i wish that 2021 will be a better year than the previous one thank you very much for joining uh this live stream and without further ado i know uh that you're excited about this build i'm also pumped about it a lot of you have asked to do this build so here it is today we're gonna build a uber clone in react native and it's gonna be a full stack uh application both uh front front-end interact native back-end in aws amplify which will come later uh during the next weeks uh and this is a um a default like taxi mobile application is not very specific to uber we're going to use uber's design but you can adjust it for any other taxi taxi mobile application and um yeah uh during my research i saw that most of applications that are uh yeah taxing my application like uber lyft yandex here in uh in this part of the world they all share the same design so this will be uh very good because yeah we can uh based on this clone we can build any um taxi mobile application uh so uh what we are gonna build um yeah first of all we are gonna build the home screen and here we will see on the top a map with the user location and the position of a user on the map after that we're gonna see like a message which is like very uh yeah like uh something related to kovid and then we we're gonna see the search bar uh when we press on a search bar we're gonna go to the next page which is the destination search page and here we will integrate google autocomplete features um because yeah when you start typing an address google will uh suggest uh to suggest yeah specific addresses and you can choose from that uh from that list we're gonna implement that uh the next will be after you select the uh from and the destination location for your trip uh yeah our application will suggest you a couple of options uh uberx comfort uber excel and so on it will also display all the prices here and a cool feature here will be to display this map with a route that you will take so yeah some small cool features that we will include in this build which is probably very specific to a taxi up that we didn't implement in other clones is the maps and the directions and specifically these directions that shows you uh you have a route that you will take with uh with the taxi uh then what else is the google auto complete features as i already told and also we'll go we're gonna implement the drawer navigator because a lot of you have asked about this uh how to implement so we're gonna get into that today uh yeah regarding front-end technologies uh as always we're gonna use react native uh with javascript uh we're not gonna use expo for this project it's going to be rack native cli a lot of questions about that as well uh yeah mostly we are using like react functional components because this is the way to go in nowadays which come in hand with react hooks that will help us a lot um yeah during the during the build from the libraries we're going to use react navigation for to manage all the navigation in the application vector icons to display uh icons from like more than 3000 icons in this library and also uh different uh different apis from google which is maps autocomplete destination and more so more about that later um so what you will learn you are asking okay so if you're a beginner this is a very good build for you and also it's a good build to practice uh your skills even if you already know react native and have some experience because i'm pretty sure that you'll find here something new some new libraries uh to practice to to master your skills so first of all we'll learn how to set up a rack native project after which we'll learn how to render building elements like components such as text images views and so on after that we will create our own components that we will be able to reuse throughout the application in order to create a scalable application that will not be just copy-pasted code but actual uh components that can be shared and yeah more manageable uh functional components uh props state uh navigation which is a very important part in most of application because most of application unless they have one screen they have some kind of a navigation so you need to know how to handle the navigation in the application uh we're going to learn how to install third-party libraries and also how to work with google maps google places api google auto complete features and so on all right so who the heck i am uh my name is vadim thank you very much for joining this channel if you are new here um i'm a full stack developer for over seven years at the moment i'm working as a cto at uh at my startup vitinium uh i also worked at amazon as the software developer engineer and i'm passionate about their coding building impactful startups and sharing this uh all my journey and all my knowledge uh with you guys so if you uh enjoy what you're seeing right now and if you find this available please consider subscribing to my channel leaving a like and without further do we can get started in a couple of minutes uh yeah the last step uh that i want to get before starting the projects project is uh prerequisites so i expect that you have already the react native environment set up if you don't you can go to react native getting started guide where you will find the instructions how to set up the environment you will need a google developer account um you can go to google developer register vayer and also you need the billing enabled there because if you don't have billing enabled you will not have any errors but the map will not be shown and you'll you'll it will be yeah hard to debug so make sure to enable billing um and also you will need the dummy data images icons pdf presentation everything i put everything under this url assets dot not just dev uh slash uber so go on this url and you will receive all the yeah all the all the data that you need dummy data images icons pdf this pdf presentation if you need all the urls and so on so let's first of all have a look at the chat hello guys thank you very much for joining this live stream how are you doing uh where are you joining this uh this time from um so hello aziz um what are you using for maps will it be aws location service no for maps i'm using a library called react native maps and behind the scenes it uses google maps actually on ios you can use apple maps but to keep things consistent both on android and ios we will use google maps for both platforms so yeah let's uh say how to upload an app in play store yeah we're gonna do that uh probably in some uh future videos not in today's video uh hello hello from turkey hello dev mtm um hello uh okay guys so very nice i see a lot of people i see a lot of uh people that i already um subscribe to my channel i see new people hello everyone and yeah shortly we will get started okay so uh yeah if you just joined shortly today we're gonna do an uber clone in react native so um the first steps is to initialize the project oh uh i think i have to share the screen this is better yeah i have a new setup like with a camera here we've connected i wonder like at what point in time in this live stream the camera will turn off and i'll have problems but let's see how it goes okay so um let's get started uh first of all uh we need to initialize okay i saw some dropped frames that's good uh first of all we need to initialize the project uh why i wrote here expo because it's not expo initialize react native project and to do that we'll run npx react native init and the name of of a project uber or uber clone after initializing the project open the terminal invert invert folder of a project and start the development server and to start with development server you need to run yarn start where if you're using npm you can run npm start after that we need to run the application on some kind of a device or emulator that you have and yeah if you are an on windows or linux system you will probably run it on an android emulator so you can run yarn android or npm run android if you are on mac os you have a choice to run it both on android or ios so in my case i will go with ios but the application should be working on both and at the end we will actually test that it works on both systems so uh these three steps uh i already uh i already did because uh running the application the first time takes around 10 minutes so i didn't want to to spend this time um in this live stream so the only thing that i did is running that uh commands here in one window i have a development server with npm or yarn start um and in the second one i ran the command yarn ios so uh yep um here we have our emulator and this is what you what you should see after initializing the project uh and this is a bear template from react um okay let's have a look at what files we have here so the entry point file is app.js uh and yeah here we see all the code for this page but we're gonna clean uh clean up shortly to start from scratch um okay so um what's next the next step will be to uh install vector icons um i'd like to to start with installing this library because we will shortly need it and we'll need it in a different places so let's do the boring setup uh now and then start working at exciting features so uh yeah first of all let's um run yarn out drag native vector icons war npm installed if you are using npm and this will install the library yarn add react yeah if i could type that would be great react native vector icons and meanwhile i will actually open open the their webpage to check the documentation because we'll need something from there so vector icons react come on react native yeah guys if you have any questions um i will stop after implementing each features and we can discuss but i don't want to to get distracting from implementing the feature because a lot of people are watching this uh after the live stream and they are getting interrupted so after i finish a feature i will come to the chat and we can discuss i can answer questions and also i'll try to stay after the stream for like 20 30 minutes uh to answer all your questions and if you have any other questions that are not related to this project uh yeah join our discord channel and shoot the message the question there and i will try to i'll try to help or yeah write it down below in the comments i try to answer all the comments so yeah this is the page of the vector icons uh we installed it now we need to where is it is it installed yeah it's installed the next thing is to add the ui up fonts uh to the info file for ios so we will need to grab them from a vr page somewhere here ios list of available fonts and we should copy this this array of font names and to paste it in this into um our project ios uh the name of the projects which is uber clone and here we have a info scroll down at the end and before closing the dictionary uh yeah adhere some spaces and paste in the code that you copied from there so yeah before closing the dictionary we paste the ui up fonts and this is how we specify to ios that uh before installing the application it needs to copy these fonts uh this is the step for ios for android uh we need to add this line into our up.build.build.gradle so where is it yeah here android with gradle so for android we open the android folder application and here build.gradle and we can scroll to the bottom and add them here let's save and the last step is only if you are developing for ios right now is to install the pods which uh is done by npx pod install without ios actually so um yeah if you're in on windows keep this tab np npx for the install and this will install the uh the the native library for ios okay so um yeah i will copy some code from here just to make sure that it works uh we'll import the icon from uh phone to awesome and we will display it like this so i will actually copy only with display the name will be rocket okay so in order to test if our library actually works let's open our app.js and at the top of file let's import uh icon from uh react native uh for vector icons slash font awesome was it from yeah and then we will use this icon um where edit here do we see it on the map edit so yeah somewhere inside the text for example before we edit we can say icon name will be rocket [Music] size will be 30. and probably that's it and color do we need the color uh yeah i'm recognized phone family because uh after installing the library we need to run again yarn ios so running yarn ios yeah it takes some time until it rebuilds the project and let's see if the icon is displayed i don't see it yet so i will try is it here save yeah it should be there i don't know color this weird uh rocket there is no icon rocket in front awesome let's have a look uh yeah let's open the the directory of all the i construct native vector icons uh directory and here is how we can actually search for icons this is the page with all of them so let's take from and design something like yeah load let's see if this one will work so from here no no from and design and the name of icon will be this one save come on where are you color red what did they do wrong let's have a look if it works on android ios oh i have okay miss type the name am i that stupid yep i am okay yeah it works um so yeah if you write the name correctly then it should display the actual icon so that means that our library has been installed correctly and we will be able to use it later in our build so yeah it builds for android and we'll actually see if it works there as well all right so let's check some comments uh yeah thank you alexandra it's name yeah that was my mistake yeah i should um check the chat more more often can you zoom in the code a bit uh yep let's do that font and let's make it 15 yeah right now it should be better oh my pc is running is spinning maybe i should uh yeah cancel the android thing because it will i don't think it will support two emulators at the same time yeah uh so let's yeah i didn't do anything right now i just uh increase the font size and try to close the emulator all right so we have vector icons installed uh we can move on with the home screen um yeah but before that let's just uh clean our project to have only um yeah a clean project to to be able to start from uh yeah from app.js let's um yeah let's delete everything except uh safe area yeah let's delete everything from here uh the styles we will not need here yeah we can delete this unused import yeah that's better okay that's uh yeah let's clear up now it shouldn't display anything uh let's create a folder for our source files and inside here we'll have a directory for screens a directory for components and this is where we will store the reusable components um and probably some directory for our assets like yeah let's call it assets all right so um yeah this will be our home screen and this is uh what every user will see when he opens the application and our home screen uh first of all has a map on the top then a message and then uh this input box where you will pro you you will press where to go it will redirect you to the other page uh some options here uh so yeah let's start with at the beginning we will display a dummy map because we'll install the map the map library a bit later not to confuse everyone uh from the beginning so we'll use a dummy map then we'll start implementing the message box and so uh so for that let's create a folder in screens uh home screen which will hold uh the home screen i will create a index file layer in the dot jsx and here i will generate the the boilerplate for a component so home screen i have a shortcut for this but yeah you can you can copy this uh code which is the set which sets a functional component and exports it so this component uh we can go ahead and import it in up app.js hey priyank thank you very much for the donation i really appreciate that so um yeah let's enough just import our home component import home screen from uh source home screen and we will just render it here so yep home screen that's how we render it and let's save source screens screens at slash home screen save so nothing is wrong right unexpected unexpected token why yeah that's weird what's happening um why it doesn't display the home screen uh let me just try to display some text because i'm not sure margin top color and handle tourist k something in our undefined enable to resolve source so why are you not restarting did they do again a very stupid mistake most probably so okay let's check the chat um so you guys also don't see the error here come on it was the same yeah sometimes screen's home screen doesn't exist home screen what the source screens home screen screens home screen yeah index come on what's going on up you wrote up no and no where is not here something in component like home screen it cannot find the home screen so source screens home screen any typos no awesome beginning that's what programming is all about um i will do a yarn ios as well to rebuild it on ios file extension is wrong gsx noise i'm not using typescript so it should be just x it's it's i guess it's correct uh unable to resolve model source screens home screen from i'll just copy paste this file in the root folder with the name test okay and from the up i will import dot slash test save reload unable to resolve test it's here maybe indeed like something with a extension save reload what i think i messed up something with uh my editor uh settings because it doesn't recognize the jsx why okay so um i will have to work with jazz no problem okay in the source screens index i will rename it to js for some reason yeah that's really interested or interesting i will i'll double check it after the stream why that happens home screen and now and now it works it displays the text there it's very small but i'm pretty sure of it yeah but now it works all right that's interesting so um okay that's our dummy home screen um we can start by displaying a dummy uh map so in this home screen in the component i will create a new comp a new separate component for our map initially it will be just an image or something like that and after that we will implement um uh virtual maps so in the components let's create a new directory for our uh home map here or create a file dojs not jsx so uh index.js functional component home map uh okay i am a map our view will have some um yeah like a i don't know a height does it need the height here let's try uh i don't know 300 and a background color something like this doesn't matter okay background color height it will have a text there yeah right now we can import it in our home screen so let's import home map from components whole map and let's render it instead of our text so we'll have our home app here after that we will have um the we have the covet message message call with message and after that we will have this bottom bottom component that will have these buttons and so on uh bottom component so um yeah again some errors of course i define unable to resolve uh slash components okay i think more double dots like this yeah we can actually um center the text that's just for displaying it um for at the moment because we will change this a bit later justify content center and align items as well center align items center save yeah i'm a map perfect we know that you are a map uh restart the metro bundler i i tried to do that also and i'm not sure if why it didn't recognize the jsx files okay so we have this dummy map now let's implement this uh this message so it's gonna be as well a separate component um come on i have this prettier prettier installed and it are you good yep okay so in the components we'll create a new component for our covet message uh so let's try yeah covet message i'm not gonna try to think of better names right now so uh index.js functional component covered message and here our covered message will have a background color a blue black background color and three lines of text so yeah the first line of text will be travel only if necessary try well only if necessary of course i made typos the next step text will be some yeah some dummy text but i will copy from here where i will get some lorem ipsum text this is good this is the second text and the third one is learn more uh text learn more yep so um styling it in order to style it we actually need to include it into our home screen so the same way as we did with the home app let's go ahead and import our uh covered message uh and render it just after after our uh home app covered message save uh yeah and it is there so for the style i think we'll have a bit more styles here so let's go ahead and follow some best practices and create a separate file for our styles and i'll call them styles.js and here i will again generate this boilerplate for our stylesheet we import the stylesheet from react native and using it we will create our styles and and export them sorry okay so let's uh declare a style for our container we will define there some styles we need uh for the title title uh we need for the title and we need for that yeah they have the that this text with the big text so let's declare it here um and probably also for learn more in our did they declare it in home screen i think i'm a bit tired today because i messed things up so i will move it in our covet message uh component because that's where we need these styles so from the index of a covered message we will uh import styles from dot styles from this file uh and for the view we will declare styles.container for this text we'll declare style set the styles uh for the type from the title uh all right so for this text it's styles dot text and this one is um styles dot learn more learn more like this okay perfect and yeah let's open the styles and for the container first of all let's declare the background color which will be let's try a blue and i think it's yeah i don't like this blue and i will try to define it from here oh god something like this good uh it will have some uh padding i don't know 10 pixels to have some space um all right that looks a bit better and it will also have some rounded corners on top as you see so let's add these round corners with border radius border top left radius and also border even 10 i guess and also border top right radius to have it on only at the top of um of a component uh okay for the title uh for the title we need to increase the size of it so first of all yeah color white font size 20 and also font weight bold okay for this text it will be also font color white font size 15. for the title let let's add some spacing uh margin margin bottom 10 pixels to separate them a bit perfect and for this text as well to separate from learn more the color of the second text is not actually white so let's try to change this so it's somewhere around here yep and what else yeah i i failed choosing this color definitely um let me try to to find it somehow i'm not sure if that's actually important right now but to make it pixel perfect so come on where is this tool i cannot get it okay never mind where is the emulator come on god i'm so bad with colors let's increase a bit of padding for the container yeah i think this is better and for we'll learn more uh again the color will be um white and the font size yeah let's go with a 15 and also bold and font weight bold yeah let's see it here uh perfect yeah i think that's uh that's good enough uh okay so um yeah this is it with the with the message box that is here we have some uh images here but we're not gonna spend time with that um we can set it as a background image or as a separate component with some position absolute to to put it here if you want to to make it uh as it is right right there so let's uh have a quick look at the chat uh you're creating driver side up also in this tutorial or just the passenger uh in today's video we're gonna create only the passenger app um and yeah if you're interested uh let me know and probably in future we will also implement the driver app but i will try i will need to get the designs from somewhere but yeah i don't think that's a problem yeah let's try not to spam guys and because it's going to be harder for me to find um to find questions um okay i see a lot of great a lot of questions here i'm not sure if i'm i'm gonna be able to stop for uh all of them um yeah i'm not uh i don't know like uh let's uh stay after reveal for a couple for like 10-20 minutes and i'll answer all your questions because i feel that this is going to be a long build we have a lot of things to implement today um so moving on to the next uh to the next component uh this is this bottom um bottom component um it looks very very similar to a bottom sheet but actually uh when you uh open uber up it's not a bottom sheet for as far as i understand because it's not scrollable it's just um yeah a static component there and whenever you press it here you're redirected to a new page so that's how we're gonna do it we're gonna also keep it simple um so let's let's create this component for our directory for our home search uh yeah home search component something like that index.js and here let's create a functional component for the home search search okay before uh we start diving into this component let's import it in our home screen search like that and yeah let's render it here uh yeah let's have a look at uh yeah here so we see the component is displayed under the message all right so uh what do we have here we have a input box and some suggestions uh first of all is one from the memory uh like the last place that you searched and then uh yeah the home the home option so uh yeah here in home search i'm gonna close the other tabs to keep it only this one uh we will have the input box uh last search or last previous destination destination and the last one is uh what is your home yeah home destination all right so uh yeah let's start working on the input box and what do we have here we have a rectangular view inside it we have a text and to the right we have this button for the for the time so yeah let's uh do that here we will have a view the styles will be styles dot um i don't know input box it's not technically an input uh because it just looks as an input but whenever you click you'll be redirected so you cannot input here anything then we have a text where to where to styles input text and after that we will have this box the white box with uh with time icon now and um yeah so we will declare a view for it uh the styles will be styles dot container inside it we will have an icon and here is where we will need that the dummy data from um yeah from assets dot not just the dev slash uh uber so i'm gonna open the folder uh that you can download there uh in a moment so we can have a look at what um yeah what icons we have uh so uber assets so this is what you will download uh and we can open uh icons this file yep so for yeah for this home screen we will need the clock icon which is imported from uh vector icons like not expo vector icons um yep yep yep we will need not from expo but from rack native vector icons so clock yeah this one i think is it this one no it's a bit different and design yeah clock circle so let's import and design here import and design and inside this container display and design and the name will be clock circle size i don't know let's try a 16 color probably we don't need the color okay uh after the uh icon we need the text now now and after that we need another icon for the uh drop down so let's search another icon drop something like this but only with a line arrow come on something good a more minimalist arrow oh something like this material icons keyboard arrow down yeah i think i think that's what we need so let's import also material uh material icons material icons and a render here a material icon's name keyboard arrow down size again let's try a 16 size 16. okay so yeah i think that's everything that we need uh it will crash right now because we don't have any styles so let's define the file styles and then uh style this component to look as we as we needed so for the home search we'll declare the styles dot jazz style and here import styleshed yeah now it should not crash hopefully or will it uh undefined material icons was not defined and defined to resolve material typos after typos come on within focus okay so yeah we see something there it's definitely not styled but yeah that's what we are going to do right now so we have a style for input box we have some styles for input text we have styles for time container yeah let's not forget the oh yeah i have it time container [Music] and we'll see if we need some styles for this now so the input box the input box will first of all have a background color gray so i'm going to choose a gray color from here something like this okay uh it will have some margins not to yeah margin 10 then um okay uh it will have uh it will just it will have a property justify content uh no flex direction row in order to display all the items in the same in the same line side by side so flex direction uh row save and justify content uh space between to put the items at the different sides of a container so uh one here one there um and for align items center this will uh center of items uh vertically so yeah now we see the where to here um yeah that's too dark of a color where to okay so yeah something like that want some putting as well parting then okay so for the input text it will have um font size uh 20 yeah that's good font weight ball to make it pop bold uh perfect or is it uh i don't think it's we can say font size a value like 600 where are you 600 yeah that's uh that's a bit better and yeah that's uh a gray color so for the color color fff and then i will choose yeah that's uh that's better okay for the time container we also want to display them in the same row so let's do flex direction row here now we're in the same row um let's have a fixed width of i don't know 100 pixels come on 100 not as a string and also justify content space between all right so 100 is probably too much uh 70 probably better uh the background color for this container is white fff uh it has a let's add some padding then probably will be too much and we yeah add back to 100 yeah something like that putting 10 and to add some border radius in order to make it um round border radius uh i don't know 50. does it look similar only the colors of icons are yeah too dark here so i'm gonna go uh in the index file or and design here color will be light gray something like this text style no that's good so um yeah this input box looks pretty similar maybe i can play a bit with the colors uh for the input background here to make it just a bit lighter like this and for text even more yeah yeah i think that's uh that's better okay so now um let's render these two rows that we have here for the previous search and for the home search so it will be a row with an icon and a name container yeah so previous destination view styles row here it will have an icon but what i can do we have there uh yeah again time we can use the same icon from there but as you see this icon is inside the circle so we will add the icon container which is another view styles icon container and inside this icon container we can put the clock circle icon the color of that icon will be white size probably the same okay so yeah the next one will be just the name of a destination spin nightclub let's go with that one so we'll put that inside the text spin night club and styles will be destination destination text something like that so let's uh yeah we have it here not sure where it is the icon but we'll find it out so let's define the styles for the role i'm going to close this to have more space this one as well row icon container and destination text okay so first of all where is our icon background color a gray we need some gray color okay it's there the only thing that we need is uh for our row to say that the flux direction should be row to display them into the same row like this so for the icon container we'll add some padding uh around the icon padding 10 and probably is a lot but okay um also the size i think it should be around 20. and border radius 25 it's a circle something like this yep something like that uh the row in our case will have also some padding padding 10 15. yep and align items center to display the text in the middle and comma here okay so for the destination search first of all it needs some margin uh what's that left then to have some space between them and was it it's yeah probably a font weight of around 600 font weight 600 and font size 16 save 500 yeah that's better and also the row has this um separation line and we're gonna do that using um border bottom width one and border color i think we need also border color right um yeah again some kind of a gray save and yeah it's there probably even a lighter lighter gray save yeah right now it looks much better so the same way as we did here display this previous search which we we can copy paste and display the home the home icon so all right i just wanted to uh increase the body here from 15 to 20 yeah something like that and for the home let's do the same here the home icon we will take from uh in typo so let's import and typo and instead of and design right and and and typo and hibo uh probably it's home right yep and for the icon uh container we need to change the background color of the icon container for this specific row so where is our icon container yeah we need to change background color so we need different background color for both i can contact for the icon container so i'm just gonna uh put them inside an array and declare another object uh here and this is how we will merge the two colors so if i put this and as a blue yeah and now we have um yeah different colors for uh different icons so um yep this is our uh this is our search container [Music] what else what else here yeah probably that's it with this container we're gonna go back in our home container and change a bit the way we display these items but yeah before that let's have a look at what you how are you doing guys are you still here how do you feel use ee for gray color okay i'll try um the best teacher and best tutorials thank vadim and uh hey from lithuania thank you very much for the support okay recovering from the holidays yeah i feel you that's the same it's it's a bit tough to get in to get back on track but yeah we're trying come on my voice um are you going to implement the real-time location tracking for both passenger and drivers yeah my most probably we will have uh the real-time tracking but that's gonna come when we implement the back end so yeah for uh all the people that just arrived and are wondering what the hell we are doing here we are cloning uber uber application the user side mobile application and we are doing that in react native so far we have finished implementing the home screen with a map with a message and with some ui elements here later on we will implement the search page with google auto complete features then we will have a route that will be displayed on the map and um yeah uh drawer navigation and a lot of more interesting features so yeah stay tuned uh for a continuation of this uh this build yeah the video will be published uh after the live stream on my channel so you you can go ahead and uh you'll be able to watch it on your own pace and actually follow along and implement it yourself because that's how you actually uh learn better by doing this project yourself and not just by watching it so [Music] how much experience do you have as a developer um i i've been coding for uh over seven years now uh with rock native i've been working for over uh three years yeah this is my third year i guess with rock native is your screen display on multiple screens yep i have here a big big screen where i can see everything okay guys uh yeah thanks for for all the support uh with your showing in the chat i really appreciate that you enjoy and find these builds available so yeah without further ado let's uh let's continue and um yeah what i want to do right now um yeah let's um where where are we search page yeah let's uh let's move on and start working at the search page and our search page uh has uh two input boxes at the top with the uh the location where you're starting your uh journey and the destination that you want to to reach so after inputting this information you'll be redirected to them yeah to the route page and you'll be able to select the uber type and so on and uh yeah sorry and here there are a lot of uh yeah the cool feature about this page is the auto complete features so we're gonna get into that um soon but yeah before that let's start uh implementing this uh this this page so uh for that what do we have to do to close everything and to create a new screens uh page to a new screens folder for the yeah for the search destination search destination search page something like that uh in here we'll have a index.js and let's define the boilerplate component so destination search like this preacher doesn't like my code style okay all right so um now let's go in our app.js and instead of rendering the home screen let's render our destination search because uh so far we don't have any navigation implemented and we're going to have to to do it this way like manually changing the uh the page that we are rendering in our app.js after that we will implement the dynamic navigation uh later in the video so let's save and yeah we see the empty component here on the top that's good uh destination search so uh what do we have there we have these two input boxes and i think we will start with with them so yeah inside our view let's define two input boxes text let's see first of all import it text input text input placeholder from we'll set the values shortly and the second one will be where to why did it it sounds weird like where to why throw it shows like this all right so yeah we should be there define some styles for them so style text input same one for this one and let's declare the styles file here styles.js generate the style sheet and the first one we have is the text input and also we'll have a container so to this view we will send styles. container let's not forget to import the styles file import styles uh let's save and now we will be able to add some styles uh such as uh i don't know padding then and you know what uh because our component is displayed underneath the [Music] the notch and you cannot actually see it uh we will import uh a component from react native called safe area view save area area view and we're gonna wrap uh our whole component into a safe area view like this copy everything and paste it into a safe area view let's save and now our our inputs um are not under the notch so that's uh that's good okay for our text input let's declare i don't know a height of 50 something like that what else do we have there some background color i think they have a different background color did you say ee e save yeah something like that and some margin uh vertical for the top and bottom of [Music] five what what else what else what else where uh let's not height but uh rubber padding like five and the height it will take automatically so it's not five but ten yeah the height will be automatically and we just added padding uh to yeah to display it better so yeah this is good all right so i think um yeah it's pretty good like what we have right now we can come back later and uh style it far far to to match exactly the design of um of the uber with these dots and so on with this line uh but first of all let's try to make it functional to see it actually working to implement the more advanced features like autocomplete features and so on and yeah after that we can make it look better um yeah now we also have to um to store uh yeah we have to store the value of a text input inside the state variable to be able to use it later uh yeah for for um for being able to to send it to the next component to being able to uh send it to the google api and so on so we have to declare two state variables for uh the from location and to location from uh text from text from set from as a text use state and default value will be uh empty string we will import use state from hate it when it cannot import automatically from use state here i think i messed up some uh settings for react native because it doesn't import automatically so uh just the nation text set destination text the same way so uh yeah i'm gonna add some uh spacing here so the value of this input will be the from text and whenever we change the text we need to uh to call the setter function and this is how we uh bind we have like two-way bind to display the value and also to update the value in state so one text change will be set from text make sure not to call this but to send it as a function as like this so the same way here destination text and set destination text save and right now let's uh something is not working uh on change text on change text save is it like this no should be like this set from text uh yeah let's um it's definitely the the name of property so react native input on change text let's check the official documentation and on let's find here change change unchanged text unchanged text yep that's how i wrote on change text oh yeah of course i had a typo all right who who is the ceo of typos today this guy so right now we can uh yeah do the same thing like right here but this time we have the value of the input inside our state so we will be able to use it later on uh okay what's next to display this uh initially the home worked and so on but um i'd like to go ahead and actually start implementing the autocomplete features because this is a bit more challenging and depending on this we will uh decide how we display the homework and save places so yeah let's start implementing the google places autocomplete for vet we're gonna use a library that you can find on npm called react native google places autocomplete let's open the link node there but here so yeah you we can see here how it works it provides us with a text input we write there something it gives us suggested places using google api so we will follow the installation steps uh first of all npm install react native places autocomplete war yarn add because i'm using yarn i will copy this command and paste it here it will install uh the next step is to get our google places api keys and to enable the google places api web service uh okay so for for vet we have to go uh to create to have a developer account on google and then to go to console developers google and so on open until it opens wait um okay from here yeah first of all uh create a new application and after that uh make sure to select it from this drop-down and yeah my project is this one and then in the library we will search the google places places api yeah google places api this one and we go into google places and we uh press enable because if you are in my case the api is already enabled but you have to press on the enable to enable the google places api and to also get the api key and to do that you're gonna go into uh credentials and you're gonna create a new credential that's a api key where you'll find yeah you can see here so press on create credential api key and it will create a new credential for you so yeah i'm gonna delete this one because i have already created one and i'm gonna copy it because i will need it in a moment so here is the basic example uh this library is pretty straightforward forward we just import the google places autocomplete from this library and that's how we render it you will give it a placeholder a one press a query and so on so let's copy this basic rendering of them from here uh did it install uh let's run uh npx pod install to make sure that the library is installed on ios and i'm not sure if we finished all the steps to install it is it that easy yeah okay google maps are a bit more complicated but this one is pretty easy to install so i'm gonna add the google autocomplete component underneath our text component but later on we will have to delete them and to replace it with this one so to import it we will import it from from the library but we just installed like this save can find variable okay so we have it here search if we write something we will see nothing because uh we have to input our api here in the query so i'm gonna go in our my credentials copy the api key paste it save and now let's try to search will you work uh well you work that's that's the question should they yarn ios all right come on um it seemed pretty easy to install it to be honest so installation and there is no configuration right yeah it doesn't seem to have any configurations we we implemented this in our previous build in in airbnb clone uh the call don't worry the video will be available on the channel after the stream are you working you are not working i'm gonna try one thing i'm gonna try to see if that's uh because of the permissions or no not now or let's try to uh debug the application and see maybe there is some errors come on why debug is not working debug and this will open a debug window somewhere here and let's open the console it doesn't seem to have any errors so so i'm gonna try again refresh refresh come on come on come on you can yep hey nothing is happening enable google api make sure billing is enabled yep yep yep white might be the problem uh why not just do i have this uh library installed places but yeah we made may we checked and it was installed places api yep manage um let's check if i have internet here maybe there's a problem go google yep i think i have yep so that's not the issue so i will try to uninstall the application yeah these are all the steps you have to take so terminate i'm gonna do yarn start again and yarn ios maybe you should type a bit more type a bit more maybe you know that's that's possible let's see maybe they are not visible i think that um it has container [Music] i think i had this a similar issue if that's the case that would be so background color [Music] ee all right and uh right all right okay that's that's really stupid because this component was actually displayed but it was not um the position of it is probably absolute and that's why it doesn't show if we don't make the parent component uh to be the full height so if we make the parent component full height we can delete them that one uh yeah right now it works so if we type something else it displays blue area 51 so here we go okay use flex one for the container yeah thank you very much yeah that's uh actually we can go with a flex one no it doesn't work with flex one come on but with height one hundred percent it works yeah thanks for thanks for trying to help okay so now uh what do we need uh on press okay on press um on press we uh console log the data and the details i think we will also need details so for that we will need to specify a property so let's have a look at details details is provided when fetch details is true so let's set fetch details to true fetch details let's save and see what details we we have here so uh if we press on this one it should console log something so let's go in our debugger and it doesn't do anything because we didn't open the debugger [Music] so um area 51 so here is the the data about the place it contains descriptions uh place id and so on and here is the details and we need details because we will need the geometry and the latitude and longitude of a place to know exactly where on the map to uh yeah you want to start your journey or finish it so um on press for this one um yeah probably we will need don't we will not need these two state variables but we will need like something else in the state so const does the details contain the same information uh as the data so the description address description does it contain description no we have like different okay so origin place set origin place and it will be null initially destination place set destination place null and this one will hold the where to placeholder let me close this one and on press we will set set destination place to an object containing data and containing details because i'm not sure what exactly we will need uh uh what information about the places we will actually need i'm pretty sure we will need latitude and longitude but maybe we'll need also the name so i'm gonna put uh in our state hey randy thank you very much for your donation i really appreciate it you are doing great continue thank you very much and that's what i'm gonna do right now so yeah i'm gonna paste both data and details in my component here save style we need to style it a bit so let's have a look at google here and styles styles is a property and see style sections below okay styles can contain different properties for the container or the text input and so on so let's try to define the styles for the container okay styles container will be a cell that we defined here styles.text input let's try save yep now it works not sure why the page became gray oh no i see this is the whole container we need probably input container text text input container right [Music] text input container save oh no [Music] it's even a different one uh text input text input right text input okay let's try this one until it works yep this one where to we write we see the suggestions that's good so we need anything else here um [Music] okay so i think we can safely remove the wear to the previous component that we don't need we will copy the same component and paste it uh instead of from so we'll have two uh autocomplete uh containers i'm not sure how they will behave yeah that's that's that's what i was fearing because they display it's very interesting to be honest and i'm not sure if it will be possible to to to style them and to put them close together and to display the the the rows underneath uh yeah that's uh that's uh interesting question to go to auto complete places let's see what style properties they have okay uh so use custom text input component limit results to one contour search predefined options um this is a simple example maybe there is a way to render them separately text input predefined placeholder nope nope features hmm yeah i think at this moment our application will be just a bit different than the actual uber and we will not spend time on this one at this moment uh because i'm i think that it's pretty challenging to to actually put the two inputs uh close together and to have the rendered rows displayed underneath because i think that uh we don't support these custom styles so they they are automatically generated and rendering these but i will definitely check out uh afterwards and uh probably in the next video if if it's actually possible i'm gonna show you how to how to make it uh work there so we'll have just like two two inputs at the top of uh from where let's uh change them the placeholder where from where from at the bottom where um yeah we will select both of them and if both of them are selected we will have to actually redirect to the next page so uh let's have a look how to okay for the text we will not need these state variables um so we will um have to do something whenever uh both inputs are uh selected whenever both inputs are yeah whenever the user selected both inputs then we need to redirect to the next page because if i'm not mistaken there is no button here yeah there is there is no button and we'll do it automatically or should we just add a button to automatically uh navigate uh when both are selected it's pretty uh easy and we'll declare declare a use effect uh that will check if both are uh if both are selected and this use effect will uh we will set the dependency uh array with both origin place and destination place and this will make sure that we will call this use effect [Music] every time one of this variable changes so if one changes we will check uh if origin plays and uh destination place oh actually in the first google autocomplete we need to change the setter from destination to origin make sure to do that so if both origin and destination place are not null then we need to [Music] console worn redirect to results let's save and let's import the first one nothing happens and whenever we import the second one and we select it as well nothing happens why console i use effect use effect is deprecated oh now it works [Music] cold let's save redirect results page right now if we do some changes reject the results page why let me try to re-run it if origin and destination plays yep use effect is called right the first time we select this one and it's not cold oh only after you press on something else okay redirect to results page so it actually works i'm not sure why uh it only calls whenever we press on something else so here we will actually implement the navigation when we get to to implement the navigation so uh we're gonna keep this uh screen pretty rough uh we're gonna not spend a lot of time in designing this because i see that this live stream is going uh for already two hours and we will we all also have to implement the maps the destination uh route and a lot of things so let's get to that see that it's working and where we can either uh finish the styling today or we can do that uh in the next video so i think that's gonna be uh the best approach but before that uh before going to the next step which will be uh implementing the search results page uh i need to take a one minute break and i'm gonna be right back so stay tuned guys i'm gonna come all right guys i'm back now it's much better so how are you guys doing what do you think about this build how is it so yeah for everyone that is just uh joining uh thank you very much for joining welcome here and if you're wondering what the heck we are doing here we are uh cloning uber uh uber mobile application in react native so so far we cloned the home screen now we have finished uh the search page which yeah we implemented only the functionality we didn't get into a lot of design there because it's gonna take us a lot of time so i'm gonna after that i'm gonna go ahead and actually implement everything in the next video next week right now we will um we'll start working on the route confirmation which will display our destination with a map and also to um yeah to choose between which uber we want so that's the plan and if you're here and if you find this valuable please consider subscribing to the channel dropping a like because this will help me yeah move forward with this channel okay let me catch my breath um allah is suggesting a solution to put them close together uh and that that might actually work yeah i will probably try that uh afterwards yeah he said he's gonna yeah yeah yeah yeah i i got uh i got what you what you mean soho ivan thank you very much for the support casper thank you very much uh how are you today thank you very much i'm very good i'm excited about this build um yeah it's it's a step it's a step-up build and we are implementing a lot of interesting stuff here and yeah let's do it let's continue how are you doing guys uh all right so uh the next step where are we left okay the search results page uh let's get into that so um we can come on we can close everything we have and yeah let's uh create the component for the search results or how to call this page who can find a better name because it's not search results it's like you see the destination and you choose the type of uber you want to order like finish order uh what else the the struggle of every developer to name a component okay i'm gonna go with search results and i'm pretty sure you can find a better name my brain is uh freezing today so file index.js functional component uh search results nope nope nope nope that's uh good enough okay okay okey dokey and in our app.js let's import uh search results with a name search results and render it here save we see the component there underneath the notch that's perfect we have a component to start working i'm gonna this component is going to be quite similar with a home screen because it will have a map but it's not going to be a whole map but it's going to be a destination map so i will change it a bit later because we didn't implement the map yet so at this moment i am good with using the home map here i am a map i am a map i am a map and at the bottom we need to uh render this um this component with choosing different um uber categories types so um yep let's create a new component for that because we love splitting everything into components um uber types something like that i am horrible with names today like index.js functional component uber types uh we declare also styles to make sure that we have everything already style there's a boilerplate we import the stylesheet here and the last thing that we need to do is to actually import the uber types component in our search results and render it there so import uber types from components uber types let's render it over times save save not just a component perfect we have it rendered so we can close this home screen yeah now we have only the index of overtypes and styles of over types all right so let's have a look at what we need to render here i will probably start with rendering one row to style everything and yeah and then we're gonna get into the button and so on for this role we see that it um it repeats three times so it repeats for uberx comfort and uberxl and it has uh the same styles it has a image to the to the left some text in the middle then on the right the price so when we see uh such patterns where the components like repeat themselves and only the content of them is different like the title then we can start with with a custom component we implement it as a custom component and then we will use it three times uh in this page with different values so let me just show you how we will uh do that so in the components i'm going to create a new component uber type row something like that here functional component no index.js functional component uber type row okay so yeah some styles as well styles dot js style so much boilerplate that must be so boring for you guys but that's what we have to do in poor style we could do things like more rough and do everything in the same file without splitting the styles but i'm trying to actually do it like based on some small best practices as as much as i can during this live stream and yeah so in the uber types here so that's why it might take a little bit more time so let's import uber type row rom uber type row so i'm just gonna render it here uber type row yep perfect i can delete that text so raw will have a image it will have uh it will have text number of people time price a lot of things so first of all we can think uh about some top level components so from top level components i see three components and if [Music] you give me one second i can better demonstrate it so yeah this uh this is our raw component so inside this component i see three smaller components which is this image uh the middle component and the left component so let's go ahead and create the views for these components so we can implement them later so i forgot how to work with this [Music] how to hide it no not like that oh god hide okay and did they just um so we will have as i said three views view [Music] for the image but because images [Music] is just a single component it doesn't make sense to put it inside the view because it will yeah it doesn't have anything inside it so here we'll have the image image then we'll have a view because it contains multiple things there like name and so on for the middle component uh and we can call it style dot styles dot middle container and a view styles right container over right container [Music] come on okay so let's start with the with the image and to get the images you will uh you'll get the images from the downloaded uh folder that you can find on ss.notjust.dev uber you can find the link in the description of a video so here in images we have all the images for the cars that we need to display there so yeah i'm going to just copy movies images in our assets so i'm going to move them here okay so why did you open them all over type row so for the image yeah let's import the image image style dot image source the source will be a file imported from slash assets images and let's say yeah uberx save uh yeah we see the image there very huge but but it's there so before going into styles i'll probably i want to just render all the items on the screen and then we can go and style them properly so in our middle container we have two rows uh the first one containing the type icon and then number of people so here we will have probably a text and that text will contain for example uberx uber x uh let's not forget to import the text from react native and give it a style uh styles dot type this is a type or title something like that um yeah after that it will contain an icon with people i'm not sure if we have them uh in our files so i'm gonna go into the rag vector icons directory and search for i know a person yonica's person something like that person right yeah uh size 12 and we'll see uh if we need any more styles for that and here the amount of persons like for example free uh the second row contains in our case you know what why didn't they make it full screen and just move it better so the next row will contain the time uh text yeah like 4 8 0 3 p.m drop off style dot time and here to the right we will display them the price uh so in the last view in this view yeah for the right container we will have uh first of all icon which is a price tag icon that we can find in our uh price tag from also you want yonicans or you how do you save it so name not person but price tag and the size will be something like that and the color will be a green color red green is 0 0 ff00 yeah nailed it i know some kind of very bad green price tag don't like me don't let me makes these mistakes because i'm i'm tired of them okay so we have a price tag there and the text estimate dot estimate dot i don't know 27 style dot price okay so let's grab all the the styles that we have here uber type row styles and that's going to be our yeah also here styles.container so that's going to be container that's going to be image um middle container come on what else time type type type type right container and price and price all right so first of all uh the strings must be rendered within a text did i make a mistake here probably yes where here found it save okay so let's start with the image uh height will be 50 with 50. um resize mode resize mode cover to cover the whole container that it is displayed into uh why doesn't work resize mode cover contain no oh yeah contain okay to contain the whole image sorry okay so for the container we need to display everything into the same row flex direction come on let's do it flex direction row okay justify content space between justify content space between um and also we can say ally item center okay we can increase the size of the image add some padding to this container padding 20. okay right container will probably also have a weave because i um i don't want that the middle container to be centered in the middle i want it to come right after the image so for the right container let's try to add the i don't know a 100 pixels width and for the middle container flex 1 yep and now probably we don't need uh this yep now uh these two containers left and right has a fixed width and we added flex 1 to the middle container and that will save it the middle container will take the rest of the space that we have on the screen so okay [Music] type the type will be font weight bold font size probably 20 is too much 6 18 okay uh what else we have there uh number x i will add here probably some space using a space like that viking can be a bit bigger 16. yeah i think that's that's good enough what else so where styles image uh for the middle container let's add some margin uh horizontal like 10 to have some space between the actual image why is it like this okay looks good looks good to me right container um lex more line item center i want this estimate tag to be centered flex direction row to have a icon and the text in the same row what else we need there uh align accent flex send to display it at the end unexpected token like this justify content flex and yeah like this to display it at the end of a container uh what else we need there some uh space for the middle container um justify content justify content space between to have some space between the titles but it didn't work so probably we will add some margin bottom simply five yep that's that's better for the time [Music] color e e e e e oh no a bit yeah something like that all right all right so what else what else what else for this um adding some space here using just an empty space save doesn't work oh oh okay okay okay [Music] oh we can do it for the price because we didn't define any styles yet so let's do font uh weight bold and font size 18 like this and some margin uh left then too much five perfect i think that they look similar but i think that it's not enough space so but no it's good it's good okay so uh the styles of this component are done uh right now we need to make sure uh have a way to render them to render multiple uh rows like this if we put multiple rows it will render multiple rows but all of them will have the same content of the same image the same title and so on we need a way to um to render different yeah different data for each row so um i'm going to go ahead and import the data [Music] folder from our assets bundle but you can get that not just ss.not just.dev slash uber and i'm going to put them in assets here so data let me better copy it paste so inside data uh we see types so here we have uh data about all the types so the first one is uberx it has a price and duration the next one is type comfort uber excel and so on so we need this data to be displayed on the screen so in our uber types let's import the data types data is from assets data types and we will yeah simply we can do that using a flat list yeah let's do it with flat list or we can simply actually map through them so we have our types and we will map for each of them and for each type in our array we will return a uber type row like this so types data dot map and for each type will return a row so now it should return three rows um what you don't like unexpected yeah i need to close the bracket here so let's save and now we see that it renders three types because we have free uh yeah types in our dummy data so uh we need to take this type that we get from the array and send through props to our row in order to be able to know like what data exactly we want to to render so i'm gonna send it like this type equal type and in the type row i want to console.log the props here and show you what we receive console.log props uh let's see what we receive if we still have our debugger yeah we have type and the type contains information about the specific type that we want to render right now it contains a price price a type id and duration and so on so let's uh go ahead and take this information out of the props so const type equal props so for um for the name it will be uh type dot type dot type i guess right because yeah the name of the variable is called type so that's why we have typed.type and the price we will put here again curly braces uh type dot price save and right now we can see that the names are changed uberx comfort uber excel and the prices as well are changed so uh now we want to change as well the images that we are displaying for each of them but the images are loaded from our dummy data from images however we see that the image name uh corresponds to the to the type so we have uberx.jpg uh but you have uberx comfort is also jpeg and uber excel is as well jpeg so uh we can actually go ahead and load the image based on the name of a type that we are rendering so i'm going to put this template string here and instead of uberx i'm going to add a variable like this and the variable will be type dot type so it will try to load the image with a name of the image uh that is taken from the type so let's save and it doesn't work because [Music] template strings i think do not work in require yeah i think template string does not work and require so i wanted to do it smarter but i'm probably gonna do it the usual way so i'm gonna define a function get image name and uh const okay we have a type as already so if type dot type equals to what types we have here uber x get not get image name but get image and then we will return i wanted the smart way but doesn't want to so yeah we'll just do like some if statements and for each image we will return the the one that we we need for the next one we're gonna return this one and at the end we're just gonna return uh without any if statements by default uber xl so let's call get image here in the source save and cons declaration require an initial value cost is okay is equal to arrow function okay right now uh we see different images for each for each type different images different names different prices and so on so um let me add some okay so i think that's it with uh the list of uber cars um yeah let's just render the button for confirm override at the bottom which will be a square button so inside uh uber types after this map we will render a button which we can create using a pressable uh so pressable is a component that lets us register user presses so inside the pressable we will have a text uh come confirm confirm over confirm uber or yeah something like that uh for repressible let's add that on press confirm and this will be a function that we define here confirm const confirm equal to a function console word confirm uh yeah let's add some styles for this i'm gonna add them in line to save some time so we've 100 uh background background color black what else uh partying no we don't need any we need padding uh 10 10 margin 10 come on margin 10 margin 10 and align items center center okay that's good and for the text let's add some styles to the text as well so the color will be white and font weight bold font weight bold save confirm over if we add flex 1 x 1. okay doesn't need anything all right so um yeah so now if we click on this we see the console worn from our function and later on we will be able to actually confirm our uber ride so uh yeah that's it with a confirmable right next step is going to be interesting so guys how are you doing for everyone that is just joining uh hello thank you for joining uh and yeah and in this video we are trying to clone uh the uber mobile application in react native we managed to clone the homepage uh the destination search uh the choice between uberx comfort and so on and the next step would be to start actually implementing the maps because this is the most interesting part of the uber um and everyone is interested about yeah about this feature to to render maps to render them the route between two points on the map and so on so that's that's our plan for today uh yeah why isn't he putting the button styles installed just yeah i should definitely put it there i just felt uh that it's gonna be a bit easier just to to to type them there but you should definitely put them there because that's how you keep consistent okay uh someone was asking which link uh the link of the um yeah the assets you can find in the description of the video but it's pretty simple it's https assets dot not just dot dev slash uber so yeah this is the link with with the dummy data that you will need so guys are you still energized hyped about the the project will you follow it after the live stream uh adarsh is asking to use the bottom sheet i definitely want to implement that in one project because i see more and more i see more and more application using this bottom sheet uh which is similar to what you see on the screen but you can also like drag it uh drag it and hide it and so on uh as far as i as i know uh here for uber it's not a bottom sheet but yeah maybe maybe in the next video i'll implement that because it's it's just a lot of things to set up so it's it's a bit boring but after you you implement it it's like a cool feature that that looks really dope in my opinion hey richard that's the mindset so the question is should we implement today rack native maps or leave it for the next week what do you say guys it's been already two and a half hours and if we get into the react native maps there's gonna be at least one more hour so are we doing it today we're leaving this juicy part for the next uh for the next time i am pretty tired but i think i can go on one more hour oh my back is already hurting today do it now next week keep it up so next week what else what else today or next week so there we have to it's going to be a lot of uh time in the installation process let's do it let's do it so okay uh let's implement the maps because this is the most interesting part of uber so i think that if i'm not if i'm not gonna implement this in this video they're gonna say like what the hell you did in uh three hours so let's actually implement the maps and we can work on more interesting stuff uh during the next uh during the next live stream because this obligation is is really huge this clone so for the maps we're going to use react native maps and we can open the library here to see yeah to see uh the installation guide and so on so let me just have a look um i need one second to do something with come on okay so uh save so yeah um rock native maps let's go to the installation instructions and follow the guide it's quite a lot of steps to follow and to change and to make sure that we do properly so yeah let's uh let's get started and first of all we will need to install the library with npm or yarn we already work with rack native maps in our airbnb so yeah let's um let's do the first step yarn odd and then follow okay all right the actual map i'm gonna go through uh the steps real quick build configuration on ios uh this is for react native 59 but we have rack native 63 or 64. so we don't need v-step 59 and lower we don't need this one let's go let's go uh this is uh the thing react native 60 and higher so we're gonna need to install the pods for ios uh we're gonna do npx spot install and that's only for if you're working on a mac os system and you are developing for ios if you are doing on windows skip vista because uh you will not be able to run it app store submission uh i'm gonna skip it right now if you intend to submit your uh application to app store just specify this uh this field in your info for ios and that's it enable google maps on ios react native all version okay we need this so we need to open up delegate.m and do some hey guys i think that uh i've been disconnected for a couple of seconds i'm not pretty sure how much i was disconnected but i'm not i don't think it's it was a lot so it successfully reconnected that's that's really good uh rick thank you very much for the donation you did it when we were disconnected so yeah ricky saying wasn't bro keep it up thank you very much for the support i really appreciate your help so um yeah where i was so first things first we uh run yarn adriac native maps uh then we don't need these uh steps because we are for react native 0.59 uh then we scroll scroll scroll and we need this step because it's for react native 0.60 so we install the pods and that's only if you are developing for ios on a mac os system we did that then we go to enabling google maps on ios and this is for react and for all the versions so uh let's open up delegate import google maps there at the top of the file so you can find the that file in ios uber clone then update delegate dot m not age uh import google maps uh at the top of the file here then let's go back to this one and inside our did finish launching with option we need to add this line at this line using the api key obtained from google console okay so this should be the first line inside where is it did finish is it here this code looks really weird so we need to insert our api key here so i'm gonna go ahead and copy it from google from google services and one more thing not to forget to tell you so yeah these things save it should be the first call of a method yeah that's what we did so do some of uh and lower no we don't have lower um [Music] yeah react native six and higher so we need to uh add the following to your pod file above the use native models and then run again for this pod install so okay let's do that above use native models in our pod file um from here ios pod file and yeah above use react yeah use native models do it use native models okay above we paste the code from there react native maps dependencies we save this and we run again npx pod install and yeah again this is only if you're working on uh developing for ios and that's it you made it okay um yeah not to forget before going into configuration for android uh we need to um come on we need to enable some uh libraries but i'm not sure why they don't say it here maybe they say it on the first page uh come on i need to close some of the tabs because my pc's oh come on wreck native maps do we say what api we need to enable it doesn't say so from the library let's go to maps so we need to enable maps sdk for ios and also map sdk for android so make sure to enable both maps here so in my case they are enabled for both android and ios all right so let's continue our uh configuration for android uh build configuration on android ensure your build file match uh the following requirements react native 59 and lower no no react native all versions so if you define project web properties in your build.gradle this lab will detect the preference of the following properties so okay let's open our android uh build gradle and here we have uh the versions so yeah compile sdk version yeah target sdk min sdk and only things that it needs is i think these two libraries support lib so let's yeah let's um let's copy these services and paste them uh at the bottom here so for the version we can uh find them on the their website but i'm gonna go in the airbnb project and just check them uh the version there that we used and uh because i know that that worked so i'm gonna go airbnb clone uh build.gradle and here we have these two versions so for replace services version is 17.0.0 and for android maps or teals version is 2.2.0 okay so uh that's done word do okay we did this step uh if you do not have project y properties no we have we did that so we don't need this wreck native all versions specify your google maps api key inside you will only need to add this meta tag but make sure it's a child of application okay our google play here and google api so in our android app uh source main android manifest uh inside our application uh component and i think that yeah we can do it before closing the application tag we can write this metadata not indented properly but i think it's okay so uh a key and here we need to paste in the api key what we take from i think yeah the same that we inserted there save what else i think we also need this uh use library source okay lower no uh old version sure that you have a google play service installed okay all right so i think the installation uh is complete let's test if it actually works so where is it we have native maps let's try to use it and we'll see if it actually works so yeah let's import map view and we're going to do that in our source components map view somewhere home map here so let's import the map view and let's render a simple map view so instead of a text we're gonna do map view so let's we have to rerun the application on our device because we installed new libraries uh all right so let's wait until it installs the library and see if we didn't miss anything from the setup come on install hello emmanuel uh manuel is watching from china okay i should i should make a map behind me and i'm pretty sure like we are we have like a lot of countries covered so come on come on come on successfully build the application please work okay here we need to set to the map view first of all a provider because on apple the default provider is not google but it's the apple maps so from rock native maps we need to import save some styles height 100 let's do simply 100 and see if it's because of that uh with 100 save yep i see the map right there soho um flex one will it help us flex one no let's go with a width of 100 percent and also uh height 100 percent like this save okay then where is my code i don't remember how i oh yeah we can actually pinch to zoom uh scroll to move and so on so all the functionality is made there so let's see where my code disappeared so yeah that's the first step and we see that our maps has been installed successfully i would like to try to test it on android as well um but i'm afraid that my my pc will crash so i will do it uh just after we finish everything we'll do a final test on android and see if everything is working there as well so if you're having some troubles um yeah uh check out the troubleshooting guide from the library we have here where is it in the installation part we have like troubleshooting so you can see what possible errors you have and what solution they offer [Music] okay um i want to make this um this view to be aligned at the bottom and to only con take the space that it needs so um i would say that this one should be 100 this view or it actually can be the map view right away like this a map view and uh with that in our um we are now i think in that destination search index so we have our no no destination search search results uh we can oh that's uh that's interesting so where is the map home map let's think how uh yeah the map should take uh the rest of the space that it contains so in our search results style display flex and this one will be inside the u style flex height i don't know 500 pixels just just testing to see if it works on why you doing that to me save and home map should not hmm okay that's not a very good solution because on different screens it will not look the same so we need um we need actually this item to take out 300 hmm come on the damn thing no our um okay this one will have a fixed height so even if this is 100 let me just work with some background colors uh to be sure what i see so 500 maybe is a lot four hundred okay um justify content uh space between styles when my brain doesn't work oh my god flex one justify content space between all right so i'm gonna go with a easier solution probably so uh height height height dimensions window minus 400 dot get height that's don't like this solution something like this and it will probably uh scale the same on different screens i'm pretty sure there is a better solution than this where um yeah we're right yeah here where we just uh have this content displayed at the bottom and uh the map to take the rest of the space but i'm yeah quite tired at the moment to think about that 70 uh vh uh not sure not sure about that but yeah something like that so [Music] let's move let's move you know where let's move to the home screen and render where us and finish the home screen because yeah in our app let's import our home screen because we have there a map and in that uh on that map we should render all them uh all the cards that are available around us so home screen uh home screen we need to do something similar in our home screen index don't like this solution at all but it works so we have this dimensions from rock native um 400 is enough 500 no 400 is enough yep yep yep i think it's this is the way to to go so uh on this map we need to uh render uh all the cars that are there so to render cars we will use markers and uh this is how we uh put uh yeah some to display something on a map based on the location and if we look uh here we have a an example about markers with a custom view we need a marker with a custom image so yeah this is related to longitude and a image of a car so in the home map index uh let's expand the map view and by yeah adding a separate closing tag uh let's import the marker from is it from here mark yeah marker latitude uh latitude let's try a very dummy latitude and longitude to see if it at least works and for the image we're gonna go into uh uh dot dot assets dot not pin but we have our assets images and we have like the top comfort uh top uberx and so on so i'm gonna go with um top slash uber x no images images slash top uberx png save okay it's there it's quite huge uh huh why is that i think we can give some styles to this marker with a custom callout nope nope nope marker can we give styles to the marker style with 20 fight 20 nope nope so if i scroll here a bit will the size of a marker change no it will remain the same come on okay so uh marker let's try to find a way to style this marker animated marker position no that's not what we need takes no pro zoom we can we can what we can do uh image so let's check if we can find something from here marker components marker props and image uri okay opacity coordinate center of set draggable what on press on select something with size or the index rotation nothing okay i think we one way to do that is just to decrease the size of these images and that will actually work but in that case you will not you will have different images if i change the images right now so i think i'm gonna just implement a custom marker custom marker so custom where is a marker with a custom view so yeah to do that instead of the image here uh i'm gonna expand the marker as well and add the closing tag of a marker and here i'm gonna add image uh source will be equal to require the image and right now we can declare some styles to this style styles with i don't know let's say 20 pixels height 20 pixels and um how's it called resize mode resize mode we need to say contain because in order to display the whole image of contain so yeah we have to import the image from react native right now unexpected token unexpected token where require source okay we don't need two um curly braces we need only one yeah right now it's there it's very small we can actually increase the size of it save it's much better so yeah like this we see it there and i'm not sure what will happen if we zoom how to zoom come on you have a map is very slow okay yeah it stays the same the same um position i mean the same size which is good uh so uh the thing is that we need to display multiple markers we need to display a list of cars that are currently on the map and we can get this data from our dummy data that you can download on the link that you can find in the description and also um into this live stream so in our dummy data we have a file named cars and here we have a list of multiple cars with their type and with their latitude and we will have to look through all these cars and display them inside the map so uh what are we doing so here instead of displaying just one marker we will display a list of them and to display a list of them we will use them the flat list flat list here we also need to import the dummy data so import cars from assets data cars okay so uh yeah here let's render the flat list and the flat list needs two properties two required properties data which is an array array of of items to render and in our case it's cars and a render item function which will send us one specific items and we need to return a component the way we need we want to to render it and the component that we will return is the marker that we just defined so our item will be for example this car and it has a latitude and longitude so instead of uh hard coding here the latitude we will say that is going to be item dot latitude and for the longitude again the same item dot longitude like this for the image for the image we will uh copy paste the image from the uber types role because we need the same if statements get image here get image and we'll send here that type but the type will be yeah it's not going to be an object it's going to be just a string so for a uberx we need the image top slash uber x here we need top dash comfort right it's png okay png p and g and here top uber x png and that's how we will render different images for uh based on the type of uh of a marker but based on the type of a car on the on the list so uh for the image here we're not going to hard code it but we're going to call the get image and send there the item dot type item.type xpreacher what's happening latitude fix fix okay so um yeah i'm gonna try to uh i'm gonna copy the the latitude and longitude of the phone of our car and set it as the default latitude and longitude here so because yeah i have a different location for our dummy data so if i save now exception fro when when executing ui block unexpected view here of rtc scroll view hmm maybe yeah i think we shouldn't use flat list here and we need to manually uh loop through each of the car yeah we need to manual loop for each of a car uh and and display them because yeah that that is dumb uh to use a flat list here because flat list is like a scrollable view so we're gonna do some small changes here so cars dot map and for each car we will render the component that we have there so each car like this we will put so it's car car car let's remove a flat list right now cars.map and we need that also a key for each uh and the key will be car dot id save please work please work why are you not working save refresh refresh refresh refresh it shouldn't be san francisco there reload you have two times the longitude prop two times longitude prop related to latitude longitude longitude [Music] where yeah uh right now there is no um there is no back end yet we are using dummy data to make sure that the ui is working properly and later on we will implement the back end so we see the three cars there that's good uh for the delta i think i i can decrease it a bit so it will show closer look of the santa cruz cities so will you work will you why it's not refreshing from time to time yeah right now we see uh different cars on different locations rendered on our map so um that's actually good and that's actually what we wanted to do with our maps and guys uh yep there is one more thing to do with the maps uh one more thing and that thing is the map's direction to show the the route and this is pretty interesting uh i haven't worked with this direction uh yet but uh yeah it seems to be a pretty straightforward library to use a bit easier to install than uh than maps so i think we can finish it in uh yeah probably 10 minutes so let's uh open our react native maps direction and we're gonna need it in our yeah the destination search to show like from where to where and so on so i'm gonna open it here and this is a direction component for react native maps for the library that we are using for the maps we need to stay hydrated guys don't forget to drink water all right so yeah let's install the library pretty straightforward using yarn or npm terminal install direction will close everything and we are going to display uh in our app.js uh we're gonna display search results page because that's where we need uh no no no not here here we go yeah and in the search results we're not gonna have a home map but um um i don't know a route map something like that and i just copy pasted the home map because uh this map that we're going to develop will be pretty similar but instead of showing cars on the map it will just show the from and the destination connected by the route so that's what they did uh route map here and it's going to be called route map around map export default route map and in our screens destination search results we need to change from a home app to our route map and now in our home screen we use homework map in our search results we use the route map route map we are going to be pretty similar with some small changes yeah i think uh it changed because right now we still render the same thing in our route map we can actually go ahead and disable rendering the cars because we we will not render cars there so get image probably as well and dummy data we don't need flat list we don't need marker we'll see probably we'll need so yeah as we see uh it's a clean map so with that said let's go back to our direction and see uh yeah we don't have to do anything else i guess okay so let's try to to use it so it's just a component that we will import in our map route map that we are gonna render inside our map view as a child of a map view let's try to do that let's close this one inside the map view uh we need uh um okay we need origin which will be a object with latitude and longitude okay let's i will declare them here so const origin equal to okay just one curly braces and destination right and destination so and i'm gonna just change some small variables here from i don't know which one to change from six to one and from three to nine let's save google maps api key we will need that so i'm gonna declare it on the top here const is equal to let me just grab it from somewhere where is the easiest way home search no no no no no auto complete where is my auto complete how to complete here is my api key so i'm going to put it here save and shall i try to rerun yarn start no no no yarn ios i didn't focus so let's see let's see right now if we have any route i don't see any route map view direction okay there is an error that we have to check here uh map view direction error error on gmap's route request this api project is not a for us to use this api okay uh that's good we have an error and that means that we need to uh enable uh one more library here so that's is that direction library direct directions api if i'm not mistaken right uh map view direction yeah i guess it should be the direction enable unless there is like a direction for android and ios okay it's enabled and let's try to re refresh reload come on come on you can do it reload and [Music] so yeah that's uh that's really awesome so we see the uh the route here rendered on the on the screen we can have a look at maybe there are some um some some some um some styles split way points yeah it we can send also waypoints and for example if your drive has a stop somewhere you can add it there um oh it also has a time precision okay that's nice oh stroke with free and for the color it has also stroke we called pink we can go even five and have a stroke color like this inside our map view we can also render two markers it can be custom markers or any other markers where is it to indicate the uh the the beginning and the end of um of our title or ori jin [Music] oh origin and the coordinates will be origin and for valver1 as well this the nation destination will it work what do you think save uh yeah yep yep it kinda works i mean it works uh there is just no road from here to there so that's why that's because i chose like wrong destinations and i don't know if i can change here i don't know from one it will be a different route i don't need to to swim today so six yeah this is much better so now here we see our origin if we press on the r1 we see our destination and then we will be able to uh to choose the car and then confirm uber and we will be done so that's uh that's it with our maps um that's it what i have planned with our maps right yep so um the last thing that we have to do to have actually working application even if uh it lacks some some features is react navigation to be able to navigate from screen to screen and so on but uh we are already running from for three and a half hours and i think that uh this is enough content for you to follow along until the next week so the next week we will implement react navigation we will fix the styles and we will finish everything regarding the styles of application will improve implement even more interesting features uh for this clone so yeah stay tuned till the next week and uh we're gonna be back in business um because yeah right now i am pretty um tired so guys how do you feel how did you find this build and uh yeah do you have any questions yes i will implement the back end later uh usually the clones that i'm doing on this channel follow a pretty similar pattern uh i i do have first video where i implement them let me do it like this yeah i do have one video where i implement some easy ui elements in react native then if necessary depending on the application we go into more advanced features uh but yeah i think the advanced features in the uber application are from the beginning because here we work with maps we work with destinations we work with autocomplete and this is quite complicated for a beginner so if you if you're struggling with this build and if you're a beginner don't be discouraged check out other builds on my youtube channel i have a lot of very beginner friendly that a lot of new people to react native have followed and they actually managed to build a fully working application so yeah if you're a beginner follow our tutorials on my page if you feel comfortable with others you can yeah start with this one but yeah and uh the second episode yeah we go into more advanced and in the third uh episode of the series we usually implement the back end using aws amplify so yeah uh the easter privet is peter privet privet hello um okay james uh is saying this is awesome i'm grateful thank you very much for joining and i'm really happy that you find this valuable even if my voice is cracking already after three hours of speaking um guys if you didn't join the discord channel now is the time go ahead and join we have uh during the holidays we have restructured our discord channel because uh there are a lot of people there already and a lot of people interacting helping each other if they have questions i'm also joining very often there and trying to help everyone that is uh having some problems with the bills or having some questions about anything else other than bills so yeah join our community there it's uh it's gonna be pretty dope is anyone here that is joining this live stream the first time or yeah found the channel just now allah question are you going to use mongodb at the near future mongodb is a technology that a database that i'm using day to day and yeah i might do something with with something that is not amplify where i will create for example a custom graphql api and at that time i will need a database and if i need database i go with mongodb so yeah there is a high probability that i will do it in near future uh if i will show you like how to create a custom api and so on so yeah mongodb is really powerful it will be available on youtube uh this stream yes this stream will be available uh on youtube uh yeah after we finish this stream it will be a video uh it might take a couple of hours until it gets processed by youtube but you'll definitely find it so it's going to be there all the tutorials and live streams that i'm doing are on my youtube channel you can find and follow them we did the instagram twitter spotify uh what else uh airbnb uh anything else i think more yeah we did more than five clones already tesla yeah tesla was uh tesla is a very beginner friendly uh project build and it's two hours you're building your first project in work native and i see that a lot of people found it available and it was really surprising for me that people that uh that said that are new to javascript they first time were are writing javascript we managed to build it till the end so yeah that's that's really awesome what's up yeah what's up was a big build thank you alexandra okay let's let's check emmy is the first time hello thank you very much for joining i hope uh i gained one subscriber if you enjoyed it and if you're still here bro how are you doing i'm very good today excited a bit tired but that's what it happens after a free and a half hour stream or how long something like that uh allies as well the first time uh joining them i have a stream welcome welcome to the gang uh make a whatsapp group we have a discord awesome discord channel so i would like to welcome you there delight mega vadim you're the best on the whole youtube oh thank you very much i'm gonna blush what's the difference aws and mongodb and what is better to use um so the difference between aws amplify api we're yeah behind behind the scenes we're using like we're building we're building a graphql api using appsync and as a database we use uh dynamodb uh and the other option is to actually build um a server for yourself by yourself from scratch like node.js express mongodb i don't know like graphql uh and so on uh the differences um is the speed of development and also the flexibility so with aws amplify you have a like a huge speed of development like you i'm building this uh these back end applications in two hours and probably if i would have to do the same things by myself without aws amplify i would need i don't know like two weeks because uh for web for everything that have already built in and these are things that are so common in every application but take so much time if you're building it yourself for example if you're uh building authentication like you will spend so much time making sure that everything is secure making sure that you have to handle every possible solution to implement all the ui screens and so on when authentication is such a basic thing and it will not differentiate your application for your competitor so why spend time building it so um yeah uh if i would uh known about aws amplify when i started my startup i would definitely start with it uh i didn't use amplify in production build production application and i'm not sure like uh there should be definitely some limitation that will be hard to accomplish with amplify but to get started to build some mvps and yeah it's it's really an awesome tool and it helps you speed up this this process so yeah in in in the world of startups and in worlds of world of mvps where you try to um to build uh application and test it as fast as possible uh this is like a really powerful tool but when you build it yourself you have a flexibility to do whatever you want so this is the this is what you have to to choose flexibility over speed of development okay then hopefully that answers your questions pro react native you are great thank you what can use for making the application responsible to other devices what do you mean responsive to our devices our device is screen so if you are speaking about like the responsiveness of ui to to adjust the ui based on the size of a screen um yeah the flexbox comes to your help and yeah you need to to actually design it properly with flexbox so it will um yeah grow and shrink based on the on the screen size and not just say like i don't know with 100 the same way as i did today so yeah you do it with flexbox and uh it will work on different screens uh came late uh don't worry uh the video will be available on the channel so go ahead and watch it pavel special rock pasta you're welcome my friend uh you know java yeah i know java uh i've been coding some java and mostly all them everything related to algorithm and data structures i'm doing in java and also when i was applying at amazon and when i was going through the technical interviews uh even though i write javascript day by day i just can't do algorithms and data structures in javascript it's just so i don't know it's i i'm used to java even some c plus plus so when it comes to some algorithms or data structures i'm doing java so let's see um yes do a big project not just express react native and mongodb yeah okay that's uh that's interesting uh because even these projects are taking me i don't know around nine hours so yeah but but this year i'll have much more time and i will do more interesting projects so your ideas are welcome and i really appreciate them more advanced projects can i deploy rack native ios apps using a windows os yes you can deploy it on play market uh in order to deploy it for ios on uh on apple market you need a mac os to actually build the build a project and to to deploy it so that's the limitation that's why i bought a macbook because i needed to to deploy my application for my startup to ios because we have been running it for more than a year only for android and then we decided like we are doing it in react native why we are not supporting both like android and ios so i bought a macbook in order to deploy it to ios there are some hacks i think you can install some hackintosh but i'm not sure about that uh you're the best vadim i hope you start up achieving mass success thank you very much thank you i really appreciate that can opencv documents kinda be used in react native i'm not sure i didn't work with that um check out if there are any uh bridges to rack native maybe i don't know but there are there it might be there i like your hoodie thank you very much not just developer who is not just developer uh so how many years need to become a developer like you me in seven years so but you can definitely do it faster so it's just yeah the matter of how much time you are willing to spend and uh on learning new things and yeah how much you enjoy this because if you're doing this only for because it's cool to do this uh you will not spend a lot of time but i don't know i remember that i came from university and from time to time i was spending like 12 hours a day coding and stuff like that so it depends on also the intensity of but you can definitely be become uh good at this in i don't know half a year and i know that there are people for example uh there is a youtuber i don't think that i'll pronounce his name correctly but uh clement michelesco and he got a job as a software developer at google after learning uh so after learning programming for i think half a year so it's definitely possible what do you think about graphql awesome much better than rest api for some cases for a data-driven application i don't know like uh for social networks and stuff like that where there is a lot of data and a lot of connections between data then graphql is uh is like is is a very good solution because uh with graphql you give uh the front the front-end developers the power um to query the data that they actually need instead of you deciding like what data to provide and also it allows back-end teams and front-end teams to um to progress on their own pace so they don't depend on each other so much as with rest api so yeah i think that's that's a great uh technology we are using it at vitinum at my startup big likes okay guys so i think we will close it here we can call it a day thank you very much for joining uh i really appreciate everyone who joined who support me who asked really interesting questions um yeah uh join me next week where we will continue working on the uh uber clone will influence every friday we are doing a rack native clone like this sometimes we do react native when we do aws amplify indirect native so uh this year there will be much more content uh interesting content that you seem to really enjoy so guys um yeah subscribe to my channel big thumbs up

Channel: notJust․dev

Views: 311,499

Rating: 4.9110112 out of 5

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

Id: sIRcN0MeZVU

Length: 223min 50sec (13430 seconds)

Published: Fri Jan 08 2021