React Native Full Stack Tutorial: Expo, Firebase | Build Marketplace App

hey there and welcome back to to guruji channel today we are going to dive into a beautiful react native application called Community Marketplace where user can sell the old products or user can search the products and buy it okay so this complete application we are going to build from the scratch and to build this application we are going to use react native Expo and the telin CSS so you will learn how to use tvin CSS inside the Expo also for the back end we are going to use Firebase to store all of our data so let's walk through the application first and then we'll start building this application so if you see on this uh application obviously we are going to authenticate with the help of clerk so let's get started and log in with this beautiful social authentication so we you will learn how we can integrate the social authentication inside this react new application so once you authenticate uh to this application you will get redirected to the home screen and if you jump on this beautiful home screen where you will see the user profile image along with the username who log to this particular application then you have this beautiful search bar and then you have this beautiful slider okay so we'll learn how can we add this beautiful horizontal slider with the help of FL at least not only this but you will see the beautiful category which we added okay and obviously if you see all the major of this category is equal okay and with the help of flat list I'm going to teach you everything in this particular course guys okay also you will see the all the latest item posted by the user and here you'll see all the information about this title of this particular uh product then the cost of this particular product and in which C category this product is added okay then you can can explore this particular category if I open the furniture for example this particular category you will see the post belong to only that category okay now if you want to see the details of any of this particular product you can open it and boom you will see all the details about this product including the description then you have the beautiful title category not only this but you have the user who posted this particular product okay now you have option to send a message as well guys okay so you will directly send message to that user also you have option to share it with your friends if I click on this one you have option to share it with your all the social media options okay so you can even share any of the product from this particular uh uh list of products then you can explore more uh products okay in independent of the category so if you see we have the tables we have the shoes we have the car to sell and all of this you will find inside the explore tab so you will learn with the help of react navigation Library you will learn how we can add this beautiful tab navigation okay and then also you'll learn a different different type of navigation called tab navigation tag navigation and how can we integrate and use it in our application seamlessly next next the very important part is to add post okay here not only you can just add a description or form but you can even pick an image from the library if I click on this one and if you see you'll get option to pick any of the images guys okay now if I you have option to edit this image you can crop this image depends on your requirements even though you can rotate this image according to your need okay now once you crop it you will see this beautiful thumbnail once you select this image so you will get to know which image you selected then you have option to add a title description price and you will see how can we avoid this keyboard view so that you can even scroll this form okay now you have option to select this drop- down categories as well okay so you can select the category whichever you want and then click submit so that also we going to learn how with the help of formic we implement this this form okay next moving forward to this profile set section how beautifully designed with profile section with the user profile detail along with the profile image name and email then you have option for the my products okay where you can manage your posted products okay if I go to this product and then once you open this product you will see to delete this product as well okay if you want to delete this product it will ask you before delete this product okay once you confirm then only the product will get deleted okay so that will also so you will going to learn and you can open this your product from anywhere you will see this delete option so that kind of integration we going to do it okay then you can obviously even log out from the application you can even search explore the all the latest product or you can jump it to the external URL everything you going to learn in this particular course and this course obviously I say is completely free and the source code is also available which the link is in the description so guys before moving forward Let's uh subscribe to our my channel if you did not subscribe and then hit notification Bell icon so you will get a latest update from me also if you really like this video press like button and before doing any further delay let's begin to develop this beautiful application but before that let me tell you one more thing that to for backend to store the data we are going to use Firebase okay because Firebase is completely free and very easy to use and if you are beginner then I will definitely suggest to use Firebase so with the help of Firebase you will learn how we can store all our application data very easily and how to display it how to manage how to manipulate that data with the help of Firebase and the react native so guys let's begin to develop this beautiful application in order to create a react n your project we are going to use this Expo uh build tool so Expo build tool is very easy to use and for beginner it's very helpful to build a react native application so many of the people will ask why not and uh react to CI okay so Expo will take care of a lot of things okay lot of configuration also from the starting from the deployment until deployment uh everything Expo will taken care of the inside the uh reative CLI you have to do a lot of configuration and for the beginner I will definitely suggest the Expo only okay and not the reative CLI so don't worry if you later on want to convert your Expo application to the CLI you can do that and I'm going to tell you at the end of this course how to do it okay but before that let's learn it how to create a react to application with the help of this Expo so if you go to this expo. da you'll find uh you'll launch on this particular website which is which is official website for the Expo and with the help of this Expo you will uh create application okay and if you scroll down here you have few step to create application and almost all this react native functionality you can Implement with this Expo okay so let's go to this read docs okay and here this is the uh command to create the Expo application okay so just copy this command go back to a project where you want to create a react n application and there you can open the terminal let me increase the size and then here just paste the command Okay enter it now it will ask you to the project name so we'll give the project name like um Community Market Place Okay click enter now it will install all the dependency which is required for our application so we will wait for a few seconds and if you see our project is ready now okay now let's close this window and open a vs code now inside the vs code uh locate the folder where you created this uh particular project so let's open the folder so in this Cas is in my projects react native and then Community Marketplace and open it so now on the left hand side you will see all the uh files and folder which is created by that particular line of per which we just created this application okay and now let me walk through this uh each of this folder so first is assets folder where we are uh will store all our images if you see it Store icon Splash image and lot of things then we have the node module so what are the dependency what are the library which we install inside this particular application that all the packages inside this node module we going we will not touch to this particular uh folder okay inside the app.js uh we have this is the starting point of our application and when we start application okay this app.js will first and then subsequently our other component as well okay so obviously once we run the application you'll get to know then we have this app. Json where all the configuration related to your application package will be here for example we have the name of the application the slug name the version of the particular uh application right once you export the APK file obviously every time when you are publishing the uh APK or aab file you need to update this version okay then the flash screen uh with uh flash screen path then we have the orientation whether this application is a portrait or a um landscape then this is the configuration for iOS Android and even though you can run it on the web as well okay then we have this package lock. Json and package.json where it contains the script to run the application the dependency it means what are the library it install for this particular uh project and the de dependency as well now G ignore is basically use when you are pushing this code to the git lab right which file you don't want to push and which file you want to uh uh keep it on your local only so that you can mention it here okay now there are two way that you can run this application okay the first and easiest way is to uh go to this Expo uh let me go to this Expo go okay so Expo go is the mobile application okay and which is available for the iOS and and the Android as well okay so you can go ahead and download it okay make sure you have an expo account okay so here you can uh sign up for the account or login if you have already there okay and then once you have this particular application installed on your actual device okay and you are in the same network where you are running your application then you will see your application over here or you can just scan the qard from the console panel once we run the application okay I will let you know how to do it but make sure you will install this uh Expo go Application if you want to test on actual device or or else the second method is to use with the help of Android emulator or iOS emulator if you have iOS device okay but in this case I'm going to use Android Studio so just install this Android studio and once you have this Android Studio if you see we have this three dot here okay go here and click on this hdk manager once you are open this hdk manager you have to make sure one of the API in install so in this case I install this API 34 then go to the hdk tool and inside the hdk tool you have to make sure you have install Android SDK build tool along with the Android emulator and the platform tools okay this is very important and that's all because this hdk update site already there okay and make sure to apply the changes and click okay again go back here and click on virtual device manager here you can create a new device okay so just click on this create device device and here you will find uh some option to configure your device for example which type of phone you want to use you can select the type of phone then you can select the what type of uh operating system you want and so on okay and then click okay and finish once you finish it you will find the mobile device name over here along with the API the size of the dis and here you have play button okay so click on this play button and it will launch the emulator for you okay so if you see right now it's getting started it's getting launched and we'll wait on if you see our beautiful Android device emulator is launched with the help of Android Studio okay now if you see I already install this Expo go Application but don't worry when we run this uh uh emulator first time okay you might don't have this Expo go Application but once you run this uh your Expo application which our react native application then it automatically install the Expo Go app inside your uh device okay the emulator device or you have another step that you can install it from this Play Store as well okay it's not big deal go to the Play Store on a emulator and then from there you can install it now let's go to here click terminal and click new terminal once terminal is open you just need to type npx Expo or run okay or maybe uh you can go ahead and you will find this uh command here okay so it's npm Expo start actually npm Expo start okay and once you enter it it will if you see right it started the application not only this but you will see this QR code okay now you can scan the QR code with your actual device as well in order to uh run the application okay and if you see this is running on this particular port and in order to run it or open it inside the Android emulator or iOS emulator you have to press the respective buttons okay so in this case obviously we are running on Android emulator so let's press a okay and if you see right now it's saying opening on Android okay now it's saying that you need to upgrade the uh Expo Go app so I will say yes so it will just uh installing the latest version of the application okay so we'll wait uh to run complete this new updation of this expoo app and if you see it's installing right now so as I say right you don't need to worry about to install it as well and boom it open our application okay so let's is still up in progress and boom if you see on the page you will have this beautiful uh text return return and here I say continue now this is the um uh quick tool in order uh to open or reload or you can go back to a homepage as well okay if you want to reload you just type uh click on this reload button okay right now we'll close this one and if you see on the screen it's saying open up app.js to start working on the app okay now let me bring our emulator like this on the side by side so I can easily explain now as I say with beginning that app.js is our starting point of our application okay and here if you see it's simply return open app.js to start working on okay if I remove or clean this one and if I change it to subscribe to tube guruji you guys if you did not subscribe to my Channel please do subscribe and if you save this one instantly it change it here see okay and you don't need to do anything right now if you see on this particular uh return statement we have this view view in the sense kind of uh whatever uh you are seeing on the screen it will contain inside the view then we display simple text and this status bar is ATO if I remove this one it will show like this see if I keep it see okay then we applied this beautiful styles sheet for this particular view okay so with the help of this this is called external styling okay and uh because we Define this styling externally or out of this particular function okay and then we just refer it to our view and then we have this container uh with some uh CSS styling if I remove this two line of code if I save it and if you see right now it going to this top of this subscribe to because this two line we using to make the Align called the contain the center okay so that's the reason so guys this is how you can run the your application you can set up the emulator and you can create your application so I hope you understand how to create an expo react native application with the help of obviously Expo build tool then you'll learn how to set up the Android emulator so that you can run your application very first time so guys if you have any question let me know in the comment section otherwise we can move to the next section so guys I'm using this eraser application for my all the documentation and the diagram purpose throughout that uh particular this course okay so if you did not uh know about this eraser application let me tell you about this one so the Eraser app is one of the best application in the market right now for your doing the documentation in one side and drawing the diagram on the right side it's a it's a combination of the both okay or you can do the nodes or you can do the can or you can do the both at a time okay very interesting it's completely free guys so uh uh just join it the link is in the description and it's very easy to use as I say I'm going to use in our particular course okay so uh even as you know that we already completed this creating the application and set uping the emulator and also we run the application now our main focus is to integrate the twiin CSS inside our react native application and then we'll see the quick example of it okay so in order to uh integrate the tnd CSS we going to use this n wind okay this is the library uh to help us to integrate the Tailwind CSS inside the react n and if I go here right and it's very easy to integrate and obviously I'm going to walk through step by step okay on the left hand side you will see the quick start guide okay and as you know that we are using Expo so click on Expo and here you will find to run or to install this uh Library okay so first thing uh you need to install this native wind okay and as you know that we are using this npm and not a Yan if you are using Yar that's fine you can use this but as I'm using npm so uh we'll use npm command so copy this add T go back to your application inside the terminal Okay click add a new terminal here just write npm paste this command okay okay o sorry I paste wrong something let me copy it again npm paste this command and enter okay then you have to add another uh how to install another command let's copy this one do npm paste this command add twin CSS okay like this and it will install TN CSS now what you have to do first thing uh that you need to run this Tailwind initiate what it will do it will create a file called tail .c config.js file okay so let's run this one as well and that's all now if you see inside a project folder you will see this file called tail. config.js which contains all the configuration related to a tailn CSS now here you need to add this content okay and I will explain you why so let me put this over here so main uh use of this content okay it's uh just we are telling twiin CSS okay this particular file or this particular folder we need to apply twiin CSS okay that's what is do okay so for example this is the just app file and the extension is any extension from this one like TSX TX jsx JS okay so for that file you have to apply T in CSS okay or same thing if you have folder then for that particular folder or all the files inside that folder just apply T in CSS okay so right now if you see we don't have any folder so we'll create a new folder called apps okay and inside app we'll create all our files okay later on in this particular course but before that let's add this apps SL apps and this particular path okay so that whatever the files we will create inside the apps folder we will apply T automatically to that one okay and save everything now let's go back here and inside the B.C config.js we need to add this plugin Okay so so let's go to this one and paste it here okay and that's it we are done okay and you can test this out okay so if you see this is the styling we applied we have right now currently okay so if I go here in app.js we have this styling let me open our application side by side okay now what I will do I will comment this code okay and obviously I will remove this tile and if you see this is the Tailwind CSS class okay okay so I will just paste this class now over here and then we'll save it okay let me bring this here now here you need to make sure that you will stop the server so just stop here and restart it again so if you see right um I restarted my application but I'm getting this error and it's saying that this use process CSS then CB to work with a sync plugin okay this error is because some times our T CSS uh the the latest version of T CSS is not stable okay so what you need to do uh let me go back here where we installed this particular Library called npm add da tailin CSS okay here we'll add the specific version called 3.3.2 okay very important make sure you'll add this version 3.3.2 and then enter it okay and if you see now it installed now let's go back let's stop the server and restart it again and now if you see it's our classes is applied here I gave this text size of 14 pixel now if you want to give a text of red color see you are getting this suggestion as well right and save it and if you see we got this uh red color as well okay so it means our T CSS uh classes is getting applied successfully okay so I hope you understand how to integrate uh the delin CSS inside the react n application now throughout this particular course we are going to use react n so before moving to the next section I'm going to I want to tell you two important things first uh we need to install this uh the extension called es7 plus react Redux or react native extension okay this is quite helpful and I'm going to tell you where we're going to use that one and the second extension call Tailwind CSS snip uh Intel sense okay so what it will do it will give you the suggestion see like this okay so when you are typing something it will give you suggestion for example if you see background if you want background of green color see it giving me all the suggestion and you can select from any of them see okay for example let's select 400 and save it that's it this is how you can apply easily right so I hope you understand and make sure to install the Tailwind CSS uh and and react native plugin of inside vs code okay so let's move to the next section in this section we are going to implement authentication part so obviously we implement this T CS in the previous section and mainly in this section we'll focus on creating this login screen and then we'll add this clerk authentication okay so let's go back to our application let me me open our um terminal and for now I will just clear this text okay and now it will be empty also I'm going to remove this uh justify Center and everything and save it now inside the app folder I'm going to add a new folder and we can call it as a screens okay so all the screen whatever the main screen are there we'll keep in this particular folder now let's add a login screen. jsx file okay and now if you remember that we already installed one extension called react Redux react native right now in order to add a default template just type rnf okay which belong to react native functional component enter it and boom you will get this beautiful template ready made okay now save this one now the question is how to display it on the screen so in order to uh display this login screen right inside the app.js here you need to import this particular screen or component okay which is called login screen so import it if you see it's imported from the given path and just close the tag okay and then save it and if you see at the top we'll see this login screen okay so obviously it's showing at the top it's not visible but that's fine now let's get to this login screen and here we'll start implementing this login SC before that uh inside the assets folder I added the images folder and inside that I added this uh login image okay so make sure to create a new folder called images and inside that you can add a new file so in order to add the image okay if you see we have this component called image from this react native okay close the tag and in this case in order to provide the source we are providing the uh image from this local because which we we store it on in our application only okay so in order to accit that you have to write require and then you have to give the path okay so in this case is assets slash Images slash name of the file along with the extension like this okay then you have to give the uh style okay so obviously uh we can go inline style but here obviously we have the tail wi CSS okay so just write uh class name and here we'll write width full height we give for example 400 pixel now if you see here I'm giving the height inside the bracket the reason is I want to give the custom pixel size okay and that's you can give like this otherwise they the telin CSS have bunch of uh uh option okay for example H Zer if you see right and if you see this belong to for example H20 is belong to 80 pixel so kind of thing okay but if you don't know want to search you can give the custom size like this okay and save it and if you see Boom the beautiful image is displaying on the screen okay so this is how you can display this image now uh here we'll say object cover okay just to make sure that image will not uh change on different screen size next I will I'm going to add a new view okay in order to add the other text and all so inside that I will add a text and here we'll say Community Marketplace like this okay and if you see name is showing now for this one I'm going to add class name here we'll add a padding of maybe 20 we'll see how it looks oh padding 20 is too much padding T perfect and for this text let's add a uh T CSS class so for example let's get text of 30 pixel and we'll say font bold like this perfect next I'm going to add another text let me close this one and this will be a buy sell Marketplace okay Marketplace you can give any name any any any description you which want where you can sell all item and make real money okay something like this now obviously you can give some class name so I will give class name text of uh maybe you can get 80 pixel then we'll give text of slate color 500 and we margin top to 7 maybe six okay here I will change this font little bit maybe 35 okay perfect let's keep as it is for now we'll see and we have this beautiful text now let's create a button okay so in order to create a button you have the button tag here okay but it's little bit difficult to customize it okay so what you can do you can add a view inside that you can add a text and you can write get started like this okay and if you see nothing get changed it's just a simple text but now you can apply some styling or classes of T in CSS for example if you see padding of three then I will say background color of blue uh 500 something like this see okay we can modify it look like a button okay now here I will say border or rounded Corner okay it has a rounded Corner maybe we can say full like this okay I will change this um padding to four then for this one I'm going to change text of white like this okay we'll make text align Center and we'll increase the text size of maybe 18 pixel like this okay now obviously we'll give margin top to 20 something like this okay perfect and we have this beautiful loging pay screen is ready okay so right now if you see this particular button is not pressable or not clickable okay so in order to add the clickable uh property right you can replace this view with the touchable opacity okay so just change to touchable opacity okay so it has a touchable opacity touchable highlight you can select any of them okay touchable opacity is the reason is if you see right here let me save this one first you will get see nice effect the click effect okay that's the reason I I usually use this touchable opacity okay now here you can have property call on blur on focus on long press and lot of things obviously we need here on press and here if you want to console like console.log sign in okay and then save it now if I press this button see the sign in it printing on the terminal okay so this is how you can add the touchable opacity and then you can uh on the Press of this button you can add the method later on okay but this is a just simple uh login page okay obviously you can modify this little bit I will also do on the um I also modify this one okay just to just to look much better okay it's up to you how you want to display it on the screen okay and uh let let me tell you one more thing how we can modify for example here you can give the background white okay you can give margin minus okay minus 20 pixel okay so it will go up little bit and then you can say rounded Corner rounded only this corner you want to round it say right rounded top and you can say large okay so it get rounded but that not that much let me round it 3x maybe see okay and let me Zoom it see how beautifully it get rounded and you get immediately beautiful effect like this okay you can add the shadow as well okay obviously Shadow is not showing but that's fine okay here I will again if I'm possible let's say full uh full is not that much good Let me refresh uh 3x is fine okay so this is how you can add much more effect depends on how you are applying this time okay so guys in next uh section we going to add the actual authentication with the help of Google signin so let's do that now in order to add a Google signin or any social authentication we are going to use a clerk authentication so clerk is one of the best service authentication service provider in the market and it's completely free and if you did not use this cler before or if you don't know anything don't worry because I'm going to tell you everything step by step so first thing let's uh create account if you don't have an account okay and then let's go to the dashboard okay once you are in the dashboard you will see uh right now I obviously I have a lot of project which I uh created and use a clerk inside that so right now we will create a new project called add application here you can give the application name so we'll say community um Market Place okay now you have option here A bunch of option which of the kind of uh authentication you want to enable for example email address is there the Google Facebook Apple even though you have this um Tik Tok gitlab and lot of things okay so right now I'm going to use Google and email so create application and boom right your application is ready now now these are the environment variable which we need later on okay but before that now just search for clerk Expo and you will find this documentation which is official documentation on clerk only okay so here we have to follow this step-by-step guide in order to install or integrate the clerk with the Expo react native so first thing we need to install this clerk Expo so copy this one go to your terminal add a new terminal and and paste it here like this then we need to set the environment variable okay but we'll skip this St because we we directly for now and then you have to wrap this cler provider okay so inside the app.js wrap this like this okay so wrap it like this club provider and make sure to import this clerk Provider from this clerk Expo okay now here you need to Pro provide the publisher key and this publisher key you will find it here okay so you can go to this API key there as well you can find this one okay so for now I will just copy this existing one and paste it here okay then after that our next step is if you scroll down little bit is to protect the page okay so if you see we have this sign in and sign out component okay if us is sign in we need to show the content we want which you want to show and when the sign out we will obviously show the login screen so copy this one and just paste it here okay obviously I will remove this login screen and I will put it inside the sign out so whenever the user is not login then it will show the sign out page and once user is loging then it will show this signin page or whatever the uh component or screen we are going to show we will keep it here and also we have to make sure we'll import this sign in and sign out okay and then save it so right now if you see on the screen is still showing this login screen okay but obviously we got the error that the file is not exist don't worry uh we will restart our application but in meantime we'll complete this installation okay now once you did complete this particular step you need to go to this option called Au login Okay the reason is we need to integrate social authentication okay so that's the reason so here first thing we need to create this file called warmup browser so copy this path okay and here you need to create a file so what it will do it will create a folder called Hooks and along with that it will create this file okay okay let me create this file okay let's find create it here okay I created outside it means I created in the root directory and then copy all this content so copy this one and paste it here okay now if You observe we have uh we have the import statement called web browser okay but inside of packet Json if I go to this package.json we don't have such a library install okay so what you need to do you need to install this Expo web browser so let's search this one and if you see this web browser package we need to install Okay so this is obviously official from this export documentation so copy this command line and then paste it inside your terminal and install okay once it installed obviously you are good to go with this warmup browser now the next step is to add this web browser okay uh reference so inside the login screen we need to add like this okay and make sure to import this web browser okay I will just copy this complete statement from here okay this one like this okay next we we need to add this signin method okay sorry this is the method and obviously we need to add this two lines so we'll just paste it here okay so what it will do U make sure to import this use warm up browser from this hook which we created this one okay and then it create a use Au method make sure to import this use o from this clerk Expo and we are telling that we want a Google authentication okay now if you want Facebook you can do Facebook as well and we have to implement this particular method called on press so here I implement this on press method and everything's look good now obviously this on press method we need to call on the Press of this uh get started button so I will remove this console and paste it here like this and save it now obviously we have the error so obviously let's stop the server first and R it again okay so I will stop here and ready again okay so I will remove from here as well from background and re it again and if you see uh the login page is open now the error is gone everything's look good now let's get click get started method and here if you see I just log in okay with the clerk with my account and then click continue and if you see it redirect me to this you are sign in okay because that's what we return inside the signin component so whenever user sign in it will redirect to this your signin page okay so let me bring this down so I will add the class name will give margin top to 10 just to visualize see okay it means we are sign in and obviously we successfully uh sign in with this uh CL authentication okay now obviously next what we need to do we need to implement the home homepage okay and all other things obviously our homepage contains different different tabs and obviously we need to implement the navigation system in our application so we'll see in that in the next section but if until this point if you have any question any doubt let me know in the comment section I happy to help you and if you face any issue anywhere you can access my source code as well for free okay so we'll see you in the next section now we are going to implement the react navigation in our application so basically we'll mainly focus on this uh tab navigation and the stack navigation okay so right now U for a tab navigation we'll build home uh tab explore add post and profile type okay so these three types we are going to build with the help of type navigation so if want to integrate the react navigation this is the uh Library called react navigation org and just click read docs okay and here they have a step by step uh uh points where you can install this react navigation okay so first thing for the installation of react navigation copy this command go to your project inside the terminal just paste it here like this then if you scroll down as we are using this uh Expo manage project we have to install this particular uh dependency as well okay and done now on the left hand side if you see we have option called Navigators okay and that in that we have the stack Navigator native stack draw bottom Tab and so many okay so right now we want to use bottom tab navigation so just click on that one okay and this is the latest version if you see this is version 6.6 and this is how it looks the bottom navigation that's what we are going to implement okay now in order to U add the bottom navigation just uh install this particular dependency but you have to make sure that whenever you are adding this navigation bottom type navigation right but before that we have to make sure that all of this react navigation dependency is installed okay this is very important now once we have this tab navigation this is the example that how we can use this tab navigation okay let's go back to our project now as I say uh here we need this four screen actually the home screen explore add post and profile okay and the that particular screen we will convert it into a tab so first thing let's go to this project folder and inside the apps folder inside the screen we create a new file called home screen. jsx okay then uh add the default template and save it again we'll get another call explore screen. jsx add the default template another screen we'll call it as a add post screen. jsx add the default template and the last is profile screen. jsx okay default template for that one as well now all our screen are ready now inside the app folder we create another folder called navigations okay so all the navigation like tab navigation t or any home screen navigation stack navigation we'll keep inside one folder okay for the organiz ation purpose so let's create a new uh file here and we can call it as a tab navigation. jsx okay now add the default template and save it now inside this tab navigation very first thing we need to add or to define the reference of the tab okay so here we say create tab navigation okay so we are not getting the suggestion don't worry we'll copy it from here okay so this create bottom tab Navigator we need to add okay and then you have to import this bottom Navigator okay so let's import this particular statement like this okay perfect now let me clean this out and here we'll add the tab nav uh sorry tab dot Navigator and inside this tab Navigator we want we need to add the screens so we'll say tab do screen okay and inside that we have to provide the name which is the which can be a name of the route okay which is the name of the route we say home for example then we have to give the component which component you want to attach so in this case is home screen component like this okay and save it another I will add it here so let's add three more okay so and this one is for explore then this one is for um add post and then last is profile let's attach each of the screen and save it okay now our tab navigation is ready okay let's save this one now let's close all this one for now and let's go to this app.js okay where we this is our starting point as you know that and where we need to add uh the tab navigation okay so once you are sign in right now if you see we are obviously signning to this one okay so here we will add that one so here I will just add navigation container first okay and inside the navigation container we need to add tabe navigation okay and if you see this type navigation is importing from our folder called navigations and inside that we have this tab navigation and then save it now if if you see currently uh we have this home uh header okay along with that we have home screen and below that you will see the tab which is called home the explore add post and the profile okay and as soon as click it if you see the header the and this particular name of the name is changing okay it means our tab navigation is ready but don't you think this tab is not look beautiful as we expect right it don't have the icon proper icon don't have proper label and obviously if you want to keep this uh header uh you can keep it or you can remove that one as well okay so let's go to tab navigation and let's customize it so first thing let's remove this uh top header okay so in order to give the remove the top header for all of this particular um uh screen you can mention the screen option over here or you can remove uh for each of them for example if I provide the options okay and here here I will provide the header uh shown to be false and save it okay let's go to this home and if you see now home don't have header but Explorer still have the header right so in order to remove for all let me undo everything and you can give the screen option to this tab Navigator itself okay so here I can say header shown op shown and you can make it false and if you see now all of them for all of this type the header is gone okay perfect next let's add the uh label proper label okay so for this Tab screen so this name can is used for the navigation purpose okay I will let you know in the in the later in the course but for now let's add this or change the label okay so here you need to add the options inside the options let's add the tab bar label okay like this and you have to mention the color and then you have to add the text okay so you can customize text as well here okay so for example let's add a home and if you see the home is get added okay now here obviously you can add the style we will add the style of color and whatever the color we are getting from here you will apply it to this one and if you see the color is getting applied okay now obviously you can modify or you can change the text you can even change the font size to 12 for example you can add the margin bottom let's add margin bottom to three something like this say okay now our tab bar icon is ready oh sorry tab bar label is ready now let's add the icon so after that I will add the tab bar icon so here again it will take two parameter color and the size okay like this now you can add the icon whatever the icon you want over here okay so most preferably I will use this icon. expo. FYI which is from the Expo Library only and here you can search a burnt of different icon see okay you can filter it out with this uh icons as well now for example if you want to use this icon copy this input statement and then copy this component as well okay and paste it simply over here now obviously we'll change the size with the actual size of or default size of the systems uh bar type bar icon and the color with the color as application color see okay so beautifully if I uh change this it will look like this see okay not only this but you can change the color of this active color tin color okay for example uh for this uh option over here you have option called tab bar active tin color okay and here you can change the color for example if you want something like black color or yeah black color see now you get black color as active one okay so something like that you can change it out now for now I will keep this blue throughout the application so once you did this see our home and icon is ready now I'm going to copy the option for each of this other screen okay like this and obviously right now it's showing all the home obviously I'm going to change it so here I will say text I will say Explorer explore and here I will change the icon something like search like this perfect now I will just use this particular name of the font because we already have the Amic icon and replace with this okay and save it see same thing add add post will say add post and here I will let's add a camera icon maybe y perfect and last is profile and for profile let's search person maybe like this yeah person CLE and save it okay and let's see how it looks now see now we have beautiful tab with this beautiful tab icon the name and we everything we customize here okay so this is how you can uh add the react navigation inside that we added the tab navigation as well okay so obviously later in this course we're going to add the stack navigation as well as we uh start developing this application much further okay so guys if you have any question while implementing this tab navigation let me know in the comment section also if you have any question while implementing the source code you can access my source code the link is in the description and if you still still did not subscribe to my Channel please do subscribe press like button and press notification Bell icon as well and now we'll move to the next section so in this section we are going to set up the Firebase so that we can integrate it with with your with our react na application and then we simp uh seamlessly store our data or fetch our data from the Firebase as you know know that Firebase is uh developed by Google and it's completely free so uh in this particular task we'll obviously integrate the Firebase and we'll create a collection category collection and we'll face the data okay so let's go to this firebase.com and go to this console okay here you can create a new project so I already have some of the project I will open it and I will add a new app into that one okay so if you see we have the add app option over here and select the web application once you select give the proper name so I will say Community Marketplace and register this app okay it will take few second to register the application for you now once you it register you have option to install this Firebase so just copy this command and install the Firebase inside your react native application so just paste it here like this and then you have to add this fire Bas config okay so copy this all of this content then go to your apps folder and inside the app folder what I'm going to do um let's create a new file and we can call it as a f or let's add the file over here inside the root directory and we'll call it as a Firebase config.js X and paste the content okay which you just copied now most important thing here obviously we are if you see right here we are initializing this app here we'll just export this one okay so that we can use it in uh other component as well okay and we don't want analytics so I will remove it and if you see this contains or API API keys and lot of different uh configuration okay now once you did this go to this continue to console and done you are done here okay you don't need any configuration right now now on the left hand side you will see some of the uh different uh will say uh it's called options okay so for example let's go to this Firebase database fir store database okay so right now if you see I already have lot a bunch of different collection here okay because inside this application I have multiple application okay so that's the reason but don't worry here you can just uh C click on start collection and create a new collection called category okay and obviously collection name should be a unique then once you get collection here you can create the document ID so you can generate AO ID it's not big deal and here I will give the name and the Valu for example we'll say category uh electronics okay like this add a field then you can give the image or icon okay so here we say icon and here you can just paste the URL of the icon now already have the URL so I will paste it here like this and then save it and now if you see we have this collection and in that we have document and then we have the name and icon of this particular um category okay now you can add multiple one just add this one here and you can add it okay so obviously category we will means user will not able to add it okay but this category we will use it to display on our home screen okay and we will learn now how we can Fage this category inside our application okay because uh later on in this one okay we going to create a form inside the ad post okay so inside the ad Forst we'll create a form so that user can upload the image okay then he can able to select the category okay so for example let's uh select category from drop down so this will be a drop down okay then we have option to add a title okay so this will be a text box so this will be a title and then we have other option for example after that we will add a description then we'll add pricing okay and so on and after that at the last we have the submit button okay so we'll say oops sorry submit button okay so once we have this all the information we will just click submit and once you we submit it we will store our all the information inside of Firebase okay so this is how it works but first very important thing we will connect our application to Firebase so that we will get this list of category okay so this is very important we need to get the list of category so that we can show it inside the drop down now here I added bunch of categories okay with a different name and icon now let's go back to our application and inside here inside Firebase config.js we already defined this Firebase configuration okay now let's go to this apps folder and instead that we have this at post screen okay so over here we add a constant okay and we need to initialize it okay uh some data fire store also uh we'll create method here to get the category list from the Firebase okay so we here we'll say category get category list and this method will help us to get the list of category from the Firebase okay now the question is how to get it okay so just search on the Google Firebase gate document okay and here very first link you'll find it uh for the documentation okay and it's very easy to learn from the documentation and very easy to uh understand and Implement okay so first thing uh if you see right here to initialize This Cloud fire store so so to initialize it you need to uh import this particular statement so let's go back and add it here so what it do it it's getting the file store and whatever the application configuration we are added right see this app from the Firebase config that is we are providing to this get fire store and obviously we need to import this get fire store from this Firebase fire store okay so let's import it like this see okay now our database is ready now obviously if you want to know how to get the all the documents from The Collection here is the simple example okay so on the right hand side you can just search from what um you are looking for and then you will jump on that one now to get all the documents this is a simple example okay let's Implement one by one so first let's say constant query snapshot is equal to a wait okay so we are using a so we have to make this uh method as a sync then get Docs okay so obviously get docs we are because we want a multiple documents okay if you see like this one okay H that's the reason we are using get docks and make sure to import this get docks from this Firebase fire store okay then from that we need to face the collections okay so also we need to uh mention this colle sorry the collection it's a collection let's import that one and then uh once we have that we have to provide the database reference and the name of the collection so in this case is a category okay so if you see this is the collection name we need to provide okay so we provide that one as a category now once we have the query snapshot we'll uh we'll Loop it with the help of for and we'll Define document and then the arrow function okay so we'll just console the information so we'll say docum uh we'll say docs sorry docs okay and then doc do data so inside doc. data we will get actual doc data okay and that's all now obviously this get category list we need to call once this method is get uh initialized right so for that one we are going to use use effect hook okay so this use effect hook will execute for every instance okay but once this application get load we have to make sure sorry once we this component get initialized right we have to make sure that this us will get execute only once so that's the reason I give this empty block okay and now here you just Define get category list here like this okay perfect and save this one now let me go back save save it let me open our terminal here okay and uh if you see on the terminal we got the list of documents okay so this list of document contains the icon and everything okay so it means if there are six uh total documents inside our um uh database then this console log will execute six time because this is for each Loop okay now let's store this category list inside one state so Define State using constant category list comma set category list okay and is equal to use State okay and empty initialize we initialize with the empt now in order to set the list you can set the category list and obviously we need to push the value with the existing value okay so for example let me uh tell you the example here if you want to know how we can do that okay so consider this is our C State okay and inside that state we already have the method sorry already have the category name okay so category name already have now we want to insert a new category okay so we want to insert a new category so again we have to add a new category along with this existing category so category name like this okay and this is our category list State okay so to implement such a functionality what we need to do here we need to add said category list we'll say category list okay then uh uh square bracket dot dot dot category list comma document. data okay so in this way this information will save it along with this previous list of category okay and along with the new so we are just appending or conneting you can say okay or we can push into this existing array kind of thing now save this one and we are saving this get category list now okay obviously once we uh start implement the implementing the form inside that inside the drop down we will show this category list okay but for now in this particular section we are stopping here because just the thing is we successfully implement or integrated our application with the Firebase we learn how we can initialize the Firebase and how we F the data from the Firebase collections okay so guys if you have any question any doubt let me know in the comment section and I'm happy to help you okay here I will just document that get your to get category list okay save it perfect we'll see in the next section guys now in this section we are going to create a beautiful form in order to add the post okay so mainly Focus we mainly focus on adding a form then add uploading the image and storing the image on the Firebase and then obviously once we have all the data from the form we will save it in our f f store okay so first thing in order to implement the form we are going to use a formic uh form Builder Okay so this is very easy to uh add any form inside the react application or react native application as well okay so if you go to this for.org we'll find this uh beautiful website and it help us with a beautiful documentation how to add a form okay so let's get started here and obviously first thing we need to do is to install this formic okay so copy this one and paste it in your terminal and save it okay perfect now we'll go one by one so first and very important thing is to add a formic so over here we'll remove this text and instead of that I'm going to add foric here okay so obviously uh we need to import this foric so if you see this import statement you need to use it like this okay and save it next uh let's give some class name to here so class name is equal to padding to 10 I don't know why it's not applied oh because we did not return anything and we are inside oh we need an add post okay and that's all good so right now inside the formic formic will take some of the parameter for example you can provide the initial values okay and what are the uh Fields you have you can provide for example uh let's add a name Ando value as a name as a uh empty we add description then category okay then we can add uh another we can add address okay then we can add price and I think that's much enough okay obviously We'll add the image later on okay but for now that is good then next we we can add onsubmit methal okay so this unsubmit metal will return return the form value for us okay so right now we'll just console it as a form value then there are some uh handle U call back method we need to write so inside the bracket we'll write handle change then handle blur it's not mandatory to add it but it's better to add it okay because you can uh use it anytime okay then values the handle submit values handle change which kind of important okay and then Arrow function okay now inside that you can Define the text input and everything for example let's define one text input okay oh sorry uh text input right so let's add a text input like this let's input it before that let me add one View and inside that we'll keep all our forms fields and everything okay like this obviously let's me remove this and yeah now let's add a class name now obviously we need a Bard and everything right so instead of using telion CSS I'm going to use external styling okay so let's define a style here so just type RNs you'll find this RM style import it and then make sure to import the Styles sheet as well and here we'll say input okay perfect and just attach this input style over here like this okay now here uh let's add a placeholder first we'll say title okay and if you see we got the title okay now let's add some border width of one then we'll add a uh border radius we add obtain something like this okay obvious we need to add padding of 10 maybe we'll add 10 let's see how it looks 10 is fine okay we'll give padding horizontal maybe 17 okay so if I enter it see beautifully it get entered obviously if you want to increase the font size just increase the font size to maybe 15 okay so it's little bit oh sorry it's little bit bigger uh maybe we do 7 perfect okay and let me clean this out oops perfect now whenever we are going to import this form Fields obviously once we apply style and everything will be good okay now once we add the title now we can add more parameter okay so main important thing is um to add the default value and this value will hold uh the value for the form okay so value comma title or you can I change this to title actually okay but post title kind of thing then on change text We'll add okay and inside that we'll add the handle change and then we'll pass this particular name okay comma which is title like this and then save it so we got error that cannot rep property titles wow so values do title just add question mark and that's good now after that I'm going to Simply add one button okay so which is the button like this and we'll give the title as a submit okay and on the Press of this button I'm going to call handle submit because this particular method is already handling by for me okay so you don't need to Implement any other different method so make sure to import button from the react native and let's go to the add post oops add post and yeah boom okay beautiful now obviously let's add a class name to this one so add a class name margin top to seven I don't know why it's not get added but let fine okay now we have the title now if you try to add some title okay something like this and click submit okay obviously on the submit we are just consoling okay so go open the console log and you will see the name title as a name obviously the default parameter we pass it as empty so it's showing empty but for the title we got this value called t r sonup okay now obviously once we have all the information on and on submit method we will call one method which will store the value inside the Firebase okay but before that let let's add other forms uh Fields okay so let's add another field called text input here it will be a description okay something like this it will call description here as well say description and this will be a text area so I will provide number of lines as a five okay see then here I will give margin top to T and margin bottom to profile let's see how it looks perfect also I will change border width border color will change it later on but fine for now it's okay then we have this description then after that I'm going to add prize section prize it will be say prize price okay and obviously uh this will be a text but now this will be we need to uh open the keyboard with a number only so here we can say keyboard type and here if I do control space you'll see the different number of types you want email address name phone pad which kind of phone p number you want okay so in this case I'm going to add a number and pun punctuation okay or you can add the number pad as well okay and then save it and if you see now if I go to this prize section okay you will see the number you can put the decimal number and only number you can put not the text okay so this is how you can add the keyboard type as well now last we need to add the category me category list dropdown okay the question is how to add it okay there are couple of ways you can do the a manual uh implementation as well but the best way is to go to here and search for the Picker Expo okay here you'll find this uh official picker Library okay so copy this uh library and just install it inside your terminal so let's go here and paste it okay so this pickle Library will help us to add a kind of selection or drop down kind of thing okay now once you add this picker let's import it so we'll say picker okay and and we'll import the statement so go here and we'll say import picker okay from we'll say add react native picker see okay perfect now we have the Picker we have to provide some of the property to this uh picker component okay so first is uh selected value so default selected value we need to add it here so which will be a values comma category make sure it's a category not it's why then after that we need to provide on value change method okay so this method will uh uh trigger the handle change event and obviously we'll change add the category here okay like this now inside that one we need to add picker item so let's add picker item sorry picker do item okay and for that one we need to give label so label will be for example um drop down one I will say Okay value you can give like drop down and then save it okay and then if you see we got this beautiful picker see okay now if I click on it oops see we got the drop down one okay because right now we only have one picker item but if you add more such a like this see you'll get a true top down one now see okay so the question is now how we can add the categories because we want to show all the list of category okay so for that one what we are going to do WR category list and and if the category list is exist we'll iterate this category list using this map operator so we'll add item comma index and the arrow function okay and here I will just keep this picker item paste it here will add the key as a index and then label will be our item. name because inside the category list we have the list of object which contain the item do name value okay and same value for the value I'm going to use item. name only and I will remove this one let's clean everything and then save it and if you see now we have this furniture okay by default but if I select it you'll see the bunch of option okay but if You observe you get Electronics again and two times or three times see okay the issue is is that whenever you save it right it's not clearing this category list and but it's getting appended with the new data okay so just fix it we get category list and pass it empty so whenever this method get called it will first clear this category list and then import a new data okay and now save it and if you see so every time you use it you'll see only this uh value okay so let me save this one let me dismiss this is the different error I don't know why and uh let's add style to this one so add style and we'll apply same style do input and let's see how it looks okay so we got one error let's add item. name something like this and I don't know what this error cannot read property persist of null okay and I think I don't know but I just refresh it and now if you see you can select any value for example let's select the car and now you can add some description you can add some value and let's submit it okay and inside the terminal let's check the terminal and then you will see the category the description along with this image the price and title obviously we remove this one so it will clear once we refresh the complete app and now we remain with the address let's add the address field as well so let's add the text input over here address so we'll say address so keyboard type is a complete proper text we'll say address and I think that's okay yeah here as well it's address and then save it now here we need to make this uh align at the start for this text area so we'll just add text align top vertical and we'll say top okay and save it and also if you want if you think that this text is going up you can give just margin little bit like margin top to 15 to make sure it look good okay now uh our form is almost ready okay and uh for this particular uh picker you can apply some styling let's see so here we we'll give class name actually let's give the class name we'll see border okay I don't know border is not coming what yeah something is okay we'll check it out but in meantime also here I going to add a text and we can call it as a uh add new post okay so obviously here I'm going I'm going to use some style so again oh wow this error came again we'll we'll find it out okay for now I'll just commment this picker and let's update this one so let's apply some St CSS class actually so add font not font but text of 20 pixel then we'll add font bold maybe add 25 something like this okay and then I will add a more text we say create new post and start selling some some subing kind of text okay class name We'll add a text of 18 pixel then we'll add a text of gray color maybe we'll add 15 okay and obviously I'm going to give some margin from bottom margin bottom to 10 perfect okay now obviously here we're going to add a text box okay as I told you at the very beginning that we'll add this kind of text bar okay I'm sorry uh the image Pier later on but at this point if you see everything's look good okay just the thing is uh let me change this button I don't like kind of this button okay so what we're going to do going to add a view inside that we're going to add text and here we'll say submit okay so for this one let's add a style we not style but we'll add class name so here I will say padding of five we'll say background M blue 500 okay I'm going to come in this button then uh we'll make a rounded to be full and for this text I'm going to class name text white text align Center font uh not font text size of maybe 16 Pixel Perfect okay yeah and now we give margin top to 20 not 20 10 is fine okay like this now obviously we'll change to touchable opacity because we want to add on press event and same on which we added for the button I will paste it here okay and save it now let's test this out now we'll add uh some sample title uh some description so some uh sample description then I'm going to add price which is 5. 6.89 for example let's add address test address oh we commented the Picker code but we can add later on and then click submit and if you see now we have this category obviously it's not there but description title price and address everything is comes as it is okay so this this is how beautifully and easily we can add the formic uh form okay now we have that error uh it's coming from the Picker okay so because on value change uh the handle change is not uh it's giving error actually okay so to fix this one what we can do we'll add the Set uh fill value property here okay and inside this um category we'll add item value we'll destructure it okay and then we'll add the set fi value here we the FI value name which is the category and then the item value okay so it need to be value and item value and then save it okay now if you see we don't have any more error so let's go here and select something like hobby for example and make sure once you submit it you get the hobby see the categories hob obviously if you fill all the details you get all the information uh as it is okay and for this particular and drop down we going to add we will wrap this inside the view and then we'll apply some style for example let's add a style We'll add a border width of one we'll add the Border radius of 10 and obviously we do margin top to 15 yep and if you see now we have this beautiful drop down with the Border okay so this is how we can implement the beautiful form with the formic and the Picker for the drop down if you have any question let me know in the comment section now let's add the image picker so obviously for each of the post user can select one image and then once you select user select the image uh we will show it the image placeholder here okay and on the submit only we will store in inside our Firebase okay so to implement the image picker uh over here inside the formic inside the view I'm going to add uh the image okay let's add image and we'll get source so over here inside the assets folder inside the image folder I added this placeholder okay this is simple placeholder so you can get it from the internet and over here we'll add the requir property because we are fing it from this local and then we need to provide the path so in this case is asset slash images SL placeholder SL jpj okay and then we'll give width and height so let's give width of style we'll give width of 100 and then height of 100 and save it okay so this is how it looks now it's up to you you can extend it uh complete uh width as well but I will keep as it is then I will give border radius of maybe 15 okay perfect this look good to me now on the click of that we need to make sure that we will open the image okay but before that let's wrap this image inside a touchable opacity okay so that we will get on press event okay so here we'll add the on press event and on the pr of it just console image click okay and now if I try to click here see see image click printing okay now obviously we need to add the image picker over here so to implement that image picker let's go here and just search on the Expo that Expo image picker okay and this is the example it show so if I click on any of the button see it will give you the uh file explorer where you can pick the image okay and it will be available for any flat phone like Android uh iOS or any emulator as well or actual device as well okay so let's copy this uh command paste it in your terminal like this and enter it then if you scroll down the next thing you need to do you need to add this plugin inside the app. Json okay so copy this plugin go to your app. Json file and over here after the web I will add this plugins okay and then you can add the photo permission obviously here you can change the message I will keep as it is and that's all okay now this is a simple example uh to implement the plugin okay so first thing what we are going to do let's uh use this state add a post screen and on the image picker over here oh sorry uh first let's add a state so we add this test over here and save it then we'll add this method called constant Peak image I'm going to explain this uh just a moment so here okay now we'll say use to pick image from gallery okay now what it will do once you uh press this particular image right so let me add the on press event okay so right now we are just consoling so let me replace it with the actual uh this method called then it will launch the image Library okay and obviously uh here we give the option to allo edit it will it will also give the expect ratio okay whether you want Square then you same size or different different on the how you want to crop the image and the quality one means the highest quality or as it is quality okay then we'll just consoling the result and uh we are just setting the image with this URI okay so let's try this out first whatever the implementation we did okay now if you see if I click let me close this if I click on this image okay right now we get error let me check so this saying that image picker it does not registered so make sure to import this image picker so we copy this one and we'll paste it here and save it okay so make sure to import this one now let's click on this image picker and if you see it open the image picker right now on my our storage it's uh don't have any photo let me add in photo I will pause it and I will add some photo over here I added some of the image let's try this out if I click image and if you see we have some image okay from the album you can get it or from photo as well now select the image whichever you want and if you see you got this crop option okay so you can uh obviously uh decrease this crop size depends on your requirement okay you can even rotate this image because inside our application here we mention the allo editing as a true okay and now once you crop it and boom now image get selected so obviously we are not showing the image over here okay so in order to display the image we need to display that particular image or we can display that particular State over here okay so let's Implement that one so what I'm going do I will write if the image this particular state has some value then it will show that particular image okay so let's add that image We'll add the image we'll call Source inside that we'll add a URI okay because we are get we are showing the image from the URL and here we'll call just image and for the style I will keep everything as it is so I will copy the existing style and and if the image is not there then I will show this particular image for the pck or placeholder okay and then save it now if you see that particular image okay now if I click on this one again and you can replace this image okay for example this one and crop see okay so how beautifully you can implement the image picker okay very seamlessly okay now once we have this image and everything we need to make sure that it will added in our form value okay so on submit it we have to make sure that image is getting added okay so it's very easy so what we going to do we want to add new method called on submit method I will say okay and it will take the value so obviously once we have this submit but call I will call on submit method and pass the value now inside this value it also have the image see okay but the value is empty so what we are going to do we are just add the value do image is equal to image and and this image is nothing but the one which we have this URI store okay and then if I conso this value now on the submission of the form we'll see the result okay now if I already have the selection let's click submit okay go here let's click submit and if you see for the image we have this beautiful file URL okay with the JPG file say okay so this is how you can add inside your foric as well that's the reason formic is very simple to use and very easy to use as well okay and you can just control all your Fields inside the form now one last important thing inside the form is to make the field required okay and if the field is not required and user is trying to submit it will not to show some message that you need to fill this particular detail okay so for that one uh inside the formic okay we have to add uh one method me called validate okay this validate will check whether this form has a required field or not okay so it will take a values oops it will uh take values like this and then the aror function okay so here I will hold the Conant errors empty and then you will check if the values dot for example in this case let's take a title okay if values. title is not present so it's not present UPS like this okay so not operator then we'll just console. log title not present for example okay and we tell uh our system that or our error to error. name is equal to title must be there there something like this okay now obviously once we define Title we need to return it so return this this error sorry uh this error okay so return the error and then that error we need to pass it here and then save it okay so we will tell our form forming form that error is there and do not uh submit it okay so let's test this out so let's if you try to submit it if you see it's saying title not present see and that submit method get not get called okay so instead of that one now obviously uh that is correct Behavior now instead of showing this console lock we'll show the Android toast message okay so toast Android dot we'll say um maybe bottom right and we'll say uh title must be there okay and then we say Android toast o sorry Android do shock let's save this one let's try to submit it oh we have one error that Android toast so okay it's need to be actually show okay let's and if you see we got the title must be there as a text okay so beautifully now let me try it again and if you see still there now let's add some title sample title okay now observe this uh particular terminal I think we are good okay let's click and say submit and if you see now that particular uh submit method get called and you will see the title as well okay so this is how you can add the validation okay now obviously for you can add for description price and so on so this is how beautifully you can add the validation with the help of foric without any different configuration now it's time to add the data in our fire store okay because if you see we have this image okay and then we have this all the information so first thing we need to do is to upload the image once the user click submit we need to upload this image into this fire store okay then from this fire store we need to get a download URL okay so this download URL we will need it to store inside the fire store okay because once we added this uh this need to be storage obviously okay and then once we get the download URL then you will store everything inside the fire store okay so let me walk through it so right now if I go to the storage right here is the storage and over here we will create a new folder and inside that we will store all our files okay whatever user has image he is uploading we will store here and from this one okay for example let me open any of this image okay and from this one we need this URL okay so this URL we needed in order to store inside our file store okay so everything we going to um do it step by step so first thing let's go back to our application and over here on submit method right because we are submitting here okay on this button we need to make sure that this image we need to save it as a blob file okay so if I go here and search for Google sorry uh Firebase uh upload image okay and you'll get this first link for the documentation which is from the Firebase okay so obviously we will Define this we will initialize this one but in order to upload a file or block file right we need to convert our file first into the block file because our file contains only URI okay so let's do that so here we will say convert URI URI to blob file and it's very easy guys okay you just need to do constant response is equal to await then we'll fet it and then image okay so whatever the image we have this particular image so we'll make this a sync because we are using AIT like this okay and then we say constant blob is equal to await response do blob okay and here we'll pass like this and that's all and now we have this block file okay so this is a simple two line code to get the block file okay you'll not find anywhere this is the trick to get the block file okay let me remove this console lock we don't need it for now next thing we need to do is to define the storage reference okay as I say we need to First upload the file okay so if you see we this is the way that we need to initialize the storage reference so we'll initialize it uh at the top only oh sorry and we'll import the get storage so get this I will UT all of this because we need it inside this fire Bas fire store okay and then let's go back here now next thing if you see we need to define the reference okay so we'll Define the reference here like this okay this is storage reference and obviously we imported this reference the storage uh which we defined earlier okay nothing but this particular storage and then uh some child this some child it means uh the in which folder you want to save the file right now you can create a new folder we'll say for example uh Community post okay and this is the new bucket of folder we will say inside the storage then inside that I'm going to give the file name as a uh current date okay because this will be a unique okay that's the reason and we'll say jpg for example okay so this is the uh particular format need to be a JPG okay because then inside the community post we have this file name which is the current Tim stamp date jpg F then if you see this is the simple uh way to upload the file so we'll just paste it here so it will say upload byes then storage reference then file file is nothing but the block file we have to pass in this case Okay so this is the blob file then snapshot and then it will say uploaded above uploaded a blob or file okay something like this and now let's try this out uh whether this image getting uploaded or not okay so in my case so okay we got one error it function is not defined let go back and over here we need to pass okay let's make sure everything is good so this need to get St my bad so actually this Cas storage reference and upper bytes will come under a different one so import I will paste this one and which come Firebase slash uh storage okay it come under storage so this is important because it will not come under the uh fire store okay because this is different feature okay now we are good now let's upload the file for example let's upload this file okay I will crop this one to this point and try to submit it okay we got a warning to message that t must be there so test title I will put it right for now and then click submit now we did not get any error but let's see the console and if you see in the console we got that uploaded a blob file okay perfect now let's go back to our uh storage and here we'll see we got a new folder called Community post see okay inside this community post we have this image which we just uploaded see perfect okay so that's what we needed got it now once we have uploaded URL we need to make sure that we will get a download URL okay because that URL we need it so that we can store it okay so you know this is very easy so here we need to write then inside that response and then inside the respon we say get download URL see like this here we need to pass storage reference so we pass storage reference do then and will be a Sync here we'll say download URL and the error function okay so inside this download URL we'll get the URL so we'll just write console.log download URL like this okay now let's test this out let's save it and we make sure inside the console we'll get the download URL once we upload it so let's click submit and if you see we get the download URL okay if I open this URL inside the browser you will see the image so beautiful right so this is how you can upload uh the image and get the download URL from the Firebase now you have the URL okay now what you need to do uh you need to add that URL to our value sorry to our form okay so this particular form so what I'm going to do I'm just here I will remove this value image because we don't need this anymore then here I will say value do image is equal to download URL okay perfect after that we'll say constant document reference is equal to await and this is for to add the document okay and if you want to know how uh to get that right here you can just type add document to Firebase see okay you'll get this this first link obviously on the right hand side you will see the different different options see very easily okay let me uh write it down for you so here a wait now you have to add the dock okay so only one dock so write add doc here we need to Define collection then the database reference which we already defined then you have to give the collection name if you don't have collection name it will create a one otherwise it will add in the existing collection comma and the value okay so whatever the value you want to add it that particular value so in this case is complete value right whatever the inside the form we posted that value will print it out okay and here if I write document. reference. ID if it's present means once we upload the data and return back this ID then we'll just console document added okay we'll message this one perfect now save this one and let's test this out so I added this T description sample description will say price I will say 56 address we'll keep empty for now and this um category now click submit and if you see at the bottom right we got the information that document is added okay now let's see whether the document get added or not so let's go to this Firebase database here search for the user post if you see this new collection is get created the new document get added and with all the data which we added just now so including the image as well see okay but there is one thing is missing the question is how can we know that how which user posted this particular post okay so for the that one we obviously need the usern name the user image obviously will keep it there and the user email address okay this is very important so to do that what you have to do we need to get login user information okay and it's very easy to get it so here you need to write constant destruct user is equal to use user this use user is the hook from this clerk Expo okay like this and save it now let's go back here and obviously inside the value you can add that one okay so obviously I will add some more parameter like user name user email comma user image okay so this value obviously I will put the empty like this okay if it's up to you how you want to handle okay it's not mandatory to put it there only now once we have here I will just Define value do username is equal to you get you can get from user Dot and you will see a lot of option okay so here we have option called full name then value do user email is equal to user dot uh here we get primary email address. email address okay this is how you can get the users email address and the last is now and then last is value dot user image is equal to user dot I think image URL okay so this three value we have to add it in our form okay while adding the document inside the fir store okay now let's save this one and now let's add a new form so click the image so I will click the image in this case I will pass this one crop it I will say new BMW car sample BMW car description price I'm going to say 30 30 lakh then address we'll keep address is uh sample address I will put it right now and last is the category which is C and click submit okay leture to see this uh okay now it's seeing document added let's go back if you see second document is get added and it has a address category description image price title along with the user email image and the username see how beautifully we added okay now obviously this image is the user profile image see so beautiful right so this is how guys you can add the document okay now obviously there are a lot of things we need to do first once we added we have to make sure the submit button get disabled we are we will show some kind of loading that okay your post is getting added and then everything get added we will show some uh toast message alert message that okay your post get added okay so for that one let's go down to our button section okay but before that let's add one state you can call constant loading comma set loading okay is equal to use State and initially we'll make this as a false okay now what you have to do whenever user click on on submit button we'll set the loading value to True okay and when it's get uploaded we set the loading value as a false okay and obviously uh once it's loaded right we'll show the alert message alert. alert here we show the message success and here I will say post added successfully okay like this and save it now whenever we click submit obviously post get will get added then uh let's get down to this touchable opacity okay so here we need to add the activity indicator okay I will tell you what is activity indicator but before that um let's add some uh styling so here I will say if loading is present okay then I'm going to show the activity indicator okay and we pass the color as a white color okay and end the so activity indicator will be like a spinner okay and then if activity loading is false then we'll simply show the text like this okay also I'm going to add some styling here so I will add a style okay and here I will say background color is if loading is there then will it will show the background color as hash CCC which kind of blue color and then otherwise it will show oh sorry this is the gray color okay if you is there otherwise it will show hash 00 7 BFF okay so this is the blue color then we'll give some padding which we already have I think yeah we already have padding then border radius we already have then align item and this justify cont everything is good I think and uh here I'm going to add one more value called disabled and we'll say if loading is true then disable it okay so user not able to press the button and then save it now let's test this out so upload the image oh so this is BMW let's add a BMW again 2023 BMW X3 one year old BMW okay here I will say 45 lakhs address keep it blank and this car okay now let's submit it and if you see how beautifully loading is showing see okay now once it's added we got this beautiful success alert message that okay success post added successfully and say okay beautifully it's get added in our database you can go ahead and check it out sa okay obviously we did not add address but all other things are there okay perfect so guys this is how you can add the form with the uh and integrated with the Firebase so that all the images and the forms will St store inside the fire base okay also we added this beautiful activity indicator so that we us the submit the button we show kind of activity an activity loading animation and once it submit we we are showing the alert box okay so this is how simply with the help of formic Firebase we added this beautifully form okay so guys until this point if you have any question any doubt let me in the comment section so now we are going to design our home screen so for this one uh we will mainly focus on displaying header with the user information the search bar slider category and list of latest item that's all data we are going to show and if you see on the screen this is our uh header section it include the user information and the search bar then we will get the slider from the Firebase okay so it's like uh if you have any uh advertising slider or some latest item slider that kind of slider we can show it here okay and it's a horizontal scrolling then we're going to show the category okay so list of category we're going to show uh which we already have right and then the latest all the latest item uh who post it on our application okay so that list of item we will show it on um home screen only okay so let's go back to our application and this is our home tab okay and right now it's a blank empty so let me open the home screen tab okay over here and inside here obviously we going to add the header so first let me add the class name and we'll give some padding of 10 okay so like this maybe let's give eight okay yeah now let's go back and inside the apps folder we going to create a new folder and we can call it as a components okay so now inside this folder uh we will create another folder and we can call it as a home screen okay so all the component related to home screen we will keep in this particular folder okay and inside this folder now we K caller. jsx okay obviously it includes the search bar as well and uh then I will also include the categories. jsx and the latest item list. jsx okay so these three uh component I added here and the categories okay so I added the default template as well now let me close all of this thing because we are right now focusing on the header section now once you add this component you have to make sure you will display it on this home screen right so that you need to add this header uh component inside the home screen okay so let's go to this home screen and here you just need to write home screen okay oh sorry not home screen uh header so it's a header okay like this and save it and if you see this header is inputting from this component folder slom screen/ header okay and right now on the screen it's showing header because inside the header component we just have text header now let me clean this out so first thing as I told you we going to show this user image this is the user image okay so this user image we need to show first okay and then welcome text and the name of the user so in order to get the user information you can get it from the constant user is equal to use user okay so this is us user from the clerk Expo now here we'll write image dot so make sure to import this image from this react native then source and obviously inside this you have to write URI because we are fing it from this URL okay we are showing the image from the URL so that's the reason now inside that you have to write user. image URL okay and in the tag now here you need to give the class name because we uh you can use style but right now we are using T in CSS so I will use style so write write the rounded to be full we'll give width um maybe 10 height 10 and save it and let's see how it look see how beautifully it's showing okay I will just increase little bit more like 12 let's see how 12 is looking perfect okay uh so right now in the home screen right we give the padding so I will give padding uh padding actually we padding vertical uh Y axis sorry we'll you padding Y axis to maybe 8 and padding x-axis to six okay like this see next once we have the header obviously we need uh the username and the welcome text so that we added the view inside that I will add the text and we just simply say welcome okay then another text for username so user do full name okay it will give username see now let's bring everything in one line so for this uh view we add the class name we'll add the flex and we'll add the flex row like this see then we'll make item to be in the center and then I will put the Gap maybe four okay oh sorry gap of four like this maybe two is fine okay now let's add The Styling to this one so for this view I will add the class name We'll add a text of 16 pixel and for this one I will add the class name is equal to text of 20 pixel like this okay also I will increase the font board like this perfect okay good now it look good to me now next as I say we need to add the search bar okay so after this uh not after this view but I will wrap everything in one one View and obviously this particular is for the uh you say user info section and another section is for search bar now inside here I will add the uh view actually and inside that I will add the text input okay here I will add the placeholder we will call search okay and if you see the search is showing now obviously we'll add some class name so add the class name here I will add padding of two um border not border but um you will add background first background white the Border radius or maybe we can say rounded corner to be full like this see okay I will add padding X to5 something like this okay now let's give margin from the top so for this one I margin from the top to three maybe five perfect okay me change padding perfect now obviously here we need a search bar icon so it's very easy first let's go to this Expo icon here you can um search for the button I preferbly use I icon okay so copy this import statement first and then this component for the icon so here I will keep it o keep it like this okay let me open it and if you see this is search bar icon is showing right now okay obviously we'll change this color and uh also I want to bring this everything one line so Flex Flex row okay I will make item to be in the Center then we'll give gap of three two maybe so something is mismatched but that's fine we'll check it out oops margin five is okay oh that's right and then uh I will add the class name margin right I will say three I don't know why margin is not getting play but that's fine we'll check it out later now here we need to change the color of this one okay so here I will instead of black I will just give the gr like this okay here I will change this and let's put it here let's see how it looks left yeah that's good and then if I click on it this see it's everything is working but if you let's see how much okay so it's full screen that's fine that looks good good also I'm going to change the text size of 20 pixel okay oops maybe we'll make 18 okay so if you see it's look good now perfect Now search bar is also ready okay now to make this search bar work right means uh when user type something right we need to save the uh users input right so we have method called unchange text okay and if you see let's write the event e and we'll console so whatever the uh user write right it will console uh in the terminal so if I type something oh sorry let's type something here and if you see we getting the result okay instead of I will say value and the value okay so whenever we need it we'll add the state and we'll pass back to a parent child so that user can filter it out okay so right now we'll keep as it is so this is how you can can uh add the header section if you have any question any doubt let me know in the comment section and one more thing right now if you see the color is little bit gr okay so you can obviously update it okay so inside the home screen you can add the background color of white okay like this obviously uh it's up to this point so make it flex and okay Flex one see okay now whole screen is of white now okay and then for the this header section right obviously the header is white you can add the Border okay so for example if I want to add a border of color blue and little lighter like this okay oh uh it's not get added let me check a let's add a border of 2 pixel because we need to give width as well okay to that border say okay and here I will put little bit lighter color see like this here I will give one pixel and and let's see 500 got darker like this yeah see okay so this is how you can update on your own you can modify your uh design or add the style depends on your design here we added this uh header with the user info and the search bar now it's time to add the slider so for the slider I already added this collection name called sliders okay and these are the documents I added so it only contain the image URL see like this okay so you can find the image on the Internet or you can add your own now let's go back to our application and over here I'll create a new we already have slider okay we don't have slider component so we'll add a slider component jsx and add the default template like this now make sure to add this in uh component uh inside this home screen okay so I will add the slider component here and we'll say slideer like this okay and save it now on here if you see the slider text is showing next uh let's go to the slider but before that let's F the slider information okay so here I will call constant get slider sliders and over here obviously we need to get it from the Firebase so we need to define or initialize the Firebase fire store okay so as you know from the documentation the because we already faced uh the uh category right same way we have to fit it here so obviously we need to initialize this fire store so let's initialize the fire store like this okay make sure to import this file store and the app as well see like this okay then uh in order to get the data okay so you have this uh line of code you can just copy or you can write it on your own but I will just copy it here because we already have make this function a sync and here I will just write use to get sliders for home screen okay and now once we have this uh query we have this get data make sure to import this get docs then collection then we pass the Deb and then here we need to pass the sliders okay sliders information so if you see this is the collection name we need to pass so in this case is capital S slider then query snapshot for each and it will return return document information now obviously you need to call this get slider inside the use effect so whenever this component get launch it will get execute like this okay and save it and now if You observe uh this particular console you will see 1 2 3 4 four Images uh slider images is showing on the screen because we just consoling this data okay now let's define one state called constant slider list comma set slider list is equal to use State like this okay now we need to store this uh information so say slider list similar way we did for the category right so obviously we need to push the data so I will say slider list um and here we need to add the dot dot dot slider slider list comma doc do data oops doc do data like this okay let's save this one I will come in this code or let's remove this code and save it oh we got error cannot con undefined value to object so we are getting error that cannot convert undefined value to object because slider list we did not provide the default value so we'll provide default value as empty save it and if you see the error is gone okay now pass the slider list to the slider component so I pass it here okay and save it let's go to the slider and accept it here as a prop slider list and save it next we need to it this value and to for the iteration or to display the list of uh images value whatever we are going to use flat list flat list is one of the powerful component inside this react native okay in order to display the list of information it's very easy to use let me show you how so here first Define the flat list and this flat list is utting from this react native okay then here we need to provide some of the value to this flat list first is data what data you want to iterate so in this case is slider list then next we need to render the item okay to display the item we need to define the item the each item from the slider list and then the index which hold the value 0 1 2 3 and then the arrow function like this okay then add a view inside view let's display the index value only okay inside the text obviously we need to display so we'll just display index value for now for the uh example so if I save it if you see right now it's showing 0 1 2 3 4 5 all the value right because index will hold the value 0 1 2 3 depends on the how much how many uh in length of this depends on the length of this particular list okay but the question is right now inside the slider uh collection we only have the four documents and why it's showing the eight documents Okay the reason is inside the home screen right when we get the data whenever we save it right it getting added in existing slider list if you see because of this statement right but we have to make sure here our slider list will be empty every time when we are calling this G slider method okay before push pushing any new data so here I will push it like this save it and now if you see we'll get only four item every time okay not every time but oppos depends on the how much data we have obviously we are not duplicating the data that's the reason we we added this uh slid means we are making sure to empty the slider list now let's go to the slider and here instead of text let's add the image now okay so I added the image from the source sorry react native and here we'll add the source obviously we are fetching the image from the URL that's the reason we are providing URI item do image okay now obviously here we need to provide width and height so class name we uh we'll add a height of 200 pixel for example and let's save it let's see how it looks on the screen okay so it's smaller I okay image yeah and if you see right now it's showing all the images perfect but it's showing vertically we want it horizontally so flat list has a property called horizontal and just you have to provide uh value as a true okay and if you see right now it will add the horizontal but right now it's not showing you because we did not give provide the width okay so here we need to provide a specific width for example let's provide the 330 pixel and save it and now if you see we have the width and if it is scrolling very beautifully see you can able to scroll it right perfect next we need to give or we will add the uh uh styling to this one so for example let's add the margin right to 10 10 is too much actually let's add a three okay then we'll make the rounded corner to be large like this and also I will add the object uh cover let's say cover or maybe say contain let's see how it looks okay perfect and if you see all the slider is showing beautifully perfect let's give margin top so for this one I will add the class name will add the margin top to five like this okay and now we have beautiful slider information now the thing is you will see this uh uh the slider bar right the scrolling bar we don't want that one so you can remove it by using show horizontal scroll indicator and just make it false okay and if I save it now you'll you not see any that scroll bar anymore okay so I updated this image little bit and the height as well okay so it looks uh good on the screen so next obviously we are going to get the all the categories and then we will display it on the screen now it's time to fade the list of categ okay and this is how we are going to display the list of category uh then as we in the last section we completed this slider so let's tick mark it and let's go back to our application now first thing we need to do is to F the category list as we already have this uh code ready okay because we already fac the category list inside the add post screen I'm going to copy the existing one so let's copy this one and paste it in home screen okay now obviously we need to Define this uh category list state so let's define it here set category list is equal to use State okay and make sure to pass empty array as a default one and let's call it here get category list now once we have the list of category we need to pass it to our category list uh component here we have this component okay so I will just write here category list and we'll pass category as a component now here inside that we need to pass category list as category list and save it now let's go to the category accept it as a category list category list and save it now similar way that we did it for the slider right uh with the help of flight list we iterate this list so let's use the flat list but before that let's add one text and we'll say categories save it then we'll add the class name We'll add font bold and uh text of 20 pixel like this okay I will give margin so let's add a class name margin top to five perfect so here instead of make I will make it three and save it now let's use the flat list so here I'm going to add a flat list for that one let's provide a data as a category list then we need to render the item item comma index and the arrow function like this then add a view first thing let's add the image to show the category icon so let's add a image so we'll use Source URI and item dot icon okay here we need to give the styling so let's add the TN CSS class like width of 40 pixel height of 40 pixel okay and let's see whether it's coming or not so it's not coming because let's go to the home screen and okay so if you see we by mistake said the calling different method so it's we need to call get category list here let's save this one and if you see now we got the list of categories perfect now obviously we want this category in one line okay and we need to divide uh in four different column so here we have method called column okay call number of columns and here you can provide number of column you want to display so in this case I'm going to give four and save it now obviously it will give uh error not error but it will saying that okay once you change the number of column for the flat list you have to restart your application so restart the application now if you see uh flat list has now four column and that's the reason the next um icon SC Ender down right but it's not fully stretched or uh it's not completely uh uh getting is providing all this um screen size right so to uh to do that right add a class name add Flex one and save it and now if you see stretch to the full screen perfect then uh let's add the item to be in the center justify content to be Center let's save it and it will be in the center now then after that we need to give uh the border to this image okay so we do some padding of two let's see how it looks then we add a border and uh here let's go border of one pixel save it let's see how it looks uhhuh now here once I added one more icon okay and so that will be eight icons and here let's add a padding of two then we'll add a um border of one pixel okay then I will change the Border gray Maybe be 300 then I will add margin of one okay and then I will add height of 18 pixel like this see okay then we'll make border radius or rounded we can make it rounded to be large see okay so it look beautiful now next um I going to add the title of each of this category so let's add a text We'll add item do name like this okay so obviously we'll change the class name text of 14 pixel let's change to 12 okay and that's look good you can give some leiser margin top to maybe two one like this and see how beautifully category looking on the screen okay so obviously you can modify or you can add the more effect depends on your requirements but for now I think this look good to me now obviously we need to make this a pressable right when you click on this it's supposed to press it so that we will change this view to touchable opacity and this one as well and make sure this touchable opacity get you are importing from this react native now save this one and if I click on it see now it's clickable okay now here you can add the view all button but right now I'm keeping only this eight category okay but if you want to add more category you can give view all button or you can show it here okay and if uh you want I let me show you one more thing for example if I put the index is uh less than equal to for example seven and an operator okay just for example and let me oh not seven let's get six okay and see how create automatically adjust the size okay so you don't need to do anything it automatically adjust the size depends on the on how much how many category you have see okay so this is how you can um modify it but right now we'll keep it as means whatever the category we have so that it will look like this so next if you see we need to design or we need to get the list of all the post okay so obviously what I'm going to do uh for this example I'm going to add some more post from this add post component so that we can fet it and we will show it on the screen if you have any question any doubt let me know in the comment section so in this small section what we are going to do I'm going to little bit update this styling okay just to look much better so for this category right uh I'm going to add a background of blue 50 okay and this is how it looks see and Border obviously right now we applied GR I will change to this to Blue and we'll make 200 see like this okay same thing I'm going to apply for this uh search first uh let's go to this header component where we have this search bar and then over here I will change padding to two Okay and then I will change uh color of background I we add background color right now I think we added white color right so we'll change to view 50 and then uh I will change the background to 200 maybe something like this see okay maybe make it 300 just to make darker and this one I don't know this is I think let's give some uh yeah this is fine okay perfect now we have the beautiful search bar and everything if you want to change color of this uh search icon you can change to maybe blue blue is quite dark let's Sky I don't know sky is not there but let's make it gr and keep it as it is okay so now our uh screen must look beautiful and little bit attractive as well so that's the change uh I want to show it okay now we are already completed this category section and now we are moving to this latest item section where we are going to show the latest uh post which is uh added inside of Firebase file store okay now before that one uh let me walk through go back here okay and um if uh while adding the post right if for example let's say you want to add the address right the keyboard is opening but the address text input is going back and you are not able to scroll it see okay this is issue while uh typing or something like that okay so to fix this issue what you can do you can wrap this uh view in inside the keyboard avoiding view like this okay this keyboard avoiding view is importing from the uh react native okay this is very important and then once you wrap this one you have to change this middle View to a scroll view okay so that you can even scroll that one okay and save it now if I try to add the address okay see the address come above this uh keyboard now or you can even scroll it see okay so that's the reason we added uh this keyboard avoiding view so it actually means to avoid while writing uh any text input okay so that's the reason we added now let me close all of this and here I added some of the uh data so here I added some of the uh data for the user post okay here one more important thing why I want to show while adding the post let me open here so when we we are adding a post right we are adding all this information but we have to also add a created at uh date okay so here what I'm going to do I will add one more field called created at okay and here obviously we need to add the uh the the created time right so in order to add a time you can uh we we will use one Library called moment okay so just add the moment Js so this Library will help us to format any kind of date okay so let me show you how so first install this um particular Library like this save it okay or that couple of ways you can um format that okay first let's uh inside the add okay over here okay just We'll add the time standand for now okay so what I will do new or sorry uh we'll say date do now okay so it will add the current time stat and later on we will convert it okay but I I was forgot to add the uh created ad so that I just added this uh 5 for now but now from the next time it will it will have the proper uh time uh stamp format okay so we'll update it later on so don't worry about that one just to make sure that you can add this created ad while adding the post now let's go back to our uh list item list okay latest item list sorry okay so make sure to add this latest item list inside the home screen so we just add latest item list and here we'll add it like this okay and save it now if you see on the screen it will show this latest items list now obviously we need to F the the latest item list okay so uh I will say constant oh sorry constant here constant get latest item list is equal to async and the arrow function okay now here similar kind uh if you copy this uh code is similar okay we don't need to do but let's write it constant query snapshot is equal to await then we have to write get docs okay from which collection that collection name we need to write first we have to provide the database reference and then collection name so in this case his collection name is user post okay just to make sure let's go back here and if you see this is our collection name then once we have the collection name just write query snapshot do for each and Doc Arrow function and then we have to set that value okay so what I will going to do let's print it out for now so console.log docs comma doc. data okay let's save this one make sure to call this get latest item list inside the for Loop sorry inside the US effect and let's see the console okay so if you see we have a bunch of data see docs and lot of ramom data see okay perfect we are getting all of the data perfect now once we have this data let me say save it in one state okay so I will Define one state and we can call it as a uh latest item list set latest item item list okay and here we'll just set it set latest item list is latest item list Arrow then dot dot dot latest item list comma doc dot data perfect okay now we have this latest item list obviously uh we'll make sure while uh calling this method right we will make sure that it will clear the latest item list like this perfect okay now let's make sure to pass it here so latest item list is equal to latest item list and inside the latest item list we'll accept it here as a props perfect now next we will add the uh text here and we'll call it as a latest items like this okay now obviously I'm I'm I'm going to give some class name we'll say font bold and text 20 Pixel Perfect and for this one I will add class name and we add margin top to three like this perfect next we need to iterate this list of latest item okay so obviously for that one I'm going to use flat list so flat list for that one let's provide the data so for that dat data uh we need to add the latest proide we need to provide latest item list then render the item item comma index and the arrow function okay here we'll add a view for now then inside the view couple of things right we need to add but make sure uh you are getting the data so what I will do I will just write uh we just print the index okay and let's see with that we are getting the index C okay sounds good next first thing we need to do is show the image okay so let me show you this is the uh boxes mean in the two column we need to show our post okay so first thing let's add image source and inside that we need to provide the URI and then item Dot and now in this case we need to show the image so if I go here see the image is here right so item do image we need to add okay then add a styling to this one we'll say a width of maybe 3 pixel and then height of 260 pixel and save it and this is how it looks okay it look quite weird and that's completely fine guys okay and if you you see right now only this below section is cling not the complete section okay we'll fix it out L uh in a moment but for now if you see uh scrolling look like this now what we have to do obviously we want that in two separate column okay so here you can add the number of column which is two and then save it obviously it will stop the server so just uh restart it again so whenever you change the number of columns property for the flat list uh you have to re uh refresh the screen now I restarted the app and if you see this is how weird it looks right but it has a two column now so to fix this issue for this view just mark it as a FX one okay and now if you see we have proper two uh images okay now obviously I'm going to change this width to full and then uh we'll change this height maybe we can say 160 pixel and save it and if you see now it's look properly okay obviously you can uh change the layout how you want okay it's up to you but for now I think this is fine uh then uh for this particular view I'm going to add a margin of two okay and uh later on I I'm going to add more detail but for now let's keep that one and let's add a view here inside that the first thing I'm going to show the title of that particular uh what is say post okay so which is item. title okay now you see item. title is came now obviously add the class name and then change the Tex size to maybe 16 pixel okay like this maybe let's say 15 then add the font to be bold like this perfect okay now obviously for this class name I'm going to add not to add margin because I'm going to change theay out letter a little bit differently so that's fine we'll keep as it is just add margin top to two yeah that's look good next we need to show the price okay uh what is the price of this particular uh uh item okay so I will add the in a dollar okay and then item do price like this see okay now obviously we add the class name is equal to text of maybe 20 pixel because price I want to show a little bit bigger and let's make it font bold and then uh we'll change the color to maybe let's say change blue color something like this see how beautifully it's showing right now obviously it's not scrolling okay as I told you in the beginning so to fix this one let's go to the home screen and change this view to scroll sorry uh yeah scroll View and let's save this one and if you see now you can able to scroll it okay and now you see the beautiful pricing as well okay now obviously you can add more details if you want for example who posted it or when posted it but keep the simple I will say okay so once you add this one uh let's do one thing now let's add some border and some padding so there are a couple of way you can do that you can make the padding and then add the Border okay or just you can add the border to this one so let's say we can add a padding of two okay and uh I will change this height to 150 maybe 140 yeah and for this image I'm going to add a border not border but I will make a rounded corner to be large like this okay and here I will I will put the rounded corner to large but I'm going to add border of one pixel like this see okay now obviously we'll change the color of border so border and say slate 100 maybe 100 is too light 200 yeah and that's I think okay okay now obviously you can as I say right you can update on your own how you want okay uh let's add a background of blue 50 let's see how it looks and it's not look good to me so I will keep as it is like this okay now we have this beautiful uh item list so here one more thing I'm going to show is here the category in which category is belong to okay so I will show above this title that will be I think good place so I will add the text and here I will add the item do category okay like this see and obviously for this one I will add the class name then we'll say uh text of blue maybe dark and then I will add the background of blue oh sorry uh maybe 200 yeah that's look good and then I will add a padding of two oh padding of one is fine and rounded I will make it full like this okay and also padding x 2 three here um I'm going to change this little bit so let's add the font size so text of maybe can say 12 pixel okay like this and then padding of it two and also I'm going to width of maybe 100 pixel maybe 80 it is fine and just if possible we make text Al the center yeah okay and now let's give margin top so margin top to two margin top to one is fine okay and if you see it look good to me okay only thing is you can put it down okay let's add let's replace this text from here to maybe after price and let's see how it looks I think this is look good okay only thing that I'm going to change this little bit uh we'll make pading of 2 pixel and obviously I'm going to change this text size to maybe 10 yeah and we'll we change the we to 15 not 15 17 yeah and now this is much more okay okay perfect now we have this beautiful uh item list okay and obviously it will uh if you have wider screen display right it will autoally take that kind of layout okay it will not disturb your beautiful layout because we use this flat list with the number of column two and we mark this view as a uh Flex okay now make sure to this is all item are touchable so I will replace this view to touchable opacity just to make sure that this is now clickable okay up not here this one and if I click on it see now it's clickable okay perfect everything's look good to me and guys this is how you can face the data now only thing that I want to show here uh to get the latest item list right here we added this snapshot and everything just to fing the data okay and this is the way that we simply fing it but there are another way not another way but we need to face depends on the way uh where created ad will be in the uh descending order or ascending order okay so you can just search it here and you will find it uh with the condition so here on the left hand side if you see you have option called order and limit the data okay you can limit the data or you can order the data by ascending order or descending order okay so if you see this is the best example okay where it show the order by and uh you can use this one okay so let's try to use this one now in our um code we use this um get docs and qu snapshot to iterate it okay so simply here what we can do you get you comma and we have option called order bu okay and then give the name of the field which on which you want to order buy so in this case is created at and then you want descending or ascending so select descending and then save it okay so right now we will not change anything but uh this is what the descending order will look like because right now the date is everything date all the date is similar okay so that's the reason it will look like this so I hope you understand how we beautifully added uh the list of item okay and uh if you have any question any doubt let me know in the comment section and uh if you did not subscribe to my Channel please do subscribe because there are lot of things we are going to learn next uh in upcoming SE uh sections so please press like buttons and the Press notification Bell icon so that you'll get a latest update from me so now what we are going to do we in this section we are just making the reusable component for this particular item item list right so currently inside the flat list uh when we are rendering the item we are just uh add the all the code inside this flat list okay so instead of that what we are going to do I will create a new uh component called item or List we can call it as a post item dot jsx okay and add the default template so whatever the code we written inside this uh flat list we'll just cut from here and then we'll paste inside the post item like this okay make sure to import all these touchable opacity image and I think that's all okay and then we'll simply pass the item each item to this post item okay and inside the latest item we will say post item and we pass item here like this okay let's save this one let's save this one and if you see nothing get change the reason is we created the another component for the Post item so that we can reuse it in some other places for example in the explor right we want to show the list of item we can use it there or whenever we are open any category and want to show the list of item we can use this particular item instead of creating a new item every time okay so that's the reason this reusable component uh can be use at the different places okay so that is the use of that particular component or or uh destructuring your application into smaller component so that you can re reuse it later on okay so this is simply we can uh add the new component for the list item so that we can reuse I hope you understand this one now in this section we are going to create a new page and obviously that for that one we need a new navigation okay and in that one obviously we are going to show uh the list of uh item depends on the selection of the category okay so for example if I select the furniture okay then new page will open and it will show all the listing which belongs to the furniture so for example these two uh the tables are belongs to Furniture so it will come in that particular page okay so let's go back and now we need to implement the stack navigation okay so stack navigation will be like one page on the top of other page okay and we can navigate from one page to the other screen so let's go to this navigation uh folder and create a new navigation called uh home screen stack navigation. jsx okay and add the default template like this and save it now in order to add the Stag navigation just go to this uh navigation and here if you see we have the option called stack now if you see right this is the example if you see the example this is how it looks like and if you scroll down you'll find this example okay so first thing we need to do to install this tag navigation Library so obviously uh for each of the navigation type we need to add the dependency and uh obviously we are using Expo so we need to add this gesture Handler it's not mandatory but it's good to have okay and then I think we have good to use it now so first thing we need to do is to add this tag navigation okay we have to um Define the stack navigation so let inside the home screen uh stack navigation let me close this window now so over here we'll Define this one okay then I will remove this and we'll just say oh make sure to import this tag Navigator see okay and then Define the stack okay so it's similar like the tab navigation mean that the Sy tax I'm talking about the syntax syntax is similar okay so stack. Navigator and inside that we have to Define stack. screen okay like this so this is very important now now this is the home screen right and this home screen we need to Define because we are we are creating stack navigation for the home screen when I click on any of this particular uh category right we need to navigate from once this screen to the other screen right so obviously first screen need to be a home screen so we'll give the name home and then uh we'll say the component we attach the component called home screen stack sorry not this one home screen uh this particular home screen page then another page we will create so inside the screen folder I will create a new page and we'll call it as a uh item list I will say dot jsx okay or we'll say category just say item list that's fine I think okay add the default template save this one and then create a new stack do screen we'll say name and in this case I going to say item list like this and the component name I'm going to give item list which which the page just we created right and save it okay so nothing get changed because we did not add this tag navigation anywhere okay now go to this tab navigation and for the home right home screen because we want to add this tag navigation for the home screen here we going to replace here with this uh home screen tag navigation see okay and then save it now we'll see the change here on the uh application you will see the change and yeah let me close this one here if you see the uh the screen name is similar so that's the reason we got that warning I will show you but here also the tab the header is get getting added okay and we don't want that header actually so you can uh you can remove that header okay so let go back to the home screen there are a couple of way as I um explain earlier you can remove on the screen level as well okay for example in this one we will give the option and we'll just say shown header header shown sorry make it false and boom it gone okay now as I say this home name and on the tab navigation and this home screen navigation is similar so here I will mention Home tab home now home now okay it doesn't matter actually and boom nothing get changed now and that warning message is gone okay perfect now we are almost pretty much ready with this navig tag navigation and now obviously if you want to show the example let's go to this uh option called uh what is there oh inside the component we have this post item right where we we have this touchable opacity added to this each of the item and for category also we have this uh touchable opacity added right so what I'm going to do inside the categories first thing in order to jump from one screen to another screen I'm going to add the constant here we'll say navigation is equal to use navigation and if you see this use navigation is importing from the react navigation native which is the uh react navigation hook and now this navigation we will use it to go to the next page for example we'll add the on press event to this one and we'll make a function call and we'll say navigation. navigate like this okay and here you need to give the name of the page where you want to go so in this case obviously we are jumping from the home screen so and we want to go to this item list so let's just write item list and then save it okay now if I click on any of this furniture for example or any of the category so for example if you click it see it go to this next page okay so beautifully correct now obviously if you want to change the name of this item list you can change it or uh you can remove this header if you don't wanted also um we need to pass the which category you selected to this next page right so here you can just write and pass like category and the name of category so in this case name of the category will be item. name okay which is the name of the category which we pass and it will go to this particular uh home screen okay so this is how obviously you can add the label here as I told you before right you can just add the tab not tab but okay so it will be in the options now here you can just give the title sry header title as a prop there is a property called header title so let's write header title and then you can give the title for example list and if you see Ni change to list okay but what if you want to give the category name over here okay that also you can do it so for that one it call uh if you go to this particular documentation and the you can config configure the header bar right so here as we set the header title right just to write the title but if you want to set the parameter value right this is the best example so I will copy this one okay it's quite easy so here just add the let me add this option completely okay and it will check the route okay and from the route we'll get some information so let me show you what it actually return okay so let me cut this and we'll just console it and save it now if I save this one and if you see inside console we got the key we got the name which is the current uh page name then inside parameter this is the parameter value we have this category called furniture and then path path is undefined okay and this key is unique for every um screen okay so obviously we'll replace this one and obviously if you want to provide the title which is inside the route params and here obviously it will be a category and save it and now if you see it's called Furniture okay let's go back and select the other one for example hobby see it come to hobby if I select Electronics it CES Electronics okay so this is how we can able to uh easily um configure the title now you can even change the background color of the header okay so let's add the background header so here we say header style okay and inside that you can add the background color okay so in this case I have this color I will paste it and let's save this one and if you see the background color is changed okay now obviously you can change the text color as well so in order to change this uh header color obviously we want white so we'll add header tint color Okay obviously you have a lot of option so add that one and just make white so Ash FFF and save it and see okay obviously the everything uh you will get it from this documentation if you see right we have heer style we have Herer tin color you can give Herer t uh typ style as well where you want the font weight font sight everything you can control it guys okay that's the reason react navigation is quite powerful you have all the customization which you can do it okay now we have the beautiful header section if I go back it will go back to the this particular screen okay perfect now here uh we that's all for this particular section that we added this tag navigation we customize the tag evation according to our needs and uh in the next section we're going to display all all the list belongs to that particular category now in this section we will uh build this particular page where we are going to display the list of item depends on the category selection so once we select any of this category right we going to uh right now we are navigating to this particular page and here we going to show all the item which is belong to this particular category okay so let's go back to our application and inside the let's go back inside the item list okay where we are going to f it first we'll F the uh parameter okay so whatever the value user send so we distruct the parameter we use route and inside this route we have this category name okay now let's uh print it out so that you will get to know so console.log and in that I will print the params okay and if you go back and check here if you see we got this category called Furniture okay so obviously if you want to print only category so we'll write C par. category and then we the furniture perfect then we need to get uh the item list depends on the category selection so I will write a method called get item list by category okay and this will be a sync now here I'm going to write a query okay is equal to we'll write query okay make sure to import this query and inside that we'll write a collection okay from which collection we need to get so obviously we need to refer the database so right now just uh add the database instance here DB is equal to get fire store and provide the app okay now once we have passed the collection and DB reference then we need to pass the name of the collection where we want to fetch so in this case is user post comma and we query like this okay so inside the we query we need to pass uh on which field you want to F so in this case we want on category then if you see uh we have to provide the uh the signs whether you want equal to not in AR contain lot of obviously if category is equal to we need to get it and then the value called parent. category okay so depends on the category which we select then this will query will get uh depends on this collection and the where condition okay and then we'll use get docs method so constant I will say snapshot you can say cury snapshot whatever you want to write the is equal to await get docs okay obviously a docs not Doc and then we need to pass this query which we return over here okay then obviously we'll use snapshot. for each to print the item so data and we'll just console not data here need to be we write doc doc dot data like this okay now let's call this method over here okay but we have to make sure that whenever the parameter value is there then only we want to execute this particular method so I will passing here and we'll pass and and operator like this okay only when the parameter value is there then only we will execute this particular method so let's save this one and okay and if you see we got this two value which having category Furniture perfect now let's save this uh all the response in one state so I will write constant item list comma set item list is equal to use State and initially pass empty then here we'll just say set item list item list because we want to add with the existing value right every time it will return only one in one uh uh response right obviously if I had five this conso five times obviously same thing we have to do it here because we want to push the item with the existing one okay so item list we'll say dot dot dot item list comma do do data like this and then save it now here you we can use the existing component which is the latest item list okay so it's very easy just add the latest item list and to this one we need to add the latest item list as a uh data okay so in this case I will pass the item list over here and then save it and if you see we got this letter item list over here obviously we need to clear we have to make sure that uh every time whenever we are pushing the new data our set item list is empty okay so here I will just pass so that will not get a duplicate data and save it now if you see we got this information okay now the thing is we need to change the latest item list this particular heading right so here we can pass the uh title okay or we can say heading and we can pass the value whatever you want okay it's up to you you can pass it or if you don't want it you can just uh pass it empty okay so uh let's pass empty in latest item list I will get it as a heading over here okay and then instead of this lat item we'll pass heading also we have to make sure uh where whereever we use this letter item list there as well we will pass that information okay so let's save this one and inside the home screen we use it okay so here I will pass the tire heading now so heading and we'll say latest items okay so that on the home screen you will see the latest item here okay oops perfect so this this is how you can add now for example if I open car category C you get the car information okay now here you can uh write some uh title if you want it's up to you uh what heading you want for example uh latest and you can say latest let's say latest uh item or you can say latest post okay here we can use some padding so I will add the class name we add padding of two maybe padding of three of padding of two is fine to this one okay I think that's will be good mostly I will keep empty that's look good to me okay perfect so guys uh that's all for this particular section that we can able to open any category and then we can able to add that one now if you see right there is only one uh uh listing that's the reason it's showing like this okay but you can modify it so depends on the number of result right uh it will give you the value okay and now if you see in this case for example let's go to clothing there's only one that's fine if I go to the property there's nothing right so here you can write the message here okay so what I'm going to do I'm just writing item list is available then show this latest item list otherwise you can show the text and which contains uh no post form something like this okay okay so here I will just write length is greater than zero okay and here I'm going to add this class name we'll say padding of five we say text of 20 pixel and text of the color something like this okay I will make justify Center or U text all Center let's see yeah and here I will say margin top to 24 okay that's look good so this is how you can show now for example if I go to clothing oh clothing clothing there is a data let's go to uh electronics also have data car also have data let's go to job and if you see no post form okay so this is how you can handle uh if the data is not there so I hope you guys understand how we implement this beautifully category section and depends on the category we Face the data now the next what we are going to do on the click of this any of these particular post we going to show the all the details okay who posted it the description along with the you can have option to uh message to that particular user so everything we'll see in the next section so now in this section we are going to show a item detail page okay so what once user click on any of this item we going to show the complete image with the title description of the particular uh item and then who posted this particular uh post okay with the username and user profile image and then user have option to message her or him also we will show the category name over here okay somewhere so everything will be complete detail page we are going to build in this particular section so now uh let's close all of of this tab and then we'll create a new screen we'll give the name product detail. jsx okay so here I'm going to add a new template and save it now this screen uh obviously is product Dil screen that's fine but this screen we need to add inside our uh home screen stack navigation okay so I will copy this existing one paste it here and I'm going to change this to product detail and then obviously component name will be product detail okay and then save it I'm going to save everything as it is obviously I'm going to change this option okay so let me change this one maybe like this I don't know let me clean this out so we add options inside that we add H style then tin color let me clean this out and then the header title and in this case I'm going to give title like uh detail only okay and save it now whenever user click on this item we need to navigate it okay so let's go to this uh post item and over here I'm going to add constant navigation route is equal to use navigation and this is the touchable opacity where so that we can add the on press event and then inside the on press we'll just say navigation. push push I don't know why it's need not came and then the name of the path so in this case is product detail and save it make sure this a product detail only so product detail okay and if I now click on any of this item if you see it jump to this product detail uh screen where we it's have text only product detail okay now whenever we push this detail we need to send the product item information okay so whatever the item information is uh we are passing this post item we are sending there so we'll say product and then we'll say item okay that's it and I save it now inside the product detail with the help of use router we'll get the use route you'll get that parameter information which is this uh product okay now if you want to see we can write inside the use effect just add the console.log and we'll say params okay and then save it so right now I don't know it's showing undefined let's go back click it now and if you see now we have this product okay perfect now inside the parameter we have this product information perfect now let's start implementing so first thing we need to show the image so we'll add the image from the react native we'll add a source the URI and we'll say We'll store this actually product in some State okay so it's easy to access actually so we say constant product comma set product is equal to use State and we just push set product to params do product whenever the parameters is available okay so I will add that condition and now from here we can access it product. image okay obviously we'll do class name so we'll give the height maybe 200 pixel withd will give full and this is it looks okay obviously we increase the height with 350 maybe 320 perfect now we have product uh image let's add a new view and inside this view We'll add a text which will be the title of this particular post so we'll add product dot title okay here I'm going to add the uh class name to this particular view we add padding of three yep and then here I will going to add styling to this particular text text 20 pixel font we add bold perfect okay then we want to add the description as well okay so simply here I pasted this text and he will change to description now obviously I will change this font to maybe 17 pixel I don't want the bold and here I'm going to add a text it will say description add class name margin top to three font bold text of 20 pixel like this see okay here I want to add text gray color perfect then uh below this title I'm going to add category actually okay so we'll add a text and here we going to write a category name so product do category I'm going to add class name we'll say padding of one background blue then text blue 500 like this and here I will just wrap this text inside another text okay perfect let's do padding let's try to give it here not really but make it rounded to be full so here I will just replace this text to view that will be good actually so that we can apply The Styling to this inner inner text okay and for this view you just mention uh item Baseline okay so it will look like this now for this one let's give the padding of two padding of one padding X2 and round it to be full see okay perfect it look good to now now we have this uh title we have this beautiful uh category name okay I'll just give margin top to two then we have the description after this description I'm going to add the users detail information who post posted this particular um post okay so for that one let's add another view and this view contains this user information let me write it user info and here let's add the image source inside that urri and then we can write product. user image now here I will give the class name and we'll say width of 40 height of 40 40 is too much so we'll give width of 10 see like this okay can change little bit to 12 maybe perfect now we'll make rounded to be full so it will be in the circle for this one I'm going to give style S Class name and we'll say padding of three then I will add one view it contains usern name so inside that we'll say product do username and then user email see okay so right now user IM is printing but you are not able to scroll okay the simplest way to do that is to add the scroll view so here you can just add the scroll view okay now you can able to scroll it see now let's bring thing everything in one line so for this particular view let's add a flex let's give Flex row and we'll say item to be in the center and then we do Gap of maybe three like this see now for this text I'm going to give some style so we say class name font Bol text of 18 pixel and for this one and class name we'll say text of gr color now here I'm going to put the B for this one okay who posted this one so let's add style sorry class name without border of one maybe one pixel you can say oh not here actually we want to add to complete section to this one okay then here I'm going to add a border of gray and we'll do padding of four I think we already padding right let's give margin so so here instead of Border what I'm going to do I'm going to just add the background color Okay so okay so to this view let me remove margin and we'll say background of blue but little lighter something like this see we add 100 and for this particular view I'm going to add background white so complete scroll view I add class name add backround white okay perfect now below that obviously we need a button uh to send a message okay so here I'm going to add button here we will say text and it will say send message okay so coming below this one yeah send mess so and once I add this background blue and then left we don't need this one actually and with full okay now let's make this text align to be Center I will change the color to white take y like this see okay we give margin to five two maybe I don't know why we is showing like this let's remove the width oops Yeah now it's good also we'll make a border rounded Corner maybe we'll do full okay and obviously we'll change this to touchable opacity and save it okay now user click on this one we need to send a message okay obviously right now we are using users email address okay so on the click on this send message we uh uh compose the email and then we'll open the um any application which has a email capability okay so that one we are going to add it now here just I will add the padding of four yeah just to look much better perfect now on the Press of this button we need to send email okay the simplest way I'm going to tell you here so I will add the onpress event and we'll write one method called send email message okay so I will copy this one I will create a new method over here and here we'll just write linking okay dot open URL okay and here I'm going to pass the mail to and here you can pass the email address for example in this case is product. email sorry user email okay and this will go to this it will open the email uh application uh and it will add this email ID to who you want to send okay but if you want to send the subject okay and the body that you can also send so let me show you for example if you want to add the default subject right for example you can write regarding and then we can write the product title product do title okay and the subject line we can write subject is equal to hi and uh we can write us the name here or this need to be body actually all and here we'll write a user email so product dot username comma slash n plus I am interested in this product we can typ for example this is the simple body we added okay so obviously you can add it more if you want through and here we'll just add it so for example let's attach question mark then we'll add body sorry uh the subject then and and we will add the body so here we'll say so here I would need to say subject is equal to we'll say body is equal to and then we'll attach the body okay and then save it now save everything and let's test this out so if I click on send message if you see it open opening the Gmail or any Gmail account see like this okay so right now I did not configure in my uh emulator but you can try on your own but right now I keep as it is okay so this is guys uh you can uh have this beautiful uh product detail page now you can add uh extra feature here okay extra addition whatever you want you can add a comment section also uh maybe in the next section what you can do we can add the share option okay so you just click on the share and then you will open the share option to share this part particular post to your friends and family on WhatsApp or any other uh sharing platform so and you can open and if you see everything is beautifully showing here let me go back and search some different one so if you see okay now you can if you observe right you can directly uh open it from this home screen as well okay you don't need to configure because we already configured this particular thing so even though if I let me go down if I open this one right it will open Direct this detail page without going to this uh selection and all okay because everything is there I hope you understand this one how beautifully and easily we integrated the product detail page if you have any question let me know in the comment section now in this section we are going to add a share icon over this uh header section okay so on this navigation header section we going to add uh share button here in this section we will learn how to add that one okay and then on the click of that obviously we going to share uh the title or description depends on what you want to share on WhatsApp or some other platform so for that one inside this react navigation right we have the option here called header button okay so inside that in in this documentation you'll uh simply explain how we can add the header so if you see in order to add the header on the right hand side you can directly add from the tag screen but whatever we are going going to add here right we need to connect this uh data along with this particular share button because we want to share this particular item right so this need to be on this page okay not on this navigation level so if I scroll down little bit uh you will see the option see like this so inside the home screen They just added this navigation option okay so similar way we're going to add it now so uh first thing very important that uh to the home screen we need to pass this navigation option okay so let's go back here and to this home screen uh not here to this product detail uh page we we're going to add navigation like this then we're going to add one method so we say constant share button like this and then obviously we want to add the header right okay so navigation has option so we'll add this options like this so what happen per product we pass this navigation par M okay we destring these props all the props from the navigations and then we set the option to the header right so obviously instead of this button I'm going to use the icon so let's go here and uh let's find an icon let's say share let's filter it out and I'm going to use this icon so make sure to import this uh statement and then let's copy this component so we paste it here see like this okay and then save it now let's go back okay so obviously once we have the added the share item we need to initialize this one so we will initialize inside this use effect and whenever the navigation is available then share button will uh show it on the screen see like this if you see on the right hand side we have the share button now let's customize it so here I will change this color to white and then I'll give class name or let's add a style simply and we add margin right oops to be right to T see okay much better I think perfect now we have this beautiful share button next we going to add a touchable opacity to this button so I will add touchable opacity so this button uh the share button or share icon will be clickable now so I will add on press and Rel share product okay so this method I'm going to write here okay but if I save it now if you see this button is there okay let's console something so console.log share click let's go back here if I click on this one I don't know why it's not printing okay let's go back and come again so the problem is uh actually as we are this is actually button okay on the header side for we don't really need a touchable opacity over here okay this icon itself has the on prent because this is the we added this particular button to the header section okay now if I see let's click on wait is this sh product save it and if I click it now see uh so inside terminal if you see we got share click see okay so perfect that's it is working now the thing is how to share on different platform and obviously we we going to write our all the share logic over here so we say use to share product okay so let me clean this out and here let's go back and just search Expo share okay so you will find this particular Library called Expo sharing it's official Library and then first thing you need to do is to install this Expo sharing so let's go here inside the terminal and then install this dependency so here inside the share product what we are going to write right write share okay dot share and inside that we need to provide the content so I will write content here and then I will write constant for the content and inside this one you can provide the value for example message okay and I will provide message like for example let give the title of the product product dot title okay then you can give some um message or more message it's up to you whatever the content you want to provide you can provide the URL as well okay so for example I will write uh sln plus product do description okay so whatever be wrote over here for example let me go back okay yeah this one okay it need to be DSC description something like this okay and then this content we pass over here so write the content actually do then and we'll return the response okay so with console.log we'll response and if there is any error we'll console the error okay something like this and let's save this one and let's test this out so if I click on this share if you see if You observe we have this site table with the wooden touch and in this description okay and now right now obviously whatever the app I have right which has a sharing capability only that app that app is open obviously if you have WhatsApp Facebook all of this app will open but this is emulator emulator don't have all the apps that's the reason you training some of that only okay so this is how you can add the beautiful sharing capability where you can actually share this content I hope you understand how you can able to share your content if you have any question let me know in the comment section only thing is okay we are going to use this share from this react native so this is very important okay now one more thing in uh in this particular section I want to tell you so whenever I open any category right it show first see no post found and then it's showing the data because we are fing data from the server and in the meantime obviously you don't have data it's showing that text okay you can avoid that one so if I go back to the uh this particular screen call list item yeah over here okay not here actually inside the item list screen okay so here obviously if you see right this this is text we are showing correct what we are going to do I'm creating one state called constant loading comma set loading is equal to use State okay and currently means initial value I will pass it as a false okay mean it's not loading but whenever we have we will pass whenever we are loading or fing the data okay we'll set the loading as a true and once we have the data then we'll set the loading as a false okay interesting correct now over here what I'm going to do if the loading is there I write a condition if loading is there okay then I'm showing activity indicator activity indicator okay so activity indicator will be a spinner okay uh let me show you actually directly over here okay if I just put that activity indicator I save it and if you see over here you will find this loading uh spinner right obviously you can change the size for example if you want to change the size and it has a option called large and small you can select the large for example and now the size is changed okay you can even change the color as well so here you can add the whatever color you want for example let's add a black color I know the code and you will see the black color okay now here I'm going to add a blue color like this and you say okay perfect now we need to show this activity indicator only when the loading is false so we'll say loading if loading is there then show this activity indicator otherwise show this item list and everything okay nothing we I get change only I remove this curly Braes and I added this condition and if this condition is false then it will go to this item list it will check this another condition it's called it's a tary operator actually okay multi- tary operator okay and now save it now if you see if I go back and click here see you you see this activity indicator right see okay but once uh the data is mean we don't have data then obviously we need to make it fault somewhere so let's do that so over here this activity indicator I'm going to put over here as well okay see if I go in Furniture see okay so you don't see that particular um not loading if or something like that okay so that's the reason we added now you can add for example you can add the margin or something like that for example let's add margin top to 20 okay so let's see how it looks now okay maybe it's better uh it's coming down okay but I hope you understand how we beautifully update this one okay now obviously you can add more effect more uh loading effect and everything is up to you how you want to add but until this point I if you have any question let me know in the comment section now in this section we are going to implement this explore page where we going to show all the um products which user posted okay so on the screen we are showing that one so let's go back to our Explorer screen so we have this Explorer screen right and obviously we are going to use existing component we are reused our component okay and that that I will tell you again because we already did it but in this SE uh particular screen as well we have going to do so first thing get add a class name and we'll do padding of three and I will go more actually let's add padding of five let's see how it looks okay and I will add padding X of maybe it not eight y actually I want to put y perfect then over here I will say uh some text Explore More okay and I will add a class name we add uh text of 24 Pixel Perfect and we'll make font to B 30 perfect okay obviously you can add a uh some for example if you want to add text for this more only you can add that one as well okay it look quite good next once we add this one now we need a data okay so let's say cont constant and over here I'm going to add um get all products okay so here we'll s use to get all products now in get all products uh we need to fade the data okay so obviously for that one we need to write a query so constant query is equal to okay so which is importing from F store then we have to add collection okay inside the collection we need to provide DB so let's Define initial that DB constant DB is equal to get fire store and then provide the app config inside that we need to provide the collection name so the collection user post then we need to provide the wear in the we Clause we need to add the order by okay so here we'll say I think uh uh we don't need where condition oh we need it so I think we don't need where just write order by and then we need to order by on which one okay so in this case we say created at and then we want descending order okay so latest uh sorry so latest uh uh post will be come at the top okay and this is our query now let get snapshot is equal to await obviously we need to make this method a sync and we say uh get docs okay which inputting from the fire Bas fire store and then pass this query que that's all and then next we'll just iterate it so snapshot. for each document console.log and we say Doc do data okay and then get all products we call it inside the use effect see like this and then save it now if I go to this console and beautifully we got all the data perfect now we need to store in one state so constant we say product list is equal set product list is equal to use State initial is empty now you have to make sure that whenever you add a new data it will be uh empty okay like this see and here we add the select product list the similar way which we added before right product list dot dot dot product list comma do. data because we need to push in we uh with the existing data okay we'll remove this console because we don't need anym for this space as well and now we need to add the same component we used before which is uh latest item list okay so because we are using same component you can rename this one if you feel confusion okay so latest item list I will add it here and for this one I'm going to provide a heading okay if you don't want the heading you can just ignore but let's provide latest item list and in this case is a product list so I'll pass product list over here and then save it and boom you got the data over here see how beautifully you got all the information in the Explore More okay so this is how you can easily add it obviously right now it's not scrolling then you just add the scroll view let's add a scroll view over here as well okay and now you can able to scroll perfect okay so if you have any question let me know in the comment section so this is how beautifully we added let's go to the explore Page open any oh wow we got error that navigation P not function okay let me check why we got this error so perfect why I got it why we are uh we have this issue because we don't have explore uh navigation over here okay so inside the navigation let's add a new navigation called explore screen tack navigation do j6 okay and similar way will be added for the home screen let's add react to function and over here we need to Define constant stack is equal to create stack Navigator then we'll uh we'll change this two because see this is very important for each of these screen we if you you are jumping from one screen to another screen right we need a navigation for that one we need to to Define navigation somewhere right and obviously the similar way we Define for the home screen the same way we need to Define for the explor screen okay so that's the reason so stack light stack. Navigator and inside that we need to defend screen so stack do screen so first is we have to give name so here I'm going to give explore tab okay then I will say uh component which is the explore screen then another stack screen stack dot screen and name is equal to here let me close this on and here I will say product detail okay and the component is will attach the product detail so if I go to this home screen stack navigation okay so this is our product details see okay same thing we added here now save this one and then inside the our tab Navigator let's go to this tab Navigator tab navigation and here obviously similar way we connected this home stack navigation here also we need to connect it to this home Explorer screen stack navigation and then save it now if I click one see it's going to that particular screen okay perfect but the issue is see the T Bar we don't want that tab bar okay but on the obviously on this screen we want T Bar the one which we have before right the similar tab we wanted so let's go to this home screen tab navigation and I will copy this option as it is to this explor screen product detail screen stack sorry okay save it and boom see it's got it right same thing obviously we want don't want the header so for this tag I'm going to add options and here I got add header shown show header shown to be false and save it boom okay now if I open any of this particular product see it's jumping to this uh detail page okay and everything will work as it is guys okay if you see we have this beautiful sharing option and everywhere you will see as it is now you can have this proct post page we have this explore tab we have this Home tab ready okay only thing is pending to profile tab now you can go ahead and try this profile tab guys okay it's very easy and you just explore it and let me know in the comment section if you face any issue so now in this section we are going to build a profile screen so when we go to this profile here we going to show the profile detail so let's draw uh let me show you how our uh profile profile screen will look like so here we have the profile image then over here we show um usern name below that we going to show user email okay then after that one I'm going to show four option so first then we'll show second and the third okay and another is over here so this will be like this okay so this will the big one is log out here this option contains icon and the uh the title for example this one be my post okay sorry this one be will be the uh explore and then this will be uh my own option I can give okay whatever option I want to give so this will be our basic structure okay and this app is quite good the Eraser okay if you did not use it I will just suggest go ahead and use this app now let's go back to our profile screen and inside the profile screen tab I will open it here okay so first and very important thing we need to F the users information so here I will constant user is equal to use user okay and then once we have the user information first thing we need to show the uh um user profile image okay so here I'm going to add image source and here inside that I will write URI user dot let say image URL okay let's give class name we'll say width of 80 pixel height of 80 pixel and let's save it and let's see this is how it looks okay let's make it 100 perfect here I'm going to give some padding to this parent view so I will say a padding of five okay and let's make a rounded Corner rounded to be full and over here um let's make item to be in the center I don't know whether it's applied to this or not justify content Center oh I don't know text align Center okay the it's reason is we did not apply any Flex over here okay so maybe for this view I'm going to apply Flex so add class name and then make it Flex okay maybe let's start FX one I don't know why it's not going in the center let me remove this this is unwanted not necessary here I'm want to add a class name name with we say item to in the center like this okay we you margin top five maybe more let's make it 40 okay then below that we going to show the usern name so user do full name We'll add a class name and it will give the class name like font to be bold text of 25 pixel like this okay and also we go margin top to five not five two okay and same text I will copy paste it here with the email address email address like this and then we'll make font size of 18 I don't want font bold and we'll make the text of gray color like this little lighter okay now we have the beautiful section next we going to add the um menu icon okay so for that one I'm going to add one constant menu list this array okay it has a ID it has a name so name I can do like for example uh my post I will say my product then icon so here icon we can give the icon which you want to import okay there are couple of ways okay for example you can import the icon from here if you say import and the name of the icon for example we'll say Let's uh so in this case I added some of the icon okay so if you see I will say diary Diary from and give the path so in this case assets slash Images slash o sorry and then diary. PNG okay and then you can just refer this diary over here like this okay then I will copy paste four times second is explore explore third is um the tube guruji and the last is log out obviously we need this couple of times so let's add it here the one is logo then we have the search engine oh that's look quite weird okay I will just rename this one search and I don't know what what else we left with okay let's try with this one and then we can add it later on okay so one is for log out and this one is for search search I will put it here as well and here as well for now and then save it okay so you seeing diary is already oh let me remove this one okay now we going to use flat list to iterate that mainu list okay so we'll add the flat list we'll provide the data so in this case is manual list then we'll render the item so item comma index and inside that I'm going to add tou opacity and inside that let's add the icon first so which will be the image do source and here we need to pass require and then item do icon okay so wow we got the error so over here I don't know why we got the error so here we just I just added the source we don't need to add the require here okay and now if you see we have data also uh we got this warning okay let me save this one and we have this warning that two children have same key so let's change this ID actually okay so let's change this one two three and four okay now that error will gone perfect next uh we need to put the number of column here okay so number of column will be the three and then save this one obviously it will stop so obviously we need to restart this application so after restart you will see like this okay here here you just me Place one for the touchable opacity so it will equally divided after this one um I'm going to add the text okay but let's add some padding over here oops I've got too much padding something like this okay here also let's say 50 pixel and 50 pixel I don't want that much big okay perfect now let's add a border to this one I add border add border of one pixel then I will make item to be in the center okay and we you margin of four and make the rounded Corner make rounded medium maybe make it large okay and I will obviously update the Border color to let's say blue 400 okay and we'll say background blue okay I'm just trying okay this because I want to see how it looks and I don't think so that's look good but that's fine for now here we'll give margin on the xaxis margin top to four let's see how it looks I think this is good four let's margin four margin X to 4 and you margin top to four okay so this is how it looks and then for this complete flat list I'm going to give some margin as well so I will give style margin top 2 20 something like this okay now obviously you can write the text below that one so let's write the text text as well and here I will say item do name okay and uh so my products explore ti gji so let's decrease the margin and padding as well yep now let's go and for this one I'm like going to add class name I add text of 12 pixel we add margin top to two then I'm going to change the text of blue and we'll put darker something like this yep and let's look beautiful see this is how you can add your own designable profile screen okay now obviously right now we just design it but later on uh obviously I'm going to add more functional for example if I go to the my products right it will open a new screen and and it has all the products which have option to uh Delete the product if you don't want or you don't want to put any longer okay explor will navigate to this explor tab the tube gurji will navigate to external URL and log out will log out from this particular app okay so all four types of functionality I'm going to do it in the next section but if you have any question until this point let me know in the comment section I'm happy to help you if you face any issue while implementing this uh particular code then please um you can access the source code anytime okay and we'll see you in the next section now we going to add up my product screen okay so for that one let's add a new screen and here I will call it as a my products. jsx add the default template and then save it now obviously we need to add a profile stack navigation because on the click of my product right we are jumping from this screen this profile screen tab to the new screen so for that one let's go to this navigations and let's add a new tab so profile sorry new stxs navigation profile stack now. jsx okay say profile screen stack now add the default template and similar way uh we'll Define constant stack is equal to create stack Navigator okay over here I'm going to remove this one and let's add stack do Navigator and inside that we need to define the screen so stag dot screen and for first is profile Tab and then I will connect the component called profile screen okay which is our first screen and then we need to add tag do screen name is equal to profile or here we can say my product okay and then the component we attach is uh my products screen okay so this is the my product screen we attach and then connect it and save it now obviously once we add this profile screen tab we have to replace our main uh profile screen tab with the actual one okay so which is the profile stab back navigation okay and then save it obviously here you will see the tab okay so you can remove that tab so let's add options over here and here we just say header shown to be false and then save it see okay now let's go let's close all of this window and let's go to this profile tab okay so contrl p and then I will search for the profile screen and over here right so because we have the my products on the click of my product right so what I'm going to do I'm going to add a path over here if there is a path defined then we'll go to that particular path so in this case I will say my product okay because inside the product screen tabe that's what we Define see okay so that's the reason I give the path for the Explorer the path I can give is the similar path from this tab navigation which is what is the name of this one uh let me so oh why I post as search Al not search explore so this will be a explore tab okay so for the explore I write path and explore okay for now obviously here I'm going to add the URL okay so URL if there is a URL it will jump to the different one okay and this is the log out so we'll keep that for for now and we'll focus on this part only so on the flat list we have this touchable opacity here I going to add on press event okay and I'm I'm going to create new method okay to make it a more uh organized way so I will say on press on menu press Lo menu PR okay and here I'm going to pass the item so obviously I'm going to create a new method on menu press like this and it will accept the item now we need to define the navigation so here I'm going to add constant navigation is equal to use navigation and here we'll say navigation sorry navigation do navigate and then we get item. path okay now obviously here I'm going to write one condition okay if item dot path sorry path is defined okay if item. path is available oh God then only uh execute this navigation path otherwise for now I will put null okay if there is a UR URL then it will navigate to different one so let's see and then save it okay now if I click on my products if you see it jump to this my product okay now obviously for my product we need uh This Bar to be blue color because we want to con consistent throughout the application right so I will just copy this option and I will paste it here so for this my product okay like this and I'm going to obviously change the name to my products and save it and see okay perfect now let's go to my products and over here I'm going to get the user post only okay so for that one okay we'll Define a method called get user post okay and inside that one we need to define the Firebase call okay so let me show you what we are going to f so from the Firebase fire store right we have this user post okay let me refresh it so we have the user post and each user post has connected with the user email user name image and name okay so those have matching user email of the login user that that record only we are going to f okay so for that one first let's define the database so constant DB is equal to get fire store and then add the application configuration then here I'm going to define the query is equal to Q is equal to uh we'll Define the query okay from the fire fire store then inside that that we Define a collection here we Define need to add DB and the collection name so in this case user post okay then we Clause because we need to add condition on a user post so we'll add user post comma then condition matches okay sorry not user post my bad it's it's a user email right so user email because we need to match with the condition right the user email equal to the the user email so obviously we need to get login user email address so we'll Define constant here user is equal to use user okay so from this one from the CL Expo we'll get the user information and then we get user. primary email address. email address okay and our query is ready next obviously we need to um add the snapshot so snapshot is equal to await get Docs and we need to pass qu CU okay and make this method as a a sync okay here I'm going to write documentation like U use to get user post only okay perfect now we have get to the post we have the snapshot let's add for each for each and we'll say uh document and here I will just console it for now so doc do data okay now get user post we need to call whenever the users information is available so inside the use effect over here I'm going to pass sorry empty array and inside that will pass the user so only when the user is available then only execute this get user post like like this and then save it now let's see the console and if you see we got the user information and those who matching the email address see okay so this is the email address which I'm loging with and only that particular record or post is return return okay so now we we need to store this uh State all the data in one state so constant uh product we'll say product list and then set product list is equal to your state like this okay and we'll pass Mt AR and obviously here going to add say product list then product list dot dot dot product list comma doc do data okay because we are we want to add uh the list all the list right with the previous one and then on the top of that we need to add another one okay and we'll remove this one and obviously we have to make sure that every time when is we are adding new or setting the new product list we have to make sure that it's empty before okay and then save it now over here we can use the existing component which is the lead item list or sorry latest item list like this okay and here we need to pass the latest item list which is the what we can call call up product list okay that's what we sent okay that's what we have and we send it to this latest item list and now save it and if you see boom we got this information so these uh three products are added by this user who log to this particular account okay so these are the three products it get added perfect also if you want to give header name you can add the header name okay because we already have the heading for example if I add um my products okay see okay but I'm not going to add because we already have at the top okay now whenever I click on this one okay so right now nothing is happening see because we did not add that navigation over here so we need to add the product details tag Navigator okay so for example let's go to this uh explore uh screen stack navigation and this is the um stack screen we need to add okay to see the product detail screen so I will copy this one and let's copy and paste it inside this profile screen tab right because inside the profile screen tab we need it in order to navigate it okay and make sure to import this product detail and boom okay now if I click on this one see it's going or it's showing the details see okay so all of this detail we are able to see now because we added the complete stack navigation which is contains the profile tab which is default one then my products so this is the if I go here this is the my products and in that we can also go to this product detail screen if I click on this one see okay so I hope you understand how we beautifully added it but the question is now we need to give user option to delete this particular record okay so for example if I open this record here instead of send message we are going to give option to delete the record the question is how to do it okay so it's very simple let me close all of this tab and let's go to this my product screen okay so inside the latest item list right we going to send one more variable okay so once we are in the latest item list where we can say uh is or we can add a flag or maybe we can say something some variable which is little little known full so that we can update inside the product detail screen so here we can say user product okay is equal to and then we can add the flag like true or false okay but there is another way we can do it without touching or passing any value okay let's go to this product detail screen okay and first thing we'll do it here to get the user information so user is equal to use user okay now if I scroll down to this button where we added this button okay now we can check if this particular post is belong to the current user then we will show the delete message instead of send message okay and anywhere if you go to this detail screen and that particular post is belong to that particular user then it will show that delete uh sorry the button for delete okay so here is very simple so here I'm going to add user. primary email address do email address matches with the product. user email okay if if that matches then I'm going to add a new button over here okay so similar kind of button let me add it here otherwise I'm going to add the same message button and I will remove from here okay now obviously I'm going to change to red and here I'm I'm going to say delete post okay and Method called I will change to and I'll create a new method called delete user post okay I will copy this method name and then I create a new method called constant delete us the post this one okay and I will just console for now user post delete click for example okay and then save everything okay and boom if you see now this option this particular post get delete post if I go back and if I open any of this post this got delete post okay but let me show you one more thing if I go any of this post let's go to this furniture and you open this furniture app for this post is not belong to that the user which loging with this particular one that's the reason it's not showing this delete post okay but if I go back if for let's go to this okay so let's go to this post see now this post belong to this particular user and that's the reason we are showing this delete post okay how beautifully so it's not necessary to go it from here and delete from uh my products only you can even seeing your post you have option to delete the post as well okay sounds good right if I click click on this you will see on the console that user post delete click is trigger okay now here we going to add uh we going to write a method to delete the particular post so here I'm going to write alert do alert and here we can give the message or title for example do you want to delete okay then we'll write a message for example uh are you want to delete this post okay and then we can give option for the button okay so here I'm going to add title which is the button title we can say and we'll say yes okay and then uh let oh let me put this in a curly braces okay so let me add in curly braces this title over here because we want to add two buttons right like this and then we have the on press event to this one as well so we let colon and then we can call another method to delete from fir store for example okay so this method we can call over here constant delete from Firebase like this okay and then another method I'm going to call sorry another button I'm going to write like this o sorry okay so it will be cancel and cancel place and style will be cancel okay so it has a predefined style cancel default or destructive okay so I write cancel and let's save this one okay so if I click on delete post it will ask me do you want to delete this one okay and it has a one button okay I need to add another button I don't know why it's not showing okay it need to be text actually not a title let's add it now and if you see we have the option route okay now here I'm going to add the console.log and just say deleted for example okay so once oh sorry be deleted so once you I click s okay it supposed to delete or call this delete from fir stor method okay so let's test this out out Delete post say yes and if you see it called the meod called deleted perfect now here we need to add a file store method to delete the record okay so it's very easy so you can just search uh delete from delete doc fire store Firebase okay and search for the documentation and obviously first thing you need to Define uh the DB okay and then you can uh you can provide the document okay which you want to delete Sorry The Collection name and the document ID so now here first we need to write a query to get the exact data so constant query is equal to and then we need to write query then from The Collection okay here we need to provide the DB so let's define the DB reference over here on constant DB is equal to get fire store and the app configuration okay and over here again so constant DB here the collection name comma the we condition so in this case on the title we'll F the data if the title is matches okay some that only document we are fetching and then over here we will just uh provide the title so product. title okay and now similar way we are doing so constant snapshot is equal to uh a wait get docks and then we have to provide the query okay here we'll make a sync because we are using await which is promise and then once we have the snapshot we will use for each Loop we say Doc and inside that we will say we'll call the method called delete doc okay so inside the doc we need to provide document. reference okay then this is promise so we'll write then and then the response okay so inside the console.log we'll write the response okay so also as soon as we delete we will go back okay so over here we'll write navigation method Okay we okay we already have navigation let's try to use that one so navigation sorry navigation. go back okay so this navigation. go back is not working let me Define over here constant now I will say and create navigation o sorry not create use navigation okay so this now now we will use it here to go back back okay as soon as we uh document deleted it will go back go back okay the previous screen and then save it now let's try to delete it so here I will just say deleted the doc okay and now if I click delete doc it will ask me do you want to delete if I say yes okay say it will go back okay and need to see delete the doc but still it's showing here because this data is not get refreshed okay but if I go back inside product and refresh it now it will show only one okay but we have to make sure it will refresh okay so there is one more method uh one more thing I'm going to add so inside the latest item list I'm going to add the pull to refresh method okay so in that way you can also get the latest data so once we delete this post let's go back uh to to this particular screen right here we need to uh add a event listener so that we'll get to know okay uh this on this screen uh it it came back from someone else some other screen okay so what I'm going to do I'm going to add use effect inside that we need to add navigation so whenever the navigation get changed we will add a event listener okay so here I'm going to add navigation and here I'm going to write navigation oh sorry navigation do add listener okay and then here we have option called Focus okay and then it will do event and I'm just I'm just right now I will write the event e okay just to make sure that uh on the go back it's executed perfectly okay so let's uh click on this one okay and let's sorry let's go back and and if you see we got this target Focus okay perfect now over here we need to call this particular method as simple as that so so onate us the post okay so what it will do whenever uh we delete any post right obviously we write this navigation Bo go back and once it go back to this previous screen then it will call get user post which will get the updated post okay and then it will return the new post so it will obviously avoid the deleted post okay so on this one it will now get the latest post okay so this is how you can handle uh the event so guys until this point if you have any question any doubt let me know in the comment section and obviously if you face any issue while implementing this application the source code is in the description now here we need to implement this log out functionality okay now for the explor and Tube gji you can try on your own it's very easy for the Explorer you can connect to this explor Tab and for this link okay because we are providing this link over for this particular menu you can with the help of linking do open URL you can ex you open external URL okay it's up to you how you want to handle you and you can try on your own now let's go to this log out button so let's go to this profile screen first and inside the profile screen we have this menu list and over here I'm going to just use this name okay I'm not going to add any path so here I will write the condition item. name is equal equal to log out okay and obviously I will return it but in order to log out right obviously we are using Expo so let's go to explo sorry we are using expore clerk okay so I will go to this documentation and if you see on this right side right you have option to signing the user out okay so go here and here you have option to sign out with the user okay it's very easy you just need to call the sign out and that's all nothing else you need to do okay obviously you need to add this use Au first so let's go ahead and add the use Au okay this use Au will uh input from this Clerk and then you can call sign out like this okay and then save it and that's all you don't need to do anything guys okay and if you see there is a example to uh walk through how they did it and everything okay so obviously I'm not going to sign out for now but you can try and try to sign out as well okay so guys that's all for this particular course okay now let me walk through do what we build until this point okay so you will understand how what are the content we build so first thing obviously we add the cler authentication and with the help of social authentication we are able to log into this beautiful application then we have this beautiful header section and then we have the beautiful sliders okay after that we have this category section we see beautifully how we manage this category okay and obviously we use flat list uh at many places okay and we depends on the type of data we want to show we change the uh or we configure the flat list as well then we have this item list where we show all the items okay all the latest items then inside the furniture for example if I go to this category where you will see the post in that particular category okay now if you want to see the detail let's click on that one and you will see all the details for that particular product obviously you can even send a message to that particular user who send or who posted this particular uh post or product then you can even share this product to with your friends family or anywhere okay then not only this but inside the explore tab we have added a number of or you will see all the products which all all the latest product over here okay then in add post you can obviously even add a new post okay to this uh particular application depends on the category in which C category you want to add and everything then is a profile tab you can check your product you can delete or manage your products then uh you have log out button explore button and Tu button to jump it to other URL or something like that right so all of these things we learn in this particular course and obviously for in the back end view the Firebase which is completely free guys okay and everything we learn basic from and this app course was totally uh the basic who is a beginner they also can develop this beautiful application so guys if you really like this video press like button press notification Bell icon so that you will get update from me and if you did not subscribe to my Channel please do subscribe because we'll get a lot of new content guys okay so say stay tuned and we'll see you in the next video

Channel: TubeGuruji

Views: 41,588

Keywords: react native tutorial for beginners, react native project, react native tutorial, react native app, react native, react native full course, react native expo, Build a Full-Stack Marketplace App with React Native, React Native Tailwindcss

Id: VOFJ1wBJcUo

Length: 260min 31sec (15631 seconds)

Published: Wed Feb 07 2024