Build a React Native Full Stack App : Expo, Google Map, Firebase | Full Tutorial

hey there and welcome back to tube gurjit channel today we are going to build EV charging station finder application with the help of react native Expo Google Map Google Play API and Firebase and if you are new to the react n or Expo don't worry because this application we are completely building from the scratch and it's a beginner friendly if you learn how to build this application you can build a many uh application having the similar kind of use case for example you can build coffee shop uh finder or you can also build application to find gas station saloon play area Hospital finder or maybe a restaurant finder as well okay and this application is very easy to build and I will going to teach everything from the basic so first thing let's walk through the application and then we'll talk about the Technologies and how to build this application when first time you open the application you will see this beautiful login screen okay and we in created Google authentication for this particular uh application okay just click on it and then it will redirect you uh to select account okay uh select the appropriate account to login with and then wait for for the verification and if you see it will redirect to this home screen of the application okay now if you see on this uh uh home screen you will see this Google map view and it's C fully customizable okay so in this application uh in this particular course obviously we going to learn how to create the application then we will also learn how to run the application on the emulator by set setting up the Android emulator Okay then if you see this font we also added the custom font you will also learn how to add the your own custom font okay on the uh uh in this particular application we used a Google map and if you see this Google Map uh The Styling is completely different than what we use uh inside the Google Map application okay so this Google Map we completely style so we will learn how to add Google Map inside the uh Expo react2 application and also how to style it okay then if you see we uh it right now it showing the current user locations and the nearby all the uh charging station okay so you will also learn how to use Google place API to fet uh the nearby locations okay whatever you want for example if you want to fet a coffee shop or you want to F charging station everything you can do it once you complete this course okay then you will see you will also learn how to add the marker and how to uh customize your marker icon okay with the help of flat list you will learn how to display the list of uh place where we are going to show like like this okay you will learn everything even though if I click any of this markers see the marker uh color is getting changed and immediately uh this um Place list also get updated on this bottom side okay not only this but we will also learn how to add the autoc complete functionality if I want to search some address you will see you getting the suggestion from the Google okay and we'll I will learn teach you how to implement that auto functional okay and if I click any of these immediately you will U redirect to that location and all the nearby charging St will displayed on the screen okay how um fantastic right also once you uh if you want to mark this particular uh place as a favorite just click on it and it will mark it as a favorite so obviously we are using Firebase uh to store our data okay so you will learn how to integrate Firebase inside inside our application and then how to store the data data so if I go to this favorite Tab and you will see all this um Mark favorite place you will see it here okay so we are fetching it from the Firebase and obviously once you mark it as a favorite it will store in the database even though if you want to uh remove any of this fright list just click on it and it will remove from the list also with the help of flat list you can do the pull to refresh function ITC and it will get refreshed immediately okay another thing in this application right if you want to uh open the or you want to get a direction just click on this uh map and it will redirect you on the Google map where you can get the direction and everything okay so how to use linking and everything you will learn in this application so this application is completely be friendly and then you will uh find a lot of interesting thing to learn from this particular course okay so before doing any further delay if you did not subscribe to my Channel please please do subscribe so uh you will get a a newly updated course as well as um you can join my Channel or you can buy membership to get the free source code of the all the courses which I posted on my channel okay so guys uh let's start implementing this uh um particular application and also uh let's talk about the technology which we are going to use to implement this complete application so in order to create the react N2 application we are going to use Expo build tool Expo is one of the best easiest uh uh build tool to create the react new application okay and uh in order to develop the application or to deploy the application Expo will help you to do that okay and if you go to this expo. website here you will see the uh all the features that Expo is providing also uh this Expo provide a very um uh good documentation okay so let's go to the documentation on read doc uh to get started or to start creating the application okay and if you see uh this is the command to create the application okay so copy this command and then go to your desired folder where you want to create the uh react n to application okay and open Terminal inside that let me increase the size uh just paste the command which you copied which is NPA cre Expo app and then give the project name so in this case I will give EV charging station app okay and click enter now it will install all the dependency which is required for your uh application okay so let's wait for a few seconds to install uh all the all the dependency and packages and if you see our app is now uh ready to uh run it okay so let's close this window and open the vs code and locate the folder where you uh created this react native project so in this case um document react native and then EV charging station and click open okay so uh if you don't have the vs code uh I will suggest you to download this vs code okay uh before um explaining this folder structure and everything right there are two things uh you have to uh keep attention Okay so first thing uh in the vs code we have one extension called es7 plus react Redux okay make sure you will install this uh particular extension okay this extension is very helpful to create a default template so once we started uh developing the application you will get to know how to use this one and how useful it is okay and obviously uh just for the information purpose we have the tailin CSS extension download that as well so in the in in many of my uh react njs courses I use telin CSS and this uh extension is quite helpful so going back to our um five folder structure so here if you see right we have uh this in Explorer right we have the asset folder okay this asset folder contain all the files uh fonts images that we are going to store in This Ss folder okay then we have node modules we never going to touch this node modules okay so uh node modules contain all the packages information okay whatever the packages we require for application which the node modules has all the that one okay but we never touch to the node modules then we have the app.js this app.js contain actual uh or which is the starting point of our application okay so once we run the application you will get to know then we have app. Json inside the app. Json if you see uh it mention the name of the application obviously you can change it also the icon the version of the application okay what is the orientation of your application with this landscape or portrait okay then it also Define the splash screen along with that you have configuration to add the Android configuration or iOS configuration okay now if you want to build the APK file right here you can just um add the package name and then you can try to build it okay then we have B.C config.js most probably we'll never touch this file and then we have packet. Json so if you see in the back. Json it it mention the name version along with the script to run the application also it has some dependencies okay which is required for this application and some de dependency as well okay so this is all about the folders and file structure uh once we started um um creating folders and files right we will keep attention of attention to uh create a particular file so that our app our project will be or in in the form of in the organized way right so so that's the reason now uh if you have the uh emulator right so let me let me run this application first okay so just do expose start if expose start doesn't work okay then you have to type npm start okay so once you dou the npm start it will run your application and if you see you have one QR code okay so let me go back to browser and here if you search expoo right expoo is the mobile application which is available for the App Store and the Google Play Store as well okay just go ahead and download that one if you want to run your application on actual device on your device then this expoo application is required okay with this one you have to scan this particular QR code okay or the another method is just login uh on Expo de account okay same on the expoo application as well as inside the ter inside this um using this terminal as well okay you have to say Expo login then it will login uh to the Expo account and then automatically uh the project which you running right in the same network is very important the uh your your uh expoo application or mobile device and the uh PC will be need to be in same uh Network okay in order to run the application on a actual device okay the second method is uh to run the application on emulator okay so uh let's uh download the Android Studio if you don't have Android Studio okay just search Google on Android Studio download and from this one this particular uh link you can download the Android Studio okay once you download the Android Studio let's open the Android Studio okay and then you have to uh if you see this uh three dots right click on that one and you have the option called hdk manager okay go to that one here you have to make sure that you have one of the API right now I'm using the API 34 then in hdk tool make sure you install this hdk build tool okay then you have the Android emulator install and the hdk platform tools install as well and then hdk update side automatically includes everything but make sure these are the um dependency you can say hdk need to be there okay and then once you select it install download uh download it and then click okay okay so I already have next you have to go to this uh option called virtual device manager okay where you can create a new device okay if I click on create new device here you can create for phone tablet TV desktop okay so in this case is a phone select the uh phone type which you want to create it okay and then you can select the configuration on clicking next and then you can just finish it after you select after you select all the configuration okay and then your emulator name name will appear on this particular page okay just click on run okay so in this case I will running the pixel 7 Pro API 33 Okay and it will take few seconds to run the emulator and if you see on the right hand side the uh actual device is showing on the screen okay now I already have the expoo application and obviously I will click on login or in order to run the application right just close this Android Studio once you run this emulator okay and let me decrease the size like this so emulator will be display on the right hand side so here once you run this expoo applic sorry uh the Expo npm start okay or your application click a the A is for the Android I for the iOS emulator okay so I'm running on the Android so click a and now if you see it's running our building our application so on the right hand side if you see it's building the application okay and same uh thing you can see it in the terminal and if you see here uh continue okay okay so if you see on the particular screen right now it's showing open app.js to start working on your app okay this particular message is returning on this app.js file which I told you before right this is our starting point of the application very first page the app.js okay and whatever you written in this particular text will appear on this particular screen for example if I write subscribe to tube guruji okay if you did not subscribe to my Channel please do subscribe and save it as soon as you save it immediately you will see the change you don't need to refresh the screen or rerun your project again okay this is very important so here this is the export function okay inside the function we have a return and whatever you kept in the return return um or inside the return return you will display it on the screen okay also in the return you can return return inside only one tag so in this case if you see right this is is the view okay and it's like a um du inside HTML CSS okay similar it's a view inside the react native so you cannot write view another view like this outside this particular view right you have to write everything in one tag so similar like this okay also if you see uh Define the some style okay and here is the style is defined and this kind of styling um is called external styling because we Define the style here okay and this style is defined in this section means externally and not inside this particular view only okay we'll we'll get to know much better once we start writing the code okay then we are showing the just text and status bar is at okay if I com in this code and save it if you see at the top it's showing black okay but if you say t about Auto then it will it will um fill the complete screen okay so I hope you understand this one how to create the application our folder structure and then uh how to run and set up the emulator so that you can run on emulator also you will learn how to run application on actual device okay when you are running the um application on actual device make sure you your uh PC Network and the mobile network will be in the same network okay so this is very important so next we will uh set up a Google fonts throughout the application okay and I will teach you how to do it so see you in the next section now in order to set up a custom font right let's go to the browser first and just search for the Expo font okay and don't worry guys I'm going to teach you how to learn from the documentation how to implement from the documentation and so it's very easy for the beginners to write a code and to uh build this application okay so once you go to the Expo font right you will see that you need to install this uh particular dependency and this is the export documentation this is official export documentation okay so copy this particular command go to your project and just run this particular command in a new terminal like this once you install right then you have to write this particular code so first uh copy this Expo font okay so I will copy this Expo font also if you see right they also importing flash screen they they are just making sure that um uh it will show the spash screen until unless the font is get loaded Okay so what I will do along with this XO font we'll also install the Expo flash screen so just search Expo flash screen and it also has a different dependency so you can install this dependency as well okay so I will install that dependency as well and again go back to the Expo font documentation here copy this three line of code okay so whatever you see in the yellow just copy it then go back to your application in the app.js paste it here like this okay next copy this code as well the font load on layout over and up to this point okay and paste it inside this function okay now let me explain the code one by one here we just import the documentation and it's showing it's initializing some prevent atoide splash screen okay then it's loading the font okay and if you see right now it's loading the front from the assets folder okay from the uh in that we have font folder and then some uh font file okay so right now obviously we don't have anything inside the asset folder or inside the font folder okay so first let's go to the SS folder and create a new folder and we can call it as a fonts then we need a font okay so just go to the Google fonts search for Google font and you will find a bunch of different types of font okay you can select any of them so in this case I will select outfit okay which one I like most select that that one you will see the how this font look like and just click download family okay and open that one in your Explorer okay and extract this file so I will extract this file and in that again we have folder called Static and whatever the font you needed this file. ttf right you can just copy this file so in this case I'm going to copy regular then bold and semi bold I will copy this one then go to your V code go to the font folder right click on it and click on reveal finder okay so here so it will open the file explorer inside that particular font u in that particular uh folder and paste the file which you copied inside the font folder okay perfect now let me close this one so now here you have the font okay and in inside the asset folder okay just locate the folder and then you have to change that you have to write that particular font name so in this case is outfit regular dot ttf okay so if you see this is the extension okay outfit regular ttf that's what I give okay obviously we can call it as a outfit so whatever you call it that going to use it every elsewhere okay and third so obviously this will be I will give you name as a semi bold and another one is bold okay for this one I will give outfit medium and for this I will give outfit bold okay and save it now you initialize all the font okay so right now if you see one we got one error call use call back does not exist so this particular uh Hook is not imported okay we'll learn about hook what is hook actually but this is the re need you do control space okay and you will find this Ed call back from this react enter it and if you see now this Ed call back Hook is get installed inside from the react okay and now save it and we'll wait and if you see it's running also make sure that you will add this on layout on layout root view okay so this particular line okay inside the view so now uh we have this particular stes okay and let's give some St so now I'm giving the inline style okay and here only I'm giving style so right now I will increase the font size to 20 and if I save it see the font size is increased now in order to apply the font you have to write font family obviously and here you have to write the font which you want to apply so in this case we have the three font we added right the outfit outfit medium and outfit bold so I write the outfit save this one and if you see it changed immediately if write outfit medium and save it you will see the change okay or if I write outfit bold see okay so immediately it's getting changed so this is how you can write the uh font family okay now not only ijs you can use that particular font anywhere in the application okay so I hope you understand how to add the custom font in your application so in this section we are going to build a login screen UI uh before that in the asset folder I create a new folder called images and inside the image I added three files called logo.png EV charging PNG and car marker okay so make sure that you can add your own assets if you have okay or you can use existing one from the source code now uh let's create a new uh page or new screen okay so what we can do as I told you in the beginning that uh we will make sure that our pro project folder is organized so in the root directory I will create a new folder called app and inside this app folder we will create a new again new folder called screen okay so all the screen of our application will keep in this particular folder okay inside that I will get new folder called login screen and then create a new file called login screen. JS okay so can do jsx doesn't matter and uh make sure the uh file name or component name will start with the capital letter okay now here we need to add the default template like this okay so if you see we have export default function some default import and then you have to export that one okay the question is how to add now so every time you will create a 10 files you have to add the 10 times right that's the reason very beginning of this particular uh course I told to add extension which is react native and this help us here to add the default template so as we are working on react native application just you have to type rnf which is belong to react native function click enter and boom you are getting this default function automatically see okay so this is how you can add the default function now save this one you will not find any change here okay let's go to the app.js first thing I will remove from this um align item and justify content Center so it will be at the top and here I will give padding top 25 maybe and save it so it will be it will be visible okay now let's remove this all the text and in order to use this login screen you want to display login screen on the UI make sure you can import this login screen inside the app.js so in order to import just write login screen okay and if you see this loging screen is importing from the/ App SL screen click on that one obviously it will import the uh statement as well and then close the tag and then save it and if you see now on the screen it's showing login screen because in the login screen particular page we have the text called login screen okay perfect now let's start developing so let me close this one we are in the login screen we are whatever we write in this login screen will display on the particular um UI okay now if I save it nothing is on the screen that's the reason your screen is showing as blank first uh let's add image so if you see I'm adding this image from the react native okay then you have to add source and inside the source you have to write require whenever you are fetching the images from the local okay when I say local it means from the assets folder you have to write this syntax source is equal to require and inside that you have to give path so so in this case the path is uh assets slash images SL logo.png okay and then end the tag okay after after that we have we can do a different kind of styling as I say right it's a inline style or external style okay so in this example for this particular image I will teach you how to do external styling okay so in order to give external styling here outside the of this function you have to write rnss which is react N Style click enter oh sorry so Rea native so just R in style okay and it will create the Styles sheet U um default template for you okay remove this one and then make sure uh to import this one so just uh click control space you will get suggestion and then click stylesheet so make sure the Styles sheet is imported inside the re from the react n package once you have the this Styles sheet here you can define a class name kind of okay it's similar to HTML CSS so in this case I will I will mention like um logo image kind of thing okay and inside the C Braes you have to write the properties for example um let's say width I will give 200 then a height I 40 and then make object fit contain okay like this so if you don't know about the HTML CSS uh sorry the CSS just make sure that you have some knowledge of the CSS okay then here now in order to apply that styling we have to write style and is equal to in the single curly B you have to write Styles okay which is this reference of the Styles Dot and if you see you got the suggestion that you have this class called log logo image and then save it now on the screen if you see it's showing on the screen immediately okay so this is how you can add the inline styling sorry external styling now let's add the inline styling as well so for this view what I will do I will add some style sorry so in order to add in line you have to write the styling inside double curly Braes here I will say display as a flex then justify content at Center let align item to be in the center and then I will give margin top maybe 50 and save it and if you see it comes in the center okay perfect similar way let's add the another image okay which will be our uh U Back uh the I will say login background let's see so image source here say require and I'm locating one file which is from the asset SL iMed SL login. pg. PNG okay and in the tag so here as well I will add the inline styling okay Style is equal to how you can add the external styling it's up to you how you want to add okay let's uh for this particular component we'll add all the external styling okay so we say BG image and for this image I will add width 100% then height I will add 100 margin top I will add 20 and then object fit said cover okay like this now let's apply the style using styles do background image and save it so right now if you see this file is not exist let's see the what's the actual name of that particular file so go to the assets images and we have the name called EV charging not the log login BG it's EV charging and save it and if you see it's showing on the screen now okay so if you see the height is not the good height here I will give some maybe 180 let's give 220 that's much better okay yeah this is much better okay perfect now we need to add some text and everything okay so what I will do I will create a new view inside the same view okay and inside that let's give some style to this one style I will add padding 20 and inside that I will add one text okay and here we can just write the simple text your ultimate EV charging station finder app okay and another text I will add below that one and it will say find EV charging station near you plan trip and so much more in just one click kind of thing okay and if you see it's showing on the uh screen now what I will do I will add two different uh style one for the heading okay and we can uh let me add font size first of 25 now here if I want to add font family right we have a lot of three type of font family so here I will add outfit bold okay then I will add text align in the center and then margin top to 20 okay and save it now let's apply that styling to this particular text so I add style styles. heading and save it and this is how it looks perfect next we'll add the subheading sorry maybe we can call a description and for that one we'll add font size of 17 font family just outfit normal regular one margin top I will give 15 then text line in center and I want to add color as well so let's save this one first and make sure to apply that style to here so style is equal to Styles dot description see okay now we want to add the color obviously you can just add the color and some hix code for example okay but obviously throughout the application every time you have have to add color okay and color code so what we will do uh inside the app folder I create a new folder and we can call it as a ukil okay and inside that I will create a new file called colors. JS okay so inside this file whatever the colors we are using in our application we will write so just write export default first okay and here for example I will write primary of your application color so this will be a 0 B c224 okay this is our primary color and Le for say for gray color for example # 89 89 89 okay for white I will write hash f for black I write hash okay if want to add more you can add it here okay for now I will keep this one obviously I'm going to add much more once we um proceed further so right now we are okay with this one let's save everything okay and and for the description I will add the uh color and if you see I'm adding color from the colors Dot and if you find you'll get option so in this case let me colors okay let me I don't know why I'm getting this much suggestion so if you see we um we are imported incorrect uh colors um so just make sure that you will import the correct colors so in this case if you see right we are not getting the suggestion so in that case you have to import that particular statement manually so what I will do I will go import colors from and then locate that folder so util SL colors okay and save this one if I go to the colors make sure it's it's there okay and now just apply that colors okay so colors dot if you see we got the some suggestion so in this case we want Gray save this one and if you see it will look like this okay perfect now let's add one button so on that click of that button obviously that will be our a login button okay so let's add that one as well so here I will add one view okay instead of button because we can customize customize it according to our need and inside that one uh let give some style but before that let's add a text and we can say call login with Google and save this one okay and this is how it looks so we right so here before after the description I will write button and uh just write background color of colors dot primary then I will add padding of 16 then display it as a flex then border radius I want rounded border so that's why I will give value 99 padding left will give I don't think so we need padding here just margin top to 20 okay and then apply that particular style to this view so let's say style styles dot sorry um button and save it and if you see this is how it looks here let's write the inline styling to this particular text and here I will say color will be colors. white okay then we'll say text align inside Center and uh just add font family outfit okay we'll also change the font size to maybe 17 like this okay and for button let's give some margin top maybe 30 40 that should be good okay obviously you can give much more margin depends on you okay but for now I think this uh UI look good to me okay and uh let's me add some more margin from the top okay yeah now we have ready with our login UI screen okay now one more thing here I want to tell you okay right now this button is just a view okay and it's not happening any event or nothing is doing right but obviously we want uh click event on that one okay so what you can do this touch this particular view you can change with the another property called touchable opacity okay so if you go on the Google and Export documentation here you will find uh touchable Expo just search it like this and if you find the this is the react to documentation that's completely fine you will see different types of uh touchable properties called touchable highlight opacity without feedback okay and this will return return some properties so in this case most of the time we are going to use touchable opacity and if you see this is importing from the react native okay so replace this view with the touchable opacity okay and save it now if I click on this button if you see the effect right it means it's getting click okay and here it add it give one property called on press okay this on press we event will uh will be uh trigger whenever you click on that particular button okay for example just now I'm writing in the console okay so this is just Arrow function and here I will say button click okay and save it now in the console if I click the button If You observe the console if you see button is Click is printing all right it means this on press event is working for with this touchable opacity okay so this is that's all for this login screen screen UI next we are implementing authentication okay so we'll learn how to uh add the Google authentication in our application in order to add the social authentication in our application we are going to use clerk clerk is one of the best authentication service provider okay and it's a completely free okay if you don't did not use this cler before don't worry we'll learn it from the everything from the basic about the CL and how to integrate in Expo application and except my channel you will not find the video which will introduce how to integrate clerk inside the react n application okay so first thing uh if you don't have an account create a new account okay and then go to the dashboard here you have option to create a new um application okay I have bunch of application and all the tutorials of this one right uh different courses you will find on my channel so go ahead and watch it click add add application here I will give name EV Station app okay here you can enable uh the uh different type of authentication if you want email address okay even though you can just disable that but if you want to you can you have phone number then you can have username Google Facebook and there are lot of more okay so in this case I'm enabling Google and Facebook okay and just this if on the right hand side this is how it looks okay on the website but obviously we are not implementing for website we are implementing for the Expo click create application and this will create application for you now you have you need to use this key in your application okay uh in the uh Expo so our application is ready on the left hand side you will see uh user authentication here you can customize the authentication everything okay but right now we will not focus on that one now just search on Google Google Expo clerk okay and this will give you first link will give you the documentation how to use clerk inside the Expo okay so just we will follow step by step okay first thing just uh install uh the clerk using this command in your application so open the Comm prompt and just paste it here like this okay so I am installing the clerk then obviously you need to set up this uh publisher key okay but we will directly use it so just keep this step if you want to go ahead you can um uh just add this one okay then you have need to mount this cler provider okay and then you have to wrap app.js complete code inside the cler provider okay so I will just copy this particular lineup code go back to app.js let me close this terminal so here I I have app.js inside there I will add the this cler provider okay and obviously you need to wrap this all the code inside the cler provider okay then make sure to import this particular CL provider okay so if I go here and copy this code and paste it here like this okay obviously uh here you need to add your publisher key okay so I will use mine from this clerk dashboard so go to the home here you will find this clerk key copy this key don't copy mine and just paste it here as a string okay and then save it as soon as you save you will see on the UI nothing get happen okay make sure nothing is happening if you face if you application is failed rerun the server restart your application then let's go back to our another step next step is protecting the pages okay so this is very important if you see this particular lineup code until signin okay and this this sign out copy this code go back to our application and inside app.js only right I will put under this view like this okay so let me explain this code now whenever you are you are uh sign in right then it will show this particular lineup code okay whatever you kept inside this uh particular signin um tag it will display once you log to the application and if you did not log to the application it will show this particular text obviously we'll replace this with our log screen okay so whenever user is not login it will show us the login screen on the UI okay like this also make sure to import this sign in and sign out uh import statement okay so I will just copy this sign in and sign out and add it inside the clerk Expo like this okay sometimes it will not give you suggestion make sure to uh add it manually Okay then if you see now you are not signning okay and that's the reason it's showing the login screen on the UI okay perfect next if I scroll down okay now this this is the custom page you can build okay but uh we are using social authentication so you have to skip this tape on the right hand side if you see right right now we completed this tape now jump on to this o login step okay once you are on this o login step you have to follow couple of things first you have to create this file inside this hooks folder okay so copy this one go to your folder and inside the root directory click on this plus icon paste this lineup code click enter okay inside this one you have to add all of this code okay just add this here like this and if you see it's importing this Expo web browser okay we don't have this Expo web browser just copy this and you have to install that particular dependency from the Expo documentation so you have to copy this uh installation command Okay so which help us to install the Expo web browser so just import that one like this okay and let's go back to our clock again now once it we will it will take some time to install web browser okay in meantime what we can do we will add this line of code first thing let's add this code web browser go back to application and this we are going to add inside our login screen okay so I will add it at the top of this function see okay and make sure to import this Expo web browser okay so let's add this command this one okay just if you think this I'm going fast okay don't worry uh pause the video and do your step also you can as I say right you have to you can learn from the documentation how to do it okay then once you install this one right you have to add this use warm up browser and this code as well and paste it here like this okay this use warmup browser okay okay wait uh it's importing from this hook warmup browser okay so import this particular uh statement then if you see right you have to add use o from the clerk Expo okay and uh obviously we are using Google so that's provided Google if you are using Facebook here you have to write Facebook okay but right now we are just using the Google so I use Google like this then inside the on press right so right now if you see right on PR on the Press of this one we are just consoling the uh consoling this particular text here I will just write on press okay and this method I will Define over here okay before this return I will Define this method this is the arrow function okay this is how we are going to Define this the any method of methods inside our application okay and inside this on press event you have to paste this all the code from the return so from the try to cach block like this okay as this is this is using a you have to make this method as a sync okay and what else we need to implement I I think everything is good let's save this one make sure you have completed all the steps okay perfect now this step is nothing but that you need to add the login screen we give the uh this particular page as a login screen okay and save it now let's go back to our application okay and click login with Google and if you see it's redirect to the Google account okay let's wait to open the Google page now I am on emulators obviously it will take time so I will enter my information okay I will pause the video here and now after login I just redirect to this you are signning because inside the app.js after we successfully sign in it will show this particular text because it is in the signin uh tag okay so as I say whatever you are going to display after sign in you have to put inside this sign in okay and once you sign out it will be on this particular sign out page okay so this is how with the help of clerk we are able to authenticate in our application with the help of uh Google okay so if you have any question any doubt let me know in the comment section okay one more thing here you need to um uh focus on right once you close this application restarted again it will ask you the login credential again every time you close the applic run the application it will ask you okay to fix that issue on the on the this cler export CL export documentation you will find one um option called adding a token cache Okay click on that one here you need to add the token cache okay so what you have to do first you have to install this uh particular uh import statement so sorry particular command just execute that one then uh let's import this secure store okay so inside the app .js only so after this one I will add that one then you have to write get token and save token okay so what this will do all this token cach okay before this export function okay so this will once you log to this particular application it will save the session okay and this is very helpful as um right now we are using jsx so we don't need this type okay this type we will need when you are using the typescript okay and save this one then if you go back here okay here inside the club provider along with the publisher key you have to provide the token cache okay so here I'll provide the token cach as well and save it and anything else okay that's all so that's how you can add the token caches so that you don't need to log in every time okay next obviously in order to get user name email and everything right you can use uh the user okay so let me show you how to use that one so let's go back to our application and inside the right now we don't have anything okay but okay once we create a new screen I will show you how to get users login user email ID profile image name and everything okay so we'll do in the next section but I hope you understand how to use cler authentication inside our export application so in this particular section we are going to add tab navigation and for that one we are going to use the react navigation Library this react navigation library is one of the best library for the Expo and react native applications okay and it's very easy to implement and easy to use so let's go to this react navigation. org okay and then just click on R dos here are some of the few of the steps we need to follow in order to integrate in our application so once you in the documentation first thing you need to install some of the dependencies first thing is uh to install this react navigation native copy this lineup and then go back here in your application and paste it in the terminal okay so we'll wait to install this particular dependency once it install then you scroll down right as we are using the Expo manage project you have to install this uh dependency as well okay so copy that paste in your project and then if you scroll down I think that's all for the installation okay but now if I go on the left hand side and if you see there's one option called Navigators inside that one you will find a bunch of navigation option okay called stack navigation then we have native stack drawer bottom Tab and lot of things obviously we are going to use bottom tabs okay you have material tab as well but in this case uh we are using a bottom tab okay it's not that different it's quite similar okay it's up to you whatever you want to use then just go scroll down and here you have to install this react native navigation bottom tab dependency as well okay so paste that one and install it in your project okay and this is the simple example it explain you how to use the navigation okay so first thing obviously you need to Define uh um the or you have to create the difference of this create bottom navigation and then you can use it here like this okay so obviously let's go to our application inside the project let me close this terminal here uh inside the app folder okay let me close everything inside the app folder we we will create a new folder and we can call it as a navigations so all the navigations related to our application we will keep into this folder okay then inside that we'll create a tab navigation file okay which contains all the tab navigations okay we'll keep it jsx and add the default template here like this okay now first thing as from the doc you need to define the uh reference of the tab navigation okay so let me copy so it's a create bottom tab navigation if you did not get the suggestion just copy what uh so if you go see write the I'm not getting any suggestion I will copy paste here like this and also import this statement perfect okay and save it obviously you will not see any change because we are just implementing the tpe navigation now remove this complete code and here replace it with this tab. Navigator okay so inside the tab Navigator you have to Define your all the screens okay right now we only have one screen called uh we don't have any screen actually right now okay so let's create some screens okay which which are nothing but our tabes so let's create a new folder and I will call it as a um home screen okay and here I will add home screen. jsx add the default template and then save it another screen I will add here as a uh favorite screen so in meantime I added this uh three screen home screen favorite and profile so now let's add inside our tab Navigator okay so here you need to add tab do screen okay and the closer tag and inside that you have to provide two properties the two main properties which is name okay so whatever the screen you define at the first right it will be your uh first uh screen okay default screen you can say and then you have to provide the component so in this case we'll attach the home screen component okay and now your first Tab screen is ready okay same thing you have to do it for other screen so in this case I will write uh favorite o sorry and then we have profile okay so here I will connect favorite screen and here I connect the profile screen and save it okay now all three screen are set up inside the tab Navigator now let's add the that in our application okay still it we added in um we did not attach this anywhere right so let's go to the app.js and inside the app.js okay once user login we going to show the tab Navigator right now we are just showing this text so remove this text and add the Navigator oh sorry uh navigation container okay so if you see this navigation is container is inputting from this react navigation and inside that whatever the navigation you have you can import so in this case we have tab navigation import it here like this and then save it okay and let's wait and if you see on the right hand side on the emulator we got this home screen we and the bottom side right we got this home favorite and profile tab okay if I click on profile if you see this header and this uh obviously the screen or the component is to get changed immediately okay but the couple of things now let's go to tab navigation here I don't want this particular uh header okay then how to remove it so it's very simple okay you can remove on the screen level as well okay but if you want to remove all all the Tab screen you can just mention here uh screen options inside that you have a property called header shown okay and just make it false and if I save it see the header is gone obviously you have a lot of more property if I uh do control space you will see all the properties here okay but right now we are just removing this header next right now if you see the tab icon is not the one which we want and this text also is not not the one which we want we can change that one as well okay so go to the Tab screen and here you have to addite options okay so each screen uh type screen has options property and inside that you have a lot of option for example if you want to change the uh label okay so just write tab bar label and here you can change the label so in this case for example I first I will instead of home I will give it search and if I save it if you see now it's showing search Okay other if you did not provide the tab level tab levels okay then it will take the tab level as a name of the screen okay also after this one uh you can add the your own icon okay so just write type bar icon here you can give property color comma size and then whatever the icon you want to provide you can provide inside this tab bar icon so let's go here and just search for the icon from the Icon export. FYI okay so here I will search for the search I will search for the iic icon and let's take this one maybe this one is good copy this import statement paste it here and then you have to copy this component name of the I icon and paste it here okay and then save it and if you see the icon is get changed okay now the color is different okay so what you can do you can replace this size with this size and the color with this color okay and save it and if you see now if I changed to this one obviously the inactive color will be this one okay now if you you want to change this color okay you want to add your custom color that you also you can do you can just write tab bar uh active tin color okay and here you can give the activity in color for in this case I will give uh colors do primary okay and if I save it this is how it looks when it's active and when is inactive this is how it looks okay that's look good to me now same property I will add for the other screen as well so just paste it here like this okay you can make one constant and you can put all of this things but our icon get changed every time okay so that's the reason now for favorite I will put the heart icon just search for the heart and we I I will use this one now we already have the Import St P right I icon just you need to copy this um I icon here like this or just the name you can just change the name okay just iOS heart like this okay perfect oh I change for the profile actually this one like this okay and save it and the O sorry and the another one if you want is profile I don't know profile is there user is not there then we can use user and just search for for the random one okay so we'll use this one font awesome so copy this font awesome UT statement because this is different import and then copy this component name as well and paste it here change the size and the color and save it and if you see we got all the changes see okay obviously we need to change this name profile and this one as a favorite and save it okay perfect now we have all our tab navigation is ready okay so if you have any question any doubt let me know in the comment section so in this particular section we are going to add a Google map on the application okay so for that that one first let's search on the Google like Expo map view okay and it will give you the map view documentation for the Expo it will redirect you on the export documentation where uh it will guide you how to install this map view okay so first thing this is the this is the dependency which you need to install inside your uh vs code project so paste that one then if you scroll down we'll find how to use that particular map okay so what I will do I will just copy this map view okay and let's go back to our application now let's create a new component for this map view okay so inside the home screen I will add new file okay so what are the components we are going to create uh we will keep in this particular um respective screens okay so here I will call app map view. jsx then add the default template okay and then I will paste the map view here like this okay obviously make sure to import the map view from the react native maps and then also import this Styles sheet okay so here I will add the Styles sheet here like this okay make sure to import the stylesheet and save it now let's add this app map view inside the home screen so let's remove the home screen and here add the app map view and then save it okay and right now if you see you are able to see the default uh uh map view on the uh emulator right obviously if you are on the uh iOS device you will see the Apple map okay but if you're on an Android device you will see the default as a Google map okay but it's up to you which map you want to show on the both the screen okay so you can also mention here for example if I um not here but inside the app map view under the map view you can provide a property called provider and here you can can Define the provider for example if you want to only use Google Map you can add the provider Google okay like this by default it's a default default means that it will take the operating systems um default map okay next uh you have option to show user location so right now if I put show user location okay to true oops and save it it will show my location okay so for example let's go here I am somewhere America I don't know why it's not showing okay maybe uh maybe I need to uh get access to the location okay we'll do it later on now uh right now this is the just map that we are showing right now whatever the map you are seeing right that is default Google Map okay and if you see the color combination everything okay but what if you want to uh change this color combination of this layout right so let me show you how to do it okay S search on Google Google um map style Wizards okay and here you will give this first link called map Style with google.com Okay you just click on this use Legacy Json style Wizard and here you can literally change each color okay for example um you obviously you have more option here if you go to the more option you can change the color of the park government attraction lot of things right but we will not go into that detail but you can uh uh go ahead and you can explore more things here uh we are going to use this if you see right there we have some theme right now we are going to use this silver theme okay but you can explore more themes like here right now we are going to use silver theme here you can see right for example let me Zoom it okay and you will see the road name and everything right it's up to you how much Road you want to or how much detail you want to show okay so right now obviously I will show all the roads Landmark I will little bit decrease okay but you can decrease more if you want see like this okay then labels so I will put you can remove all the labels or you can put more labels okay I will put labels like this okay maybe I will keep all of this that will be better okay see and landmark when you put the landmark I don't see it's that much uh visible to eyes okay but if you see right now if you see this area right if I click on this washingt turn and kind of thing right so it's showing all the details so it's up to you how you want to edit it okay once you are done with the editing everything click finish okay and this will give the Json file see okay so copy this Jon uh all the object go to your project and inside this one right we have folder called utils create a new uh file and here we got map view style. JS oh sorry so it's it's a it need to be a Json because it's a Json file we are going to add okay and just paste the code which you copied okay you don't need to uh understand this code just save as it is okay and now here you can write custom map style okay and then you have to locate this particular uh file okay so in this case is map view so let's see whether we are getting suggestion I don't think so we are getting but let's import it manually so this will be a um map view style from and then you have to provide the path this need to be from and then util SL mapu just one okay and then this particular input you have to add it here like this and if I save it and you will see the change on the application okay okay now your uh your theme is changed to Silver which we selected so it's up to you how you want to design and everything okay it's up to your hand how you want to modify okay so this is how easily you can add the map on the screen okay so so until this point if you have any question any doubt let me know in the SE uh comment section okay so we in successfully integrated the map inside our application next we are going to f the users current location okay I will tell you how to access the user location then we are going to show the uh that user location on the map okay so automatically once you load the application it will show the user location uh area on the map okay so in order to use the users current location we are going to use this Expo location um dependency okay this is package where you caness access the user location so first let's copy this uh command okay and let's um install that in your vscore project then if you see right this is some some of the steps uh you need to add in order to um get the users location okay so this user location is quite helpful okay if you want to access the location in the background in the Expo application uh you can do it with the help of Expo location so uh now inside the app. Json file you have to add the plugin called uh Expo location so copy this plugin because we already have this Expo okay so just copy this plugins and let's go to your app do uh Json file okay and after the web just paste this uh plugin okay and here if you see it is saying the allow the product name to use your application so here we will change to allo EV Station app to use your location okay and save it next if you scroll down this is the use this is how you can use this okay this is the code so first thing let's import this Expo location um let's go to app.js and here I I will put the import statement for this Expo location then if you scroll down let's import this uh to use State and obviously uh just you can copy all of these things until this point and go back to our application okay and inside the app fun app method okay I will after font I will add that one okay so it has a use effect make sure to import use effect then it's showing the location obviously we added okay and it will request the um permission first okay if it is granted uh then we have good if it did not granted then it will showing there that permission is not or is denied or something like that right and uh this is how you you can able to get the location okay so what I will do now here is just console the location okay so console and here I will conso the location when we go get the location we will just console in our terminal okay so this is our terminal we will console it now save this one and if you see we got one error that used state is not defined let's import the use State save it and if you see immediately it asking allow Expo go to access this device location now it is using expoo because right now we are using expoo but you when you run on the actual device you will say your application name there right and you are saying precise location or approximate okay you have two options so we'll say precise and then you have option right while using the app only this time or don't all I will select the while using this app okay let me bring this down this is the old error okay so just ignore that one and say while using this app and uh let me so we save that one okay no let's save again so right now that our terminal not returning anything I don't know the issue let's try to stop and rerun this uh terminal and I just restart my application and if you see I got this coordinates with the latitude longitude okay so inside this once you consol this uh the location right inside that we have coordinates and then inside that you have all these fields called latitude longitude obviously we need more important is lat itude and longitude okay so let's um log into the application now once we have this location information right obviously we need at different different components at different different screen right so obviously we cannot uh call this method everywhere okay so what we can do whenever uh this application is um launched right and we are getting this users location obviously so we'll store this user location in one context okay so if you don't know about the context okay so context will help us to save some data and that particular information can accessible throughout the application okay so let's define the contact first okay and then you will get to know much better so inside the app folder I create a new folder and we can call it as context okay so all the context if you have you can put in this folder and we can call it as user location context. JS and jsx okay here you have to write export constant and the name of the context so I will keep the similar name of the file name is equal to create context okay and default is I will provide as a null and save it and save now obviously we are exported this so obviously we can use anywhere let's save this one and let's close all the F and now go to this app.js okay so here obviously we want to access this throughout the application so what you can do you can WRA this uh context okay so user location context okay dot provider okay similar like clor provider okay here you have to provide the value okay the default value which we are going to provide which is the location comma set location okay obviously when you provide this values location and Sort Location whatever the component it in it is inside this particular provider it uh that particular context is accessible uh to that component right now if you see I have this uh tab navigations okay so you can access this uh location information inside a tab navigation also if you want to update loc information from the tab navigation you can do that okay now we have this location information throughout the application now okay next thing now you want to access uh this location inside the app map view okay because here we want to set a user latitude and longitude okay so in order to access that context value which is location and use set location you have to Define like constant then in curly braces okay make sure this curly braces not the square bracket then user location comma set oh sorry it's just a location okay not use the location so whatever the context name you use same name you have to give it here is equal to use context because we want to use Contex this is the react hook and then you have to provide the context name so in this case is users location context okay now you have the value obviously when you set the value immediately it it take a few millisecond or second to update the value here right so what I can do uh first thing uh let's go back app.js and here we are just setting the set location value okay here we'll write coordinates as well because I I want not not a complete location object I want only coordinates object so I save the coordinates and here you can display this view only if you have the location information okay so you can write like this location do latitude okay for example any of the field if it's there then only show the uh the map view okay so this is how you can print it out and here you just say and and okay means this if this uh uh is true then only it will show this value okay and if you see right now you have the ltitude and that's the reason you can able to see the map now here you have to Define region whenever region is nothing but whenever you launch launch the UI right it will show the map of your region okay so just Define region inside that you have to provide the latitude okay so you can get latitude from the location dot here dot dot latitude comma longitude obviously location comma longitude okay and then you have to provide the latitude Delta okay so latitude Delta so in this case I will provide 0.0 422 and ltitude say then longitude actually longitude data which is 0.042 1 obviously you can change it it's like a zoom level okay and then save it and if you save right and now if you see it's showing the nearby my location in this section we are going to add user marker on the map okay before that uh if you did not uh subscrib to my Channel please do subscribe and this is the uh tube guruji courses okay where you can keep a track of your learning okay so currently uh you can go and uh most of the courses are free okay okay if you want to uh open any of the course and if you want to enroll it just click enroll and then you can keep a track of each courses okay you can learn chapter by chapter also you'll get a free source course you can see the demo of the application and everything uh inside the upgrade you can just upgrade for $3 per month it's very cheap okay and then you'll get all the source code along with the all the uh uh courses available to learn on this platform Okay so moving back to our application so here uh inside the map you WR so right now we need to add the marker inside the map view so I uh I will write this map view tag like this and inside that let me close this one we'll add a marker okay and if you see this marker is importing from the react na to Maps then inside that one first thing and very important thing we need to provide the coordinates okay so here we can provide the coordinate and the obviously we need to provide the latitude and the longitude okay so add the uh latitude first okay so location dot obviously I question mark if it's not there long uh latitude okay and the second it longitude location called longitude okay like this and if I click save if you see the marker is showing on the screen immediately okay it means this is our uh users current location now obviously if you don't want want this uh custom marker you can add your own marker okay so it's very easy so inside the marker you need to provide the marker which you want to use so obviously it's easy just to add image uh tag okay inside the image tag you have to provide source and just locate the file from the local asset folder so in this case I will locate like this so in my case it is in assets SL images /ar marker.png okay and close the tag obviously you can give width and height so let's give style will give width of 60 comma height of 60 and then save it okay and if you see that marker is changed to car now as we are developing the EV charging application it's better to show the car okay means obviously that location of the car will display on the screen okay that is nothing but the user's current location and this is how easily you can add the marker on the screen okay so obviously if you want to add multiple markers you can use the uh iterate this markers list okay we will see in the later in this particular course but uh with the help of uh this marker tag okay uh we are able to add the marker inside the um Google map view okay so if you have any question any doubt let me know in the comment section we going to add the header at the top of this uh on this home screen okay so in order to add the header let's go to this home screen and here we create a new file which is our component called heater. jsx add the default template like this and save it obviously uh go to this home screen okay and inside the home screen we will add the header component so let's go to the home screen and let me put this down inside one view I will add the heer okay and if you see the heer will TT will display it on the screen now we want this heer on the top of this map view so just give this some style okay so I will write external styling here to keep uh this home screen clean so let's add the external styling react to stylesheet and make sure to import the Styles sheet and here you can write the uh header container like this okay and we can give the position absolute then we'll give Z index to TW then we'll add padding of 10 okay width I will keep 100% And then I will add padding uh horizontal mean from pading X U from left and right to maybe 20 we can add and save it and now once we have this Styles sheets ready just appli the stylesheet to this particular view okay so styles do header container and then save it and if you see header is showing on the top of this um uh map view okay now go to the header and inside this header okay uh you need to write a couple of things first thing on the left hand side we'll show the user profile icon in the middle we'll show the logo and on the right hand side we'll show the the filter icon okay so let me remove this one and let's add the image tag here we'll add source and close the tag now here we need to add the users image right and for that one obviously you need the users information right that user information you can get it from constant then write user okay D structurize this param uh and then is equal to use user and if you see this us user we are importing from the clerk Expo okay so it will give you the logins you user information okay now uh before this uh uh from the start course to until this point we F the uh images from our local environment but what if you want to show the image from the UR uh URL okay so in this case you have to Define URI and then you have to provide the URL okay so in this case is user dot um maybe it's just image URL okay that's it and this is how simply you can show show the users uh image okay and close the tag now here uh we'll add some styling style equal to width I will add 45 then height I will add the 45 and I will make rounded corner so B border radius keep 9 and save it and if you see the image is getting at okay height I will need to fortify and if you see the user image showing on the screen okay that is profile icon whatever the user login it's a Gmail uh profile icon okay now uh let's add the another image for the logo Source obviously we are getting from this uh local so required and here we'll locate the particular asset from the asset folder images SL logo.png in the tag and give some style styling style is equal to you width 200 height we you 50 maybe 45 and then we'll get object fit to content okay and then save it and this is how it looks see okay and next the another image is the logo okay so what we can do we will just search some icon so go to the font uh sorry icon Expo and here you can search for the filter okay let's search for if we have any iic icon for that one I don't think so let's search just search filter and we'll take this uh font awesome okay so copy this import statement paste it here and then copy this component name and paste area like this okay and save it and if you see on the screen this is how it looks okay now bring thing bring everything in one light so it's very easy okay here you need to add the style okay is equal to and inside that uh we can add the display make it Flex or we can do we'll do one thing instead of um adding style here we'll add externally okay so it's not mandatory or just of sometimes if the style is little bigger uh I will um preferbly add The Styling externally okay so here I will add that style styles do and we'll give the some style names called container okay and let's attach that container here now let's add the some property so display Flex we give Flex Direction with row and if I save it this is how it looks okay now give justify content and space between so it will give the equal space between all of this okay also make item Aline item to be in the center so vertically it will be in the center okay if you want to change the icon little 26 maybe little bigger perfect and uh that's all so we are preferbly you can add some background actually let me add background color okay and we want some transparent white background so let's add in colors folder here and I will white transparent okay and I will give the color like ash FFF F FFF H7 save this one it is little transform color so let's add colors dot um white transparent and save it and this is how it look for now okay so what you can do uh because we give the padding okay we'll add the background color on directly into the home.js but for now we'll keep as it is okay perfect so this look good to me and uh if you want to obviously add some styling and everything you can go ahead and um just play around it and you'll get much better styling okay so I hope you understand how to add header next what we can do we will add the um place at to complete right where user can search the location and he it can give the uh suggestion of the search and once it click we'll get the latitude and longitude and from that one we obviously search the uh data okay so obviously we'll learn how can we uh Implement all of these things uh in upcoming uh sections okay so see you in the next section now in this section we are going to add search bar component and in that search bar obviously we are giving a capability of searching the address okay and that address we are fetching from the uh Google uh Place API so first thing let's uh inside the home screen let's add the new component and we can call it as a search bar. jsx so it need to be jsx and then add the default template okay and save it the we need to install one uh dependency okay which is this react na to Google Play auto complete okay so this is the one of the best uh dependency uh you will find on the internet okay and this will help us to give the AO complete uh search box okay so just copy this dependency and paste it here and then it will install this react native Google play at complete uh package for us now let's add this search bar component inside the home screen okay so inside this after the header We'll add this search bar and save it and if you see search bar is showing on the screen now now let's go to the search bar and inside here let's me remove this one we need to add add the Google play at complete so just write Google Play ATO complete you can just see this example okay so this is how you can use this okay so I will copy this existing code for the reference and will paste it here and uh make sure to import this statement as well okay perfect now here couple of things first if you see right let me save this one and then you will see the search bar here on the screen uh the placeholder you can change the placeholder here you can something write EV charging station okay if I save it if you see the placeholder get changed okay on the Press when you select any of this uh uh addresses from the drop down right it will return the value inside this on press event and then you have to provide the API key from the Google Cloud console okay so the question is how to generate this API key okay so first thing let's go to this uh Google Cloud okay and if you if you did not use the Google Cloud before don't worry okay second thing is completely free if I go to this pricing okay so we need to find Google Cloud Place API okay and then go to here and then if I go to the pricing okay you will find that you will get $200 every month okay so you can uh use the data the API uh until $200 and that is quite efficient if you are a developer okay and you want to teste this one so don't worry it's completely free if you don't have an account create a new account and then uh let me Google just say Google Cloud console okay and go to this console okay so here you will find uh the welcome page if you don't have any new project just create a new project and then go to this API and services okay once you are in the API Services you can enable new apis here okay just search the API for example if you if you want to search for the place API just click here because obviously we are going to use Place API click Place API and here you can just enabled right now it's enable for my uh project okay but you will find the enable button here and just you can enable it okay so this is very important and uh if you see right you have multiple API that you can SE search it and enable it once you enable that one right let's go to this uh API Services again and on the left hand side you'll find this option called credentials click on that one and then if you see we have option called create credential click on that one and here you have to create API key okay once you generate this API key let's see generating okay we'll wait for a few seconds and if you see the API key generated okay so copy this API key obviously you can rename this API key I already have this API key generated for the Google Map so I will delete this existing one okay and then you can open this API key sorry delete the existing one and then copy this API key okay don't use mine and just create your own and then once you copy it just paste it here okay like this and then save it now if I try to search some value for example if I go here and try to search just like you'll get the suggestion C very easily right and it also showing that it's powered by Google okay if you don't want to show this option that powered by Google you can uh enable that one okay you have property um call enable power by container and you can make it false and then save it and if you see that option is gone now okay it's up to you if you want it or not okay I will keep it and if I click on this one right if I click on any of this address if you see in the console you will get this result okay if I go to the console and if you see you got the all bunch of Jon data okay now obviously a couple of things we need from this uh data okay the first is the address the name of the address which we already getting and the another is the uh this particular address latitude and longitude so to get that one we need to add one property to this one called fet details okay so that it will fetch all the details including the coordinates and that coordinate contain a latitude and longitude okay which we need uh to fade the place information or the uh all the places nearby okay so now this is the uh with the help of this Google Play aut complete we are able to add our search bar obviously you can customize it okay so um in meantime you can just add some styling and uh just customize according to your need okay so obviously if you if you face any issue while customizing the search bar uh you can access my source code anytime as I told you you can go uh you can access not only the source code but you can access all the uh courses and their source code as well okay once you join the membership and here I added uh some styling to the search bar along with this icon and uh some uh CSS styling to this particular search bar okay so uh if I try to search anything right and right now obviously we are getting all this information okay now this information we are going to save inside one state okay so what we can do we can Define one state constant and here we'll say uh we don't need it because what we can do we can just save uh set the value and we'll pass back to the home screen okay so in order to uh get only the coordinates of the selected address you can just write search location and inside that you can write details comma geometry okay dot location okay from this particular uh uh path we can get the location of the address okay and this is the detail page which we are getting now search address so now let's pass back this search bar uh the search location information to this home screen back okay we have different find the search bar okay so what we can do we can just add the search location inside that I will say location and then we'll just console in the cons uh console lck okay so let's go back here again and I will remove this console because we don't need any more I save it let's search some address I click on this one and if you see we got latitude longitude which is in the home screen where we are consoling it okay so how simple it is correct so in the next uh section we will learn how to fet data from Place API by passing this um locations okay but also uh before searching this address right we we are going to use user current location to face the uh Place informations okay so once we pass the all the uh coordinates of the users location then we will F the data from the Google Play API and then we'll show the all the nearby charging station on the screen okay so see you in the next section so with the help of Google place API we going to f the uh nearby places okay uh depends on the user's location so for that one if you uh go to this uh Google Play map uh documentation you will find this documentation on the Google where uh on the left hand side if you see right we have different type of uh documentation and here we going to go with this place API okay and this is a simple example it mention how to uh use this place API okay so obviously we are going to use nearby search okay and this is the basic information basic uh API request to make the API call to get the information okay so right now on the documentation they gave the curl uh API call okay but obviously we going to um with the help of exos we're going to make this call okay if you want to help of this particular documentation the link is in the description you can check it out anytime so first thing let's copy this particular uh API endpoint and let's go back to our application inside here uh inside the utl folder okay we have this utl folder we create a new folder and we can call it as a global api.js so all the API call we going to write in this particular folder so first thing write the base URL okay which we copied so we'll paste this base URL here okay and another thing obviously we need the API key okay so just paste your API key okay so I will AP your API key and then we need to install the Aus okay so most of the in my project I use AOS to make the API call obviously you can use f as well but Aus is much more uh easy to uh Implement then let's uh just type npm I exos okay and it will install the exos for us okay next uh if I if you go to the documentation here you will find uh this particular data okay which you need to send uh to this uh API request okay in the post call okay and then you have to write this some of the uh uh fields which you need to provide while making the exus call okay so what we can do we can write constant config okay and inside the header we need to provide this information so header and obviously first is a content type okay which will be a application SL Json then we need to write X Google API key okay so this is the obviously need to match with what we have here okay so this particular API key okay so just copy this one and paste it here obiously this to be and here it will come your API key okay then you have the uh Google field mask okay so this Google field mask will help you to get the only appropriate information from the API because uh Google API U the Google Plus API will return return a lot of different type of result or Fields okay which we don't need it actually so what you can do you can just uh use this Google field mask and you can provide the only field which you need it okay so for example if you have multiple field you can use uh inside bracket if you only one only you want to fch all the fields just star okay so in this case we going to fet some of the field like places do display name okay then we're going to f um play inside the single code places do format address now you might have the question how to get this information okay so if you go to the documentation and go to this old Google Play API okay it might be here I think and uh here maybe you can go to this nearby search okay it's a new let's go any any of this one okay and then you'll see the API Endo okay I don't know where to find but I already have and I pasted here okay so this this is the this is how you um previously we used to call the nearby search okay we are providing keyword the location into latitude longitude radius everything inside the um URL only and if I enter it right it will give me the result okay obviously we you need to pass the API key at the end and here you will get the result so if you see in the result right U this is the old actually old uh what we can say old one okay and uh from this one uh you are getting some result with the new API it little bit different okay and that's the reason these are the sum of the field which I already uh showing on the screen okay so that we need it while we are fing the data is might feel complicated but just um write the field which I'm giving okay and that's the field we are going to use obviously if you need anything in this particular course we'll add it here then we need location from this location we'll get the coordinates of the uh field then we need places Dot EV charge option okay so from that we'll get what type of charger and how many units are there and then last we'll get the places do photos Okay so these are the field we needed in order to uh get the result okay so obviously it will return return this five uh field information for us okay now our configuration is ready now next you need to make API call so you just write con and new nearby place is equal to here we need to send data in the post call and this is exos obviously we are using exos Okay so let's import the exos here import exos from exos okay and once you install it has a post method okay and inside the post method you need to make a API call okay so in this case we have the base URL and then the data okay and along with that you need to pass the configuration okay the heer information and in order to use this API all everywhere right you need to make it export default and inside that you just write new nearby place API so it will be accessible throughout the application okay now go to the home screen okay and inside the home screen you you need to get this users location first okay so constant location comma set location is equal to use context and here we get user location context okay and what we can do we'll write method constant to get a nearby place okay and inside this Arrow function uh we will write the global API Dot new nearby place here obviously we need to provide the data then and it will return the response okay so console.log the response our response will be in the response. data okay but obviously we don't have data so let's add the uh data information okay so here constant data and inside that if you go to the documentation let me go to this previous page so this much information we needed okay so I will just copy this and then paste it here like this okay just format this document perfect now obviously here we need to pass this uh electric vehicle charging station okay now this you can find it on Google just type uh Google place API some types okay and you'll find the places types okay and if you scroll down this is maybe this is old one so let me just search EV charging so if you see right they also write the blog the recently on the October they they added this API okay end point uh to get this API the play Sorry electric charging information okay and if you go to this new API place okay type here you will see the electric vehicle charging station on under the automotive okay so copy this uh type and here you need to paste it here inside this included type obviously you can add multiple types as well okay maximum result right now we are showing 10 the latitude longitude if you see right is right now it's the uh default one obviously we will replace with the obviously our so first it location. latitude and the location do longitude okay so obviously initially it will F from the um users location depends on the user location here I will increase size to 500 R this is a radius okay how much radius you want to search and then you need to call this API inside the use effect okay so if you don't know about the use effect right use effect is a react hook which help us to uh make our this particular user effect will execute okay if you define like this and this instance of this effect will execute multiple times or infinite times so that if you want to execute only once once this component load you have to pass this empty array okay and now if I try to run this one it will execute this get nearby place but sometimes location will take time to get the data right and then that time uh you need to execute this one so you can pass this location information so whenever the location is available the C effect will execute okay and here I so add the condition that location is available then only execute this gate nearby place now let's save everything and let's go back to our console and if you see right now we got the error that request fail it means our in inside our API we have some issue so now I just change here we added the charger so it's just EV charge option and the content type is C is capital and T is capital okay so that was the mistake and if you see now we are getting the uh result okay so this result contains an object and lot of things okay so don't worry uh we will figure it figure it out okay but I hope you understand this one how to do it okay obviously if you want to see all the data just make this stringify and then you might see all the data okay so if you go here see all the data you can able to see okay so if you want to copy this data right what you can do you can just copy all of these things okay and then once you copy this one add a new file inside the vs code only okay by doing command n on vs code or control n on the windows and paste your code okay so here just do this format document and then it will give fored document and everything okay so obviously right now if you see it's still showing object so don't worry uh we'll fix that one okay but we have the format address okay this is one this one was old I think okay let me so okay so this is the actual console our latest console okay it has a parameter address the location the display name and the photos Okay so right now if you see the in photos we don't have proper URL okay from the name we have to face photo that I will uh tell you how to do it okay but uh this is how we are getting the result okay but if you see the display name is called wo Alto here we have the Tesla Supercharger then we have Electrify American charging station also if you see right um uh we have the all the information which we needed okay and along with that if you see that we have U charging option it's showing connector count how many connector counts are there the type of that connector the maximum rate kilowatt and the count okay so all the information is here so now we uh inside this home screen right we have this information obviously we uh store this information one state and then we will start one we will pass this another component where we are going to display uh the result on the screen and after that we are going to show the markers as well okay so see you in the next section so in the last section we are successfully able to F Google place uh information and with the help of this get nearby places API okay and right now we are just consing this data so first thing let's store this data in one state so I will write uh constant and we'll put in one state and we can call it as a place list comma set Place list is equal to use State okay I will initially I keep it empty and over here we'll just add that data so set Place list and we'll add response. data and if you see this is our response right with and inside that we have places so just add the places as well places okay so we'll get the list of all the places inside this um our place list State okay also uh just to inform right I also added this uh one more field called places. short formatted address which will return the short format address okay so instead of writing the all this um code or country or state it just return the uh given address okay so now uh once we have this place list right we'll create one component in order to show the data on the screen okay obviously we are going to use Flash list to display the business uh that particular place list so for that one I'll create a new uh component okay and we can call it as a place list view. jss add the default template okay and save it now inside the home screen after the app map view let me bring this in one line and I will add one view inside that I will keep the place list view okay and save it and if you see right now it's going below uh below this map okay so obviously we need to give some styling to this one so we'll add style and we'll keep the external styling so outside of this one I will I will say Place list container okay and inside that we will give some uh property like uh position oh it's need to be colum position is absolute okay and we'll make bottom of zero okay like this and let's save this one obviously let apply this style here call Place list container and if you see it's it's showing right now in the bottom section okay obviously we'll give Z index to maybe 10 and then we'll also give the width 100% okay and save it so if you needed extra style we can add it later on okay now we have the place list here uh in uh for this place list we are providing this Place list uh information okay so just add the place list so here what we are doing uh whatever this place list we are storing inside this place list right using this set Place list we are sending that information to this place list view component okay and this is how we are going to send so whatever the value you want to send that value you have to send it here and the name which you want to give it here you can give any name but most probably I'll keep same name okay now obviously this name need to be I Ed it as a prop over here like this okay so that you'll get the place list now one more thing you can write the condition if Place list is there then only if Place list is uh available then only show this component okay because sometimes if it takes time to load the playlist because we are fetching it from the API right from the server and obviously it will take some time uh obviously in the in the meantime the component get rendered but Place list is not available so whenever the place list is available it it will show this component now save this uh Place list View and save this place list view as well okay and the home screen now inside here uh we are going to use flat list okay if you don't know about the flat list you can just search on the Google okay and then you will find uh flat list view export documentation okay so if you go on the react n your export documentation you will see the how to use it and why and there are different property you find on the right hand side see okay so it's very easy and very um powerful um uh what we can say pop feature inside the expore Rea application okay so in order to Define flight list you have to Define flash list and make sure it is importing from the react native okay now there are some of the property which you need to provide for firstly data so what data you want to render okay flat list is basically used to render the elements okay so obviously in this in this case we need to render the place list okay and uh let me come in this section for now if you want to check if you are getting the uh data inside the place list view you can just consult the place list view okay so we'll just console Place list save this one and let's open the terminal and if you see in the terminal we got the data see the star star star and the place list it means we are getting the proper data okay now inside the place list will provide the list which you want to render and then you have to provide the render item okay so in this case item comma index okay so each item it will render one by one okay so here you can Define The View okay like this and now if you see our Json Jon will be like this okay so this is a FL liit and it it has a display name short format address and everything right let's try to print the display name okay so it will be like if you want to print it it's like item do display name do name okay let's make sure yeah it's a text not a name it's a text so text okay and then save it and let's see so right now we got eror that text must be in the string obviously we need to keep this in a string so let me put this in string and save it okay let's reload this uh page again and if you see after loading it's showing the list of all the um the place list okay which we are going to display now what we are going to do instead of showing uh writing all the um design or component or item over on this particular inside this view we will create a different component and then that component we are going to render so what we can do we can just write place item. jsx as a component add the default template save this one and instead of this particular uh text or everything right we will just add the place item like this and then save it okay so right now if you see just Place item is showing because inside Place item we just have t called Place item and then now one by one we have we will pass the item here so I will give the place as a name and then we'll pass this item one by one okay let's give the key as a index okay so this key can uh whenever you are defining uh any view or anything any uh tag right it's uh in react they are they are just um uh they want to provide some key okay need to be unique so obviously index will hold 0 1 2 3 Infinity value okay so kind of thing so in place item now we are sending the place information just accept it as a place save this one and let's save this one as well and now if I try to um display the name of the places we can display here okay so display name comma text and let's print it out and if you see now it's showing the text okay so instead of uh writing this item Place item information or code over here we just put it inside this place item okay it help us to organize our code much better now let's uh do one thing okay so first thing we going to display the image okay so let's go over here and let's remove this and I will add the image from the react native so it need to be a source okay so right now um we need to add image but if you see right um we have the photos and inside that we have the name okay but it's not a URL it's just some ID okay so obviously we need a API or some URL to pass that information so we will look into that later on but for now uh for this image I will put the uh local uh image okay and then we will replace with the actual image so right now we say assets and then from the images I will add the login bg.png okay and then we'll add some style to this one so let's say style uh we'll say width 100% okay then we will add border radius 10 we will add height 130 and then save it okay so it's saying login BG PNG not there let's see what's the name of that file so it's a EV charging okay so okay yeah it's name is EV charging so we'll change this name to EV charging EV Dash charging okay and if you see the the image is showing on the screen but it's quite weird right because we want to show the horizontal list and not vertical so it's very easy to modify so inside flash list we have one property called horizontal okay and make it as a true by default it's a false and if you make it horizontal as a true then it will show you the list on the horizontal way right now if you see it's not showing because our width we give 100% okay so to fix this right what we can do uh obviously you can give the width over here but I don't want to do that we'll give some style to this View and here first thing we'll add width okay and if I give the width for example 300 and save it now it will show the result okay but in this case what we I need to do depends on the screen size I need to give with okay so instead of giving the hardcore value I can say Dimensions dot we have property of gate in that we have we have two options screen or window so I will select the screen okay and then we have property called font SK Spa scale height scale width okay so in this scale we'll say width and I will multiply it by 0.9 and save it and this is how it looks now okay so obviously each width is of same uh whatever depends on the screen size it will show this uh result okay and if you see I can able to scroll horizontally as well okay also in the light list let's go to this our um Place list View and you can make scroll by horizontal scroll bar show scroll bar indical which is false okay so other the way it will show you the scroll bar right now it's not visible over here because it's going below this particular um the tab but it's there okay so now once you make this false it will um not visible to you okay next obviously we will add some property like we add the background color here I will add the background color of white okay then we'll give some margin so margin of five save this one and this is how it looks now okay also We'll add border radius of 10 o 10 like this okay now if you see it's not visible twice but it B is 10 now perfect now after the image we need to add the business name okay and so I will add one View inside the view I will uh let's give some style to this view as well so I will add style and we'll add the padding of 15 and now inside this I will write the text okay and inside this text will give the name of the business which is Place do display display name do text and save it and now if you see the name it's showing now okay so let's give some styling to this one as well so let's add style and here I will add the color color is already black that's fine let's add the font size of 23 font family I will add outfit media okay and save it see this is how it looks perfect also um let's add another text here and which is our address okay so so if you see this our result okay let me close this and now we want to show this short form format address obviously you can show the formatted address but we have this short formatt address so I will copy this fill name and we call it fl. formatted address like this and save it and if you see it's showing format address let's apply some style to this one so it's uh uh we can say color colors do gray okay and the font family is outfit perfect like this okay next uh we want to add the how many points are there right and that information we are getting let me close this one let me open one of them and if you see we have this option called EV charger charge option okay so from that one we can get the how many con are there right so let's me copy this fill name and I will add another view and inside that view let's add text first and we can call it as a simple it's a simple hard quality text so connectors okay and another text inside that place do EV charging connectors do connector count so there are total 12 connectors okay make it f optional save this one and if you see the connectors is showing now on the screen okay so right now it doesn't have the connector value but if you see now this one has a connector value this one has one okay everyone everything I think most of them have connector value but this one don't okay so now for this one give some style here we'll say margin top to five and uh oh sorry not this we'll give um font Family actually so we'll say outfit then color colors. gray okay and then I think that's enough save yeah that's fine okay obviously we will put uh we will add the style to this one this see margin top to five also We'll add padding of um 10 maybe 15 like this okay so we on line and I don't know why maging is showing that much oh so let's let's not give padding for now okay and uh we'll give padding okay so what we can do instead of giving padding we'll put all of this view inside this View because it already have the padding right so let me cut it and paste it here and save it perfect and now let's I can give margin top to five okay next uh let's give some style to this connector value so we say font family sorry outfit medium okay and then font size 17 margin top to two and save it okay so right now it's not showing but if you see this is how it looks okay connectors perfect you can increase the size for example uh if you want to make to 20 that's look yeah that's look better also I will give font size to this one as well like 17 little bigger okay that looks pretty much good perfect now we have that uh information as well okay now as I told you right um we can replace this image okay and in order to replace this image if I go uh on Google Place API okay sorry Google place API let's go to the jump onto the documentation of this Google place API and then on the overview on the left hand side you see the option you just search for the option that place photo okay so we have option called Place photo and if you see this is the particular end point here you need to provide the name okay which we already have then we have provideed API key and the parameter so parameter is nothing but the maximum height pixel and maximum width you need to provide okay so just copy this uh first this basic URL okay so let me copy this base URL okay and we will Define this base URL over here constant Place say photo base URL sorry URL is equal to this URL okay and over here okay obviously we don't U Need required here but if the image is not there then we need this option okay so what I will do I will write the condition over here if the place. photo is available okay then show the place photo actual place photo otherwise show the require okay obviously here you need to provide the uh base URL so here we'll write Place photo base URL okay then you need to give the place dot this particular uh let me show you that one so Place photos and then you have to give this value okay so place. photos. name Place dot photos obviously this is first element we need to give okay because this is first element and then dot name okay make this optional field okay and then we have let's let's go back to documentation slash media SL question mark key so here I will add the plus sign let's put it here inside this bracket and then here you need to add the key okay so what I will do inside the global API key we already have the key here okay I will just export this key so that we can use it in our application okay so here I will write Global API do API key okay plus we need to write the maximum height in pixel okay so and and if you see the documentation here we need to hide pixel and the width so write the pixel here I will give value is equal to 800 and we need to write maximum width pixel maximum width pixel which is 1200 okay and if uh the place photo is not there then obviously it will take the local image okay and save everything so here if you see right we are not getting any result and we got the error in the uh console as well so we what we miss here right obviously if you are providing URL right we need to pass the URI correct if you remember whenever you are passing the uh that we are providing image from the URL we need to add URI otherwise we need to add require okay and now wrap this everything in the curly braces like this okay so now our condition will check if the place photo have this uh URL right then it will um pass to or it will run this URI otherwise it will get the local image okay and now save this one and now we see we got the result okay now now if you see right if we have the uh if the it doesn't have photo then it will show you in the local uh image okay otherwise it will show you the actual image okay perfect now let me increase the height of this particular uh image so I will change this to maybe 50 perfect like this okay and it has all the option here now let's add some uh styling to this one okay I know I need to add some gradient effect uh to this particular card okay so in order to add the gradient effect in the uh Expo right you just need to search on the Expo light linear or just add gradient Expo okay and you will find this first uh link okay which will jump to this Expo linear gradient documentation and here you need to import the statement okay to add the linear gradient and you will see the Magic in a moment but let's first install this dependency and then it will show you how you need to use this one okay so here you need to provide some colors and then it will show you the gradient effect okay let's Implement that one so let's go back to our application uh before this image I will add the linear gradient so linear it's name linear linear gradient okay let's copy this one because uh otherwise you have to restart your application to make get suggestion everything linear gradient and the tag and then this linear gradient you can um add close it over here just paste that one okay now to this linear G you need to add some property okay before that make sure you will import this linear gradient from this Expo linear gradient import statement so just import it here so to this linear gradient We'll add some property okay so first thing we'll give the colors okay so how you want to show okay so here I will give colors obviously we want transparent at the top so the starting color will be transparent and then it will go to the white color okay and let me show you so right now here if you see right uh we are not able to see gradient but here just make this index as minus one okay so gradient will be visible now right the gradient is little uh lce right so what you can do you can add one more um white color and save it and now it will look more like this okay and if I go back here see okay now it look much better than the previous obviously uh if I increase the height of this particular image and then you'll get much better result okay so this is how you can add the gradient effect to your uh card as well okay with the help of this linear gradient okay so obviously you can add uh The Styling as you want okay but for now uh I I added this gradient effect uh as a styling for this particular card okay so now also I added this uh button here to uh get the direction okay and once the button is Click we will navigate or show the route as well on our map or you can navigate to the Google Map okay with the given address and location everything okay but for now I just added this um um button here to get the direction okay and along with that uh we have this connectors with the number and I added this point as a text as well and obviously this is uh scrollable okay so I hope you understand how to uh get this data and how to display this beautiful uh card flat list view okay and uh next we're going to show the marker on the screen okay so whatever the uh listing you are seeing here right um all the markers belong to this particular uh Place list will display it on the map so you are even though if you click on that one it will show automatically open this particular or it will uh jump to this particular uh Place list with the information okay and uh so let's uh see in the next section and let's see how to add the markers from the business list now in this section we are going to add all the business marker on the screen okay if it's a one or it's a 10 doesn't matter we will show it all all the markers on the screen okay so first thing let me close all these files and uh let's save this one oh I don't know okay we don't want to save this one okay so first thing we need to open the uh app map view where we already have this map okay and okay I don't know why I uncommented this code okay which is showing the uh car okay that's fine but here uh we are going to add the markers okay but we need the place information first on this app map view okay so from the host scream where we are passing this uh Place list to the place list view see in the similar way we also going to pass the place list to this uh app map view okay so we'll pass this app map view and obviously you can write this condition as well okay and bracket and save it okay now inside the app map view let's accept it as a prop so here I will add it here Place list okay now we have the place list and we need to show the mark marker okay let me close this uh this marker like this now here we need to instead of showing the 10 markers because we don't know the value how many markers are there and everything right so for that one we'll create a new item and we can call it as a markers okay jsx so this will inside this one will add all our markers okay so right now I will just save this one and over here we will add the place list okay if Place list is is there and and condition o sorry not like this we we need to iterate it right so Place list and and place list do map because just in order to iter you have to write map then item comma index and then you have to write the arrow function and inside that you can add the markers item okay which we or component which we just created okay and save it it so right now nothing will happen and if you see this warning each child has at least a unique key so obviously you can just provide the key as a index okay and this will this error is gone I don't know index one size one okay that's fine let's remove this for now let's reload it so here I just added this condition if location is there then only show the marker okay because sometimes if you get error just add that one now we have this marker and we are just uh adding this marker right now if nothing will display on the screen and here we need to pass the item one by one so I will say place and pass the item okay from the item obviously we will get uh the all the coordinates okay so here accept it as a plates okay and inside that let me remove this view okay the same way we have we added right I will copy the existing marker which we have and we will paste it here okay let's uh import this marker and also import this image okay let me comment out this image for now and from this place if you remember okay we have the um all the business coordinates okay so it is in the location and inste that we have latitude and longitude okay so it's very easy already we have location we'll just add Place dot because we are getting it from the place this time okay and then and save this app map view save this makers as well okay and one we got one error we'll check what's the issue and now if you see uh from the markers which we added right we are able to see all the markers here okay so I change the lead location of my uh emulator but now I'm getting all this result okay which is nearby me okay so now next what we need to do we need to replace this marker with the with our own customer marker image okay or marker icon so I already have one marker which I created okay and uh this is the marker I created and this is I'm going to use uh instead of this red marker okay if you want to use this all the assets the source code okay then you can join my um uh this particular website or membership okay and then you can have access to all my source code and uh as well as this assets and everything everything okay so join it now if you did not join And subscribe to my channel so moving back to our markers right here inside the markers component okay this is the default marker so obviously you can add this image okay and you have you can add your custom marker here right the the the same way which we added this car marker same way you have to add your custom marker save this one and if you see the magic you got this own custom marker here like this okay now if you want to make this uh UI M bit Zoom right you have option here that you can make it little bit uh or you can change the view little bit okay it's up to you how you want to do now we are going to add the on press event on this marker okay and once you select this marker if you see this currently the map is moving to that particular location okay but on the pr of that one we also want to move our slider at that or move our this particular slider and to show that particular business at this home screen okay so first thing what you can do okay you can add the paging enabled inside the place list view for this um flat list okay so what it will do instead of just scrolling right if you see now if I want to move it right it will move to that particular location see okay it's not if I release from here it will go at at the left or at the right depends on uh uh the selection of this particular uh business okay but now before if I I remove this one okay you will see the change if I remove it and if you see now it's just a a free scroll label okay but if I add the paging enable it will be at that particular location only okay so this is very important next what we going to add we going to add the reference okay just add this reference and we can call it flat list reference and make sure to use this use reference okay so uh this flat reference will be used by this particular hook called use ref okay and it is importing from this react and then attach that particular reference to our flat list next uh we going to define the scroll to index okay before that we also Define the gate item layout okay so flat List have some different property and here if you see we have property got get item layout okay and here we have to provide the item layout so let's define that one we say get item layout and the arrow function inside that we will provide the length first so obviously I will provide the length from the dimensions dot uh it need to be actually display in Brackets because this is a value so dimension. get okay and we'll get it from the window do width okay and then we'll say offset value as well so offset it's also getting from dimensions dotg and then from the window do width okay into index so here what are the index we passing right is so for example it's a zero or one or two which is nothing but this particular index okay so that index we are passing here and then comma we have to pass index okay this is the uh simple uh syntax in order to get the item layout okay on this one right we have to pass some property called index like this okay now our uh get item layout is ready okay uh let's attach that one to this gate item layout like this and next we need to also Define uh scroll to index uh method okay scroll to index and this method will take index okay in which uh position you want to move your slider okay so if you want to move to this uh second position so it will go to the second position if you want to move to the third it will go to third okay so like that way and here we have to get the flat list reference which we just created before do current comma scroll index scroll to index here we have to Define and you have some property like animated okay so if you see this animated as a true and then they have to provide the index okay and simple so whatever the index you provided it will go to that index okay and obviously if you want to use this scroll to index you need to add this gate item layout okay now next Let's test this out okay so inside the use effect I added this use effect just mention this scroll to index and some value for example if I give two and right now right now it's a two on second element only but let's give one and if you see on the UI it automatically move from the left okay for example if I give four see it's move to that four only okay so this is how you can move uh your slider at that particular position okay next now instead of uh obviously we are not going to Define over here okay but instead of uh on on the clicking of this marker right we need to open show this particular business at that location okay so what we can do uh there are couple of way that we need to Define okay first you can um get the index of that marker obviously index and this business has the same index okay like 0 1 2 3 or you can compare it with the some uh business ID or something like that okay so in that way you can implement the logic so let's do that now let's go to this app map view okay and inside the app map view we are rendering this markers over here okay so inside the marker we are already passing this place item but this place item contains only place information and we need this index information like 0 1 2 so what I will do I will write index and just pass the index into the marker okay now go to the marker and accept it here as a index okay now you have index and place information so obviously on the press okay now here to this marker we have we have property called on press and here we'll just console The Click marker index value okay so let's say marker index comma index okay and then save it let's save this file as well and let me close this one let me go back here and now now let's Place list view markers okay now if I click on this marker okay so see the Mark is showing now if I click on this right side marker see the index is showing immediately okay perfect it means this marker is uh on the price of that marker we are getting this index value okay now what we need to do we need to send this index value to the business list view because inside the business list view we have this card okay and over there we need to update this scroll to index okay now the question is how to send it okay obviously we can send back uh this index value to the app map view and then from there we have to send back back to the home screen it's a very lengthy process so that's where again the context is very helpful okay so once you define the context it will be updated everywhere and can be accessible everywhere once you define that inside the provider so let's define the context okay obviously we will Define one for the user location same thing you have to Define for this um marker selection okay so what we can do uh we will write method selected marker okay dot or context do JS jsx okay and here we'll say export constant select marker context is equal to create context and initially pass no value okay and then save it now we created this select marker context now obviously you need to wrap your component which you want to uh share the information inside the provider so what we can do obviously you have uh you can wrap it anywhere but inside the home screen I will wrap it in this time okay so let's go to the home screen and we'll wrap around this one okay so instead of okay we just wrap maybe here and we can say um select marker context do provider okay and wrap this like this okay and now here you have to provide the default value so value and we'll say selected marker comma set selected marker okay and obviously let's define the state for that one okay default state so at the top I will Define constant this state is equal to use step and default value I will say empty okay or you can say zero it's up to you okay but right now I will providing empty now uh let's save this one okay and wherever you are clicking on the marker make sure to update that uh context value okay so inside the marker you are adding on uh this console log you are printing right over there you can set the value of that particular context so what I I can do first Define that context here okay that selected marker and selected marker is equal to use context and then you have to provide the context name okay so in this case is Select marker context Now set select marker copy this one and here instead of console I will remove this one and set the value so just you need to set the index value okay because on the click you are just adding the index right so we provide the index value and then save it now obviously if I click on this any of this particular marker then it will navigate to that one okay I don't know why my emulator is froze and now if I press this because the location is changed with the emulator but if I press any of this one right see it's uh we are now setting this value now next what you need to do uh inside the app list of the place list view let's go to the place list view where we are going to set this scroll to Index right because we want to jump to that particular business uh card okay so here first Define that particular uh context value so uh selected marker comma set selected marker is equal to use context and then context name okay now obviously whenever uh the selected marker context is got change we need to call the use effect okay so what I will do I will pass the sorry selected marker value whenever marker value get changed obviously we going to call this scroll to index value and then we'll pass the selected marker value okay here as well I will add this condition if selected marker is there and then only scroll to index will work let's save this one and let's try it out and if you see if I click this item okay see it changed immediately if I select this item see the below U uh card is changed immediately depends on the location see how easily it's changing see okay perfect so this is how you can implement the logic in order to get the business on the selection of the marker okay I hope you understand this one now obviously you can add more styling for example if I select this marker you can change this color of this marker okay only the selected marker like that way so let's try it out and if you face any issue um let me uh put put it in the comment okay and obviously if you uh want to um refer the source code okay U then you can also refer my source code the link is in the description and if you still did not subscribe to my Channel please do subscribe because there are more content is coming out on this channel and I hope you will like that one okay until this point we are able to uh show the markers and the place list which is nearby the users location okay so depends on the user location we are getting the users coordinates and then passing to the API but now whenever you user search something in the address box or in our search box then that address coordinates we need to pass to the API okay and that's very easy because we already implemented uh all the components okay so for that one let's go to the home screen okay and if you remember inside the home screen uh when we implement this search bar right inside the home screen we already consoling this location okay for example let's save this one and let's uh observe the console okay so right now let's search something so I will search some uh this for example the address okay and if I search address this is the latitude and longitude I'm getting for that particular address okay now only thing you need to do here you need to update this location context because already in the location context we are setting the by default the users location when the app get launch but when user search the address then we need to update this location context okay so it's it's very easy uh on this search bar right right now we are just consoling just remove that one and here I will set the location okay but this location will be in the specific format uh the location we are showing is we need to be latitude and longitude clearly find okay so latitude then here we need to get it location do lat if you see this console over here this is how you need to get okay then longitude and then it's skiing from location do l and this latitude and the longitude is the user sorry the address which we search okay and then we are setting it to the proper format and then save it now let's search uh and let's uh test it out whether this working or not okay so here uh let me clear this all the search bar and uh and let's search some address for example let's search this address okay and if I click on it and if you see suddenly the we get the new markers our position get Chang and even though the listing got changed immediately okay depends on the location see okay how easy we update this one right because as I say it's we already have this information okay let's search different address okay so let me close this one and let some address from for example Mumbai okay and click on this and if I search here right see Mumbai location is showing on the screen now if I click on any of this one right I just updated this Mark um when this selected okay and if I move it see the change will getting this information as well and all of these things okay perfect so this is how we on the just change of this on search bar we just update the location and suddenly we got this all the information Okay so until this point if you have any question let me know in the comment section so now we are going to uh save this particular uh station or okay as a favorite we can mark it as a favorite and then inside the favorite section we are going to display okay and so for that one in order to store this place information on the click of that favorite button we going to store our data um all data inside this Firebase um fire store okay if you did not use the fire store Firebase before don't worry we can learn it everything from the scratch or you want to learn more about the Firebase you can my some some of the course which I use Firebase okay and uh it's very easy on web and mobile application in both the uh courses I use this Firebase okay so you can just go on this uh link which I give in the description and then you can um learn from that from it now uh if you don't have an account let's create account and it's completely free okay and uh uh it's very uh easy to use for the student who don't want to pay anything okay so go to the console and create a new project okay I already have P project so I will go into that existing one and there I will create a new app okay so in this case create to web app and obviously we are developing the Android application but react native uh is B based on the JavaScript okay so obviously we are going to use web uh app inside the Firebase give the name so in this case I will give the name as a uh EV charging app and just click Register App okay it will take few seconds to register application on the Firebase and once it installed you will see uh some of the configuration uh code okay so first thing let's install this Firebase okay so copy this command go to your uh command line and over here just paste this command so it will install the Firebase for us next you have to uh copy this all of this code okay uh this is the configuration of the Firebase and then go back to our application and here inside the utils folder okay which we have already we'll create a new file in that and we can call it as a Firebase config.js okay and I'm damn sure that you will not find any uh course which help which use Firebase with this uh react n Expo okay so I hope you will uh like this particular course with the Firebase and everything so I pasted this Firebase configuration I will remove this analytics because I'm not going to use it and most important part here you just export this app initialization okay so that you can use it anywhere else in this application save this one let close this window okay now we pretty much set up this uh our application and just finish it so it will come and if you go here right if you see we have this three apps click on it and you will find this EV charging application right now project is getting set for other um uh features but don't worry your project is ready to use inside the Firebase database right here you will find some of the collection okay and if you don't know what is collection so collection is like a you can consider folder and inside the folder you have a bunch of documents okay this is the existing one which I already have I'm I'm using for some other uh um uh project okay but don't worry we can create our new collection for our application also most important thing if you go to the rule tab here okay on the top of this section near this data here you need to make sure that time stamp is a future time stamp so that you can able to read do the read and write operation okay you can write the condition over here and just click develop and test okay and uh you can in the usage you can see the usage how much um uh database you use and how much read WR operation you happen and everything okay so right now we just make sure that uh you have all the access to this Firebase file store okay now let's go back to our application and here we already defined the file Bas configuration okay now let's uh make the uh icon to make it favorite okay so here on this particular card we'll make one icon or uh so let's go to this place item card and over here above this image I will just search for the heart icon okay so go to this Expo and here I will search for the heart let's filter from this ionic icon and then I will copy this particular icon okay so copy copy this one go back to our application here paste this import command and along with that one copy this component as well and let me open this one asual side by side and here I will copy it here and save it and if you see right now this heart is showing at the top okay also I want this pressable so what I will do I will add the pressable so obviously we use touchable opacity as well but pressable Al is kind of similar okay it also give you the on press event where you can click on that one and make uh trigger this any event okay obviously right now if you see we want this heart icon on the right hand side of this image so let's add some style to this one and make position as absolute okay and if you see right now it's showing here it's very invisible to our eyes but yeah it's there now let's make the color white so it will be visible okay and then make on the right hand size so I will make right of zero okay also I will give some margin so margin of five and I will increase the size to 30 okay now if I go back in any of of this one right you will see this marker see so on the white is very difficult to see but here you can able to see the marker okay perfect this icon you can able to see now we already added this on press event okay and here uh outside this I will add the on press and here I will say uh set favorite okay or we can say on click on set fav and this method we will Define here constant on sorry constant on S favorite and the arrow function now inside that one we need to make sure that we will save data in fire store Okay so so first thing if you don't know how to use the fire store and everything just search on the internet Firebase uh add doc document okay and then it will redirect you to this first link which is the Firebase documentation which is official documentation and then you can access uh the all the implementation from here the first important thing you need to initialize the database from this gate fire store so copy this command paste it here okay make sure to import this gate fire store import statement so if you you just need to copy this one and then paste it here okay now you have this get fire store and also make sure that you will install this app which we already exported okay and if you see it's exporting from the UTS Firebase config okay and save it next uh if you scroll down this is how easily you can set the document okay so copy this document and inside here I will paste it as this is using await you make you need to make this function as a sync and make sure to import this sa doc okay if you see sa Doc and Doc you have to import it so just copy this import statement and paste it here see okay now here you can give the different this is the collection name as I told you in the Firebase uh uh fire St database right this is the collection name we which we need to give so what I will do I will give like um EV favorite favorite place okay and this is the document name so in this case we'll give the some unique documentation name and it need to be a string so one more important thing here in the global API right here we have the uh the inside header we uh in the field mask right these are the parameter we are placing also I added one more parameter which is the ID so it will return the place ID as well okay so this place ID we going to use in our application so here on the click I will say place. ID okay and here we just accept the place because on the click we'll get the place information so I will pass the place information and that place information it will write ID okay and make sure you will write this ID or convert this ID into two string okay so what I will do I will just wrap it do two string like this okay so it will be converted into particular string and then right now if you see here right now this is how you can able to save data but we already have the Json data structurized field formatted data and that is the place so I will just put the place and we'll save it like this okay also um once you save this right we need to show some message so we will show the toast message so that you can access from this toast Android do show and then you have to give the message name so in this case we can give um favorite added okay simple message you can uh change it later on and here you can give the toast Android dot where you want to show bottom center top right okay so I will say top so just say top okay and then save it now let's test it out so if I click on this one okay and obviously you can open the uh the the network tab to check whether you are getting error or not okay also we have to make sure right now just make sure that okay we don't have any collection if uh you are creating the document first time and if you don't have collection the Firebase is automatically create a new collection for you and after that one the only document get added into that existing collection okay so now let's press any of this particular uh card and if I click on it right I don't know I click it or not let's click it and if you see the fa added toast is showing here okay and now let's check the database okay just refresh this database and if you see the n a favorite place is showing with the document ID and this all this field information okay perfect sounds good right now one more important thing right if you see right now we added the place information but we don't know who added it okay while fetching this information we get to know okay um this because if we have 100 people right adding this favate uh inside our database we need to know who is adding uh which place okay so for that one obviously we need to add the users um some ID some email right so obviously we will add the user email so here first we need to get the user information so write constant user is equal to use user and which is utting from the clerk so login information will come here and then uh along with the place right I will also add the users information okay so what I will do um I will drag this now I will change the syntax little bit so here I will say place okay so from the place we'll put the place and then I will add the email okay so in this case I will say um user do primary address dot email address okay and then it will return the email address of the user and that's all okay just make this optional if sometimes if you do not get user information so it will not fail okay and now let's test it out so let's try different one now let's test this out if I click it the favorite get added now go back here and if you see we got the second documentation document and inside the place we have the place information and then we also have the email of the user now while fetching this favorite list we will get the we will fetch only uh places which matches the email address of the user okay so this is how you need to uh save the data with the help of Firebase fire store okay so if you have any question any doubt let me know in the comment section because now we need to get the this all the favorite place information beforehand while um launching this place list because we need to show this favorite icon as a field one and we will check whether this particular place is already marked as a favorite or not okay that is very important and also after that we need to show the list of favorite uh item over here and that time we are using the existing um uh existing component how and I will teach you how to use that one okay and there are lot of things we are uh yet to complete in this particular course so stay tuned and you please subscribe to my channel okay if you want this so complete a free source code or uh one to one um chat with me to um if you have face any issue you can directly contact me but for that one you have to join the membership of uh you can join it um on YouTube as well as you can join it on my channel you go to the upgrade and here you can join depends on your um usability okay so uh see you in the next section previously we learn how to save the place list uh as a favorite inside the Firebase fire store okay now it's time to F the data from the Firebase okay and so that we will get to know okay this particular place is already uh marked as as a favorite or not okay so for that one if you want to know how to get the data right you can go to this documentation and on the left hand side if you see right we have this Red Data get data section where you learn how to get the data okay so obviously first thing you need to do to initialize this fire store so copy this command and then uh paste it here okay so here we can Define this uh get fir store here I will say for example get data from fir store okay I comment it here and over here I will Define one method constant and he will say get uh favorite and the arrow function so inside that in order to get the list of um all the documents which is matching with the user email address right here if you scroll a little bit down here you will find the example okay how to get the data and all so if you see it's saying the get all documents in the collection that's what we we need it okay so obviously right now it's it help us to get all the document but we need over condition okay so it will say get multiple document from The Collection copy this code and just paste it in your get favorite list okay obviously it's using a so we make it a sync and also make sure to import all this import statement okay so query where get docs collection now here we need the GU The Collection name is similar to what we added okay so in inside the place item this is the collection name which we added so give the same name inside the we condition we need to write the matching condition so in this case we need to F the uh documents where email is equal to the user's email okay so let's add the user so constant user is equal to use user okay so obviously this use user we are importing from the clerk Expo and if you scroll down over here we'll get a user do primary email address do email address to get the user email address okay and now with this condition we are getting the all the data okay so right now we'll just print it out and let's call this gate favorite so here I will write use effect method and inside this use effect method I will call this get favorite okay but we have to make sure that we have the user information so we will execute this U effect whenever this user uh is available okay because user will get some time to get the data right and here I will also write condition that if user is available then only execute this gate favorite and will return data now let's save everything and let's test it out whether we are getting data and if you see we got the one result okay which matching the email address and then the place information perfect now we have to save all this data because right now only one data is is there but what if you have multiple data right so in that case we need to save that data inside one state okay so here we'll Define one state constant I say favorite list comma set favorite list is equal to use State like this okay make it empty initially and now the inside the set favorite list we need to save it right so in this case here uh inside this for each right every time for example if we have three documents then this console log will execute three times okay obviously we need to push the data into the set right so OB obviously if you have the existing uh information in the set we have to attach the new information to the existing one so in order to do that right we have to write set favorite list then we have to write favorite list okay the arrow function arrow and then inside the bracket we have to write set dot dot dot favorite list comma and the data which you want to add Okay so it will add into the existing uh list as well and this way we can save the favorite list perfect okay so let's save this one and whenever the user is available obviously initially once this uh component load we'll get the list of all the favorite list from this uh file base now once we have this uh list of favorite right we need to check uh each of this component whether this is a favorite or not so it's very easy to do write constant we write one me and it will check is favorite okay and this method will check is that given item includes in our favorite list or not okay so what we can do we can write constant result is equal to favorite list dot uh here we'll write um f find okay and inside that we'll write item item do place. ID because inside our Firebase data we have inside we have the place information inside the place field is equal to place. ID and here we'll pass this place information okay so every time from this place item we will check is favorite is equal to is favorite and it will return some data but here we'll pass as a place okay and this will return some data so if the result is available then it will return true otherwise it turn return false okay and for our in order to debug I will write console. log result only okay and then save it now let's see we got one error we'll check what's the issue so it's saying Place does not exist okay this place is not exist because it's actually item we need to pass item and not the place and save it and now if I go down at the bottom if you see at the four time we have n but and this position we have this some information okay everywhere see okay and uh right now we can also uh show from the place list you is we are passing the E favorite right and is favorite value is right now is it true or false okay so what we can do here we'll accept the E favorite okay and just for the testing purpose uh quickly we can write the condition is favorite is not there means uh if if it's not ma as a favorite then then only show this uh hard icon otherwise show null if it's favorite then it will not show this particular icon okay let's save this one and if you see this icon is gone okay so this is Mark as a favorite let's move here this is Mark as a favorite this is not see okay this is mar favorite or this is not favorite it's not visible but this is also not favorite okay and kind of thing this is favorite so this in this way we can show show it now only thing we need to do we need to replace this icon with this Mark mean the red color icon we can change with the red color Okay so this condition I will put it here okay or or better we can what we can do instead of putting anywhere else we'll just add the condition for the uh color okay let's try to mark it as a red I want to see so it's uh it's showing like this but we want the field one okay so let's add is favorite then we'll add one icon otherwise it will show the empty heart outline only okay and same thing I will copy over here we'll change icon and I want different icon so let's search for the icon we say heart let's I icon and I think this is but much better hard Sharp okay and save it okay and if you see this is we Mark as a favorite okay this is also this is not and that's how it show perfect right so this also we are pretty much done now once you mark it as a favorite right right now it's this is not Mark as a favorite but if you click on it right if you see it's Mark as a favorite but still it's not showing because we are not updating the the latest data we are not fing the latest data from the Firebase so we need to inform uh to this function that okay now user click uh user already clicked this Mark as a favorite can you please face the latest data okay so in that time from the place item whenever we click the mark as a favorite right here on set favorite we are setting correct here we need to update uh the previous state okay so here I what I will do I will pass um mark favorite okay I will pass this method and uh so that it will trigger over here so here we have to accept Mark favorite and in this case we call this particular method called get favorite and save this one save this one okay and obviously right now immediately it shows but let's test this out so for example let's test the out for this one if I click it and if you see immediately it filled out right awesome right perfect so this is how easily we can uh implement the favorite now next part you can try it on your own if possible otherwise you can access my source code and we will also cover that part but if I go to the favorite right here we need to add the list of favorite um places okay because in that in in this case we don't need to fet the information from the API because we already we are saving the data right uh inside the Firebase and if I go to the Firebase documentation if you see I think I saved a lot of information but everything we have here okay perfect so if you have any question let me know in the comment section also one more thing I want to uh show it here okay show it here now if I click it again right obviously it will show it uh it will again uh save it so in order to fix this right you need to delete the existing one obviously it means means you are unmarking or unting this particular place okay so to do that let's go to this place item and uh right now we added this PR Syble to this all the components right so to to avoid this one right uh what we can do we'll write we'll write this method copy paste it here and uh just remove this condition right now I will remove this condition from here and I remove this outline from here okay and let me explain this both the code let me format this first okay now this one we have to two pressable button right one is the empty uh just outline heart and another is the field heart which I this this one is the field one okay in the red color now whenever uh we have the favorite then only we will show this heart field one okay so you can write the condition here we can write like this is not favorite is not favorite then show this pressable otherwise show field one okay and if I save it see nothing get changed everything is as it is okay so let me test it out see it's not fill this is not fill okay now right now we are setting this onset for both the both the the function right here instead of onet fave we'll say on remove fave so we'll remove the particular item and here we'll just add the place. ID because we will delete the item depends on the ID of this document if you see the ID matching with this uh document ID because we Market we sa while we are saving we are saving document ID as a place ID okay so we'll write method to remove from the favorite so it's very easy again we'll say constant on remove Favorite a sying method and here we'll call a place ID okay and then we need to just find the document or a way to delete it okay so if you go here and just uh search for this delete data if you see we have this option called delete data okay click on this one and it will explain you how to delete the document okay and this is very easy in one line you can just delete this particular document okay so here I will write this method make sure to import the doc and delete doc doc I think we already have we have to add this import delete doc let's add it here okay perfect and here we need to give this collection name which we have and then the ID so in this case is Place ID do2 string okay just to make sure and also here I will write the uh toast message that favorite remove okay and the top I'm showing you that's fine now let's save everything call we already calling this method and also we need to make sure that we'll call this Mark favorite method obviously it doesn't matter what you are saying but we have to make sure that our um this particular method is getting called to get the updated data let's save everything let's try it out now okay so let's go for the item which is already marked okay so this one if I unselected and still I think we got error we'll see what the issue so he say request entity too large we'll check it out what what is this mean so actually it's get if you see the Firebase is get deleted the only issue when we are trying to get this favorite list okay so just uh try it out why the issue is facing it's very easy okay but when you are calling or you are trying to remove anything right uh then you have to check why uh what's the issue and everything okay now if you see it's working only thing you need to update this uh particular um heart icon okay try it out if you have any question you can access my source code in meantime as well I will look into that what's the issue but uh so I hope you understand this particular complete for how to uh display favorite un favorite or how to remove from the favorite list also next we'll try to implement this favorite list and from the existing favorite list document from the Firebase so see you in the next section so previously we had an issue that we are not able to remove from the list okay means it is removed from the Firebase but it's not affect on the UI side the only reason because uh we are not clearing the favorite list right so whenever we be are fing this gate favorite make sure make uh we have to set the fav favorite list as empty and then we are adding the data because over here we are just um attaching the new data with the old data okay and that's the reason even though if you removed it previously it was already there okay so that's the reason it was Shing now if I see if you see right if I remove it from here it will unmark and it's see fa Mark removed okay and immediately seeing here if I mark it again it will Mark as a favorite okay so I hope you understand this one so that's the only fix right now uh we just uh implemented so one more thing we need to add inside the place item here here at the right hand side if you see right we have this uh Direction uh button okay on the click of that we need to open the uh Google Map or apple map depends on the operating system uh okay so uh if you search here okay and this is the button we are using so make this as a pressable so we can add the on press event okay so this here pressable and uh after this one let's add the on press event so on press and just say on Direction click okay now create one method called on Direction click and let's add constant on Direction click here like this so inside that we need to define the constant URL okay is equal to depends on the platform obviously we need to define whether what what will be the uh map we need to need to open okay so here we we have to se platform select okay and then if it is IOS okay then we have to write Maps colon plus we have to write Place do location like this okay so inside this place location we have this uh latitude longitude so just write location Dot uh latitude I think Place dot yeah just make sure inside the place we have the location and inside that we have the latitude so latitude plus we have to give comma and then we again Place do location dot longitude okay and after that we have to write the address okay so plus is equal to question mark Q is equal to it means the query and the address and if you see we are getting this address from this formatted address okay so Place do formatted address okay just make sure that you are adding this uh optional field same thing you have to do it for now uh Android device so Android okay and instead of maps we are going to show go okay and that's the only difference obviously everything will be as it is so let's copy everything and let me paste it here like this okay perfect and let's give comma at the end and now we have the proper URL now just you need to do linking you have to write linking if you see it's inputting from the react na dot open URL and you have to pass that URL and that's all okay and now if I click on any of this one it will open the Google Map if which the Android it's a Android device or iOS if it's a uh Apple device now let's test it out if I click on any of this map and if you see the map is open with the address everything you just just need to click Direction okay and this is the Google Map it opens automatically okay so this is how simply you can add the on Direction click okay let's go back to application and you can test it out in other way okay perfect so I hope you understand how to add this on Direction click okay and already we have some of the course we already used this kind of functionality as well okay and now you can add that one here so now in this section we are going to show the all the favorite uh places which we uh added in the search from the search section okay and obviously we are going to fetch it from the uh database uh before that let's add the loading uh indicator okay so here in order to add loading indicator right this loading indicator we are going to show when we are fetching the data and once the data is fet on the application then we will hide that uh indicator so in order to show the indicator uh react need to provide property called activity indicator okay and if I if you display like this and save it you will see the small um indicator on this uh emulator now here you can change the size color and everything okay so for example if I change the size okay we have a property called size and it provide a large and small so make it large okay and you can also change the color of this one okay so here we can say color colors do primary and then save it and it change the color to primary color okay now let's bring this into the center of this uh uh particular screen okay so I will wrap this inside a view okay and to this View I will add the style we'll give height first okay to 100% then we'll uh make it display as a flex then we'll make align item into the center okay and then we'll make uh justify content to Center and if you see it comes in the center now okay also you can add the text for example loading okay like this and and uh you can add more um loading indicator okay you can download the some GI file animation file and you can display it here it's up to you how you want to display now inside that I will just add the font family as outfit and the simple okay perfect margin I will also do margin top little bit to F so our loading indicator is ready next we need to F the data okay and for that one if you remember inside the home screen right we already have that uh code to pH the data from the Firebase okay so let's go to not in the so we fing in place list view okay so if you see we here we have the function called get favorite I will just copy that one paste it here okay and also make sure now we are initial initializing this get fire store so I will add that fire store as well over here okay make sure to import this import statement of fire store so I will just copy it paste it over here and uh this import statement for collection and everything so let's copy that one as well okay so now all the import state is ready now obviously uh we need to Define state in order to save our favorite list okay so we also have here so I will just copy existing one now here is thing right right now we are just copying from one component to another this particular uh record but what you you can do you can create a new um file and in that you can put this uh particular service so that you don't need to repeat the code okay but for this uh understanding purpose I kept in different folder so that you can understand okay now uh over here make sure everything is ready now if you see we don't have user okay so let's add the user constant user is equal to dest structurize is equal to use user like this okay perfect and also import the use State and I think everything is good okay now let's call this gate favorite inside the use effect similar like we call it before obviously if user is there so we'll add user in that array list and if user is available then only uh call this get favorite list method okay like this and and if I save it and let's see we got one error let's see what's the issue so it's saying the uh app it does not exist right so here we call the GU fire store but we did not import this app so let's make sure to import it now right now uh let's go to the favorite and if you see we got the result okay so right now we are only three favorite list so three favorite list in showing in the console okay and also obviously we are storing the saate favorite list now what you need to do obviously right now we are storing all this information including email and the place okay so obviously you need to uh just iterate the place list okay so after this view uh we are going to show flat list okay and then we have to provide the some data so in this case I will proide data and here I will say favorite list okay in that we just need to get the uh Place information okay so in inside the favorite list we have we have the place information and from that we need to get uh the data okay but if you see right still uh I think we missed one point so each of this object inside that we have the place okay and not this uh in different way so it's little bit complicated uh but instead of showing the favorite list let's try only the favorite list and not the place okay then render item okay so inside that we'll say item comma index and the arrow function okay so here we going to we going to add the actual uh Place item okay which we already have so this component we are going to use in this case and if you remember we are passing this place as a object and each favorite we are making as a true okay so what you can do here you can say uh place is equal to item do place because inside the item we have the place information okay and then we'll make is favorite as a true because we already the favorite list okay so that's the reason we are showing e favorite as is true and let's save it and let's see whether we are getting data or not okay so right now also we have to make sure that we are um removing this activate indicator so whenever we have the favorite list we will just hide this activity indicator okay so if favorite list is there so you can see here if your at Le is not there then hide the activity indicator okay so all this need to be outside of this view over here and then save it and if you see we got this list of all the uh favorite um places which we did it okay and if you see we also have this heart icon which is already marked as a true okay also uh let's give some uh here we will give the title so let's add the title over here and we can say my favorite place okay and save it let's also make sure that add style to this one so we'll add padding of 10 then font family we'll add outfit medium then add font size of 20 okay let's add 30 okay that's will be uh much better okay and what I will do um I will just change this place to some different color okay so here I will add span I will add the style to this one and I say color colors. primary so it's little bit look different in a good way okay so this need to be a text again I'm not sure okay let's add text inside text I never triy text inside text but let's test it out and if you see yeah that's work so you can add taste inside texe okay so if you see now we have this my favorite place and then the list of favorite places which you added okay and you can even scroll it everything obviously if you at the bottom you cannot score more than this okay so to this style uh or maybe uh you can give the margin so here you can just add the view okay and here you can say uh style margin bottom maybe 100 okay so this will give some space to you okay maybe let's try 200 I don't know why it's not work let's give height 200 or try to go style to this one oops Bing okay we'll figure it out why it's not working I think it's work but due to this tab it's little bit invisible okay but let's check we'll check it out later on but if you see now everything is look good another thing if you see right this marker is where right now uh it's U hard icon okay but inside the place icon uh when we mark it as a on remove Favorite right uh right now if you see we are removing it and then we have to this we are calling this Mark favorite okay it means we are getting latest information okay so we have to also make sure that we will call this Mark favorite again so here inside the place item I will add Mark favorite and in that case we have to call uh this is get favorite method okay so it will get the latest data let's save this one Let's test it out if I unmark this sorry unmark this one right and if you see it gone and only two are left if I go back inside here and let's mark this one as a favorite and now go over to the favorite okay and now right now if you see we did not get anything okay because we did not able to refresh it so in order to do that as well here we say on refresh okay on on refresh we will call the method uh which is this get favorite okay but when we Define on refresh here we also need to Define uh uh refreshing as a component okay if it's a true or false okay so we have to mention one state whether it's a loading or not so here we can mention loading comma set loading is equal to your state okay so right now initially we will make it false but when we we are calling get favorite we will set the loading as a true and when we got the data okay or maybe here we'll set loading as a false okay and let's add that loading attach that loading to the deing and save it now if I try to pull it if you see we got the latest data okay now let me remove this one let's go back to search and let add something different okay for example if I add this one as a favorite and let's go back here uh if you pull down okay and now if you see we got the latest information okay so this is how the on refresh will work okay you have to mention this two property on what action you need to do on the on refresh and whether you have to provide with this a refreshing or not okay otherwise it will not work you have to provide this both the property together okay in this way we can able to show um the favorite list uh from the database okay so that's all for this particular section now in the last section okay uh you can show with uh inside the profile whether uh the username of or user profile of the uh user the name and then you can also even show uh the option okay so you can try on your own and if you face any issue obviously I will um uh put it in the source code you can access the source code and if you have any question any doubt let me know in the comment section

Channel: TubeGuruji

Views: 21,723

Keywords: Build a React Native EV Charging Station Finder App, React Native Google Map, React Native Expo, Expo React Native Google Place API, React Native Firebase, google places react, React Native Project, React native Google Map, React Native Expo Ev Charging, Ev charging App, Build a React Native EV Charging Station Finder App : Expo, Google Maps, Firebase | Full Tutorial, Build a React Native Full Stack App : Expo, Google Map

Id: 9xD4coXs6Ts

Length: 204min 33sec (12273 seconds)

Published: Sat Dec 09 2023