Transcript for:
Building a React Native Business Directory

hey there and welcome back to tube guruji channel today we are going to build react native business directory application completely from the scratch if you are new to the react native and if you want to build an react native Mobile Android and iOS application then this course is for you if you see on the screen we have this beautiful Landing screen uh where user can log to our application we added the Google authentication with the help of Clerk and if you see uh the beautiful UI as well now let's get started and login with the Google uh account once you log to the account or application you will see this beautiful homepage where at the top you will see the profile image of your Gmail account with the name atop populate over here then we have this beautiful search bar here you will see this beautiful sliders okay you're going to learn how to use or how to add this horizontal slider with the help of react native flatlist component then we have this beautiful category section and everything uh to download these icons and all you going to learn in this course at the bottom we have this business or popular business section where you will see this all the section here we added this beautiful information about the business with this rating the category and address along with the business information now let's open any of this category if I open the shopping and boom we have this beautiful listing of the business which belong to the shopping okay now if you want to open any of the business just click on this one and you will see the all the business detail about the selected business now you have option or this is called a quick action button if you want to call just click on this one and it redirect you to the call then we have the same thing uh for the location just click on that it will open the Google Map for website we open website and we have the share option where it will open the the share uh functionality application where you can share then we have about section and the Beautiful we have this review section now here you have option to add add a new review or you have just once you submit it this review will get uh saved inside our database now all of this information we save inside our Firebase fire store and the storage along with the images the data and all of these things next we have this beautiful tab section where you have Home tab explore Tab and profile tab just click on this one and you will jump on that particular tab now in this course you also learn how to use the existing component and reuse that component at multiple places so you don't need to create a new component every time here we have this beautiful all the shopping and quick access for the businesses you can just search any of them and quickly you will get the result then the last and most important part is the profile section if you see on the profile section we have this beautiful uh option like to add a new business or to check the my business where whatever the user added or you have option to share the application or you have option to log out from the application as well now if you want to add a new business now here you have option to add a new business just click on it and it will open this beautiful form where you have option to pick an image if I select this image you will see the image picker and you can choose the image whatever you want also you have option to edit this image crop it according to your need or you have option to re rotate and everything once you crop this image this image thumbnail you will see on the screen then you can fill all of these details and everything is done you can just click on add new business and that's all once the business get added you can go to the my business and you will see your business listing over here now if you want to delete this business open this business and you will see option to delete this particular business okay now you have you will get that option only for your business if you want to delete it will ask you the confirmation to delete the business and once you say delete it will delete it okay and the last is to share this application with your friends okay and obviously the last is another one is through log out now this complete application we are going to build from the scratch starting from setting up the project but so we going to set up a backet and for the back end we are going to use a Firebase so it's completely free so whatever the services we are going to use in this particular course is completely free you don't need to pay anything for it so guys if you still did not subscribe to my Channel please do subscribe press that notification Bell icon so you will not miss any update and without doing any further delay let's begin to develop this react native business directory application in order to build a react native application we are going to use Expo build tool Expo gives us a um the complete ecosystem to build to develop to review and to deploy your application seamlessly the most of the configuration paths is taken care by the Expo so you don't need to do any manual configuration inside your application now if I go to the export. D this is the official website uh of the Expo okay and the most important thing uh you can run your application test your application directly on your actual device also you can run um your application on the react na uh emulator for the Android or iOS it's up to you okay now recently react na uh launches hdk 50 plus and it has a quite a new features like folder based routing inbuild routing and there are lot of things and everything we going to learn in this particular course so first thing let's go to the expo. D and then click read the docs uh once you are jump through the documentation you will find this quick start guide to create the Expo application so open the folder where you want to create the project and uh open a terminal at that folder now just type npx create Expo app at latest so latest will install the latest version of the uh Expo then it will ask you do you want to proceed say yes and then we need to give the app name so I will give business directory okay and then click enter then it will install all all the required dependency uh Library which needed to run uh your react native application so we'll wait and if you see our project is now ready okay now open vs code and obviously to develop our application to write a code we are going to use this vs code ID now go to the file open a folder look at the project where you created that particular uh project so in this case for me it's a react n application and this business directory now say yes I trust the author and if you see on the left hand side we have bunch of different folders and the files obviously we'll walk through one by one so very first uh folder is app folder and if you see these are the folders and file is already generated okay now if you see we have this tab then we have underscore layout not found and lot of other things okay but we don't need this boiler plate we will start our application completely from the scratch so in order to remove this boiler plate right inside the script if if you see we have this particular script which is reset project okay and inside package.json we also have the script to run that particular uh file so simply paste npm run reset project okay so it will reset your project click enter and boom if you see the new app directory created and in that one new file get created and now here you'll see the app- example which is the which was the old boiler Pate okay obviously if you want to delete you can delete it if you want to keep it you can now inside the app folder now we only have this two file one is underscore layout which hold the layout for our application and in that you can render all your pages and all okay now for example if you want to keep a tab throughout the application right which we are going to add then you can mention that inside this layout. TSX file then we have index. TSX file which is currently is the default page for our application and if you see on the right hand side um we have some input for the text and view from the react native and inside the view we simply have the text and these are the some style so this is the inline styling means U we directly Define the style inside the element then we'll ignore this app dash example because this all the old boiler plate then we have assets folder inside this asset folder we're going to keep all our fonts images and many other things like if you see we also have this flash screen the logo for the application after that we have the component folder where you can keep all your components for your application obviously once we start developing our application we will going to divide our application into small component and so that we can reuse it and can manage it uh very seamlessly then constant folder obviously contains the um the some um fixed field or some constant values so in this case the colors are there then hooks uh obviously when you want to share some data between the uh multiple components of par and child components right that time we need to create some hooks okay some some of the hooks already there okay but don't worry you don't need to understand all of this hook right now because once we need it we can develop our own hooks as well then script as you know that is just to reset project so don't touch this one if you want to delete any of this folder just click delete and it will delete from the folder okay so for example if you delete app dash example click delete and move to trash okay if you don't want the hook you can remove it next we have the app. Json file uh in this file it's very important and if you see inside this Expo we have the name of the file along with the slug the version of the application and the icon again okay so also it provide the splash screen uh the path and all then uh for the Android if you see we have this Android um icon obviously once you want to add iOS you can add the iOS and obviously we can add the package name and everything later on okay same thing web uh there are some plugin which is already there which is the export router and you can add your extra plugin as well then we have package lock package.json file which contain this uh script to run your application along with the dependency which is already uh installed right so when we create the application these are dependency already added to our application and some de dependency as well okay and obviously in this particular project we are going to use the CH uh JavaScript okay so obviously we'll write the file name with the jsx now before running our application Let's uh open this vs code extension and then install two important extension one not two only one so one is the es7 react Redux extension which help us to write your code much faster so whenever you want to add a template uh within a couple of words you can generate the template for you obviously once we start writing our code then you'll get to know much better next now go to the terminal in order to run your application and open a new terminal now this will open a terminal inside your vs code so you don't need to uh open Terminal from outside and here you just need to write npm run day so okay so it need to be npm run start just type npm Run start not there and then if you see the expose start get executed and along with that one you'll see the QR code now this QR code uh you need it if you try to run your application on your actual device you have to open the expoo application so if I go over here right and if scroll down I I'm not sure whether it's there or not but you can go to the uh any your app store or Play Store and then you have to install this Expo go application so if I go on the homepage right I'm not sure if there or not but uh let me quickly check or simply you can go Expo go and then if you see these are the two application right this is how it will look once you sign in or just login right and in order to run your application which you are running on your machine you have to oop sorry you have to um you need to be in one uh Network right so you if you in Wi-Fi make sure you in same Wi-Fi network now once you run your application then you will see that you can execute it but in this particular uh course we are going to use emulator so for that one we are going to use Android emulator and in order to um in uh set up your Android emulator right first thing you need to do is to install the Android Studio so if you see I already have the Android Studio so open the Android studio and then if you see we have these three dots on this three dot you have to click on this hdk manager and then make sure at least one API is installed so in this case if you see I already have one API installed then go to the sdq tool and make sure to install Android hdk build tool the Android emulator and the Android hdk platform tool as well okay and then click apply and okay so I already have that one then again go over here and click on virtual device manager so right now if you see I already have the device created initially but in order to create new device click on click on create device and then you can select the phone select the phone type Okay then if I select the uh seven right and make sure that it has the Play service uh enabled right so if you see this icon only select that device then click next then select the operating system which you want then again click next and here you can add the name of and everything okay it's up to you and then click finish so I already have so I will just run the existing one and if you see my avd is getting started then you will see actual not actual but obviously it's emulator but it will look like an actual device for you okay and if you see right now I already I have this Expo go um application install on my virtual machine okay but let me bring this side by side now if you see uh it's old application right now in orderorder to run the application on the emulator okay uh you just need to type a which is for the open Android for I for the iOS okay and vs code automatically detect that you you are running or you you have the emulator running on your system if I click a now it's saying it has some warning that uh uh for this pixel 7 right you need to install updated version of expoo so just click yes so it will install me the up updated version of a Expo go if you see right now it's downloading now it's installing the Expo go in my device and then once everything's done it will open deogo app and then run the uh our application so we'll wait and boom if you see now our application is running also if you on the um Mac OS right if you do the control M you will get this particular setting where you will have uh IP address where your application is running then you have option to reload you can go home and you have some option to debug as well okay oh I click by mistakely I will go back then and if you see right now on this is the default page of our uh application which is nothing but this index. TSX file okay and inside that it's return edit app index edit screen something right now here if I type subscribe to tube guruji so guys if you did not subscribe to my Channel please do subscribe and as soon as I type it and click save immediately it gets Refresh on the screen and here on the screen you will see that particular text right now this text is showing in the center because we gave the justify contain and align item to be in the center if I remove this one and save it now it will be on the left corner left side top corner right make sure to give Flex because many people not uh give flex and sometimes uh when you are applying some Tab and add some tab that might get some error so this is how guys you can uh create your application and run your application until this point if you have any question any doubt let me know in the comment section now we are going to implement the tab bar for our application as we are using Expo router and Expo router is inbuilt with the routing functionality so it's consist of a folder based routing so you don't need to configure anything so first thing uh let's go back to our application I will open my emulator as well as side by side and inside this app folder we are going to create a tab folder so I'm going to give the route name with this uh circular bracket because it just group it okay the route will not change and inside this one now I will say home before that I will add the uh tab layout. TS Js file okay so this in that one we will Define the tab layout I will add the default template by just typing rnf okay or E maybe for the uh export function something like this okay or uh you have another method that you can just type rnf enter it and you'll get fun uh function export like this now over here I will just Define tab left okay and save it now if you see on the screen nothing get displayed right along with this tab I want three tabs so I'm going to add home. jsx add the default template then we want explore. jsx because we are using JavaScript right so that's the reason I'm using jsx and the last I want profile. jss so these are the three tab we want to use it and these are the three screen that for that we created right let's save all of these files and now if I let me rename this this need to be profile and this need be a profile with the E let's say Let Me Close all of this tab and let's go to thisor layout. jsx file now inside here let me remove and here we need to implement the tab right so simply you have to add tabs okay and if you see it is importing from the export router okay and inside this tab we will just say tabs do screen okay and here you can Define the uh mention the screen which you want for example let's say home and save it right if I save it if you see still nothing is on the screen but let's define these three types because that three types we wanted right so one is home another is explore and the last is profile and save it now let's go to this underscore layout. TSX file and currently if you see we have this tag screen uh the default is index and I will add one more and we'll refer these two tabs even though you remove this one nothing will happen if you see still index screen is showing but we also want to show the tabs as well okay now let's go to this index. TSX and anyway because this is the root index file right it will first show that index file and inside this underscore layout we use the stack screen and you know that how does stack screen work it show one page on the button click then only it will redirect to the next next screen but here what we can do in uh inside this index. TX we will simply redirect it to the Tab screen okay so simply here we say redirect okay and if you see this exporting from export outer here you need to give H reference and simply I will say home okay now this home will refer from the tabs home screen this one okay and which we already defined inside this tab okay now if I save this one let me okay let's save this redirect file and boom if you see we redirect to the Tab screen which uh inside that we have three screen home at the bottom if you see we have the three tyes home explore and the profile okay and these three types showing obviously if you don't want this tab uh header right which is coming from this underscore layout which is from from the root layout here you can just simply uh Define options and inside that you can Define heer shown as a false and save it and if you see now uh the header for the tab is went off okay or there is another option if you want to remove for all the stack screen you can just Define the screen options on the stack level on the root stack level and here you can just Define header shown as a false and still it will go off okay next uh if you don't want this tab on this uh profile screen or home screen right because everywhere that tab is there you can also remove from this tab layout and same thing if you want to remove for all you can just mention here and just Define header shown as a false and save it and boom if you see it's gone okay perfect so that's how you can uh show the tab now next thing we are going to change the label of this tab along with we will change the icon of the tab so let me close all of this tab first and obviously we want to change the tab icon so let's go to the tabore layout here we have the three tab now for this three tab here we'll add the options okay inside that option we have the tab bar label and here we'll simply give the label for example let's say home and if you see now CH label change to home also we have tab bar icon over here okay inside this tabe bar icon you can just Define colon and then you'll define the color okay and then you have to define the icon here I think this need to be let me undo this one like this okay and then you'll Define the you need to redefine icon here which icon do you want so for that one I'm going to use this x icons expo. FYI okay so it it is official Expo icons you'll find a bunch of Icon if you search for example home right you will see the home because I right now I selected this I icon but if you see we have all the home icon from the different different libraries but I will select this I icon and I will select this home so first thing you need to import this uh component okay so this is the import statement we need to add it first and then we used to uh add this component like this okay let's save it and if I go back to application you will see the icon changed to home now obviously here the color they mention black but here you can change this color to Simply color okay and then if I click on this one now if you see the active color is bluish and then the uh that active color is matching with the icon color as well now I will copy this option for all of this remaining tab okay obviously here I will change to explore here profile and uh I icon we need to change so now I will just search different icon for search I will use this search just I will change this name to search and then it will work and for the profile I will use this icon which is people Circle just we need to change name because the input statement and the component will be remain same right only this name going to change let's save it and if you see now we have beautiful these three icons okay perfect now if you want to change color of this default uh color combination you can even change that one okay so for that one what I'm going to do uh let's go to this folder and inside this root directory we have this constant right obviously by default we have this color. TSX file okay but here you can change that default color combination as well so for active uh tin color right we can I will also add constant primary color okay here and simply I will add my hash value hash x value sorry 7 F 57 F1 okay and obviously you can just use the same tin color over here and save it obviously nothing will display on the screen because we did not apply that color yet okay but here instead of primary color just we'll keep color okay and and let me export this one because so that we can use it right I will just export here all the colors if you I want primary okay and I will just make this as a capital primary okay the light and dark is already there if you want to keep you can keep it or you can just remove this color combination let's save it and then if I go to this underscore layout here uh to the screen option right you can add one more property and here you can say active uh tab bar active tint color okay and here you can refer that colors so you can refer with this colors uh we need to import that color I think yeah so let's import that color first make sure it is already uh exported that's good let's me try again so colors no it's not getting get imported so let's import that one first simply here I will say import colors maybe we need to Define like this from and then we need to give a specific part to that colors constant SL colors folder okay and let's try it now so colors Dot and if you see we got the option like primary okay if I save this one and boom if you see the T bar color is changed to primary and now this is active color obviously same thing you can do it for this inactive color but I will keep as it is for now so guys that's all for this particular chapter I hope you understand how seamlessly we uh Define or added this tabs along with the icon and we obviously customize little bit according to our requirements next we want to implement the fonts uh for our application okay so let's go to this uh root layout and inside here we'll simply use use Font uh hooks which is from the Expo font and then we'll simply uh add the font so here we say for example outfit and then we need to give path for example if I go to This Ss folder we have this some default font or here okay but if you want your own choice form you can just go to this Google fonts and then you'll find a bunch of different font okay you can search anyone anything you'll like it I mostly go with this outfit form I like most so I will go here and then download this particular font okay so here you can say get font and I don't know whether this installing all of font here and download all one now once you download this form uh extract this one and then go to the static here you will see the bunch of different uh form of font right so here you will see extra uh sorry outfit extra bold outfit bold and all of these I will select outfit bold outfit medium and outfit regular I will copy this one and then go back to our application and then simply paste inside this fonts folder and you will see this three font is added inside your font folder now simply here you need to write require and then you need to mention uh the path for that particular font so in this case is assets SL fonts and then you need to provide the complete exact file name so outfit regular regular.ttf with the extension and then save this one now if I go back to our application right and wherever you want to apply this font you can just add that one for example if I go to this home. jsx and then for this text let's say uh we are applying the inline style so here need to find style I will just change this font size for now because it's very small so if I change this one this is how it looks it's visible to our eyes and then we'll change the font family and in this case you just need to mention the font family the same name which you give it over here okay same name you have to go give to this font family save it and boom if you see this font sorry this font uh uh family is changed immediately okay so that's how you can add it obviously you can add more font let me copy this one and I will paste couple of times here we'll say font medium and font regular sorry uh font bold and then let me give comma over here and here you just need to define a specific file so in this case is m and here simply bold and save it now if I go home and if you want to give a font bold you can just mention like this and boom if you see it Chang so that's how you need to add the font for in inside your application and now uh whenever you want it you can just mention that font family and then it's ready to use it now in this section we are going to implement the authentication for our application along with the login screen if you see on the screen uh let walk through how the authentication flow will work inside our application so first time first time when user come to our application our application will check is that user is authenticated or not if he's not authenticated then user need to Lo uh redirect to the login screen okay and then user add the all the credential and all obviously we are going to social authentication the Gmail to integrate inside our application once user is authenticated it will redirect it to this Tab screen okay so once login is successful or sign up is successful it will redirect it but whenever you come to the uh second time right already you log in and you come to second time every time user will check if user is authenticated or not and then if yes then it will directly redirect it to the Tab screen okay so for that one we are going to use this clerk authentication clerk provide a very seamlessly and one of the most powerful authentication service provider in the market right now and most important thing is free to use if I uh if I if you go to this clerk.com you will find a different bunch of pricing and all and recently they loot uh they uh they uh publish a lot of new uh features inside this clerk so if you don't have an account create a new account and then go to this dashboard once you are in dashboard I already have a lot of uh uh project or application created but you can click on this create application and give the application name so in this case I will give um business directory obviously it's a business Community directory and you can enable the Lo authentication you want and simply create application so once you uh navigate to this particular page here here you will see this Expo framework option right you have to select that one and simply you need to add this Expo publisher key inside your EnV file so copy this key go to your project and inside the root directory because we don't have the EnV file so create newv file and simply paste this code make sure the key is start with this Expo public okay so that we can use uh use it inside our application then we'll go to this Expo guide but in meantime you are want to tell you about this dashboard and all here when whenever user login right you will see all the users list inside this users uh tab then they also provide the organization's uh authentication Service which is quite powerful and quite useful then inside the user authentication you have uh different different uh options uh settings where you can enable uh the Restriction multiactor social connection and all of them okay so just go ahead and explore it uh in many of my nextjs or web application tutorial I use the clerk and it's quite powerful it has a customization option for the login screen they have their own login uh screen UI kid so yeah it's completely uh um package for your authentication Service so in meantime let me go back and Expo and I will go to this continue to Expo Doc and if you jump over here first thing you need to do is to install this Expo Go app so copy this one and then I will add a new tab and simply paste over here so it will install the clerk for your Expo application then um you need don't need to mention this uh cler uh Expo key here okay but rather we can uh display directly over here okay inside this cler provider so copy this cler provider and then go to your root layout file this is underscore layout file so I will wrap this cler provider like this uh and then make sure to import this cler provider to this clerk provider you also need to provide the publisher key okay so we can get the publisher key using process. EnV do and the name of the key so in this case is Expo public clerk publisher key copy this one paste it here and that's all now we are getting error that um because the Define assignable to type string because our file name extension is typescript and we are working on the uh JavaScript so I will just rename this to jsx okay and I will say yes and if you see now we don't have that error anymore let's go back again over here and uh now it's time to protect our pages so if you see we have this safe area view sign in and sign out so simply what I'm going to do uh let me go back to our application and whenever user is sign in I will wrap this stack inside that one so here we say sign in and inside sign in I want to show the tabs mean with uh through this stack screen so I will cut it from here I will paste it and then if user is sign out okay then simply we can show some text let's say sign out okay and then save it now if you see on the text sign out T is showing okay so it's going at the very top but it's showing the sign out page okay next what we need to do we need to implement the sign out screen okay so for that one we'll simply show the component so if you see uh over here we have lot of components I will delete some of them because we don't want all of these files okay so simply me select all of this file and click delete move to trash and boom and now inside this component folder I will simply create login screen. jsx file now add the default template save it and now whenever user is sign out right then obviously showing this text now I will replace this with this particular login screen component okay make sure to import it so here we'll import login screen from component SL login screen now let's save this one and in this case you will see the text called login screen obviously it's going behind this one but yeah that text is showing if you want to see more clearly I will just give a font size let's say 30 and then here we will say login screen that's what is showing uh on the screen now let's start implementing the login screen so I will remove this one and simply first thing I'm going to add an image so I already added one image inside this images uh folder under this assets and this is simply image obviously uh this is just a Dy I'm going to replace it uh once we have the actual application home screen but let's add this image from and obviously this image tag you have to UT from this react n and as we are using the uh image from the local uh assets right so here we'll just use required field so if I let me show okay yeah so here we'll say require okay not required so first thing obviously you need to provide the source and inside that you have to provide the require and then you have to give the path of your file so in this case is asset SL images SL login.png okay and if I save it you will see that big screen a big image on the screen here obviously we need to provide the width and height so here you can give the style which is inline style okay you can directly Define the width and height over here for example let's say I want width of um 500 500 is quite big let's add 300 let's add 250 for now and then we'll add a height of 600 okay so this is how it will look like let's change this to 400 I don't know the size we need to mention specifically perfect something like this and now what we are going to do um I'm going to add one view okay and for this image I'm going to add a border as well so border radius We'll add let's say 20 then border width I say two and Border color add the black color so here we'll say z0 save it and then if you see we have this black let's change this to eight maybe six okay now we want to make um make sure to it will be in the center so for this de We'll add a style this View and here I'm going to add a display it as a flex and and we'll make item to be in the center obviously I'm going to give some margin from the top let's say 150 let's make it 120 only 100 okay next once we have this beautiful uh mobile kind of view right I'm going to add one view so I just CL up this one and I will add another view over here for this view let's add a style um here I'm going to add a background color to white so simply uh you have color code like have FFF then inside this view I'm going to add a text and here we uh we can say like your ultimate community business directory now for this uh particular text I'm going to change the color so I will again wrap this inside one text so this line okay we keep it here and for this text line let's add a style we'll simply add a color to colors I don't constants colors dot primary and you will see here like this now obviously for this particular view let's add a padding of 20 and one more important thing I want to tell you about the external styling right so for example right now if you see we have the add The Styling over here but if you want to Define sty outside of this particular return right here you need to import this RNs style if I click enter it will add the Styles sheet um template make sure to import this Styles sheet first and then you can Define the style so here we'll say for example sub container and just I will use this I will cut it cut this typ from here and paste it okay so this particular properties let's save it and now in order to use it you just need to write styles Dot and subc container and if I save it see now for this particular text let's add a font size of 20 let's make it bigger 40 oh sorry my bad uh we need to give font size to complete text so add a style over here we'll set font size of let's say 35 30 only and and here we will say font family I will add a font outfit bold and I want to be in the center so I will say text align to be in the center perfect okay for the community let's try to give space perfect uh if you want to think you can give more padding it's up to you if you want to add a more padding for your app now along with that one I'm going to add margin top in minus okay so it will overlap to above image and it will give a beautiful uh uh effect as well okay if you want to add elevation you can add it okay or you want to add a border at the top uh you can add that one I'm not sure whether border will how looks this is how it looks but yeah I think let's not add over here for now then after this one you can add some um text so here I will add one more text and here we say find your favorite business business near you and post your own business to your community and save it now for this text let's add Style we'll say font size of let's say 15 then font family we'll say outfit text align to be in the center and obviously I will give margin top or you can give margin vertical as well okay if you want something like this and obviously we'll change the color uh little lighter so let's go to this colors and over here I'm going to add gray with this hash code save it and you can just apply that color over here colors do gray save it perfect and the last we want to show button to log to our application so after this view uh we can add outside of this view actually let's add inside only that will be good so let's add button but in this case instead of add add this button tag I'm going to use this touchable opacity okay so touchable opacity give you some kind of um ripple effect for your button I will show you in a moment so we'll say touchable opacity and along with that it will give you property like on press event that's what we needed but before that let add a text inside this touchable opacity and we'll you let's uh sign in with or we say get let's get started let's get started now I don't know why it's not still showing refreshing it's taking some time but I don't know okay so we imported this touchable opacity from the wrong so make sure it is importing from this react native okay this is very important and now if you see let's get a started button is showing now for this button let's add some external styling so here we'll simply add button tag like this and then simply attach that style styles do button and in order to apply for example let's say background color which is the colors. primary then we'll add a padding of let's say six let's add a 10 oh I want more then we'll make border radius to be rounded so we'll say 99 and I want text inside the center so for this text let's add a style we'll say text align to be in the center then color of the text need to be white perfect and obviously we'll change the font family to be outfit okay now for also here I'm going to give margin top to 20 perfect and we have this beautiful logging screen ready okay so obviously you can add some message uh terms and condition node whatever you want it's up to you now if you see it has a beautiful effect like this see okay so that's the reason I added this button next uh let's go back to our clerk documentation because we did not complete yet okay now you inside the cler documentation now here you have option to build your own sign up and sign up signin page but we are going to use Google authentication so I will directly jump to this Au sign in now in order to implement this OD sign in we have to um make some addition so first thing inside this hook folder we will add this uh use warmup browser. TSX file so copy this file name first go to your project and inside this hooks I will create a new file jsx uh if you don't want this uh particular hooks you can just simply remove it okay and make sure nothing is changed perfect and now inside this uh use warmup browser you have to copy this line of code and then simply paste it here and save it now one more important thing inside this uh particular lineup code they use Expo web browser okay and if I go to this package.json file if you see we already have this Expo web browser installed so you don't need to install it again okay next uh inside this login screen component we need to add this line of code so first thing first let's add this web browser uh maybe complete OD session so if I go to this login screen comp component where we have over here I will just and first thing let's add like this okay oops then we need to use this warm-up browser inside this login screen function make sure to import this so right now it's not getting imported but you can if you see this is how you can import it okay so I will just copy this and we'll paste it here but let's give a specific path so in this case we'll say hooks sluse warmup browser along with that one we have to import this web browser import statement so let's import that one as well and then we have to add this line of code until this one okay so along with initializing this use o and on press event so this onpress method will call whenever user click on the button so this use Au make sure to import it from this clerk Expo and everything will be as it is now use this on press on your touchable opacity this button and here we'll say on press and simply call this on press method so this will call this particular method let's save this one okay and if I click on let's get started if you see it's redirect me to the Chrome browser obviously because it's checking for the account so here we'll say use without account because I'm using the emulator first time and if you see it's asking me to sign in so I will just sign in with my email and my credential and now if you see it's getting uh log to our application sign in let's save for now and boom if you see it's redirect automatically to the home screen because we sign in right and if you remember let me close this all of this tab for now and if I go to this app folder underscore inside this underscore layout once user is sign in it's showing this T screen along with this tabs and that's what is redirect me correct so perfect uh we integrated the Google signin uh authentication Service using this cler but if I try to refresh this one right if I refresh this screen or refresh this application or user come back to our application it again shows me this login screen and that is quite weird and it's irritating for the user to sign in every time so for that one if I go to this documentation you need to add the cache okay so if you see it's it's asking us to add a token cache okay so what it will do it will hold your uh uh login um State okay so once you log to our application it will hold that state and it will use to store your token so next time whenever you come to your application it it will not ask you to log in so first thing let's copy this uh Expo secure store and uh you need to install inside your application so open the terminal and just paste it here and in order to use it first you need to copy this token cache along with this import statement which is import Star as a secure token from this expose secure store copy this one and inside your login screen not login screen and inside your underscore uh layout which is a root directory right above this one I will just paste it as uh let me remove this type because we are not using this typescript so we don't need to mention this type and then inside this cler provider you just simply need to provide this token cache so next time it will check whether you login or loging it or not okay so I Define this token cache obviously next time you once you refresh it it will ask you so what I will do I will just refresh this once or let's let's let's get started I will log to our application I will select my account now this time obviously the account is added that's why it's showing and then click continue and obviously emulator takes some time to navigate and if you see it's navigated immediately now if I refresh it okay then it's supposed to come on this Tab screen again now if I try to refresh this using reload let's reload the application and boom if you see it's redirect me to this home screen because we already signed into our application right so that's all for this particular chapter I hope you understand how we Implement easily implemented this login screen add a the clerk authentication with the uh and we implemented this Google sign feature for our application and then we seemlessly navigate uh to our uh home screen tab right now we are going to implement our home screen on the home screen if you see on this particular mockup we have this header section which contain user profile image along with the usern name and then search bar after that we have these beautiful sliders okay which user can scroll this slider horizontally and uh the list of Icon obviously after that we're going to show the popular business list and other things as well but if you see on this screen I divided each of this particular section inside as one component so this header as one component slider as another component the list of category icons is another component and same way we going to implement inside our application so that it's very easy to manage our code as well so let's go back to our application and inside here we have this tabs and inside we have this home. jsx file right now if you see we are just showing this home I will remove this particular text if I save this now nothing will display on the screen now first thing as I told you here we're going to add a header okay then we want to add slider after that we want to add a category and then we want to add popular business list okay so the fourth uh simple uh section we are going to add inside our application so uh let's create a new component for the header first so in order to create a component I'm going to create this component inside this component folder and inside here I'm going to add a new folder and we'll call it as a home screen so all the home we can just call a home so all the components uh related to the home screen will keep inside this folder and now here I will say header. jsx file add a default template save this one and now this header component we need to add over here so here we say header make sure to import this one and then save it now here you will see the text header now let's go to this header so let me remove this header and first thing let's add one View and inside this view uh we are going to show the user profile image so obviously we want to show image we going to add image tag inside this image tag we provide the source and the source is from the URL so in this case we have to Pro add the URI and the tag and here we need to provide the user Prof profile image now in order to get the user details of the login user you can get it with the help of use user hook okay and you can dest structurize with this user now you can just access the image URL using this user. image URL after that you need to give the uh width and height so here we'll give width of 45 height of 45 and I will also make the Border radius rounded so it will be in the round ular form let's save this one and if you see on the screen it's showing that particular user profile image obviously that image is from the um users uh Gmail account next uh for this view I'm going to add some padding so here we we're going to add padding of 20 and then we'll add padding top to 40 so it will come down like this then uh after this let's add one more view inside that I want to add two text one is say welcome and other text is for uh users name so here in order to get the user name we have users dot full name okay obviously we are using this us user H from the clerk Expo and uh through that you'll get the users information and we'll simply put this user full name now let's bring the image and the text in one line so for this view I'm going to add a style here we'll simply add uh display as a flex then we have to make Flex Direction as a row so it will be in the one line okay obviously U make sure it's vertically Center so here we simply say align item to be in the Center and we give gap between these two item so gap of 10 perfect now let's add some style so for this text I'm going to add some style here we'll say font uh size maybe 19 and then we'll add font family as uh outfit medium something like this see okay and that's all now uh at our header section we want to give a background color so we'll set background and we'll change the colors so obviously we need to import the colors input uh colors from and then you need to give the constant SL colors and here you'll say colors dot primary and this is how it will look like obviously uh for the text let's change the color so here we use style we'll say color to be white and here as well I add color as a white and save it and we have this beautiful header uh with the user profile image along with the username after that we going to add the one more view for our search bar so here we'll say search bar and then inside the search bar um the search bar also include the icon along with the text input so that user can enter input so let's get the search uh the icon first so let's go to this Expo icons and here we'll find for the search I will use the I icon copy this input statement as you know that we already use this uh icons so it's easy and copy this component and we paste it here after this uh let me show you this icon see after this we're going to add the text input so text input is component from the react native is used when you want to enter some input value inside the input box so is similar like input tag inside the HTML so for this text input let's add a placeholder and we'll say search and if you see the search text is showing if I click on this one one right automatically uh the keyboard will open and you can able to type it okay perfect now uh let's bring this all this together so we'll add a style first thing we'll make a display as a flex then we make Flex Direction as a row we'll do gap of 10 we'll make a line item to be in the center okay then we'll give background color of white then we'll add a padding of 10 and uh obviously I want to add uh margin horizont oh sorry vertical to be 10 and uh margin top let's add 15 then we'll make border radius maybe eight so corner to be ready rounded perfect and uh I I think that's all for the uh this color right I'm going to change the color with the colors of our theme which is primary color so this is how it will look like see okay also you can change the font of this text input whenever user write so here you can add a sorry style and simply add the font family as outfit so whenever user enter something right it will change to this one uh let's add change the size font size to let's say 16 little bigger yeah now I think oh sorry now here if I type something that is good enough perfect right and uh obviously search bar functionality is little bit different and obviously we going to implement later on okay but for now we'll keep uh as it is now one more important thing we want to implement here is uh to add a corner for this background so it's very simple it's up to you if you want to add so here we just say border bottom uh radius so bottom left radius let's say and here we'll say 20 and if you see this is how it looks okay same thing you can do for the bottom border bottom right radius and make it 20 and this is how beautiful effect it will give it's up to you as I can say right so that's all for this header section uh so if you have any question let me know in the comment section next we are going to set up back end for our application so that we can able to face sliders category business list and all other things and to for back end and to store our data we are going to use Firebase and fire store to store our data recently Firebase uh updated a lot of different things and added some new features and if you see if I go to this fire. Google.com you will find a lot of different things things is happening and they added a lot of new features as well so basically um we are going to use Firebase free tire so don't worry about that one you don't need to pay anything and if you don't have an account create a new you have to log in with the Gmail and then go to the console once you are in the console um select the app sorry create a new project first okay I already have some project created so I will select the one and uh here uh once you are land on the project you have to just add an app okay so select app here we'll select the web for now and uh you need to give the application name so here we'll say business listing app then uh click register app and it will take couple of second to register app okay and then uh you need to install this Firebase so copy this command go to your project and then just simply paste it here so this is the simplest way that I'm going to tell you how to integrate your application with the Firebase okay so you will not find on any of the channel so once the Firebase is installed in meantime we're going to copy all of this code which is the Firebase in initialization code and we going to keep inside uh a folder so we can create one uh root uh folder in root directory and we can call it as a conf fig inside this config folder uh I'm going to create a new file Firebase config jsx let's say JS only and paste this line of code okay now here uh for now I will just put like this so initialize the Firebase and we have this initialized app make sure to export this one okay and then here we have this Firebase config let's save this one for now and let's go to the continue console on the Firebase now once you are here you will see the two apps one is this business listing app now next thing right now if you don't see any Firebase fire store just go to this build uh not Bill okay yeah in bill as well you have this fire store database okay select this Fire based data Firebase fire store database so Firebase database called fire store okay make sure and then uh if I scroll down so this saying this project is set up us Cloud fire store in database store this mode can only access from the cloud console okay go to the cloud console now actually let uh refresh this particular screen couple of times and then again you will see this Cloud fire store inside the Firebase only okay here you have option to add database but if you want to add multiple database you just need to add the payment details but right now we are not doing that one next important thing you need to do is go to this rules okay and inside this rule uh you just need to add Hello read and WR and right now it's sh false let's make it true because we are doing on the test mode and then click publish okay I think we are good for now and if I go to the usage indexes and the data okay now here you can start creating the collection let's say I want to start collection and here I'm going to give a collection ID as a sliders click next now you can add the document ID you can generate this ID through this ATO ID then give the fill name so here we'll give the slider name this for uh the name is just a fi name is name and the type is string and the value here we say for example slider one okay uh this another field I want to add which is the image URL and uh here we will need to put a value and I already have the URL so I will paste it here okay and if you want to add more field you can add it for now I will keep this two field only and if you see the new document is created with these two Fields let's add one more documents we'll see ATO ID here the name uh the value you can give for example slider 2 add new field here we say image URL now we have to make sure that field or image URL or this name should be same okay so that when you face the data and display it on the screen uh we can use this field name to display the image URL and I will paste this another image and save it now we have these two documents okay so that's how you can set up next we actually going to learn how can we F data from the Firebase because we already configured we have this Firebase config file which have all the configuration and all okay but next and important thing that how to F it and so that we can get the slider list and displayed on the screen now let's F the slider from the Firebase database and then we'll display it on the screen so let's go back to our application and first thing we need to do is to create a component for the slider so inside the component folder under the home folder we'll create a slider. jsx then add a default Tex template and save it next uh inside this app and obviously on the home screen we need to add the slider so simply here I'm going to add this slider component and now on the screen you will see the text called slider and now let's go to this Firebase config okay and over here we need to export DB is equal to get fire store and if you see this fire store is importing from the Firebase / fire store and then you have to provide this app reference so this app reference we have to provide to this get fire space so this DB now once we export this one we can use it anywhere throughout the application so inside this slider. jsx let me close all of this tab for now and I create a new method and we say get slider list and inside this G slider list we will simply fetch the data from the Firebase but before that first we'll create a query q is equal to let's say query and make sure it is importing from the Firebase file store then here you need to write collection you need to define the collection uh so inside the collection we need to provide the DB reference so right now if you remember we already added this DB reference right sorry uh we already initialize the DB inside this Firebase config so let's import that one so here we'll simply import DB from and then we have to give the config folder slf Firebase config and now once we provide this TV along with that one we need to provide the collection name so inside the Firebase we give this collection name called slider with S capital same thing we need to that same name we need to give it it over here once we have this query right so now right now is simple query because we want to fet all the slider now we have to write constant let's say query snapshot is equal to a wait and we want to fetch all the documents so we'll use get docs okay and then here we need to pass this query which we already mentioned now as we are using await make this as a sync and simply we'll use Query snapshot do for each and inside that we'll Define Doc and then we'll simply iterate it so right now we'll console this documents. data okay so inside this Doc in order to get your uh document you have to refer using this doc do data let's save it let's go back to our application and as we console it you will see the result inside your console so this is our console right let me go over here obviously we did not um call this method yet so let's call this method inside this use effect uh as you know that use effect will execute for every instant means it will execute infinite time if you did not Define this empty array so in order to execute this us effect only once once the component get load we have to provide this empty array okay or whenever you want to execute this use effect on some variable change or state change that state you need to add it here from currently we only execute only once so I will just simply call this get slider list inside the US effect so this get slider list method will get called once this component get load and now if you see inside this console we have this two array sorry two document one uh in front of this log and another we have two documents right along with this image URL and the name of the slider so if you see we have slider one and we have slider two perfect now once we have this document let's save this in one state so we'll Define constant here we'll say slider list comma set slider list is equal to use state so this will hold value for us we'll Define empty array now as you know that this particular doc return a document one by one and with this for each we are iterating it right so in order to push the value inside the slider list one by one we'll Define set slider list here we'll say previous value and we will append the previous value along with the new value okay so make sure we have this previous value then we app the previous value and then we added the new value so we also have the previous value now okay and then save it now once we add this one right we have to make sure that we'll set the slider list initially empty every time when we call this get slider list otherwise on every time it will get added inside the slider list let's save it and now it's time to iterate it so first thing I'm going to add here for example # special for you some kind of text message right obviously here I'm going to use style here we say font family and here I will add outfit medium oh this need to be outfit medium or let's add bold actually and we'll increase the font size and we CU padding of 20 okay after this uh we want to iterate through the slider so for that one we going to use a flat list so flat list is very powerful component inside the react na help us to iterate your list of value or array in order to display it on the screen so for this flat list you need to provide the data which you want to display so data inside data we have the slider list then we need to render the item so in inside that let's write item comma index and the arrow function so here we'll add the image simply image tag because obviously we want to show the image right and inside the image tag we'll show the URI and item do image URL then we add a style we need to add a width and height so we'll add a width of 300 then we'll add the height of 160 for example like this and then save it now once you save this is how the slider will look like right but we want the slider horizontal scroll correct so let make this flat list and provide it has one property called horizontal and here you need to make it as a true and boom if you see now you can able to scroll horizontally correct now let's apply some styling to this image so first thing uh for this flat list I'm going to add a style and simply I will give a padding on the left to be 20 I will keep the right as it is then for this image I will add a border radius to be let's say 15 then uh I will add a margin right to 20 so it will give some space like this see and now how beautifully it's scrolling correct um also let me decrease this 25 much better and this 2 150 perfect now this Gap is uh little bit more so here I will give padding uh let's say padding uh left 20 then here padding top 20 and I think that's good and here we'll say margin bottom five little bit perfect and the here we have this beautiful slider ready now if You observe over here we have this slide bar right you if you don't want that one you can also remove that here you just need to write show horizontal scroll indicator and here we can make it as a false so by default is true but now if you see you don't have that slide bar anymore now we are going to show this category list now in the two way that we can show this category list one is in the form of grid which uh I show in mockup or other other in single one line okay and it will be a horizontal scroll like this slider only so we'll uh go with the second approach showing the category list in a horizontal way so let's go back to our application and first thing we need to do is to add the new component inside this component folder under the home and then we can call it as a category. jsx then add the default template and after that we need to add this category inside the home screen so under this category section and save it now you'll see the text called category now let's go to this category and and simply first here I will use style here uh we'll add m not just add margin left to 20 we have the category list we also add the margin margin top to 10 and for this category let me bring this down We'll add a font size of 20 I don't know what I will check the similar way that for we added for slider so yeah font size is 20 only and last is font family is outfit board like this okay on the right hand side also we want to show one more text and we can simply call it as a view all okay so let's try to uh put in the right hand side so first we'll make it display as a flex and we'll justify the content uh space between so okay so it is not working for this one so better we can add this particular text outside of this text and then we'll wrap this both the text in one view like this okay if I save this one let's add a style now for this one I'm going to add a padding of 20 so even though if you remove this padding that will be fine then we'll make a display as a flex and then uh we'll make justify content oh sorry instead of justify content first let's make it Flex direction to be row and then we'll make justify content space between and save it okay now obviously we need to make a line item to be okay we also need to give margin top so we can add to this one only perfect and then for this text We'll add a style we'll just add a color of colors okay we need to add color uh so I will just copy I don't have okay let's copy from the heer colors template sorry import statement and just paste it here so that we can directly add the colors do primary perfect and then I will also add a font family of font sorry outfit medium and save it perfect uh next uh we need to get this all the category list so inside the Firebase I already added this collection name called category inside that I added this document and for each of the document I added the icon the ID and the name of the category okay so icon and name is very important in this case so in order to get icon you can just go to this flat flat icon okay here you'll find a bunch of Icon and whatever the icon you like it open that icon right click it and copy the image address or you can just save it in your local and from there as well you can uh use it or just you need URL in order to add it here right it's up to you how you want to use it so let's go back and here we'll Define constant get category list and we'll make this as a sync I'll close this for now first we need to write a query q is equal to query from the file store then collection here we need to provide the DB dot The Collection name which is this category and that's all okay after this one we need to add constant query snapshot is equal to a wait get docs and then pass this query q then we use Cy snapshot do for each doc and then we'll console the data using doc do data let's save this one and obviously we need to make sure we'll call this method inside the use effect whenever this component get at very first time now if I go back to our uh terminal you will see that we have around 7 to 8 icons and category along with all of these details oh let me oh this one not the one if you see we have the icon the ID and the name of the category now in the similar way that we did we sa the slider list same way we have to save for this category so first I will Define a state called category list comma set category list is equal to use State and then let me pass the empty and then over here we'll set the category list the previous value we need to append so here we say previous value along with the new value which is doc. data okay after this one obviously we need to iterate this flat list so here I'm going to use flat sorry we need to iterate the C category so obviously for that one we going to use flat list from the react native here just provide the data first which is the category list then we have to render the item and the arrow function like this so here uh first thing we'll add a view so instead of adding uh uh code to display the category here right what I'm going to do I will create one more component and we can call it as a category item or category card whatever you want I will say item and then add a default templates and each of this category value will simply pass to this category item okay so here we'll say category is equal to item okay and inside the category item we'll accept this as a category and save it okay now if you see we are just iterating the on this list right and if you see we got this uh what we call call it as um the key issue right obviously we need to provide a unique key so let's try to provide the key as a index and then if you see oh that warning is still there because here we need to set the cat category list as a empty first and I think let me check this error okay so that's the it's just a warning so we'll ignore this one okay for now just ignore that one and let's go to this category item now first thing let's add a image from the react native The Source here uh the image is from the category do icon which is the URL and then here we need to give the width and height so here we say width style let's say let's say 40 sorry the width we'll say 40 the height 40 let's see how it looks wow if you see we have these beautiful categories um obviously once we Define this one light we want to bring in one line so for this flat list just make it as a horizontal let's say true and it will be like this now for this category item okay let's say for this view let me add one more View and for this view let's add a style we'll say padding of 10 okay and then we'll add a background as well so for background color I already added one colors called icon BG so that I'm going to use it okay and then uh I will make the rounded corner so border sorry the Border radius to be rounded so we'll say 99 border radius then we want to give a gap so here we'll say margin right to 10 let's say 15 and we'll give more padding let's say 20 oh 20 is too much let's give 15 only okay and that's that's good one and if you see I can able to scroll this one uh for this category let me go here into the flat list we'll give some margin from the left so simply we'll say margin left to 20 perfect and here if you see we have this beautiful category let me remove that horizontal scroll indicator and save also uh for this category item we I'm going to give the category name using this category do name if you see we have the name of the category obviously let's make this font size of 10 just make it 12 then for on family is to be outfit medium and then we'll make text align to be in the center let's save it and let's see how it looks see okay if you think you want to give margin from the top let's margin top to five and boom if you see we have this beautiful list of category displaying on our application okay perfect next we have to make sure that it should be this all of these categories should be a clickable okay so simply uh for this view I will change this to a touchable opacity so either you can implement M this uh on press even from this category item or you can Implement by wrapping the touchable opacity to this category item it's up to you okay but let's do it here so here we'll say touchable uh opacity here you have different different option as well touchable native feedback and all if you want to try touchable native feedback let me show you how it works so it's similar like the onpress event but let me save this one it will give okay so we have one error I don't know what okay so we need to wrap this in one view it is in one view only let me change this to normal first okay this is good so let's try to add touchable opacity only I don't know tou opacity so I don't know what's the issue but if you see now it's a PR disable okay perfect and obviously uh we'll send the on press event and here here we'll just say the category ID or we can pass all category information on category PR event okay and this need to be need to pass on this one and then here we say on category press on inside this category obviously we we also have one more property we need to add it because just now we add it which is on category press and if I console this one just say category or here we say just value for now because let's say category only and save it now whenever I press category it will console inside the console loog okay so let's say we I click on this shop shopping see it's showing the name shopping if I click Salon if I click Salon Salon daily products it's showing the so that's how it works obviously once we have the business list all the next pages and on the selection of the category it will open the respective list of the business and then we'll go from there now we are going to implement or show the business list on the home screen okay so all the popular business list we can show it if you see on this um mockup we have this uh image okay which is the business image or we can say branner image then we have the business name then we'll show address along with the uh number of rating for this particular business and the category for this particular business and that will be on the horizontal uh scrolling on the home screen okay so it's very straightforward now uh inside the Firebase fire store database I created a new collection called business list inside that I added two documents okay manually I added obviously but later on we're going to give option to the user to add their own business through the mobile application and then if you see uh inside the collection we added some field the currently the important is the name then the image URL the category and the address obviously this about category and all other things we going to add or show wa once user open that particular business to see the complete details so uh let's go back to our application and first thing we need to do uh so let's uh create a new component for the business list so inside the component folder we have the home and inside there we'll create a new component called business list do jsx now let's add the default template so here I will just rename to this instead of business list we'll say popular business popular business then we'll add a default template by just typing rnf and boom now this popular business component we going to add inside our home screen so let's go to the tab where we have this home screen and over here we'll simply add the popular business now if I save it you will see the Tex next popular business is showing on the screen okay now if you see this error is encounter because we need to provide the key but it's a just warning so we'll just ignore this one now let's go to this popular business and let's give the header call popular business so for now what I'm going to do I will just copy the existing from the category where we have this text right I will just copy this as it is so let's copy along with this View and then just paste it here obviously we'll rename this to popular business and save it obviously we need to import colors so let's import that colors from the constant colors and then yeah and we are good to go and if you see now we have this popular business showing on the screen next we need to face the popular businesses okay so right now I'm going to create a new method called get business list and currently we'll just face the top mean uh the popular 10 business list okay so here the we need to write a constant query q is equal to query make sure it is importing from this Firebase file store then we need to write collection in from the collection we need to provide the DB reference after that we need to use the collection name so in this case is business list just to show you okay this collection name we are uh giving and then uh you can add the wear condition if you want so in this case I also adding a limit of 10 only 10 business list will it f it okay and then we'll write constant query snapshot is equal to await get docs because we want all the documents doents okay so it will be a multiple documents so that's that's the reason we use gate docs and then we need to pass a query as we are using a wait make sure to make this as a sync okay now next we'll iterate this query snapshot using this for each and then we'll just simply console this one so console. log doc. data like this and then save it now make sure to call this particular method inside the use effect and whenever this component get load uh very first time then this get business list will get call and currently we just consoling it so let's go back to our application and if you see inside the log we got we are getting this document. data means all the documents right currently we only have two documents but but we are limiting that one using this limit uh statement okay so only 10 business list we are fetching next we need to save this in one state so we'll Define one state called business list comma set business list is equal to your state and here as you know that the similar way what we did for the category to store the list of category same thing we going to do it here here so we'll say say business list we'll say previous value then add the previous value along with the new value like this okay as simple as that next let me close this view here we going to add a flat list because we want to show it on the screen and we are going to show with the help of flat list for this flat list as you know that we need to provide the data so in this case is the business list then we need to render the item so will be item comma index the arrow function and make sure you are using the curly braces sorry the circular braces and not the curly one and over here uh we'll just add a view now it's up to you whether you want to write this uh code over here or you can create a new component like what we did for the category item as well okay so right now we'll create a new component instead of displaying over here so inside this home we'll say popular business card. jsx Okay add the default template now this particular popular business card will accept the each single business and obviously here we need to pass that one so we say popular business card and in that one we need to pass business business as item so this item or each business information we are passing to this popular business card component okay and obviously I'll make sure to pass the key as a index now let's go to this popular business and if you see even though if I I only have the two business means two documents inside this business list is showing it showing me as a four because we have to make sure that every time when we call this get business list we'll set the business List information empty initially and now you'll get only two every time because every time when we save it this us effect will get execute and the get business list will get called now let's go to this popular business list and over here let me clean this out here we'll going to add the image tag then we'll add source as we are using or showing the image from the URL so we have to write URI here we'll say business dot image URL like this obviously we need to give width and height we'll give style here uh we'll give a width of 200 we say width of 200 we'll give height of 130 let's save it oops let's save this one and uh if you see now we are the image is displaying on the screen so beautiful right next uh we need to show it as a horizontal way right so simply for this fat list we'll do horizontal as a true so it will show as a horizontal way and if I save this one you will see uh oh this need to be horizontal let me change this to horizontal and save it and boom if you see on the screen now it's showing horizontal way okay now let's go to this popular business list and for this view we're going to add some style so first thing we'll give the margin left to 20 then we'll add a padding of 10 let's make it as a 20 let's save it and this is how it will look like then we'll add a background color as white which is # f f f and we'll also make the Border radius to be 50 okay so this is how it will look like now it's up to you how you want uh the design will look like right if you want to add border you can it's up to you now for the uh image as well I'm going to add a border radius of 15 okay and then after this image We'll add a Tex let's add a view inside this view we'll add a text and here we're going to show business name so simply We'll add a business. name uh let's add some style to this one we'll add a font family let add font family we'll say outfit um bold we increase the font size to 17 uh also uh after that I think for now this is good but let's for this view let's add a margin top to S perfect let's add another uh text for the address here we'll change this to address and the font style is outfit I will change the size to 13 and we'll change the color as well so we say colors colors dot Gray little lighter okay perfect and if you see we have that one uh next we want to add a star and address but before that just wanted to tell you if you see on the screen I'm not able to scroll horizontally okay and it's get stuck because here it's going below to this tab and I'm not able to scroll this screen then the question is how to implement that scroll functionality so to fix this issue let's go to this uh homepage of our Tab and here we are using view currently just replace this with this scroll view okay so what will happen uh now your view will be a scroll and you can just scroll it now let's save this one and then if you try to scroll it see now I I can able to scroll this particular um screen as well okay now if you want to give some margin below uh to this screen you can just just go ahead to this popular business or maybe let's in home only I'm going to add a simple view okay and for this one I will just add the height of let's say 100 and now if you see I can scroll it up until this point okay so this is just a quick kind of fix you can say right next let's go back to our popular business card and over here we want to add a star so if you want the use icons right let's go to this flat icons.com and then search for the icon which you like now this icon are completely free to use and there are lot of different bunch of option you will find on their uh website okay now in this case I want to use this icon select the PNG file and download it for free okay now once you download it open that icon copy it and and then go back to your application and inside this public folder or maybe yeah inside this let me assets folder inside the image just paste it here like this and we have this star I will just rename it to start like this now let's go back over here and inside this I will add one more view inside here I will add image source and obviously we are using it from the uh local so we'll say it required and then we need to give the complete path so in this case is asset slash Images slash star.png okay if I save this one obviously uh let's end the tag and then save it you will see that image okay but obviously we need to give width and height so we give a width of 30 let's say height is of 30 let's save it and this is how it looks let's make it 15 only okay and that's perfect uh after that one we need to give a text and it will show how many right now I'm going to just add the rating like 4.5 because we don't have the uh rating it's hardcoded we are giving hardcoded value let's add a style we say font family as outfit okay now let's bring these two things together so we say style We'll add a display as a flex and we'll add a flex Direction as a row okay also We'll add a gap of gap of five okay perfect now for this view uh I will add a gap of five okay so it will be uh you'll see now we have the equal distance between all of these stres next on the right hand side as I say we want to show the category name so I will just wrap one more view like this okay because we want to show the category in same line that's the reason I added this View and then I will add a text and here we simply add the business. category okay because inside this business. category we have the category name see like this now if I save this one you will see the category name let's add some style so add style here we'll say uh font family as outfit then we'll add a background color as a color dot primary and then we'll add a text color as a white # FF and this is how it looks also We'll add a padding of let's say four let's add three and then uh we'll change the font size to 10 okay let's say 12 and also We'll add a border radius border radius to 10 let's add five I don't want too much now let's bring everything in one line so for this view let's add a style here we'll simply add a display it as a flex then we'll say Flex direction as row and then we'll just say justify bit content is space between so that it it will be on the right hand side like this okay uh let's make this font size to 10 and that's much better I think so yeah and that's how you can add it now for this flat list inside this popular business component we'll say show horizontal scroll indicator as a false okay so it will not show that ugly horizontal U scroll bar and we have this beautiful uh popular business list okay so that's how guys uh you can add the popular business list if you think that this space is too much you can just uh go to this popular business and here we added this padding right let's add a padding left to 20 and uh we'll say margin bottom to 10 let's see how it looks I think that's pretty much good and is margin top to 20 yeah that's good now okay perfect guys uh until this point if you have any question any doubt let me know in the comment section because there are lot of things that we are going to implement in the upcoming uh section as well so if you still did not subscribe to my Channel please do subscribe and let's move to the next section now in this section we are going to show the business list depends on the users category selection for example if you know that we already have the list of all the category which we are showing on the home screen and whenever user click on any of this category we going to show all the business list belong to that category okay and if you see on this markup this is how we going to show we have these cards and and obviously we want to show a vertical scrolling and we are using flat Le for that one obviously but now in this case as you know that our export uh is export router is folder based structure right so we have to make sure that we need to create the folder in a such a way that it will be show a dynamic business list depends on the uh category selection right so it will be like let's say business list slash and the category name okay category dot JS file whatever you can say right is it will be a category name now in this case the business list obviously which we want to show and the category name will be changed every time depends on the user selection might be user can select shopping user can select a Saloon or user can select a car service right the category name will change every time and depends on that one we need to uh fit the business list okay straightforward and quite easy uh but let's go back to our application I will close all of these tab first and then let me go back to this app folder and inside this app folder right I'm going to create a new folder and here we call we're going to call it as a business list okay now inside this business list we need to create a dynamic route and this is how it will work so in order to create a dynamic route let's say inside the business list you want to create a dynamic route and we can create with this with the help of this square bracket we'll say a c category and the JS file okay now this whatever the name which we mention in inside is uh square bracket right it means it's a dynamic route the route name can be changed any time right and it will be like now the route will be like business list slash any any category like this okay so this category will change anything something like this right 1 2 3 or something right obviously business lead will not change because this route will be constant but category will change every time now let's add a default template here I'm going to change this to business list by category okay and let's save it now obviously on the click of this particular uh category we want to show it so uh let's go back to the components inside this home we have this category item right now now on this category press we already uh emitting this category so let's go to this category and right now we are just consoling over here now in order to uh let me go to the console in order to navigate from this screen to other screen right let's define the router first there are couple of way that we can do it but right now we will do it programmatically so router is equal to use router hook okay so from the export router so make sure to import this one uh from the export router and this is the use router hook and then in order to navigate I will just remove this console log now and here we'll simply say router dot push okay and then here we need to give the complete path so in this case we'll say business list slash and the category name so in this case is item. name okay now if I save this one and if I click on any of this category let's say shopping if I click click on this one see it's navigated to the business list by category and that's what the text is showing right now okay perfect next if you want to show the header right obviously right now inside this underscore layout we we added this header shown as a false for the all of them right but if you want to enable for individual you can also enable through this uh component as well let me show you how so first thing uh let's enable the header so simply here we say constant navigation is equal to Ed navigation and this Ed navigation we are going to import it from the export router now inside the use effect whenever this component get load right here we'll simply add navigation do options or we say sorry the set op options and inside that we'll simply add header shown as a true let me show you and if you see the header shown is when once we make it it's showing the header but obviously the path will be the default path showing business l/ category right now if you want to change the name of this particular header with the category which US are selected that also we can show but before that let's get the category name so here we'll say constant then we'll destructure it the category using this use local search params okay now this text need to be similar the what we gave to this file name so in this cases category will match with this category okay so in order to whatever the value we pass to this particular category we'll get it with the help of this uh hook called use local search pattern and obviously this Hook is importing from this export router now let's display the category name on the screen first so simply we'll say category save it and boom if you see on the screen it's showing this shopping right if I go back and select this daily products see the text daily product is showing on the screen okay so this is how it works then if you want to change the header name we just say header title will be the category name so we'll just show category and boom if you see now the tip uh header also change to shopping okay if I go back to some other let's say plumber and it's showing plumber okay perfect next now we have the category we have the layout uh means we have the header and all now let's implement or just F the business list uh depends on this user category selection so here we'll say get sorry um constant get business list and here I will just document that use to get business list by category okay and now here we'll say constant query is equal to await not await but here we'll just say uh query first okay from the Firebase file store then collection then DV reference and then we need to give the collection name okay now after that this is very important we need to add the wear condition okay so here we'll add where and we need to check the category so here we need to give the category obviously this will match with the field name what we added inside a fire store Firebase then you'll see the equal sign okay this is second parameter which is equal to equal to and the name of the category which is category then we add a query snapshot is equal to await get docs because we are fing multiple documents and we'll pass the query as we are using await let's make this as a sync now let's console it sorry not console but let let iterate this query not short first so using for each we say Doc and then we'll just consolle it so document. data we'll make sure that we are getting the data now let's call this get business list inside the use effect if I scroll little bit down here you will see the result okay and now if you see the category will be the shopping okay because only shopping data we f it now let's say in one state so we'll Define a state called constant business list comma set business list is equal to use State over here we say set business list and inside that we'll add a previous value uh we'll get previous value and then we'll add a previous value comma the current value which is doc. data like this okay now here we'll just simply show the flat list because we want to show it on the screen so we'll use the flat list for this flat list we provide the data which is the business list then we'll render the item so item comma index the arrow function like this now in order to show this business list card we'll create an a component so inside this component folder I will get a business list folder and inside that we'll create a business list card. jsx let's add a default template and it will accept the business each single business obviously and then we'll import that business list card over here and to this business list card we'll provide the business as a item okay so each item we pass to this business also make sure to add add a key as a index let's save this one and if you see on the screen is showing business list card next once we have this business information let show the image first because if you see the mockup we have the image and on the right hand side we have the business list address and all of these things so here we'll say image make sure to import this image from this react native then need provide the source URL because we are fetching from the URL and here we'll say business. image URL here obviously we'll give the style uh we'll give the width of 130 pixel or let's say 120 and the height is of 120 if I save it so this is how the image will look like on the screen so cool right then we'll add the Border radius of 15 and for this view also uh we'll add some styling so first We'll add a padding of 10 then we'll give a margin of 10 we add a border radius of 15 and then we'll add a background color as white and this is how it will look like see perfect right next uh on the right hand side we want to show all of this information so over here we'll add one View and for this view uh inside that we'll add a text we'll say business. title not title business. name business name then next we'll add address and then uh if you remember we we added the rating and all right so I will just copy paste from this home screen where we have the popular business sorry prob business card and this particular image and all right so I'll copy this and we'll paste it simple over here okay uh just path is I think that will be good let's save this one and if you see we have all of this information now perfect next uh let's save this one and uh we need to put all of the thing on the right hand side so for this view we'll make it display it as a flex then we'll make Flex Direction as a row if I save this one this how it look like let give a gap of five okay and let's make it 10 and save it now next uh for this text we add a style let add a font family as outfit bold and font size of let's say 17 let's add 18 let's say 20 how it looks I think 20 is much better then for this particular text we'll add a style so we'll add a style We'll add a font family as outfit then um we'll add a color as colors do gray and let make it Flex as a one I'm not sure why it's going out so if you see right now the address is going uh not above but out of this particular card right so what we can do uh for this view because we wrap inside this view right here just make make the flex as a one and boom if you see now it's perfect also we'll give a gap of five so little space add seven perfect and afterwards uh we have this our rating that's good for the here we change the font size for the address to let's say 15 little bigger perfect and then we have all of this information okay now if you can if you want you can make it item to be in the center for example let's say here I make align align item to be in the center so it will be in the center like this okay it's up to you how you want to display it uh I don't want align item to be in the center I will keep as it is perfect and now we have this beautiful all the list of business okay if I go to this some other business is let's say daily products and right now in daily products I only have one so it's showing one only okay but if I go to the plumber if you see nothing is displaying on the screen in this case we can show message that no business found right so what we can do uh let's go back to our um flat list inside this business category and simply here we can say business list. length is greater than zero then show the flat list otherwise just show the text okay and obviously we need to close this and inside this text we can just mention no business form okay see and over here we'll say style We'll add a font size of 20 font family outfit bold and font is color will be colors do gray okay and obviously we want this in to be Center [Music] so so here we'll simply add text a line to be in the center and uh you margin top let's say 40% okay that's 50% fine okay and this is how it looks for example let's say saloon don't have business but if you have the business shopping cart see it's showing the business list and it's not showing that text anymore so that's how uh we can fet the business list depends on the category selection now there will be a quick update that we are going to mail for example if I go to this any of this category right if initially if you see it's showing that no business F and as soon as we got the result it's showing the actual result right so let's try this one okay now obviously we have the all the information but if you try to open and the first time user is fing data then first at the very beginning it will show that no business found and then once we got the result we it was showing the actual result but we can Quick Fix quickly fix this by showing the loading indicator so for that one let's let's go to this app and where we have the uh business information which we are showing right and here we are showing no business found but uh we'll create a new state over here and we can call it as a loading comma set loading is equal to use State and initially I will make this as a false now whenever user try to get a business list right we'll set the loading indicator as a true and as soon as we get the result we'll set the loading as or maybe we can set it here set the loading as a false okay now if I go over here we'll simply add a condition okay if business list of length is greater than zero and and loading is equal to equal to false then show this one okay uh also over here we can add one more condition if loading is true right here we can add a condition then show the activity called activity indicator from the react native okay otherwise show this no business found so over here we'll simply add for this activity indicator right it has a couple of property like size you can give it as a large and then it has a h color as well you can change the color so here if I put the color do primary something like this okay now if I save this one and go to any of the shopping you will see that activity indicator right now you can even style this one so for example let's say you want to give margin top 270% like 60% and save it right now whenever user come on this one right let's say I open daily products now obviously right now initially it's showing because we already have the information right so it show very quickly but uh whenever the first time loading in uh the information then it will show that activity indicator okay one more important thing uh for the flat list because we we we are showing the flat list over here so let me bring this flat list here right we can add pool to refresh method okay and it's very simple when you click pull to refresh it right we want to make sure that we are getting the updated data so for that one we'll add on refresh method so on refresh right we show a loading or let me refreshing okay so when it's refreshing then we have to show the loading otherwise on refresh we'll call the get business list method okay let's try this one so if I try to pull it I don't know why yeah if you see this pull is coming off and if I try to refresh it see it's refreshing the uh data okay so that's how it works so these are the couple of changes or addition that we just made it okay that is very important when you are fetching data from the server now whenever user click on any business okay we want to show the business detail screen on that one we want to show U the banner image along with the business name address option to uh show the rating over here then we will show some uh action button where user can click on the call for example right then immediately we can call to the to that business same with the location that on the click of the location button we can open the um map application where it will navigate to the location the web address and share so that user can share this particular business information on any social media platform also uh we will give option to show the uh business uh details and about section now whenever us click on any business right we have to make sure to pass the business ID okay so that depends on the business ID will will face that information now inside the Firebase we have we don't have the specific business ID which we are storing and in order to F the business information or specific uh document from the Firebase we need this business ID okay this particular ID but currently we are not fing that one so let's see how can we add this uh document ID as our business ID so that we can face the data so first thing uh let's go to this business list category where we are fetching the business list inside this business list right in order to get the document ID uh simply what we are going to do we are going to store document ID as well right now we are just pushing saving the document information but over here if I wrap this inside the curly braces and if I add the ID using doc. ID so if you see uh you can get the document ID like this comma and then give three uh dots which is the uh separator okay so right now if you see I'm adding ID and along with that I'm adding all the remaining fields of the document. data now if I save this one now we have the proper ID for the each of these business uh list perfect next uh let's create a new uh path so over here I added a new folder called business detail and inside that we need a dynamic route called business ID because business ID can be different every time okay and add the default template as simple as that next wherever we have the um business list card right here we're going to add on PR event so simply I will change this view to touchable opacity you can add touchable native feedback okay it's it's not big deal but we can add touchable opacity uh make sure to end this tag and then to this touchable opacity we want to add on print this event okay like this now in order to navigate it make sure to add a route uh Define the router using this use router Hook from the Expo router make sure to import it and then simply we'll navigate using router dot push and then we need to give the path so in this case is slash if you see uh the business detail so here we'll rename business detail slash the business ID we need to provide so in this case his business ID is business. ID okay let's save it and if I click on any of this business information see if you see it jump to the business details screen now let's go to this uh business detail screen and get the business ID and we'll print it out on the text so we'll Define the use effect not use effect but let's define constant here we'll say business ID is equal to use local search pars now this business ID should match with this file name and then simply I will uh use this business ID like this and if I save this one so right now it's showing undefined let me see so let's go back once okay so we'll get refreshing um the newly data and now if I open any of this now if you you see we got the business ID okay perfect next once we have the business ID we add a new method called get business detail by ID and here o sorry here we'll just write some document use to get business idry business detail by ID so now let's go to the shopping over here so path is not found now just refresh it and if you see we have the ID perfect let's get the information so here we say constant query is equal to query do uh inside that we'll write collection then DB reference so five is fter that's correct we'll add the DB reference so we import DB from configs sl5 is config then we have to provide the collection name which is business list then we'll add wear cloths and inside that um actually um once we have the collection right we don't need a wear Clause over here so here actually we don't need a query okay I will remove because we are fing a single document so here we just say document reference is equal to uh doc from the fire base then inside that one we'll add a DB so database reference comma The Collection name which is business list and then document ID so here we'll just say business ID okay and then here we'll say Doc document is equal to await and here we will use g doc only okay not docs because we want to f a single document and then we'll pass this document reference make this as a a sync and now here we'll simply say I will rename this to Doc snap and if doc snap is exist we'll just get the document data otherwise we'll say no such a document let's save this and let's see whether we are getting document or not so over here I will go to previous screen I will select this one obviously uh we need to call this method inside the use effect so let's write the use effect like this okay and save it now if you see we have the this document data along with the all the information perfect now let's save this in one state so we'll say business detail comma set business detail is equal to use state or here we can just write business instead of business detail next over here we set the business as doc snap do data even though if you want to remove this console you can remove it and save it now whenever we are fing data we can uh set a state so here we'll use loading indicator so here we say set loading is equal to use State and initially I will make it as a false so whenever we try to fet it we'll set the loading as a true and once we have the data we set the loading as a false and simply over here I will just show if loading is true then we'll show the activity indicator from the react native similar way what what we did in previous section right otherwise we can show the business information so that's why I showed view like this let me remove this text and for this indicator I will change this size to large and color as colors. primary perfect and if you see we have this loading indicator obviously we'll style this one we'll add a style add a margin drop to let's say 70% see loing IND was sh perfect next uh once we have this business information let's display it all of these things so what we are going to do uh let me go back to our mockup and over here we'll divide this uh into different different part for example let's say here until this point we'll divide this section as a intro then action button and then business about section kind of thing so for that one uh inside the component folder I'm going to create a new component we can call business detail inside that let's say intro. jsx add the default template and over here let's add that one so first will be the intro then next it will be the uh action buttons let's say uh about section so for the intro I just add intro component over here and if you see the intro text is showing now to this intro component we'll save the business information so whatever the business information uh State information we have we'll send it to this intro and inside the intro will accept it as a business let's save all of this information now here we'll display the image so let's add a image tag then provide the source which is business. image URL and save it now obviously we need to give width and height so width will be 100% and height will be let's say 400 and save it and this is how it will look likees let's say 34 sorry 340 something like this okay after that we want to show a back button on the left hand side and heart icon on the right hand side to mark it as a favorite so uh above the image I'm going to add a view inside this view let's add a back button so in order to add an back icon right let's go to this Expo icon and then search for the back I will filter this out with this I icon so that I will get a specific one so let's say I want this icon so let's sorry let's paste the input statement first and then copy this component like this okay let's save it and then add one more icon for or the heart so we'll use uh the heart icon I want empty the outline one so we'll use this one and paste it and let's save it and if you see those icon is showing on the screen let's increase the size let's say 40 and 40 now we want want this icon on the top of this image right so for this view you can make the position as absolute and then give the J index like say 10 and if you see now it's on the top also uh let make it in one line so display as a flex and then Mark justify sorry um Flex Direction as a R and then try to mark it asy space bit space between and obviously we need to Mark uh give the width as 100% so it will come on the right hand side also you go padding of 20 perfect and if you see we have the back button and as well as we have this beautiful heart icon next we we have to make sure this back button should be a clickable so we'll simply wrap it inside this touchable opacity so that we can add on press event so we can add on press and we'll just simply mark it as a um back right so here we'll add constant router is equal to use router from the Expo router and here we'll say router dot back that's all and save it now if I it's refreshing so we got one error so this touchable opacity we imported from the incorrect uh UT so this is importing from the we need to import from the Rea native okay and now let's go back again okay so image URL is not defined mark question mark so sometimes it takes some time uh to fade the data right and now if you see we have this back button now if I click on this back button is going back okay also I'm going to change this icon to White and here as well I make it as a white Swit little visible perfect next we want to show the name and all so this is the image after this one I'm going to add a view and inside this view We'll add the um business name so let's add a text for that one here we simply add a business. name let's save it add one more text for the address let's add a style so font size of 20 font family as outfit bold and here I will change this to let's say 26 little bigger something like this and for the address let's add a style for this one as well font family as outfit font size of it then for this uh view we add a padding of 20 so it will look like this see okay now one more important thing that we want to I want to give some uh kind of curvy effect to this particular uh section so for this particular VI not but this view but for this view I will say margin top to minus 20 okay so it will go up little bit and I will add a background color as white okay and uh let's try to add Flex one if you need it okay not not don't add Flex one now here just give the Border radius to be 20 and if you see how beautiful curve is showing on the both hands both side right so that's the reason you have to put this particular view on the top of this above but instead of Border radius here you can just say border top radius top left radius and the right radius and only this two rad on the top left side and right side radius will be uh added with the 25 um pixel okay uh next we want to uh action button so for that one we'll create a new component so let's go to this component and inside here we'll say action button. jsx add the default template save it and then uh let's add the action button over here like this okay now if you see this XM button is showing on the screen obviously here uh first thing I will add a background color so this will be a white also We'll add a padding of 20 and then three uh the four button we need to add for for that one I'm going to create a action button menu so in that one we'll add ID one the name of the button let's say call the icon we want to show so for the icon right um I already have the icon added inside the assets folder so if I go to the assets folder inside the image I added this four icon the one for call one for this location one for the share and one for the web so I will just give uh the path for that one so let's add assets slash Images slash let's say call. PNG and uh here we'll say URL now in the URL section right we want to on the click of that we want to make some action right so for this action button first let's accept the business information and make sure to pass the business information from here as well like this and save it here as well and then in order to make the telephone right so Expo has uh one component called linking okay uh so inside this linking component if you see if you want to open the URL you have this HTTP right in order to send an mail you have to uh write mail to and then mail ID same for the telephone okay so we have to write tail and the phone number so in this case we'll simply add tail colon and plus business. contact because we have the property called Contact in that we have the contact number okay uh let's add this couple of times ID 2 now in this case in ID 2 we want to add a location so for location here we'll say pin.png now for the address we going to replace this with this uh URL okay so it will open the Google Map or let me close this one and then in the query we'll pass the address okay obviously everything you will get in the source code so you can just access it from the source code as well next uh we have the another one which is the web and for the web it's quite simple so you just need to use uh business do um web okay because we'll add the web address or email or website let's website so this need to be ID3 and the last is for share okay so here we'll say share uh for the web let me check the image which is web and this one is for the share okay and I think we are good now for obviously for share I'm going to change this URL but you will see the share action and how it works later on in this course but now let's display the action button first so in order to display obviously I'm going to again can use the flat list from the react native and then for this flat list the data we need to provide which is the action button menu okay then we'll render the item and then inside that one we'll add a view inside this view uh we need to add the image tag The Source tag here we say require because uh we are going to f uh the images from the local right and then here we simply add uh sorry the not name but the icon and then close the tag okay so we are getting this error because the image required right is not support the dynamic uh uh displaying of the image from the local asset so in order to fix this you have to wrap this icon inside this require like this okay so whenever you are trying to uh iterate the images from the local assets right you have to make sure you wrap it like this okay so I will just update all of our uh Fields not all but only for this icon so that we can display it and now if I go over here instead of require I will remove this one I will just show the item do icon and now if you see we have the list of Icon obviously we will add a style let's add a width of let's say 50 let's set 100 and height of 100 okay least two more big let's see if okay next we want uh to uh show the text as well o so just close this one and let's add a text and inside this text we'll just display item item dot the name for this one let's add a style let's add a font family of outfit let's save this one and if you see now we are able to display that one also uh I will add the font family medium let's save it and that's look good to me next for the flat list right we will add the number of column okay so if you see we have the property for the number of column and we want to display four okay now if I save this one it will show that error and saying that changing number of column on the Fly is not supported change the key prop on the flash list when changing the number of column to force the fresh render of the item okay so in this case uh you have to just refresh your screen so do the uh on the emulator or on the sometimes this contr m not work I don't know why but uh just refresh the screen and on the actual device uh you just need to shake the screen you will get that uh reload uh action button and just click on that one now after uh reloading my application this is how it will look like on the screen now we want to spread equally so here you just need to add uh column wrapper style and inside that you need to mention justify content as a space between okay so this column wrapper style is plat list property and you can add the style as you want for the text uh let's align the text align to Center so it will be look like this also I'm going to give margin top to let's say three and beautiful and if you see now we have the beautiful call to action button right now this button is not clickable yet so I will just add the touchable opacity make sure you are inputting from the react native and here let's make sure to close this also uh for this touchable opacity let's add on press event like this and this on press event you have we have option called linking if you see from the react nud dot we have to say open URL and then simply we need to provide the URL like this okay but we will create a new method and then we'll pass this information so simply here we'll create open on press Handler we say and then we'll pass this linking uh open URL right here we'll pass the item so here we'll just simply say on press Handler and pass the item information this item information will go here and then we'll open the URL okay but if the item do name is equal to share then we have to execute some different thing right so here I just return empty otherwise it will open the URL let's save this one and let's take this out now if I click this call button right and boom immediately it navigate to the number and add all that number is added you just need to press call okay same thing now I don't know where our application went that's let me run it again so open it and for the location as well and for the W will same thing uh will happen Okay but I don't want to show it on the the emulator immediately because emulator uh is not that much capable to move the action fastly right and it will take some time but anyway I hope you understand how beautifully and easily we added this action button next we need to add about section so here inside the business detail I will add about business let's say about uh jsx add the default template and then make sure to add this or uh import this component inside your business detail section so let's say about and save it now obviously for this about you need to pass the business information and let's go to this about obviously here I'm going to add a style will add a padding of 20 also I will add a background color of white and then here I'm going to add a text let's add a style we say font family as outfit bold add a font size of 20 okay and then again another text to display the business information so let's accept that business information because we already passing from this parent component and then here we'll simply add business. about and boom if you you see we have that information also for this one I'm going to add a style add a font family ODS outfit also I'm going to add line height let's say 30 uh let's say 25 and that's pretty good and we have this about section uh for the business okay so that's how you can add it um here let's say height of 100% let's see how it looks perfect and we have the height 100% next and important thing we need to do is let's go to this business detail and business ID where we imported this all intro about and all of these things make sure to change this to scroll view okay so that it will be a scroll label so here I will just change this to a scroll view let's save it and if you see now I can able to scroll it obviously right now it doesn't make sense because it's not scrolling uh because once we have the content more than the screen size then obviously it will scroll now in this section we are going to implement the review section where user have option to add a rating for that given business and it uh also uh user can add a comment uh for that particular review and once it submit we will store in database uh along with that one also we going to show all the previous review uh below to this review section only okay and for that one we are going to use this react native um the rating Library okay so this how it works so you can get select the rating and it will give us the result and all okay because otherwise it will take some time to implement all of this feature uh with scratch so better we can just use this particular library but first thing uh let's go back to our application and below that we want to add this rating so I will create a new component and I will call it as a reviews jsx add a default template and then add this particular component below this about section okay so here I will say review section and below this review section I will just add this reviews component now for this reviews component uh my bad for this reviews component I'm going to pass the business information like this and then save it next let's go to this reviews component and here it's showing okay next uh go to the reviews and obviously uh I'm going to add style we add a padding of 20 and also I will add a background color of the white next for this text we'll change this style We'll add a font family as outfit uh bold then we'll add font size of 20 okay next after this one uh we want to add a section where user can have select the rating okay so for that one I will use this Library so copy this uh Library um install this npm using this npm command okay and then once it install this is the simple example that how to use it okay so obviously we are using this rating component so copy this rating component here I'm going to add a view inside that I will add this rating component and make sure to import this rating component from this react native ratings let's save this one and then if I scroll it you will see this rating component now if you don't want this rating right the three out of five and kind of thing you can just remove that one so you have option to remove here for the show r you can just make it as a false also on finish rating we need to call the one method so if you see this example right it will pass the rating value and we can create the component for that one but instead of that we'll sa in one state so here we'll say rating comma set rating is equal to use State and initially let's say four okay let's save this one and and over here obviously it will return return the rating we'll set the rating value as a rating perfect and save it next uh we need to add an input so here we'll add a text input in order to enter the value right it's like a uh input fi inside uh HTML CSS now to this text input we have the placeholder here we'll write uh write your comment okay and you will see the text input if I click on this one you will see the keyboard will get open immediately uh for this text input obviously We'll add some Styles so add some style over here uh first thing I will add a border width let's add border width of one then uh we'll add a padding of 10 and this is how it looks obviously uh we'll add a border radius as well of 10 and if I get this down this is how uh it will look like right I will change the Border uh color to colors do gray something like this and you can add number of I don't know whether we can add it here so here we'll add number of lines to let's say four okay and this how it will look like um if you want this at the top right you can just say justify content Flex start I'm not sure uh maybe align item to be Flex do so here we can just say text align vertical and we want at top so top and if you see it come like this okay um you can change the size of rating because it's too much so here we'll change size to 20 something like this see now here you have option to add and then you can add a comment as well and after that one um we want to add a button so here I'm going to add a button so here I will just say touchable opacity and inside this one I'm going to add the text and here we'll say submit okay now if you see the submit text is showing obviously we going to add some style so it will look like button so first thing uh we'll add a padding of 10 the background color will be the colors do primary then we'll add a uh rounded Corners so here we'll say border radius to be 15 let's say six I don't want too much and this how it looks right uh for this text add some Style so font family will say outfit then our color will be the white and possibly uh let's add of justify content Flex in I'm not sure whether that is possible or not with this one but that's fine most important let's add a margin top to 10 and I think that's good enough here I will make text align in the center so it will be in the center like this okay now once user enter the command then only we want to enable this button right so here we have option called disable once you click disable user cannot uh submit this one okay but uh as soon as we have some data then only we want to enable that button right so here we'll simply add constant user input comma set user input so in this state we going to store the value which user entered and whenever user enter any value it has the unchange text method okay so for example let's say when user type we'll just console it for now just to see whether we are getting value or not so I open this let me uh terminal if I type something over here see is getting printed on the console so as soon as this get type you also set the user input using this value and now once uh for this disable here we'll say if user input is not there then only disable this one okay otherwise obviously we will press on press event and here we'll just console the user input along with the rating so save this one now I I will put some uh sample comment I will select this star let's say star like this and let me open this and if I click submit see the text is showing as sample command and other rating as well if I change rating to three and submit it you'll see the sample commment and the rating three okay so that's how it works next uh we'll create a new method called on constant on submit and on this on submit okay obviously this onsubmit method we need to connect to this uh button so here we say onsubmit and here we need to save the data inside the Firebase fire store okay now here uh first thing uh before writing code for unsubmit inside the business ID if you remember we got get the business detail by the ID okay and we are getting the information but here we have to make sure that we'll get the business ID which is nothing but this document ID and that kind of similar implementation we already did it for the business list so here uh where we are setting this business right over here simply we're going to add the curly braces like this then we need to add the ID and that ID will get it from the doc snap. ID okay and then we need to add the remaining value so that we need to add the spread operator and the doc snap. data like this now if I save this one now inside this uh review make sure to accept the business because uh when we import this component we also passing this business information and inside the review we accepted this business now inside this business we'll get the ID as well so next we need to define the document reference first using this doc then uh the DB reference then we need to give the collection name and then the document ID which is nothing but the business. ID okay after this one let me close this tab after this we need to update the record right so here we will use await update document because we want to only update one document here we need to define the document reference and the value which we want to update here we'll make this a sync now Ru will be the array of list and inside this Firebase uh documentation document we have the field type call array as well right and every time when user added new um review we need to update the existing array it means we need to add a new value to the array so for that one we are going to use uh the field called reviews and inside that we will use array Union from the Firebase fire store okay so it will update your record and if you hover on this one you will see it return Special Value that can be used and lot of things right so and inside that you need to pass or store or pass the field which you want to store so in this case uh we want to set the rating as a rating because we already storing that one then comment as user input and next who uh added this comment right the user information so we'll get the user information using this use user Hook from the clerk session because we already login and obviously login user has to has that information so here we'll add username as user dot uh full name and the user image as well so here we'll just say user not user but uh yeah user image as user do full name or image URL obviously uh you don't need to add email because just a privacy purpose right and then once it's done you can save it okay now once it submitted we can show the Android toast Android message okay this toast Android will be only work on the Android device so here we'll say Android st. show uh and then you can add a message comment added successfully and then where you want to show toast. Android at the bottom right so if you want to show at the bottom you can show bottom or if you want to show top you can show top as well now let's save this one oops let's save this one and then let's try to add a commment let's say I want to give four star for this one and this is my sample comment okay now this is a button if I click on this button uh if you see we got the tost message saying comment added successful and now if I go back to this particular document you will see the new review uh field get added and inside that this is my all the review along with user image usern name the rating and the comment right now obviously you can add multiple comment as well it's it's not uh big deal okay it's up to you uh but along with that one I I will also add the user email who posted this one so here I will say user email address uh using this uh users in session just in case if you want to delete if you want to add a delete functionality uh for the given comment okay obviously user enter the comment and user can delete the is own comment only next once we have this uh reviews right uh obviously when we F the data we will also get the reviews next time and that review we want to show below to this particular uh review section so what I'm going to do uh let me close this View and here I will add display previous reviews so in this section we'll display the all the previous reviews okay so uh let's use a flat list for that one so we'll add a flat list or you can use just a simple list as well it's up to you how you want to display okay let me show you how to use Simple list as well so first let's add a view inside that we'll add a business do reviews okay map let me add and here we'll say item comma index like this and then we'll add one view okay let's display the comments Appo first okay so let's add a text here I will just add item do comment and then save it now now if I go back and come to this screen you will see this sample uh text which is the comment which we just added okay now if you see uh after this text uh obviously uh I'm going to add an image source and inside this image right we going to show users image who posted this particular comment so simply we'll say item do user image here uh let's add a style let's add a width of 50 height of 50 and if you see the users image is showing also we'll make this border radius to be 99 like this okay and then uh uh for this view sorry for this text I will put this all of these text in one View and at the top I'm going to show the users name who posted this um particular comment so this will be item do username then uh the rating we want to show right so for the rating I will just simply add that rating uh component and for this rating component if you go over here right not here inside this view where we only use the rating right here uh we'll add image size on not on finish rating but just try to add this image size only and uh we'll add image size of 20 and and it might have default let me check in the documentation so over here if you see we need to use rating count okay so we can also provide this rating count the default rating count and inside that we'll just add item dot rating if I save this one you will see that okay this is the two rating we gave and all of these things next for this view I'm going to add a style we'll say display as a flex and then for this rating you can add a style as align item to be Flex start so it will on the left hand side okay let me format this document and save it next uh we want to bring all of this thing in one line so for this view We'll add a style we make it display as a flex then we'll make Flex Direction as a row and then we do a cap of 10 and align item to be in the center now for this uh text right uh we'll add some style so here we'll add a style we'll say font family as outfit medium and then we have this uh everything's ready okay I don't think so we need any anything else here I will just add a gap of five some spacing and that's enough next for this view let's add some style so here we'll add a padding of 10 then uh we'll add border width of one then border color as colors. gray and we'll make border radius to be rounded so let's say 15 and then we'll say margin top to 10 okay and here you'll see all the list of the comments okay so when user add the comment it will display it on the screen okay so obviously it will not immediately uh because we need to get uh if you come you have to come here and then go back to this option okay let's add some other commment some uh nice nice shop for example let's say nice shop let's add rating uh let's submit it now you will see comment added successful now if you want to see right you have to go back come here and then you will see this nice shop comment so now let's add the share functionality currently we don't have uh share functionality added right so if I go to this action buttons uh component where we have all of these thing right and currently we are just returning uh nothing so here in order to add a share functionality you just need to write share from the react native then share and inside that you have to write message so what message you want to share so here let's say we want to send the business name then on the new line We'll add the address and we'll add the business address so here we'll say business. address then on the new line we'll say uh find more detail on business uh directory app by tube guruji okay and guys if you still did not subscribe to my channel press the Subscribe button so that you will not uh miss any upcoming new videos and after that one you will just uh add the link whatever you want but I will keep as simple as that and then save it now if I click on the share button boom if you see we have this beautiful uh uh sharing option and if you see we have this name of the business and address and all of these things also whatever the app have capability of sharing that app everything is showing on the screen obviously on the actual device you might have WhatsApp and other social media uh that also you will see uh in the in this list okay so that's how you can add this share functionality for your application currently on the home screen we have this all the business list right but on this click on this business list we are not navigating to the business detail so let's fix that one so let's go to the tab where we have this homepage and inside that we have this popular business go to this popular business uh component and first thing I'm going to do is to add or let's go here because we have this popular business card right inside that we'll add the on press event right so let's oh my god so let's go over here to the popular business card and inside here I will change this to a touchable opacity from the react native so that I can able to add the onpress event right so now if I bring this down and I can add the onpress event and if you remember uh we can use the router okay using use router hop from the Expo router in order to navigate it but before that we need to get the business ID okay here I can just navigate to the push and here we'll say business detail so this need to be a business detail slash business ID so it will be like business. ID but when we face this data we don't have the business ID if I go to this popular business we just save the document information and you know that how can we save this ID so simply uh we'll wrap like this and then here we'll write ID we'll say doc. ID comma dot dot dot because we then attach that uh existing other all other field along with this ID now let's save this one and now the ref it refresh let's click on this business information and boom if you see it jump directly to the business detail screen if I go back it will go back to the home screen now if I click on any of this one you'll see the business detail information okay so that's how it works now let's implement this explore uh tab where uh if you see on this mockup we want to add this uh search bar along with the existing component for the category list and then we're going to add show the business list so whenever you change this or press on any category on the same screen we going to update the business list okay it's very straightforward and obviously we going to use a lot of existing component as well so let's go back to our application and uh let's go to this explore tab so inside the tabs we have this explore so first thing here uh we're going to add the search bar so here we'll say search bar then we want to add the category and then last we'll add business list so first let's give the title so here we'll say text and inside this text We'll add explore more like this test okay uh for this view I'm going to add a style here we'll add a uh padding of 20 if I go to this explore we have padding and for this text let add style here we say font family outfit bold font size of 25 okay I don't know why every time it's here okay and if you see the Explore More text is showing let's make it 30 then the search bar so if you see if you remember inside the home we already have the uh search bar which we added right so I will copy this existing search bar so I will just copy this and then I will paste it uh over here for now okay so make sure to import this I icon and the text input as well so so make sure to import this text input from the react native and the ionic icon from this import statement and if I save this one if I go to the explore uh okay make sure to import the colors as well and boom if you see we have this beautiful search bar if you want to add a border to this input you can just add that one so here I will just add border color as colors. primary okay so if I go over here we have the I don't know why border okay we need to add a border width as well as a one and then check it out and boom next as I told you we want to show the list of categories so let's use the existing category component if I save this one and if I go over here we have the existing category list right but here currently if I click on this category it will it's opening a a new window right the this functionality we change we need to change there are two way that we can do it either we can um newly added this category list okay or we need to pass some kind of flag to remove this text category and just to show this category list and also this onpress even we want to change it okay so here we'll say explore for example let's say true okay so uh we are accessing this category component FL Explorer and here I will pass it as a explore okay now initially the uh the default value will keep it as a false now this particular view I will only show when the explore is true so if explore sorry if explore is false then only we want to show if explore is false then only show this view now if I save this one you will see it will oh I don't know why it's not get hide so okay let's make sure to save this explore as well and now I save this one and you will see that X that particular uh category text is no longer showing but over here it will be here are there okay only for this explor it's get hided also the on press event we need to change that one so on this category item if you remember we have this on category and uh once we get the category we are just uh routing it right so um here I will remove and I will say on category press Handler I will simply create this method and over here I will write constant on category Place Handler and inside this method if the explor is not there then I will just push this route else we can write other condition and I I will also pass this category or selected category over here okay now on the else condition obviously we want to implement some other logic but for now let me go back to the home screen and make sure everything is working as expected so right now if you see the item is not exist so instead of item right here we pass the category let's try to pass this category only as it is and if I click on category is still not working let me undo this one here we'll say item only and let's pass the item here okay so this item information we just pass okay and nothing get changed if I click on this shopping if you see now everything is working as expected okay but for the Explorer obviously it's little different and if you see we have this uh what what would we say um the scrolling and all of this thing right everything will be there but if I click on this one see nothing is happening because on this section we did not write anything and that's how you can reuse your component by modifying little bit changes okay next uh now over here once user click on this category we need to send back to the parent component so here we'll say on category select and here we pass the category name which is item do name okay and this on category here to a category so on category select I will pass back to the parent component okay so simply uh inside our Explorer tab here we have this category I will write this one and here we'll say category and for now I just console this category okay I don't know why just off let me open it again again now when I press it anything right see it's getting displayed on the screen right it means on this section we are getting the list of category now simply we want to write method to get the business list depends on the selection of this category and then once we get this business list this business list we're going to pass it to this new business list component now let's define method called constant get business by category and over here we'll write a query q is equal to query then inside that we have to add the collection the DB reference and the collection name this particular uh line of we already implemented if you remember then we Clause uh inside that we want to add a we clause on the category is equal to equal to and then the category name so obviously when we call this G business category here we'll call we'll pass the category information and that category we'll pass it inside this where then we'll add the snapshot here we'll say query snapshot query snapshot is equal to a get docs because we we are fing multiple documentation and then here we pass the query make this as async then we iterate this query snapshot. for each document and then we'll console the log just to make sure that we'll check whether we are getting the information or not so we'll do document. data and then obviously uh before that we have to make sure we call this G business by category whenever user click on this one so instead of this console log right when we category selected we'll call the get business category so if I save this one and go back to this Explorer now if I click shopping you will see on the console we bring this up you'll see the log with this all the business by category called shopping next we need to store in one state so here we simply add business list set business list is equal to use State and here we'll add set business list inside this set business list we add we need to add previous data so we'll say dot dot dot previous comma along with that we also need need to add the ID right so we here we'll say ID is equal to document. ID and then we want to add the remaining document. data okay and once we have this business list set up we'll create a new component to show the business list so inside this component folder we'll create a new folder called explore so all the components related to explore we'll keep inside this folder and inside that we'll say explore business list. jsx and click enter now add the default template save this one and then add this explor business list now to this explore business list We'll add the business list or we pass this business list let's say it and over here we'll accept the business list okay next we need to use flat list or you can use anything okay it doesn't matter but let's use the flat list to this flat list we need to provide the data which will be the business list then we need to render the item so here will be item comma index and arrow function so here we'll simply add a view and first I just want to make sure we are getting data so I will just print the business name so here we'll say item dot name let's save this one go to the explore and if I click shopping for example if you see all the shopping related businesses is showing on the screen okay so let's define the uh here I'm going to create a new component to show that card so here we'll say business a business card business list card that's fine. jsx add the default template and to this business list card it will accept the business information so each business information will pass so here we'll say business list card and to this one we'll pass the business as a item here also I will add the key as a index and let's go to the business list card now inside here first thing we need to display is the image The Source uh obviously we use URI and then business dot image URL and the tag and and then we'll Define the style here we'll Define the width as 100% And then height of let's say 150 if I save this one you will see this beautiful image list also here I will add the Border top left radius to5 then we'll add border right radius to top right radius to 15 then below that I'm going to add a view inside this view we'll add a text the first is business. name then we want to add business. address and below that we'll add the rating part but we'll that add it later on but for now we'll design We'll add a style for this one so for this view We'll add a style We'll add a padding of 10 then for this text We'll add a style we'll add font family as outfit bold font size of 25 let's add 20 only and then for this address as well we add a style We'll add font family as outfit and then color as colors. Gray perfect and obviously we want to add uh some border and background color so uh for this view I'm going to add a style here we'll say background color of white so we'll add as ffff and then we'll add a border bottom radius so we say border bottom left radius to 15 border bottom right radius to 15 and then also we'll give margin top to 10 okay let's add 15 and if you see we have this beautiful list okay right now it's not scrollable so uh you can mark it as scroll you can even just scroll this or you can add the scroll label to this particular list only so if I go to the let me go to this explore business here after this flat list I'm going to just add a view and for this view I will add a style and just I give height of 100 so that I can able to scroll it okay next inside this explore right when we add the gate mean when we call the gate business by category we have to make sure that we um the the business list is empty okay so here it simply has empty like this save it and now if I go to this explore and click on shopping you'll see the shopping when I click on daily products you'll see the daily products okay so like this next whenever user click on any business list or on this any option right we have to make sure it will navigate to the business detail page so let's go to this business list card and over here we'll change this to a touchable opacity from the react native so that the on press event will be enabled so that we can add the on press event right but here first we need to define the router so let's define that router is equal to use router and then we'll just Define router do navigate not navigate but we'll just push it and then we need to give the path so in this case is business detail slash and the business ID which is business. ID let's save this one and if I click on any of this business now it will navigate to The Details page perfect right so that's how guys uh it will work and everything you will see now in this case if you see we have this beautiful review which we already added for that particular business and here here only this particular part is enabled it's up to you what are what are the things you want to enable if you don't want to use this scroll bar right you can just hide that one so if I go to this explore business where we have the flat list here we just add uh show vertical scroll bar indicator as false and now you will not see that scroll bar anymore also here I just add little bit more height so that you can scroll up to bottom oh so I added this scroll view let me check with the view I'm not sure whether it will work or not so obviously we need a scroll view to this one so that's the reason I added the scroll view okay perfect so you I don't know why it's not working the flat but that's fine okay so that's how it works now until this point if you have any question any doubt let me know in the comment section now this search functionality is quite simple if you want to type something right if you type we can match with the uh given business name okay so that particular functionality you can try on your own it's quite simple if you face any issue let me know in the comment section and obviously right now we don't have a lot of business information in under each of the section but once we add the functionality where user can add their own business then you'll see a more more detail inside each of this category now we are going to design the profile page on the profile page as see as as you see in the mockup we have the username uh but along with that we have the user profile image and the user email then we going to give option to add a business uh to check the or to see the added business list along with that that uh we have given we are giving option to share the app and the log out button as well so let's go back to our application and currently we have this profile Tab and if I go to this profile. jsx only text profile is showing on the screen okay so first thing let's add a style to this view so we'll add a padding of 20 and then for this text We'll add a style We'll add a font family as outfit bold and font size of 25 if I save this one you will see this profile let's make this as 35 little bigger perfect next uh we want to add the users uh uh information so I will create a new component because we can divide this particular page into two component one is to show this user profile say uh intro and then the action button or menu list so inside the component folder I'm going to create a new folder and we'll simply call it as a profile and and all the components related to profile will go inside this profile uh folder so here now we'll say user intro. jsx add default template and save it now over here we'll simply add a view or we don't need a view actually here we'll add um user info then another section is for the menu list so for the user info list as user intro component let's save it and let's go to this user intro inside the user intro uh we need to get the user information like this and simply first thing we need to show is the image so I will add the image of source obviously we are getting the image from the URL so we'll add URI then user dot image URL then I will add a style uh here we'll add a width let's add a width of 50 height of of 50 and save it and you will see that particular profile image let's make it little bigger let's add a 100 then border radius will make it 99 so it will be rounded like this next uh we want this profile image to be in the center so for this style we'll make it as a display as a flex then Flex dire sorry uh not Flex Direction but we'll make justify content uh in center and along with that we'll make align item to be in the center uh also here I'm going to give margin top to 30 and then below that we want to show username so simply I will go on add a text here we'll say user do full name and another text for the email so like this obviously we'll uh change this so here we'll add a font family as outfit bold then we'll add a font size of 20 and for this text as well we add we going to add a style like font family as outfit font size of 16 and I think that's enough okay I think this is good next we want to add the list of menu so for that one as well I'm going to create a new component under the profile folder and we can call it as a menu list. jsx add the default template and then this menu list we need to add inside the profile so if I go here we have this menu list added now to this menu list I'm going to add the menu list array and inside that I'm going to add ID the name which is let's say add business okay then we need to add icon so I already added some of the icon in inside this assets under the images folder like this say add or we have business add trade okay so uh you can create your own uh logo uh to the from of this logo express. tug.com where you will find a bunch of Icon not only these but you will find the color icon where you can select the icon whatever the icon you like it and then you have option to change size you can even rotate this one or you can change the color also uh you can change the background color depends on your selection how you want okay and you have full customization of the icon you want and simply once you click download it will get download immediately okay so you can try this out so let's go back to our application now and over here for the icon I will use require because we are using from the local assets and then we need to give the path and here we'll simply say let's say uh we want the add.png okay and also I want to give the path right now we will keep the path empty because we'll add it later on once we have the uh specific path so I'm going to add four menu I want uh the second is for my business the third which is for share app and the fourth is for log out um for my business I will just copy this name then for share we have the I think shore1 just to make sure this one and for log out we have logo.png and save it okay now our Manu list is ready now it's time to just iterate that one so we'll use flat list for that inside the flat list we'll provide the data uh so in this case is Manu list then we'll render the item so it will be item comma index and then we'll add a view inside the view uh first thing I will add the image the source and we just simply say item do icon because as we are fing it from the local and we already defined the required over uh in this particular field then uh we'll go gu style so we say width 50 height 50 let's save this one and let's see whether we are getting at not and if you see we have beautiful menu icons for now then I'm going to show the text so which will be the item do name for this one I'm going to give a style we say font family is outfit medium and font size of 20 okay now let's bring everything in one line for for this view we say for uh the display as a flex and flex Direction as a row then we'll make aign item to be in the center and then we'll give a gap between these two item let's say five okay let's say 10 now we want this in a uh grid format because if I if you see this mockup we have uh two column right so for flat list we have option for two columns as a two save it obviously uh you need to restart your application so I will just remove from background and I will just rerun it again and if you see this is how it will look like now for this view let make this as a flex one so it will be uh stretch equally after this um I'm going to add some padding of 10 then we'll add a border radius of 15 but obviously we need to add a border of width of let's say 1 then we'll obviously give a margin of 10 but it going off actually so for this text let's make Flex as a one and perfect uh for background we'll make background color as white okay and instead of font size we can change this font size let's say 16 that's much better also uh the I will change the Border color to a colors do primary okay so we need to import the Colors Let's import colors from let's say constant slash colors and then over here we might have the primary color see okay so that's what we change that's look much better and obviously um for this view I'm going to give a margin top let's say 50 okay so we have this beautiful um section of mean the menu icons and all right if you think you want to change the size of this menu you can but for now I will keep as it is and at the bottom I will just simply add some kind of text let's say develop by tube guruji save it and obviously uh I give some style here we'll say font family as outfit then text align to be in the center and then margin top to let's say 100 let's say 50 only and then color color I will change to colors. gr something like this okay and here add 2024 perfect so just kind of give some uh because this space is empty right and that's why we added some uh content but you can add whatever you want you can add more options it's up to you now we are going to implement this add business functionality so in order to add this business right so uh on the click of this add business uh we going to show a new screen and inside this new screen we going to give option to select the image for the business obviously for that one we need to select the image from the mobile device so we'll learn how to use the image picker functionality then we going to add the some of the multiple text input one for the business name address um then about us contact and all of the things and at the last we'll add a submit button once user submit this one we're going to store this information in our file base so once we click on submit the two action need to perform one is to save this image inside the Firebase storage okay that what we going to learn how to store the assets or image inside the Firebase fire store and once we in uh um uh store that image right we then we need to also save this input value which user entered inside this text input and then everything we need to store inside our Firebase fire store okay so this is a complete process so it's quite uh easy um you might be think it's a little difficult but don't worry we'll go one by one so first thing on the click of this ad business we going to create uh we want to jump to the new screen obviously so we'll create a new page so inside this app folder let me close all of this tab first and inside this app folder I'm going to create a new file and we we can call it as a add business. jsx okay so it's quite simple it's up to you if you want to navigate like let's say business if I go to this folder called business okay and inside that you want to add add business. J that also you can do it okay so let's let's make it simple we'll do business add business jsx and then let's add a default template here I will just rename this to add business okay and then save it but you have to make sure the path will be business/ add business now let's go to your menu list inside this profile and if you remember we currently we have this empty path now here we need to do like business/ add business let's save this one and whenever user click on this particular menu right over here we need to navigate it so for that one we'll convert this view to touchable opacity from the react native and make sure to close this tag and then we're going to add on press event okay but in order to navigate it we need to mention or Define the router is equal to use router Hook from the export router then with this with the help of this router we J simply add router do push in order to navigate it and here we'll just add item dot path okay and save it now if I click on this add business it will navigate to the add business okay perfect next thing uh instead of routing over here right we will create a new method so here we say constant on menu click and here we'll pass the item and then we'll push this router path over here I'm going to tell you why we are using this different method for that one so on menu click and here we'll pass the item the reason is because uh we have the log out and share option as well right and this don't need a path the log out will just log out from the application the share app will share the application the the one which we previously saw right to share the business similar kind of functional you want to add it that's the reason we can add the condition inside this method and then depend on that one we will apply the logic but for now we'll keep it simple let's on the click we'll just push the path which whatever the part is given let's save everything and then if I go to this add business I'm able to see this add business screen now inside the add business screen if you want to add the header you can add it so in order to add a header you'll need to add user navigation is equal to use navigation and inside the use effect you can just space by the options so navigations do set options and inside this you can add header title let's say add new business and save it so obviously right now um the he is not showing so here we'll add header shown to be true and if you see we have this add new business business perfect also uh you can add the back button obviously uh it's up to you but right now we just have beautiful array so on the click of that one it going to the back U previous screen but here we have this add new business next I'm going to change this style uh or yeah we'll add a style here we'll add font family as outfit bold then font size of 25 and here we'll simply say add new business okay below that okay obviously for the this view I'm going to add a style here we'll say padding of 20 and another text I will write fill all details in order to add new business okay so for this text we'll change the font family to outfit and then color to colors. gray something like this see okay next uh we want to add the image picker okay so for that one uh let's add an image source and let's add image picker some image right so what I'm going to do uh I will go to this Logo Express I will select the icon the color icon I want to add some image picker so you you will see the bunch of different uh uh icon over here it's up to you whatever icon you want to choose so I will select this icon okay uh I will change the background little lighter like this okay and uh I will make this is rounded something like this okay and the size little bit and just click download once it download I will just copy I will copy it and then inside our assets folder I will paste it I will just rename this to a placeholder placeholder now you can just use that placeholder over here so I will just simply say require and then we need to give the path so here we'll say assets SL images SL Place holder. PNG obviously we need to give width and height so here we'll say style width of 100 height of of 100 and we have this beautiful image picker placeholder uh obviously uh we need to add on click sorry on Place event so I will WRA this touchable opacity so we'll get on press event and so here just push it and also I will add a style for this one I will add a margin top to 20 and also after this I set on press event so simply we'll say on image pick and this method I'm going to create over here okay now the question is on the click of this one right how to pick the image so for that one let's go to Google and just search for Expo image picker so Expo has a library called uh Expo image picker and it's very easy to ment first you need to install uh this image pickle Library so inside the terminal I will just paste it so that it will get installed after this you need to add this plug-in inside your app dojon so copy this and then inside your app dojon file inside this plugins just paste it here like this and save it you can even change that message whatever the message you want and next this is the simple uh line of code that you can use it to pick the image so copy this paste it here as they are using a wa so we have to use this as a sync okay and over here uh the currently let make sure to import this image picker import statement as well so don't forgot that one okay this is very important so I will paste it here and then make sure okay let me go back here we'll select the media type instead of all just select the images okay otherwise it will also s videos which is we are not supporting aspect ratio if you want you can add it you can have option to allow editing as ratio I will remove it for now and quality I want high quality okay and here I will just console log the result so that you'll get to know what we are getting next if I click this image right I don't know whether we have image but if you see I got the image picker but I don't have the any image right now I will download it I will pause the video and I will download some of the images now I downloaded some of the images and now if I click on this image picker you will see the image which I download right now if I select the any of the image I have option to crop the image okay because we make this allo editing as a true then just crop it depends on your selection and inside the console you will see these are the information we are getting okay and this is the URI of that particular file now let's save that URI so simply we'll Define one state here we'll say image comma set image equal to use State initially it will be a null and whenever you pick the image we want to replace this placeholder with the actual image so for that one we'll simply add the set image with the result do s of z. URI to get that particular URI okay and we set it to the image now once we have the image here we can add a condition if image is not there then show this placeholder otherwise I want to show the image so here I'm going to add a condition and instead of require I will replace this with the URI and the image because we whatever the image we said that image I'm going to display now let's save this one and let's select the image so I will select the some of the image like let's select this image crop and boom if you see we got this beautiful placeholder here I'm going to add border radius to 15 perfect okay so that's how you can add the image Pier for inside your application next let me close all of this okay not here but let me just uh unol sorry collap this one and here now next we want to add the text input okay so we'll keep this simple so first thing let's add the text input from the react native for that we going to add placeholder here we'll say name and to this text input uh we can add some Style so first We'll add a padding of 15 then border width of 1 then border radius of 15 let's say not 15 let's say 5 and this is how it will look like here I can make this 10 yeah that's good then we'll add a font size of 17 the background color I will change to white so # ffff and then margin top to 10 let's save this one so this is how it will look like the Border color I'm going to change so border color with the colors do primary perfect and most important family we say outfit now I will just copy this multiple times one for the address one for the contact one for website site one for the um about and that's pretty much right so let's rename this one so here we'll say address then contact email and about now for about section it will be bigger right so here I can give height of let's say uh 200 or let's say 100 okay and we can make it as a multi-line to be true and uh number of lines we can add let's say three or let's say five okay let's save this one and this is how beautiful will look like now most important thing we need to add is a category selection right and for that one we need to add a drop down so in order to U add a drop down we are going to use this react native picker select Library uh I will put the link in the description or you can just search with this react native pick select and this is very powerful library and very easy to use it so first thing you need to install this react native picker select library and I just add it here so that it will get installed and once it installed you will see this example right so copy this example and then just paste it here so I'm going to add a view for that one and I will paste it inside this view let's save it make sure to import this RN picker select so I will copy this import statement and then I will just paste it here and save it now inside your add business you will see this picker and if I select on this one you will have option currently whatever the option is mentioned hardcoded right football baseball hockey it will select over here okay but we want our own uh categories right obviously for that one first thing we need to do is to f a category so here we say get category list and from the Firebase storage Firebase fire store we'll get the category list so simply here we'll say constant query is equal to query from the file base then collection the DB reference we need to mention so let's import the DB from the config slf Firebase config and once we have the DB we need to give the name of the collection which we added inside our Firebase file store obviously we are fetching all the categories so we are not writing any we condition and over here we'll say snapshot is equal to um await get docks make sure it's docs because we want to P all the documents and then we pass the query make this as a sync and then we'll add the snapshot. for each here we'll say document and then we'll console it first just to check that we are getting all the documents let's save this one and inside the console obviously first thing we again we need to call this get category list inside the use effect okay then only this part will get called and if you see we got the all the categories now we'll Define one state which will hold the category list so is equal to use step okay make sure it initially is empty and over here we'll set the category list with the previous value so here we say previous value and we want to map the value similar like this particular format label and value okay so in same format we will map it so here we'll say label inside this we'll say document do data and from that one we'll get the name same thing I'm going to do but just here I will change the field name to Value okay now inside the set category list we'll have the label and value field uh and in that one we will get the category name now just replace this hardcoded value with actual category list now let's save this one and if I go over here now if I click on this drop down and if you see we got the all the category list which we added let's say for example medical and if you see it get selected now for this view let's add some style so I will add all of this style and save it we don't want [Music] the so margin top margin top you want the Border width is okay border is is okay padding let's say remove the padding and that's good yeah and now we have this beautiful medical drop down okay make sure if you see we is uh repeting so here make sure whenever we call get category list we will reset our set category list to empty and save it okay next thing and very important we need to uh capture all the input value so we'll Define the uh multiple input uh States so first constant name comma set name is equal to use state and I will copy this multiple times like this so one is for the address here we'll say set address then contact set contact here actually we don't want email okay because we I can directly get the users email here we instead of email I will put the website so here placeholder will be the website perfect yeah so here instead of email we'll put website here we'll say set website then about set about and the last is category here we'll say set category okay now for all of this text input we have the unchange text method it will emit the value and then we'll set the now in this case it's name obviously so in this case we'll set the name with the value okay I will copy this and paste it here and depends on the uh respect to input we'll change this Set uh state so here in this case we'll say set contact set website set about and the the last is uh this pier selection here we'll set category and then save it okay now last important thing we we need to add a button so simply here I'm going to add touchable opacity inside this touchable opacity We'll add text and we'll say add new business now obviously here I'm going to add a style so it will look like buttons so that uh let's first thing let's add padding of 15 let's add 10 then background color as colors. primary let's save this one let's add padding of 15 then border radius of 15 at five yeah and uh we give margin top to 20 next for this text we'll make text align to be in the center the font family as outfit medium and the color will be the colors or just white perfect now once everything is done uh and obviously we are capturing all of these things now next thing is we need to uh pick the image then we'll fill the information and on the click of add new business we have to save this image first then get the URL of that particular image and then we'll store this information inside our fire store now let's upload the image to the Firebase storage so let's go to the storage and inside the storage we are going I already created one bucket so if I this business app okay uh just you have option to create a folder and this folder I created I will delete the all of this uh existing files and currently inside this business app folder we don't have anything okay so go to the storage and make sure uh to enable that and then create a folder if you need it uh these are the some file whiches of my pre previous applications but uh you can create a new folder uh then once you create the folder let's go back to our application and inside here let's go to this Firebase config if you remember we already exported this this DB right same thing we want to do it for the storage so here we write storage is equal to get storage from this Firebase fire uh fire store and then provide this app uh reference let's save this one and make sure to export it so that we can use it throughout the application next thing uh inside this add business file let's go to this add business inside the application as well so on the click of this one right uh we will select the image but in meantime also on the click of this add new business we'll just make sure that we are storing this image so simply let me create a new method so we say constant on add new business and inside this one uh first thing we need to define the file name so here we say file name we'll create our own file name using this date. now so so we'll use time stamp and make sure to convert it into a two string so we'll convert that particular date time stamp into a string then next we get the constant let's say response is equal to await fet and the whatever the image we have right that image URL we'll pass to this one make sure to this convert this into a s the reason is we want to convert our image into a blob file okay so here now we'll just use blob is equal to await response. blob and from this one we'll get the blob file this block file we going to upload on the uh that Firebase storage now if you wonder how I am uh accessing how I know this code to upload the file then just go to this Firebase uh storage uh documentation select the web and if you see we have the upload file option here here you'll find everything all the documentation related to file upload okay then once you have the block file then we have to create the image reference so here we'll say image reference is equal to reference from make sure to import this from the Firebase storage here we'll need to define the storage comma the path in which you want to store so in this case is business app folder and then the file name so file name and obviously for this file name I'm going to add the extension as well so here only you can add the extension let's say jpg and this file name we will add over here okay next we have one method to upload this image so call uh upload bytes inside the upload by we have to provide the image reference and the block file which you want to upload it means the image which you want to upload then we'll say snapshot and simply inside the console I will just write file uploaded okay let's save this one and let's test this out but make sure this add new business we need to connect to our button so this is our button here we'll add on press event perfect now uh first thing let me go to this console at the bottom then we'll select the image so select the image let's say We'll select this image you can crop if you want or you can keep as it is and then say crop for example and it's selected now click on add new business and obviously it's it will take some time to upload the image on database and if you see inside the console we got file uploaded okay now let's go back to the Firebase storage and search for our of uh file let me let's just type business app and if you see we have one file get uploaded okay and you will see the preview as well if I open this file you will see this uh file get uploaded and this is the URL now the question is how to get this URL because this URL we need to store inside our H Firebase fire store okay when we save this information so that's quite easy so let's go back again in our code and as soon as we upload the file right here we'll use then operator and we'll write response for example and here we'll say get download URL so this particular method will write will get the URL of the image downloaded inside this you need to pass the image reference then here we'll see a sync and here we'll say download URL and simply you will get a download URL okay now I I I also consult the download URL but let's see whether we are getting or not so right now again I will upload the same image I will click add new business and we'll wait to upload the file and boom if you see the file is uploaded and also we get the download URL okay so this URL we going to use to store the on inside our Firebase fire store now if I open this URL so let's open this URL and you will see that particular image perfect now we successfully upload the image we I have the URL as well now next thing we need to store all of this information inside our new collection so right now we don't have the collection so if I go to this fire store database o sorry we already have the business list collection inside this we will add that one okay so in order to add a document okay just search Firebase add document and you will jump to this documentation and here you will see how to add document it's quite simple you have to write await set doc here you need to provide the document DB reference and the collection name along with the document name obviously we'll generate the document and all the fields okay easy so first thing first uh once we have the get download URL here uh let me create a new method we'll say save or we say save uh business detail inside this we'll pass the image URL as well and this particular save business detail we'll call it over here and we'll pass this download URL okay now inside this image uh save business detail here we'll say await make sure to use this as a sync then here we'll say set doc from the fire base inside this we need to Define document the DB reference which we already have if I'm not wrong make sure yeah we already have DB reference as well after this we need to give the collection name and then document name so in this case document name will be date. now and make sure to convert into a string because every time when we add the document the document uh ID or name will be in the string format okay then once we add this one make sure okay let me just I will just yeah so after this we need to add bracket and inside this one we'll add our data so first the name of the business so we for the name we'll use name for address we have address or contact we have contact then about we have about then website we have website and obviously the username who posted this particular business right now we don't have that F added over here but we'll add that one also make sure to add the category which is very important here we'll say usern name so we need to get the user information so let's say constant user is equal to use user from the clerk Expo and simply user do full name and the email address of that user so here we'll say uh user email email user dot email address okay so all of this information we added if you want to add the profile image that also you can add just add that one just to make sure user dot uh here need to be a primary email address. email address okay and here image URL so all of this information we added and make sure to add the image URL of that particular business using this image URL okay and after that everything is done we'll just write Android toast. Android uh we'll say show and here we'll write message like uh new business added and here we'll say to Android dot bottom or we'll say long now everything is done okay let's save this one and I'm going to Define one more state to uh to uh track the loading of our data when we push the data to the server so here we'll set the loading as a false and whenever we try uh click on add new business here we'll set the loading as a true okay and once everything is done we'll set the loading as a false okay and obviously if something goes wrong or something is happen here I I will set the loading as a false now whenever there is a loading okay instead of add new business so here I'm going to add if loading is there then I'm going to show activity indicator from the react native otherwise I will show this text so so this need to be over here and for this one I will set the size as a large and color I will set as a white okay let's save this one and uh just one more thing I will disable this when the loading is true now if I go back to our application let's go and try to add a new business so right now we got error oh so this need to be used State my bad so let's profile add new business let's select the image here we'll say Champion shop okay that's perfect here we will say Champion shop address not try Street NC USA contact number 1 2 3 4 5 6 7 890 the website HTTP slcb Guru g.com then we have about us so if you see right now I'm not able to scroll this one but we'll fix this issue Sample about us okay so that will fix it in moment don't worry and the last is we have to select the category so in this case category will be shopping and then click add new business so I will click add new business let me also check over here that everything is working properly so if you see that toast message is coming up and it's saying add new business new business added just make sure inside this business list I don't think so that business is get added over here so I will just make sure everything is right okay so the problem is we added in business detail instead of business list so let me clear that so this need to be a business list okay and save it and anyway I will just check everything is working properly right now let's try this again so one more important thing I want to check that we said the loading is as a true and at the bottom I don't know why it was not showing we disable this loading and when the loading is true we are supposed to show the activity indicator okay that's fine let's add click on add new business and uh it's get added if you see we got the toast message saying new business added if I go here inside the business list if you see the new document ID and here you'll see all the business information the category is coming null that interesting let me see why the category is coming as a null let me try it again because I selected and selected it and it's saying add new business it's saying new business added and now if you see we have the category shopping perfect there is some mismatch but yeah now it working now let's go back to our application let me go back and inside the home go to the shopping and here we'll see the new business get added called Champion shop and all of this information is there obviously we did not add all all of this about and all but the main thing is that that we are able to add the new business okay now again next time when you want to add you have to fill all of this information that's obious very obvious okay so guys uh that's all for this particular section obviously once you add the business we going to navigate to the other screen okay but currently we did not develop any other screen uh once the business is added we will develop in the upcoming all session but I hope you understand until this point now in this section we are going to show all the businesses which user added uh and for that one we are going to create a new screen where user can see their own business okay so obviously if you see on this mockup uh once the business is added we'll also navigate to the my business screen and here we want to show the business list and once us click on this on his own business uh list it will navigate to the same business detail screen but the thing is at the bottom or somewhere we can give option to delete this business as well if you us don't want to uh add that business or he don't want to put that business in our application so uh we going to do a delete functionality to just delete the uh existing business or you can add new business later on if you want okay so first thing first let's go back to our application and for my business so here inside the business only I'm going to create a new file and here I will say my business. jsx okay if you would see inside the same route but I created two different uh sub route over here under the business now I will add the um default template here I will sa my business and save it now let's go to the menu list inside this profile where we have the path and just Define slash business slash my business let's save this one and now if I go to this profile click on my business it will navigate to the my business let's add a style uh we'll add a padding of padding of 20 here we'll say my business here will style font family as outfit bold font size of 30 and uh obviously uh here we need to face the all the business list first so simply we'll say constant get user business and in order to get user business we need to get the user email ID so here we'll say constant user is equal to use user and we need to write a query is equal to query make sure it is inputting from the Firebase fire store okay then we'll Define The Collection the DB reference uh make sure to import this DB reference so here we'll say import DB from config slf Firebase config and once we have D reference we need to provide the collection name so in this case is business list then we'll add the we clouds okay because right now if you see inside of Firebase we added this two collection currently right and depends on this user email see we going to fet that particular uh business list so simply I'm going to add user email is equal to equal to user do primary email address. email address okay after that uh I'm going to write constant query snapshot is equal to to await get docs and inside that we'll pass this query I will mark this as async and then with the help of for each we'll just uh consolid whether we are getting or not so here we'll say quity snapshot do for each here uh document and then we'll console this document. data like this now uh use use effect to call this method but we need to call this method only when the user information is available because we are using this user information like user email ID over here so we have to make sure that users in session is ready uh to use it let's save this one and if you see we got the information cool next me go over here we need to store this information in one state so here we'll say constant business list comma set business list is equal to use State make sure it's empty initially and here we'll set the business list the previous value will happen along with we want ID using this doc. ID and the remaining uh information let's save everything here we'll say I use to get business list by user email now we have the business list we have the uh all the information which is required and this business list only include or which which correspond to that particular user only okay also over here I'm going to write one uh okay we'll write in a moment next we simply need to iterate that um business list so for that one I'm going to use flat list here uh we'll provide the data as a business list then we'll render the item and inside this we going to use existing component called business is let me check what is the component name so it we can uh we have two different kind of component one is a business list card okay just a a simple card or we also have the popular business card so we can use that one as well or we also have this uh Explorer business card so let's use that one so simply we need to use business list card inside this business list card we need to provide the business as item and then I will also provide the key as a index then let's save this one and boom if you see we have this all the business list obviously uh when we set the business uh make sure to it's empty before adding a new data and if I go back you will see the two business because we added two uh business with the same information okay now one once we open any of this business let's open any of this business here I'm going to give option to delete okay so here we can add a button to delete it so let me go to this business uh detail screen so not data but business intro screen so if I go to the component inside the business detail we have intro section over here uh where we added the name and all for this particular view right so let me get that so this is our view and let's try to add over here and we will put this on the right hand side so what I'm going to do uh let me go to this icon and just search for the delete icon so we I will filter filter it out with this I icon so here let's search for the trash then copy this import statement is already there so we don't need it I will just copy this component and then simply I will paste it over here now you'll see this delete one okay now we want that delete on the right hand side so here we make display as a flex Flex Direction as a row and justify content is space between and let's give a width of 100% I don't know it will work or not okay so this is not working as I expected so just reward this all of this thing and I will remove this I icon from here okay and instead of putting I will add over here if I save this one you will see this trash icon now I will WRA this in one View and for this view We'll add style display as a flex then we'll add a flex Direction as a row then uh this is look awkward but let's add a background color as a ash FFF then whatever the style we give over here right so I will just copy I will also paste it here and we want on the right hand side so I will just say justify content space between okay then for this icon I'm going to change the color let's say red you will see the red color now you can make item to be in the center so it will be in the center so here here I will align the item to be in the center or just make as it is now on the click of this delete icon we want to First confirm from the user that really want to delete it and once it delete then we will move back to the profile page so first thing we need to add touchable opacity so that this button will add on press event so here we can add on press event here we'll say on delete and on this one I'll go over here get on delete and inside that we'll ADD alert from the react native do alert here we need to give first title of the alert do you want to delete and then we'll say uh message do you really want to delete this business then we need to add the buttons okay so first thing we'll add a text for the button here we'll say cancel and the style we have the style called cancel as well okay and for Action if you want to write action we can but right now we just just want to cancel it okay if I save this one and if I click on this button you will see the alert box and it just have cancel button okay same thing uh if you want to add one more button you can say text here say uh Delete then we can add a style as a default one or just add a destructive let's add a destructive like this and we'll add a event called on press okay now this will take of method like this and here you can write a condition so here we'll say delete business so this delete business we're going to call so here we'll say constant for now we'll just conso it we'll say delete business now let's save everything and if I click on this one you will see the two button one is for cancel one is for delete and if I click delete you will see the text showing delete business now over here we need to write a logic to delete the record okay now if you want to know how to do it right here you can SE just search for to delete the record let's say fireus delete document and if you see we have the a delete doc database The Collection name and then the uh document ID so here we say await delete document inside that we'll say Doc the DB reference then we need to give collection name which is business list then we need to uh pass the business ID so business. ID and that's all so here is our wa so we'll use as a sync and as soon as you delete it we have to make sure that it will navigate to the profile screen so here we'll say console or we can just go back to the previous screen okay so here we'll say uh router dot go back or just say back also here we can show the toast message business deleted and here we'll say toast Android dot let's say long and then save it now let's say if you want to delete this business you can just click on this delete business click delete and boom it is came back to the previous screen but it's still showing that particular business right so there are a couple of way that we can fix this first thing you can add the pull to refresh okay method so if I go to the my business where we have the flat list here you can add the pull to refresh so for that one we need to write a loading State we'll make this as a false first and whenever the U we are getting the business we'll set the loading as a true and once we have the business we set the loading as a false then on the flat list we have on refresh method we'll call the get business up get business list or get user business and on uh here we have another property called refreshing for there we'll use the loading let's save it and if you see now if I try to pull it you'll see the result okay or another way that instead of going back right you can also uh go to the profile screen it's up to you okay how you want it but that's how you can do another important thing that even though user uh the business is not belong to user this delete button is displaying right we have to show this delete button only when the user uh has post user has belonged to that particular business right so go to the intro and here I'm going to get the user information and then simply here I'm going to write if user do primary email address do email address sorry dot email address is matches with the business dot user email then only show this uh Delete icon okay now right now if you see this delete icon showing because that particular business is belong to that particular user but if I go to this homepage and go to some other let's say this particular business if you see this particular uh business is not belong to that user and that's why the delete button is not showing okay so this is very very important now if I go to the my business here I'm going to add the uh header so I forgot to add a header so here in order to add a header we add navigation is equal to use navigation and simply here we'll set the navigation do set option inside the set options we'll add header shown as true then uh we'll go header title as my business something like this and also you can add the background color by just giving the hiter style and the background color with the colors as a primary so I will just import this save this one and boom okay so we have that beautiful primary color now you can even go back go to the some other uh tabs like this inside the shopping you will see this four item because one which we added now uh that's how guys you can also manage your own business once you add uh the new business through this business option and obviously from the my business you can manage your own business now if you want to sign out the user okay uh we we already have the log out option so it's quite easy here for the path you can just write a log out and when we have this user uh the item path right here we can just check if item. path is equal to equal to log out okay then we'll simply return return over here and in order to log out from the application we have sign out method from the clerk Expo okay so to implement this sign out method first obviously you need to add the constant here we'll say sign out is equal to use AU from the clerk Expo and then you have to call this sign out method over here like this and then save it okay now let's try for the share because you already implemented this share App application okay and here we just add the for the share We'll add the oh so we added this share app for here we'll say share and here we say log out okay just make sure you are implementing correctly for the uh item. path is equal to equal to share then we'll implement the other and here we simply add the share from the react native. share and whatever the message content you want to write uh download the business directory app by tube Guru G and here you can add download URL right now we don't have it you can add whatever you want and then save it now if I click on the share app so we got one error contain must be a valid object so here we need to write like this so we have to need message and then inside the message we need to write this particular text okay so make sure to implement that one now if I click share app then we'll get this share option perfect so that's all for this uh particular chapter this is a quick thing that I wanted to tell you about how to implement share app and the log out functionality I don't want to log out but yeah if you click on the log out it will get logged from the application and you will obviously jump to the login screen again where you want to login it back and all of these things now it's time to deploy our application but we are just generating the APK uh of this application so that you can share that with your friends and they can install in on their device if you want to know how can we deploy our application or deploy this application or publish this application on the app store or Play Store let me know in the comment section so I can make a video on it now first thing you need to do is to go to the export. D and create an account okay once you create the account you will see the dashboard and all the all your projects over here if you see I have a bunch of project which I already created but here you will see a lot of different thing okay it has a free tire so don't worry about that one once you created this Expo uh account then let's go to your application and here just type npm install D- Global here we need to install expose CLI along with e EAS CLI okay make sure to install this one so it will take some time to install it uh so we'll wait then after this uh you can just go to this documentation or search on Google that how to uh export the APK file and you will find this documentation on this documentation we need to create a es. Json file and in that one we have to put this uh line of code now the thing is when you export the file right it will generate aab file but this file is not installable in your device right when you want to publish on the Google Play store then it will uh you need that aab file but you if you want to directly install APK file then you have to follow this guide so I will copy this uh uh all of this code and inside the root directory I will create e. Json file oh uh it saying file is already there okay that's good and I will just paste it this line of code if you don't have file already there make sure to create and once you done with this one right you have to run this command now this pre is nothing but uh the name which you can give anything any name you can give it's not big deal right so here if you see this name we give and it just execute the APK file so I will go over here and paste the command like this now over here it will ask you to likly automatically create es project for this particular user and then name so I will say yes then it creating that project then it will ask you that uh the package name or application ID so here I will use com. tube guruji do business directory okay so uh most of the time you have to start with this uh com dot the domain name and then the application name okay so that's a little standard okay so here I cannot let me let me because we cannot use uh the dash so I will just again here I will do dot tube guruji do business oh sorry business directory and then it will generate the key store this is very important okay so once you generate this key store this key store can be helpful when you want to update your application right so you have to make sure that key store will be same now it it's saying that waiting to build complete you can press contrl C to exit now your bill is started means your APK build process is get started and you can see the details on this particular URL if I open this URL on the browser you will see it open the export de app and this is your application okay which is business directory and if you see currently it's showing the build in progress and you can even watch the all the build process and everything okay so we'll just wait obviously it will take some time maybe it's take 20 to 25 minutes because we are using free tire and as well as we are using the Expo build tool to build our application now another thing you can even use your local setup to build the APK as well just search Expo local build APK and then I I I will find some uh documentation I think we have some documentation if you go over here right and uh yeah I think this is if you see the Run build locally on your own infrastructure and this is how you can do it but the only problem with this one you need to have MacBook to build the APK file okay now obviously most of the people have Windows laptop that's the reason I did not show this tutorial uh with the MacBook I I even though I have MacBook but uh I show with the windows and obviously whatever the process I'm telling you it is compatible with the all the operating system now if you see our APK is ready to download it and here you'll see it's completed also inside the console it will ask you to um install that particular APK uh on the emulator and here you will see that APK generated if you say yes it will install the APK inside your emulator as well so that's how you can uh create the APK file from the Expo build tool and if you see the APK is installed now everything will be as it you can even log in with your cler Expo authentication which which is why which is one of my favorite one and if you see uh once you select the account and boom everything will be as as it is and everything is there okay so that's how guys you can generate the APK file if you have any question any doubt uh by uh to generate the APK file let me know in the comment section just remember one thing it will take some time to gener the APK maybe 20 minutes 15 minutes maybe a half hour depends on the Avail availability of the Expo CU okay okay so guys that's all for this particular course I hope you enjoyed this particular course if you really enjoy this particular video press like button press notification Bell icon so you will not miss any update from me and if you still did not subscribe to my Channel please do subscribe