React Native project for beginners | React Native Tutorial | Expo , HyGraph

hey there and welcome back to T gjit Channel today we are going to build a complete react native application from the scratch and in order to build this application we are going to learn a lot of different technology so let's first walk through the application what we are going to build today in this particular course and then we'll talk about the Technologies so if you see on the screen right now we have this beautiful login screen okay and I'm going to tell you how we can integrate a social authentication uh with a react nat2 Expo so let's sign in with the let's sign in and uh it will sign in with a new account okay so here if you see we are going to use k um authentication service provider which is a best alternative for a clerk now here just click on the Google to login with the social authentication enter the email and password and once you sign in you will jump redir into the beautiful home screen and now if you see on the home screen we have lot of different components we use here we have the beautiful um profile picture of the login user along with the name then we have the search bar along with this filter options for each of this category okay now even though if you press any of this category see the below um courses get uh changed immediately okay so this beautiful effect we are going to add then we'll learn how to use the flat list and to display this beautiful uh course list okay so along with this course we have all the information like who uh who is the author how many chapters in this code and this course is paid or free okay so we do have free courses we have some courses which is available on YouTube so all of kind of these courses we going to add it here now let's open any of the course and here you will see the intro of the course okay so right now if you see all this information okay then we have the description of the uh course then you have access to the source code demo YouTube Once you enroll to the course here we have enroll to course button if you did not already enroll to this particular course and then you have this all the lessons content in for this particular course okay so right now if you see you are not enrolled to this course and only intro uh chapter or lesson is enabled all other chapter are not clickable or it's a lock until and unless you enroll to this course okay now this course if you see it's a paid course okay and if you want to enroll to this particular course it will redirect me to the membership page where you need to buy the membership for this paid course okay now here you can select the type of membership you want to select and just click get membership okay also not only this but if you want to access the source code you need a membership for it okay so this kind of functionality we will learn how we we will add it in our application okay now what we will do we'll enr to this course okay and enroll to any of this course okay and just click on get membership now so once you made a payment it will uh uh enable you the membership and then you can enroll to the course okay but right now for another example let's go through the uh free course okay so we have this free course let's go here and if you see all this course is lock you need to enroll this course so click enroll to course and if you see we got this message just you just enroll to the new course now click okay and if you see now the button is changed to continue okay so it's not anymore and all this chapter I'll also get enabled immediately Okay now click continue and it will redirect you to the lessons page where you can watch all of these videos okay even though you can go any of this jump to any of the particular uh chapter okay and you can mark the chapter completed once you completed with the course okay for example if I mark this chapter completed and you you will see that change immediately on the screen so if I go back and if you see you completed the first chapter okay you can keep a track of each chapter which you completed as well not only this but let me go back and show you your my course tab where you can keep a track of the completed chapter and enroll course here as well now you completed only one chapter out of 21 and here you will see how much percent is completed with a beautiful progress bar now inside the profile you have this profile section where you can explore more courses you can go to this my courses tab where will go to this my course uh section then uh we have some few option here okay now let's um buy a course okay we by membership so let's open this course which is paid one and obviously uh to access this course as I say you need a membership okay let's enroll to this course let's buy membership so I'm once I make a payment so it will say say thank you for joining membership message okay now you can enable or you can enroll to this particular course and boom you just enter to the paid course because you have the membership now right and click okay and now see all this uh uh lessons are enabled for you to learn it and now once you click continue you can start learning and whenever you completed your chapter Mark the completed and then see for example if I mark this completed you will see the change over here okay let's mark another chapter as a completed one and let's click second chapter as a completed okay and it will say Mark chapter completed and if you see two chapter is now completed now you can come again after some time you can go to this my course and you can pull it see we have this option beautiful option that if you pull to refresh it will give the updated uh data from the server okay and here you have the second courses with the progress and everything okay and all of of this course we are going to build completely from the scratch okay now the question is how can we store this uh video or stream and everything okay and if you see even though we play video it's not buffered at all okay it's immediately play for you and I'm going to tell you how we can store all of this video completely free so whatever content we are going to use in this particular course is completely free so for that one we are going to use high graph okay and many of my previous video has this particular uh functionality we use the high graph so this High graph is very easy to use it's a one of the best CMS in the market right now and it give you the functionality to upload as many as video you want Size Doesn't Matter guys you can upload a 10 GB video or you can upload a th000 GB video doesn't matter you can upload on the high graph for free okay and then you can stream it from there I'm going to tell you everything how can we integrate how to face data data how to store data on the high graph so guys uh without doing any further delay we'll start developing this beautiful course and if you did not subscribe me to my Channel please do subscribe press like button press notification Bell icon so you'll get all of my updates the updated course so that you can learn and build this kind of beautiful application so let's get started so in order to create a react n application we are going to use the expo Expo is one of the best and userfriendly uh build tool to create any react native application okay and it's very easy to use and if you are beginner then I will uh definitely recommend to use Expo okay and U there are all the features which Expo CLA has okay so let's uh go to this read docs in order to create a project and if you see this is the uh command line to create a simple react native project so copy this command go to your project where you want to create the uh project and then open the terminal at that particular folder then just paste the command which you copied and here obviously I'm going to change this name to um like code Box video course learning okay and enter it so let's uh wait to install all the dependency and if you see our project is now ready okay now let's close this terminal and open the vs code and locate the folder where your project is there so I will say open folder and uh let's open that particular project and open it and say yes I trust the authors and if you see we have all this um basic structure of this application and folders now if you see here we have the asset folder where we going to keep all our fonts images and everything then we have node module so whatever dependency we install right uh that particular packages are inside this node module obviously we are not going to touch inside the app.js which is our starting point of the application and and if you see this is the default code uh return inside the app.js uh which has a return inside a return we have the view whatever the we are going to show on the UI that is that is inside this return statement okay then obviously this is the Styles applied to this particular view okay so this is called external styling when you write the CSS uh The Styling uh property and everything outside of this return then we can call it as a external styling so there are two type of styling internal and external and I'm going to teach you both of them later in this particular course then we have app . Json where all this application related configuration like application name the version obviously we want to add a later on the Android package name and everything will be inside this app. Json the bible.cc config.js we going to not touch so much but when we are going to add the export order then we will uh add some of the configuration then inside the package.json which contain this all the dependency for the application which is installed then the script run the application and then name of the application and version okay so let's uh run this application so first of all obviously in order to run the application there are two way that you can run an application the first is the emulator the Android emulator or the iOS emulator if you don't know how to set up the emulator I will walk through that particular steps uh but the second step is very easy uh which is the Android GO application Android sorry Expo go application so if I I go to this Expo go you will find then um this Apple app on the Google Play or App Store just download that app and when you want to run your application then you have to make sure that you uh whatever you are running uh application on your laptop uh same n in the same network you have to open that app in expoo as well so once you you are in the same network automatically you will see the expoo uh inside the expoo application your application name will be appear here and then you can and uh look at it okay there are two way so obviously if you don't have an Android Studio I will definitely suggest to go with this Expo Go app but let me show you how to uh run this on uh emulator as well so first thing make sure you have the Android Studio installed and once you open this Android Studio there are couple of package you you have to make sure that is there okay so go uh click on this three button and here you have the option called SDK manager okay go here and make sure one of this uh Android API is installed okay so right in this case is for me is a 34 then select hdk tools and inside the hdk tools you have to make sure that you have the Android usdk installed along with you have the Android emulator and the Android hdk platform tools okay so if it's not installed just click on that one and then click install then you have the option called hdk update site so most of the things are check here so make sure that in your case as well uh all are selected okay and then close this window again go uh click on this three Dot and here you have the option call Herer device manager okay so here uh for if you are using the first time you might not see any device here so you have option to create a device and select the configuration like which type of phone you want to select then click next um for example let's select this pixel 7 select next and select the operating system which you want the version of the operating system and click next and then it will create uh virtual device for you virtual emulator device for you once you create a device your device will appear here so in this case for me I'm using pixel 7 Pro which is API 33 Okay and let's click on this play button okay so run it and then it will start the emulator for you okay so for obviously for this Android uh Studio you might need a Java um install as well so make sure uh that is also installed and if you see inside this uh emulator as well we have this expoo application it's similar everything is similar on the uh actual device as well okay so let me close this one now and let me show you the Expo Go app as well okay so here if you see this is the how the expoo app look like so once you open open it it will look like this okay now let me decrease the screen size so you can check side by side and now if I run npm or you can just write Expo start okay or Expo start is not working so just Expo Run start okay and once you run it if you see now emulator is working now you have again as I say right on the actual U you can just scan this code it will install xogo and will run the application on this particular Port okay otherwise uh once you run this application and you have the emulator open just click a to open the Android if you have IOS just say I okay so in this case I will click a and it's saying expoo pixel 7 is outdated would you like to upgrade so let's upgrade this expoo application so we'll wait for a few seconds and now if you see my app is updated and it's run this application as well okay and the first thing you'll see on the screen it's saying open app open up app.js to start working on your app so inside the app.js we have return that open up app.js okay as I say before that this is the starting point of the application if I want to change this one for example right subscribe to TU Guru okay and if I save this one as soon as I save it automatically reflect it on the emulator and if you see it's saying the subscribe to gji so please do subscribe to our Channel now this is how you can run your application on actual device or the emulator as well okay and if you have any question about uh uh running the application of set set up set up this particular project then let me know in the comment section and we'll move to the next section let's implement the login screen UI and then authentication for that one first let me tell you about this eraser doio where I'm using it for my our application documents and the diagrams okay so throughout this particular course I'm using this eraser doio it's completely free and very easy to use so go ahead and use this okay so link is in the description so you can check it out so let me go to this particular section okay as we completed this uh topics called react native setup emulator and run the app okay and this is the er. application that what I'm I was talking about okay where you can do the documentation on the right hand side you can do this uh diagrams and all the things okay now here if you see right now as I told you that we are going to design the login screen first and then the authentication and for the authentication we are going to use this SC authentication so which is the alternative for the clerk so let's go back to our application and here we'll create a new folder to the root directory and we can call it as a apps okay so inside the apps folder we'll create another folder called screens okay so all the screen for our application will keep inside this folder inside this screen folder we'll create a new file called login screen okay do jsx and add the default template so now in order to add the template right you need need to write like export constant function and all of these thing okay but there is one Treck where you can do that uh even writing all of these things okay so for that one go to this vs code extension and just search for this es7 react retive uh react reux uh snippet okay so install this particular extension and it's very useful okay let me tell you how it works so once you install it you just need to type react native function okay which which is rnf click enter and boom you will get a default template so this is how useful it is okay you want you can do this react or all other things Redux or react native all languages or all the framework you can just type the shortcut and you will get the result now we added this login screen now what we need to do we need to add this login screen inside the app.js as you know that this is our starting point okay so I will remove this uh default code and here just add this login screen and if you see if I type login I'm getting suggestion called login screen and which is from this app screen/ login screen okay then close the tag and this we added this component called login screen and then save it now if I open this particular okay so here if you see right now on the screen I can able to see this login screen text because that's what is written inside this particular text now next right now our text is showing in the center because uh inside this stles sheet of inside the app.js we have um property called align item Center justif by content Center let me remove that one and boom that's what you get it now okay I will remove this background color as well because I don't want that background color anymore but you can keep if you want next let's go here in login screen and let's start Implement now for this login screen uh first thing uh we need one image so inside assets folder I created a new folder called images and inside that I keep one image called rocket. jpg and this is how it looks okay so all the source code and the assets assets images everything you will find in the description the link is in the description you can access it now let's add the image so in order to add image you need to type image and you will get the suggestion called react native from the react native okay make sure it's importing from the react native okay then as you are using the the local um uh image then you have to get it from this source and then you have to write require okay and here you need to define the P so in this case is uh assets slash images SL rocket. jpg okay you have to give the proper extension of the file as well and then if I save this one you will see this background change okay but the image is quite large so let's give the style so right now I'm giving the inline style so when we are giving the style inside this uh tag only which is called inline style but when we Define the style outside of this written uh tag then we will call it as external styling so obviously we are going to use both of the styling depends on the requirements so here let's give the width so we'll give the width um maybe 100% because we want a full width okay and then we'll give height of 400 so let's give height of 400 and save it and this is how it looks okay then also I will make sure that object fit will be the cover okay so it will fill the complete screen next uh let's define some text so I will Define one View and inside that let Define the text and here we'll Define welcome to code box okay and if you see the text is showing on the screen let me put this yeah like this now for this code box I want to change the color Okay so let's wrap this uh code box inside a text okay so you can Define text inside text and let's give some space here like this now I created one uh let's create one uh folder inside the app folder and we can call it as a utils and inside that folder we'll create one file called colors. JS okay so inside this color. JX all the colors which we are using inside the application we will keep it here so for example in future you want to change color of certain uh existing color you can just change in one file and then it will reflect everywhere okay so just Define export default and whatever the color you want to use so primary color will be our application primary color so I will Define like this then I have I will add the gray color as well so let's add hash c0 c0 c0 save it now you can add that color okay so for example let add style color colors. primary and and save it and if you see the color is changed okay also for this particular text We'll add some style so let's add a font so we'll add a font size of 45 so font size of 45 then we'll add font weight bolt okay and save it see like this let's give some space here okay let me bring this perfect and for this particular view I'm going to add padding of 20 okay now after this text I will I'm going to add another text and it simply say learn programming by going to build real life projects okay and for that one let's give some style so font size of 20 we'll give margin top seven and we'll change color from the colors. gray okay and save it like this see next we'll add a button okay so obviously uh re N2 has a button tag but instead of that one I'm going to create on my own custom button so for that one I will add View and inside that we'll add a text and it will just say sign in okay and if you see this how it looks let's give some styling to it so right now let's add an external styling okay so in order to add external styling you can just type RN style see like this and just enter it and if you see you got the default template make sure you will import this stle sheet from the react n okay and it is importing imported here and let's add a button okay so button class we added here and for this button class let's add a padding of 20 and also we'll make sure that we'll add this attach that particular class to this particular view so just add Styles Dot and button see okay and if I save it you'll see the padding for this particular button okay obviously we going to add more uh styling so we will add background color to colors do primary then we'll add border radius oops let me save this let me show you this is how it looks let me add border radius to be 99 and margin top to 60 and save it see okay now for this T I will add in line and we'll add text align to be in the center colors I will add colors. white so let's add a white code over here at White # F and let's attach that one here see okay also increase the font size font size of 18 perfect okay now let's minimize the padding maybe 16 perfect okay now we have this beautiful sign button and next we will add a simple text and we will just say create new account and we'll make style margin top to 10 color get colors do primary like this and we make text align Center okay and we'll increase the font size little bit so font size add 16 perfect okay now we have this sign in button and create new account now one one last important thing right now this button is not clickable okay so in order to make this button clickable you need to wrap this uh button view okay so let me put here document like uh button sign in button okay so for this button instead of view we have option called touchable opacity okay you have the touchable highlight touchable highlight native feedback a lot of things I I mostly use the touchable opacity I will show you the reason okay now if I click on this button see you'll get this beautiful uh press effect okay and that's the reason I use a touchable opacity and now once you make this touchable opacity as a component you have enabled this option called on blur on focus on Magic tab on press okay and obviously we are going to use on press and here let's console The Click event so click sign in see like this okay if I save it and open the terminal and now if I click sign in see the click sign in is printing inside the console okay so this is how you can add the on press event to this any view or any text obviously for this Tech as well just wrap it inside the touchable opacity Okay and like this okay and obviously you can add on PR event to this one and just consolid click new account okay if I save it let's uh see the log and if I click create new account see if I click sign in okay so this is how you can add the onpress event obviously uh once we add the uh uh method to create uh to sign in obviously we'll change it here okay we'll replace this complete uh console L we'll remove the console lock and we will put actual method call okay same thing we are going to do for this create new account okay so that's all for this particular section that we successfully implement the login screen UI part only next we will learn how we can implement the social authentication in our application now we are going to implement the authentication so if you see on the screen right right now once user open the application user uh need we will our application need to check whether the user is already loging or not if he did not log in then we will navigate to this login screen okay and then once it login then we will show the our uh main homepage tab but if user is already login then obviously we will not go to this login screen and we will automatically redirect it to this home home screen which is our tabs and everything okay so this is the basic layout or basic uh flow of uh how the authentication going to work okay and to implement this uh authentication okay this complete authentication system we are going to use this kind uh uh authentication service provider okay and which is the best alternative for the clerk and if you did not use before or you don't know anything about this one don't worry I'm going to uh tell you how to integr with the Expo application also this kind is completely free so um you can up to 10,500 login monthly active login you can um uh add it inside this kind okay so let's uh create account and let's go to this uh dashboard okay and right now from the dashboard you can create a new application so click add new application and give the application name so in this case I'm going to give code box and obviously we are going to uh use it for mobile uh application so select this front end and mobile and then click save once you save it here you will find the option to select the framework okay select the framework which is our react native okay and then if you scroll down make sure to save it now here you will find the documentation okay just click on this react native docs you will find the documentation how to integrate it and everything so first thing if you see if you see here we are going to use Expo obviously then we have to jump into this expore react2 documentation and here first thing you need to do to install this uh kind K hdk okay so copy this one go to your uh project and inside the new terminal paste it so that it will install the kind hdk then if you scroll down as we are not using be react native so we will skip this step and then if you scroll down for first thing we need to do do as we are going to use Expo go right we are because it's a uh right now we are testing on the Expo go application so we have to make sure we will set this call back URL and everything okay so to set this call back URL you need to go to this uh our emulator okay and just enter crl M here we will find this particular uh IP address of your system and the port number okay but if you don't did not find it here you can go back where you run the application very first time and here as well you'll find this okay so copy this along with exp colon okay because if you go to the documentation you will scroll down little bit more okay um maybe I don't know where it is but let's fine okay because as we are running on expoo okay here only okay then we have to use this different callback URL okay but once it is in production then I will let you know in the course at the end how we can update it but first let's go to our application and inside this detail only you have this call back URL paste the uh this particular URL and same thing you have to do it here as well okay same uh call back your URL and redirect URL need to be same okay and then save it perfect now our configuration on the dashboard side is almost completed next thing you need to copy all of this um kids okay so copy it and let's go to back to your to our application and inside the utils folder okay we'll create a new file and we can call it as a constant do JS here I will paste all of this uh variable okay so obviously we need to replace it but before that let me do it export default and then we'll paste it here okay so first thing we need to add this uh is URL okay the is URL need to be https your domain dokin do uh.com okay so your domain will be here let me show you so if you go to the dashboard okay here this will this will be your domain okay so copy this domain as it is and then paste it here okay the call back URL this one and this one will be the one which we added here okay so copy this as it is colon and then this value same thing okay let go comma over here and the last is our client ID so you will find the client ID as well over here okay so copy this client ID and then paste it here simple and our keys are ready okay perfect so let me close this one now let's go back to our documentation and once you add that one now we have to uh create a new instance of this kind hdk okay so copy this one and obviously we are we need this uh kind hdk instances at multiple places so what we are going to do so copy it and instead of defining every file we will Define in one a file called kind config.js okay and here just write export and then constant client okay once you define this export so that we can use it throughout the application now here this value we need to fet it okay so first thing is issuer so let's constant because we are we kept everything in constant right so let's import that one it's not importing so let's import constant from constant okay and once you define this one dot and you will find the isure url then we need to add redirect URL constant dot uh log out call back I think red URL or maybe you can sorry here will be a post back call back URL then constant dot client ID and then logout URL so constant dot this logout URL okay and now make sure to import this kind hdk okay so this import statement is also important and then save it so that it's initialized over here and then whenever we need it we can just call this client okay next let me go back to here and now we need to call this handle sign in and sign up okay obviously we already have this uh login screen ready so we can just just copy this method in our application and let's go to this login screen so we are in the login screen and just paste it here like this okay now obviously we already defined this client so make sure to import this client so what I'm going to do let's add import and we can call client from utils slash can config okay and then save it so that we we have this client now and also we need to add this handle sign in to the our signin button so instead of console log I will remove this console log over here so you can Define like this or you can just simply Define here like this okay and same thing I will Define over here as well so handle sign up okay so on the Press of this one this two method will get call and here once user sign in I will just console it console.log authenticated success F okay this message I'm going to display same thing over here and save it okay now let me go back and let me click sign in and if you see now it's redirect to a browser not browser but inbuilt browser only and we got this message that sorry we don't have see any way to authenticate you at the moment okay the reason is inside the CLE sorry inside the kind uh here we need to enable the authentication so if you go to this tab called authentication here you have option to enable right now we have Google Facebook also it has a bunch of other one you just need to explore so right now we'll enable Google Facebook and the password as well okay or just make it passwordless that's also fine okay so either of two you can use it and then make sure to save this one and now let's test this out okay let's close it and again sign in back okay and if you see now we have the option called email and along with that we have option to with Google and Facebook okay one more important thing I want to tell you here if I go to this homepage and here you have option to design your back uh logo you can add background a lot of different thing you can uh add it here okay now let me uh login it so let me go to the continue with Google if you see it's login because I already have the uh username password entered there but make sure inside the console if you see we got the message that authenticated is successful this is the previous one but just ignore that one but if you see we have the option called authenticated successful okay if you click on create new account okay then it will redirect you to this uh create to create a new account okay and obviously you can continue with Google or you can continue with Facebook okay but I if you see now again it's saying authenticate successful because I only have one Gmail account so that's the reason it's not allowing me to select it okay it's just sign in immediately okay so this is how you can able to log in now the question is if I go back and to the documentation this is the code to log out from the screen okay and also if if you want to check whether user is authenticated or not you can also do it from here okay so what I'm going to do right now let's create a new screen okay so inside the screen we create a new screen called home screen. jsx add the default template and save it now whenever user successfully log in we we need to redirect to this uh login screen but obviously we did not implemented the navigation but that's fine now let's go back to our app.js okay and inside the app.js we going to check whether user is authenticated or not okay so let's copy this particular code and paste it here so whenever application will launch this app.js use effect will get execute and if you don't know how use effect will work so you use effect whenever the app component get load this use effect will get called in definite time if you define like this but if you want you have to call only once once the application out of this component get load then you have to Define this empty array okay and then we just call check authenticate also make sure to import this client from this kind config which we Define already right and here if you see we have if you we'll just consol it we'll say authenticated okay and also along with that we will get the user information if you see this section get the user information so it will return the user's name email along with the uh image as well okay so let's copy this one and paste it here obviously if you if it's authenticated then it will come to on this particular page and now save it okay so let me go back here and if you see as soon as I saved I got this information called email which it login then it also has the URL okay the family name given name along with me size picture Okay so picture URL also there okay let me refresh it so just do contrl M or command M and reload it and obviously we already authenticated okay see it's already authenticated and also it's showing this uh information as well okay so perfect so the couple of things we learn in this particular section that we implement this kind authentication also we are checking we checking authentic authentication if user is already authenticated not and we'll get get user login information okay like usern name profile email or picture Okay so this information also we get it from the uh kind hdk okay so all of these things we implemented successfully obviously next what we are going to do once we implement the navigation tab navigations okay uh then we will redirect it to this particular tab navigation automatically okay that we will learn in our next section but until this point if you have any question any doubt let me know in the comment section and if you face any issue while implementing this particular functionality uh then you can access my source code anytime so now we are going to implement the tab navigation and the for tab navigation we are going to use a three screen or three tab first is a home then my course and third is profile okay so these three types which we are going to add now so let's go to the library called react navigation okay and in many of my react native courses I use this Library called react navigation so it's very easy to use and easy to implement so first uh let's go to this read docs and here uh you first need to install this dependency okay so copy this dependency go to your project open the terminal and install it okay next uh if I scroll down little bit you will see the there are some dependency for the Expo manage project okay so copy this and install this this one as well and then next Once you install obviously we want to um add a tab navigation so on the left hand side you will find this option called Navigators and inside that you'll find a bunch of option called stack native stack drawer bottom Tab and so on right obviously in this particular course we are going to use bottom tabs and stack navigation so first let's add the bottom type navigation and if you don't know how bottom type navigation look like so this is the best example Okay so so at the bottom side you have the option and just you can switch it between these screens now for the what if you want to use the bottom type navigation you have to install this dependency as well and done okay now this is the best example that how to add the tabe navigation okay but let's go to our application and first thing uh as we know that right we need to add the typ navigation for three screen the home screen which I have I have the file then we'll create another file uh okay let's create another file over here so call profile screen. jsx and the last is my course screen. jsx I will add the default template for profile as well and save all okay perfect next now inside this app folder we'll create a new folder and we can call it as a navigations so all the navigations related information we'll keep in this particular folder and again inside that I will create a tab navigation file Okay add the default template and then save it now inside tab navigation first we need to create instance of the tab so tab is equal to create uh create tab Navigator so we get we are not getting any suggestion let's go back and copy this create tab navigation import statement okay so here like this and we just need to write create bottom tabe Navigator okay and now inside the return you need to Define Tab and if you want to see the example this is the best example uh to array for it okay so here need to be a tab o sorry tab. Navigator and inside this you need to write the uh Define the screens which you want to use so tab do screen like this okay now the first screen whatever the first screen you define that will be the default screen when you added the tab Navigator okay so obviously first screen you want is the home so we'll add the name home and then component name you need to Define so which component you want to connect it in this case is home screen so let's add that one home screen okay so it's not uh I'm not getting suggestion but let's import that home screen component over here so import home screen from screen/ home screen okay like this and then save it so same thing I will repeat two times we'll give the name my course and then profile okay now whatever the name you give here right that name can it will be used to navigate when we want to navigate from one screen to other screen okay and here we give my Coe screen and here will be a profile screen and then save it now if you see on the screen nothing is happening right now okay because right now defaultly we are showing the signin page okay let's save this one for now and now let's go to this app.js file so right now if you see login screen is showing I will commment this code out and instead of that I will add the navigation container and if you see this navigation container importing from this react navigation SL native so import this container and because if you want to use this react vation right you have to Define your all application inside the navigation container okay now once you define navigation container you have to Define which navigation do you want to use so in this case is tab navigation and then save it now let me okay and if you see on the screen automatically refreshed and you will see the three tabs at the bottom side the home my course and the profile and I can I can even switch it okay you will see the header as well it instantly change okay it perfect now next what we need to do right now we replace the uh login screen okay but uh once you authenticated right initial uh or if user is not authenticated in else condition you can just return the statement and here you will Define the login screen like this okay if user is not authenticated then it will redirect to this login screen okay and user is authenticated then it will come to this homepage so right now uh we going to change this later on okay if it doesn't work but let's uh update this tabs now okay so we will customize this tab with our own icons and all so inside the Tab screen first thing if you see at the uh on the screen we have this uh header section okay and we don't want this header section so in order to remove it inside the type Navigator we have the option called screen options and inside that we have a different number of properties okay so one of them is called heer shown and here you can mark it as a false and if I save it and if you see now header is gone and this header is removed for all of the screens which we defined inside this Tab screen next Once We Define this one uh let's define the color uh for this tab uh the type icon so here you can Define active active uh tab bar active tin color and we Define the colors do primary and if I save it you will see the color of this tab icons and the name we get change now let's add update the icon for each of the Tab screen so for each of the Tab screen you have options inside that you can Define tab bar icon okay like this and then you will define color comma size okay okay and inside that you can Define your icon okay so for the icon we can we will use this icons export. FYI and here you will find a bunch of different icons okay so I will definitely um suggest this icon so you can go on any of this icon and search for this icon now if I select this filter only that ion icons I'm getting the icons of type I icon will get okay so I'm going to use this home so copy this import statement and paste it here and then you have to copy this component and this component we will paste here okay and then save it and if you see it's saved but if you check here the color is showing black because here it showed the color as a black okay so we'll give the color whatever the color of the applications primary color okay so here just define the color and then you will see the primary color okay so I don't know why it doesn't change let me colors. primary let's go the color. primary oops and save it and if you see it change but it's supposed to change with this color as well yeah now some emulator issue but that's fine now you can update the size with the size which it have okay also change the size to small wow okay we'll keep as it is then next uh you can add the tab bar label as well here okay so after this one you can add tab let me remove this tag inside the option only we will add tab bar label okay and same way we can add it so inside the text you can add the the tab bar label for example home okay and here you can Define the it need to be in this Cas okay and here you'll Define the style you can define the color of colors. primary like this and see the Home tab is coming okay now you can you can apply more styling depends on your requirement okay so same options I will copy it for this myor screen and then the profile as well only thing we going to change is this icon's name okay right now if I save it you will see the home for all of them and it's better with convert colors dot oh let me think okay yeah we'll add color uh I don't know why it's not showing but we'll check it out and let's update this icon's name as well okay so this one so let's search for other icon for example book so I will use this book over here and then for the profile I will search person and you will find this person Circle copy this one and paste it here and save it and if you see I on gate change okay so okay so the reason is not change we have to wrap this inside the curly braces save this one and save this in curly and this one as well see now if I click on it you'll change see the color change okay but for the text as well here we'll drag color and this color we going to use it here okay same thing we will do it here as well so I think this we miss that's fine see now it's changed to gray color because it's not active one right perfect okay now if I click on it you'll see it's now whatever the tab is active that color will be the P color okay so this is how you can add the tab navigation okay so guys that's all for this section that we successfully implement the tab navigation now let's add the log out functionality currently uh inside app.js we just added this line of code okay so we'll remove this one and uh if I go to this documentation of kind okay so here you will see uh to method to log out from this uh application okay so what I'm going to do let me copy this handle log out method and we'll add it inside the home screen for a now so let's go to this home screen and here we'll add a one button okay from the react native and then in order to give the button name we have to give with this title and we'll give for example log out and save it and now let's add this method called handle log out and then obviously the button has on press event so we'll call this handle log out as it is okay and then save it now if I go back and try to log out now it's currently uh okay so maybe we need to import this client we did not import okay and then click log out okay if you see it's log out from the it's getting log out from this uh application and if you see it's again came back on the home screen the reason is even though it's log out we are not telling uh to our application that you need to go to this login screen okay now the question is how can we uh tell to this app.js okay so this is app.js where we are checking whether it's authenticated not okay and once we need to trigger this check authentication and depends on the requirement then it will navigate to this proper screen okay the question is how can we do that so let's use the context for that one so in order to use context right let's go to this app. okay and for now uh just for this because we are using the context first time I will Define the context here okay so constant I will say Au context is equal to create context okay and this is how you can create the context now what is the use of this context so whenever uh you want to share some information in your in your multiple component right you can Define in this context and then it will be accessible throughout the application and whenever it get check change it will update on each of the component where you use this context okay so let me show you the example so once we Define this o context you need to wrap this complete application inside this o context and there we have the called provider okay so you have to write like this okay and here you need to define the value the default value okay so in this case what we are going to do we need to I'm going to uh create one state o comma set o is equal to use State okay so it will hold the value true and false if it's authenticated or not okay and whenever so let me remove this uh code and here what we need to do whenever is authenticated we will set the value of art to be true and when it's not authenticated we will set the value of this or false okay and obviously in user effect it's getting executed okay once and here we'll set the value out comma set out like this and then save it okay so right now nothing get changed next now what we need to do on the log out button we need to use this context okay so let's go to this home screen for example and here let's define the constant and in this case when you are defining context you have to Define in the curly braces and here we'll give name O set o is equal to use cont context okay and which context you want to use that context name you need to Define here so which is O context and you are able to use o context because here we export it from here okay and that's the reason you are able to access it and now save this one and whenever user log out we will set the O as false okay like this now another thing whenever our authentication get changed we need to make sure that our use effect will get execute okay and that's the reason here we will pass the value as a okay so whenever the value of authentication is changed this Su will get execute and then this check authenticate method will get call okay let's save this one and right now if I click on log out okay and it will go this and then okay so the reason is not navigating because uh inside the app.js we need to define the condition here so if is authenticated then show tab navigation otherwise show login screen okay so it will say if authentication is true means user is authenticated then it will show tab navigation otherwise it will show login screen let's save this one and let's wait and if you see now it's showing this login screen because we are not anymore authenticated okay and in the login screen as well okay if I go to this login screen here as well when you are authenticated successful we need to set the value of Authentication so here also we will use the context o comma set o is equal to use context sorry use context and the context name which is OD context and whenever user sign in we say set o to be true and here as well set o to be true okay and let's test everything now let's click sign in now on emulator it will open it will take some time to open on the uh screen okay so we'll wait and if you see it's coming now let's click Google and automatically navigate is supposed to navigate actually so let me check what the issue and I tried again okay so they cach a so right now if you see it's redirect to this log out page if I click log out here okay and if you see now it will jump back to this login screen so we'll wait again and if you see it jump back okay sometimes on emulator right uh it will take some time to load it the data and sometimes you need to this kind of things happen on emulator but you can uh also try on your actual device using xogo application okay now I will sign in back to the screen just to make sure everything is working fine and if you see it jump back to this homepage okay so this is how you can Implement and now whenever you refresh the screen Let me refresh it back so just type crl M okay so it's sometimes control m not work I don't know why but that's fine you can just restart your application and then try it out whether it's working or not okay so that's all for this section let's move to this next section now so in this section we are going to implement the header section of the application okay so we are focus on on building this particular section which is our header so here we're going to show the profile image okay then we will show the welcome and the name of the user who login and then this beautiful search bar okay so this three section we are going to do as we already completed this uh tab section and now we'll focus on the home screen okay so let's go back to our application and here let me close this okay and now let me close all of this Windows tabs and let's go to the screen called home screen okay where we want to develop so here I will clean everything and instead of writing the header section everything in one component we'll create a new component so inside the app folder we'll create a component folder okay and inside that we'll get a new file called header. jsx and add the default template like this and save it now add this header section into this particular home screen component okay if you don't know how it works right so what we we going to do uh let me change this color okay so here everything uh in particular section we'll divide into the different different component okay so it's easy to organize and easy to handle as well okay so that's the reason let me go back to our application again and right now we added the home screen here sorry uh not home screen my bad we need to add the header here let me check header okay and save it and if you see uh this heer we are importing from this component SL header okay and let me go back the text is here and now if you see at the very top we have this header okay so what we can do uh here for this particular view inside the home screen We'll add a style and we'll give padding of 20 and also so I will give margin top to 25 okay so this is how header will look like now okay next let me uh clean this out and here I will write one method okay so we will say get user details is equal to and the arrow function now here inside here we'll call constant user is equal to await client we client from this kind config and from the kind config we have one method called get user detail okay and it will return the user detail information as we are using await let make this a sync and we'll console the information console.log User and here uh inside the use effect we will call this method okay so once this component get load this gate user method will get call and then we'll get the user information so let's see in the console because we are writing in console and if you see inside the console we got the email family name the given name the ID and the picture which is a profile pick so let's save this particular user detail inside one state so we call user detail comma set user detail is equal to use State and here just simply set the user detail as a user okay now once we have the user detail first thing we will add the image okay let me close this and inside the image We'll add the source tag and now in this case we are fetching we want to display the image from the URL from this particular URL okay so in order to do that we have to write Source double Cur places and URI okay and here you need to provide the URL so in this case the URL is user do picture okay and now we need to use style like width of 40 height of 45 width of 45 and sa okay so right now you saying the user does not exist okay so it's a user detail not the user so make sure it's the user detail okay and now if you see the user detail is showing on sorry user profile Peak is showing on the screen now let's make it rounded so here I will make border radius to be 99 so it will be in the rounded okay perfect after that we will show uh some text and inside here I will add one text it will say welcome comma and another text we s user's name okay so we'll say hello and the user name so from the user detail detail question mark dogor name okay just to make sure it's correct it means go up and if you see this this is what we need given uncore name okay perfect and uh let's save this one and if you see we got the welcome and hello game so game is the profile name okay let's give some styling so get add style here I will add the font size of 18 then I will add the font family of outfit and then uh um let's save this one perfect for this one I'll add the style I add the font size of 20 font family outfit bold okay so okay in this case obviously we did not add this font family okay but let me remove it for now and in the next section I will tell you how to add our custom font okay but right now let's ignore that one and let's add the font size we already add the font to weight we will add Bold and the color the color I want to give colors. primary okay and save it and this is how it looks for now now let's what we need to do let's bring everything in one line so here I'm going to style We'll add a display as a flex then we need to give Flex direction as well because we want in one row and this is how it comes okay now let's give some gap between these two let's add gap of five okay and let's make align item to be in the center see like this okay perfect now our header section is pretty much ready now let's add the search bar so what I'm going to do I will put the empty tag here okay so you can put the empty tag but you have to make sure that everything in one tag okay and here I will add the view and inside that we'll add the text input see and this text input from the react2 so text input is basically use uh to write some information it's like text box okay or input box for example right now it's not visible if even though if I save it's not visible to your eyes but if I add the placeholder and here I if I say search see now it's showing okay and if I click on it you will see this um uh keyboard is coming up okay now let's apply some style to this one so style here I will add the external styling okay so I will add the react name to style and this is how you can add external styling and make sure to import the style shet as well okay so Styles is added from the react native and now you can Define the class so here I will say input and just Define and attach that class over here okay so once you define style in a curly bases you need to add Styles dot input so just simply refer the style do input now here you need to add the background color so background color We'll add colors do white color okay then we'll add padding of 10 and we'll also add border radius of 99 okay perfect also I will add the Ping horizontal to be 20 perfect and uh also now this is just search bar let's give some margin from the top okay now we want to add add the uh search bar icon as well here okay so pretty easy just go to this uh our library called icon Expo where you can search for the search icon okay let's copy this one this import statement first let's add it here and then let's add this component as well which is the actual icon okay and then save it now for this input let's put everything in one line so to make it display as a flex let's add the flex direction to be row okay and also add the gap of seven let's add the item to be in the center so align item when you make this Center it will be vertically Center see like this and for the SE bar I'm going to change this color from black to gray color so colors do gray okay sorry uh gray like this perfect okay and it look good to now now you can even add the border to this one okay so let's add the border of width I will say one and if you see the one is little darker so you can give like 0.4 or something like that okay even though you can add the Border width sorry border color and I will do colors dot primary and save it okay and if you see how beautifully is looking let's do make it f okay now our header section is pretty much ready and this is how beautifully you add the header section within 5 to 10 minutes okay so in this case if you have any question any doubt let me know in the comment section and I hope you understand how we fetch the users information from this kind hdk with the help of this gate user details method okay let's add the custom f font for our application so right now it's a default font okay and it's not look good so let's add a custom font so just search on the Google like Expo font okay and it will open the documentation for the Expo font so first thing you need to do to import this Expo font Library so just inside the terminal paste it here like this okay in meantime we will search the font which we want to use so just search on Google like Google font and here you'll find a a bunch of different font okay you can use anything any font you want to use okay for example I want to use this outfit form so I will search it okay and just click on this download family okay and it it will install this outfit okay and once you install this J file uh extract that one and inside this static folder we will find this ttf file okay so for example let's copy some of the font which you want to use so outfit regular font I will copy then I will use this outfit extra uh bold uh and the semi bold and medium as well so copy this three4 font so in this case you want to use different font you can use different font and then inside the assets folder we'll create a new folder called fonts and inside here we'll paste that font which we copied okay and let me okay I think we did not copy it let me copy back again again oops so let me go here outfit form Statics bold I will copy then regular semi bold and medium as well so let's copy this one and inside this font folder we paste it okay and if you see this four font we are pasting okay perfect now let's go back to the documentation and if you scroll down so inside the app. jss we need to import uh this font okay so first thing you need to import this font use Font uh import statement so let's go to this app.js and over here I will paste that particular import statement then in order to use this font this this true line of code you need to copy and paste it inside this app function okay now over here let me open this one as well you need to Define your font path okay so in this case it is in the assets folder okay so/ assets SL font and then you need to give the file name okay so for example we want to use regular so I will say outfit regular okay. ttf and we'll give the font name as outfit okay I will copy it and paste it couple of times so for this one I will say medium and for I will say bold okay so three font I'm going to use so I will just rename to medium and this is bold okay make sure use this extension called ttf and then save it and that's all now your font is ready okay now in order to apply this font okay let's go to this uh apps components header okay where you use this welcome and hello game okay sorry hello game which is the user name okay and over here uh for this for for example welcome let's add the font family okay and in this case you can write outfit because we have the three font one of them is outfit if I save it instantly you will see the change okay same thing let's add a font family for this hello word and let's add the font family and we'll add outfit bold okay and then save it okay let me uh remove this font weight bold as well from here and save it and if you see this font get Chang immediately okay so this is how you can add the F and you can change it okay so here as well uh inside the style I will add the font family and I will add the outfit okay so this outfit also get changed change and make sure I will put the width width of 100% okay perfect and I hope you understand how we use the Expo font to add our own custom font as I say you have big library inside the Google form choose whatever font you want to use and just use it in your application so in this section we will talk about the high graph which we are using as our back of our application okay so first thing the high is one of the best CMS in the market right now and which is the best alternative for uh the CMS like strappy or the sanity or content okay there are lot of uh available are there but High graph is much more easy to use and easy to integrate okay so first thing uh here if you see these are the point we are talking about in this section the high graph what is high graph why High graph and intro okay so the reason that we are using High graph because High graph provide uh free service okay so it's free to use then next high graph is used let me increase the size next thing High graph is very uh powerful and the for if you upload the video okay upload video of any size okay if you have 10 GB of video you can upload it okay and you don't have any limitation to upload the video second video streaming from high graph okay is unbelievable it's very fast no buffering at all okay so you don't need a buffering speed of anything so it's very very fast okay I will show you in moment how it works okay and it uses the uh graphql okay so you don't need to create an API just select the field which you want okay and you are done your API query is ready to F the data okay as simple as that guys so let me uh show you how it works okay so so if I go here and in the high graph okay let hyra.com so go here and just log to your um hgraph account okay I already I have lot of account and as you know that uh so let me show you this tube G uh the last video I created okay and this is the website and this is working from the high graph okay just want to show the intro how it works how the streaming is fast and everything so right now if you see this is the intro video and it's immediately run see you don't need a buffer at all okay so this is how fast it is and everything is running from the high grab so for this one if you don't did not watch the video go ahead and watch it but I already have this particular account but you can create a new project from here okay and I will open the existing one because that what we are using and inside the SS folder I have all these files videos and everything is uploaded there okay inside the schema very easy to create the new schema so here for example let's add a new schema we'll say a category okay so we have this API ID Auto generated just add the model okay so this is your schema for the category now inside this particular schema you you have option what are the field you want to add for example let's add this single line field we'll say name which is the category name and you can make this as a title field let's add it now you have validation option here okay you you want want to make the required or you want to make it f any uh validation you want to add everything okay so just update it you have all the setting in your hand okay then you have if you want to add different different fields you will see on the right hand side how all the fields okay even though you if you want to add add the image speaker right here we have option called asset speaker and we'll say icons okay just say icon and you have option allo multiples ass said I don't want it so I will add only one and click add okay and if you see your mod schema model is ready okay now if you go to this content and inside the category section because I already have some of them course list and everything all the schemas of this other uh models are in the description you can check out all the screenshots so that you can import or you can add in your project okay now let's go to this category click add entry and for example let's add the react.js okay this is the name of the category let's add the icon now I don't think so I have come but let's add the existing one okay or you can upload the new one for example I will attach this existing one and boom and you can do just save and publish and it's published now okay now in order to get this data with the help of graphql query here you have option called API playground Okay click on that one and here you will see the option okay let me close all of these things for now and close this one okay now you you will see a lot of different option like assets categories okay the course list membership all the schema which we created you will see find it here okay now let me decrease the size don't know why okay so let's add a new query okay so here we'll add the category okay because we want to fetch category so that there are two option one is the category and one is the categories okay the difference is category will fetch depends on the ID okay only you will get only single category information but if you want to fetch all the in categories you will you will select the option called categories here you have obviously we had option as well but we want to fetch all the information like ID the name and and what else icon okay which we added so inside the icon you have the file name ID local we just want the URL of the icon so the URL okay and now just click on this play button and boom you got this API Json request okay how easy it is right now this is the URL of the our assets okay if I open this URL over here see it's very easy right this is how you can use it in our application and now obviously I will tell you how to use this to get this proper formatted data now if I put this name after this particular icon this is how it will get okay so right now obviously I change this one little bit but yeah uh immediately you will change or see the effect okay it's up to you how you want to handle or what are the fields you want okay even though you have you can take first 10 or first 20 categories you can skip on or you can order by different different field Okay so so this is how you can use the high graph okay you can use the API playground to face data and everything so in next uh section what we are going to do we are going to show the categories on the screen obviously we will added we already added this schema called category okay then I will add some of the more category uh record over here okay and with the help of API playground I'm going to tell you how to use this query to fet the category okay so see you in the next section now it's time to fet the data from the uh High graph okay and then this particular section which we are going to show which is our category section okay so first thing let's go to the high graph so let me go to the high graph and here you will see the content and I added some of the uh category like JS this different different category okay and also I added this slug okay the slug is nothing but to a short form or just uh meaningful name okay and I added because for each of the course list I added uh this tax okay and from that one once user select the any category and then we will find the courses with matching tags okay so we will see this tag list don't worry uh the link is in the description to get the all the schemas okay now let's go to this API playground I will clear this query and let's go to select the categories inside the categories we want ID the name of the category and then the icon uh URL okay like this and obviously we'll get the slug information okay now if I run this one you will see the result okay so it means it's working I will change this name called get category okay you can name anything you want copy this one and and then you have to go back to your application now the question is how to add the graphql how to use the graphql okay so for that one inside the utils folder let's create a new file and we can call it as a global api.js okay so inside this file we'll put all all the graphql request okay now first thing you need to do is to get the graphql request uh Library okay just search for the graphql request and you'll find this graphql request here and just install this uh dependency it's easy so let's paste it inside terminal okay and that's all okay now once it installed you need you need to write a method okay uh so just write constant get category okay the arrow function and here you need to make this a sync so make a sync and here you need to Define const query okay so add the gql okay so every time you need to add this gql so gql is stand for graph qu request so import this particular statement and once you add that one you have to add this tag and inside this tag you need to paste the query so this query is this one so let me paste it here like this okay and then you need to make a request so we'll say constant result is equal to await then you have to put request and inside that you need to provide the URL of the one where you are fetching data and the query okay so where we can we can get the URL so here inside this High graph you have option called project setting go to this project setting here you'll have option called API access okay and here you will find this content API Master URL okay this URL we are going to use don't share anything with your this particular URL okay second important thing if you scroll down if you don't have permission for the API you can add the permission from here so here you have read create update and all the permission you can add it from this particular section okay so make sure for this content API you have proper permission so copy this content API and which is our we can call it as a master URL so I will add constant Master URL is equal to and I will paste this particular URL here okay now inside the request you need to provide the master URL comma the query which you want to use and once it's done you need to return the result like this okay now once you add this query make sure to export it so WR export default ups and then you need to give the name which is the get category okay I will just rename this to small G like this okay now once you export it so it will be available throughout the application okay now go to this uh screen called home screen where we are we we need to get the category data okay so here what I'm going to write here I will say get category list and we'll call one method constant get category the arrow function and inside that just call global global API so let's import This Global API so import Global API from util SL Global API okay and once we add the global API dot you will find this method get category as this is promise then we have to write then response and just console the response that's it and just now this get category we need to call inside the use effect so I will write the use effect here and whenever we uh this component get load this use effect will get call and then get category also get call here okay so oh so my mistake actually we put this inside this handle log out we have to put outside of this one okay and now we have this gu effect and get car is called okay now let's save this one and let's test this out inside the console whether we are getting our data or not and if you see inside the lock we we got this category list okay so category list inside this category object so just write this response do categories and save it and now you'll get the all this list of categories okay perfect now what you need to do you need to store this in uh one state okay so here I will Define one state all constant we'll say um categories I we say categories comma set categories is equal to use State and just instead of console log now we will set the value of the categories see like this and save it okay and now you are done to get the uh category from the high graph graphql API this is how you can face the data okay next what we are going to do we need to show the categories list now here uh inside the component I will create a new file and you can call call it as a categories category list. jsx Okay add the default template and then inside the home screen let's add that category component okay so this category list and here I will add a category list component okay now to this category list we need to pass the list of category which is from this categories so categories or categories okay and inside the category list just accept it here as a category list C should be Capital oh yeah C should be Capital small sorry category list okay now if you see the component is there now we need to display the list of categories so in order to iterate the list of categories we are going to use flat list okay and if you never use the flat list don't worry I'm going to tell you how it works okay so first thing the flat list need to import from this react native then for this flat list we need to provide the data which we want to iterate the value and want to display it on the screen so in this case is the list of category list okay so my bad actually we we use this only category not the category list so just make sure okay and once we have the categories we need to render the item okay so how you want to render so just write item here which we want to render and index the value will hold the 0 1 2 3 okay and this inside this we will write uh the the code to display it on the UI so first I will add a view inside the view We'll add the image okay the image of the category so here I will say uh source as we are fetching from the URL so I will write URI and here we need to write item do icon dot UR URL okay just put optional if it's missing or something like that right and then provide the style of width maybe 40 the height 40 and then save it and if you see on the screen you will see all the um icons on the screen okay so this item. ion. URL is nothing but if you see our API response this is similar this is how it looks right and obviously we already have the category and inside that we have icon and inside that we have the URL okay and that's how we fet it next uh let's bring everything in one line so it's very easy for the flat list you just need to Define horizontal and make it true and it will come as a horizontal right now you can even scroll that one as well next for this image I will make the rounded the Border radius actually rounded so just provide value 99 and as well the object it I will make it uh content okay because if you see right now it's cutting okay in the half edges and all if I put content you will see now you will see the whole a complete image after that I will add the text and here I will say uh name of the category so item do name and you'll see the name okay now for this one let's give some style to this particular view so I will put the react into external style make sure to import this style sheet and here we'll add the uh container class let's attach this container class to this particular view so styles do container and then we'll give a background color colors. white then we'll add padding of 10 let's see how it looks padding of maybe 15 okay and this need to be white actually white okay then we'll give margin right to 10 then we'll say align item to be in the center we'll say justify contain in center and also we make border radius to be 50 okay and right now this is how it looks right but this is odd even right so it's better to give width so we'll give width of 90 so it will be uh similar the uh what you say this is quite uh same with each other okay so that's the reason I give the width now next thing you need to provide VI margin from the top so for this view I will add the margin from the top maybe 20 like this okay and if you see now it's working now if you see this we have the scroll bar and we don't want that scroll bar so here you can say show horizontal scroll bar indicator by default the value is true but you can make it false and save and now if you see the scroll bar is not there anymore and we got this beautiful scrolling effect as well now for this telin CSS the text you can make it Center so give some style to this particular text right text align to be in the center okay perfect next when us click on this one we have to make sure that active we want to show the user which one is the active or selected category okay so for that one let's define one uh State called active index comma set active index is equal to use State and on the click of this particular category we want to set the value of the active set index okay so for this view we'll change this view to touchable opacity because we want to add a press event on click press event and here now we will add on press event okay now I I'm adding this method inside double cly basis because you can add the multiple method as well so now here we'll add set active index and here we'll pass the index value which is the 0 1 2 three kind of thing okay and this value we set it here and now save it next once you save this value you can add the conditional uh styling okay so if you did not know how to add understanding so let me tell you so inside the style let's add this inside the uh bracket like this okay and then give comma and here you need to write the condition okay so in this case we say active index is matching with the index value because you said the index value and whatever the index value is matches with this active index value then we'll write and and operation okay or you can write the turn operator as well and then here we'll write inside the curly braces you need to write The Styling which you want to use so for example we go the Border width oops border width of one and save it now if I press it here like this see okay and now this is how it looks okay now obviously you can add the Border color so let's add border color of colors do primary and save it now the Border color also change see how beautifully right obviously you can add more effect how you want to show and everything but it's up to you how you want to display but right now we'll keep it this simple and when use a click on any of this particular uh category it will select like this now for this text only I will give some margin from the top like four okay perfect so I hope you understand this one and how to uh show the categories list and everything if you have any question let me know in the comment section so and just now I will add the category text like this okay so because this is a important thing I want to tell you so here you give the style you the font family of outfit and we'll say medium and we'll increase the font size of 20 and let's do margin bottom to five okay so this is how beautiful I'm showing now the thing is uh every time okay so okay before that let me add the color and let's see how it looks yeah this is much better now every time you need to Define this particular title okay and every time you need to copy this code paste it the all the places okay so instead of that one we'll create a component okay inside the component folder and we can call it as a uh section heading. jsx and add the default template and just copy this line of code okay so I will cut it from here and put it inside this particular view or even though you do not use the view that's fine just add it here like this and instead of showing this hardcoded category whatever the value we'll pass it here okay that value will be displayed inside this title Al inside this text okay so we'll just call heading that will be meaningful actually like this and save it now let's use this section heading component so section heading component and now we pass the heading value which is the category and save it okay or obviously we need to add the colors import the colors here and save it and now if you see the category is showing here okay so obviously now you can use the existing component so that you can use it multiple times and this is that's the reason we use a component a small component so that you can reuse that without writing or repeat your code inside the application okay so I hope you understand this one and if you have any question let me know in the comment section we'll see you in the next section now in this section we are going to display the course list okay so this particular section we'll mainly focus on and we will fetch the latest courses and then we will show it on word on a horizontal scrolling okay so let's go to back to our API playground inside the high graph and over here we need to write or we need to get the query uh to F the category sorry the course list so let me clean this out and just search for this course lists okay because we want to F all the course so first thing obviously we want to F the first 10 okay by default it will be only it will face 10 record but here what we'll do we will put some value like 50 then we want to order by created at and descending order okay so all the latest course will be display at the first then we want the author name the then we want the description demo URL the free or not ID name okay then slug source code the tag the total chapter uh we will not take this one YouTube url okay and then obviously we need a banner URL so we'll check Banner URL also we'll face the chapters uh data okay so all the chapters data including the video URL and the reason that I'm fetching here all at once I will tell you later on but this is the what we are fetching right now okay this all the information if I run this one you will see we got this all the information okay and now the the newly created one will be the first one because we already ordered by this created at descending order okay so copy this query go to your project and inside the global API let me close all of this tab and inside the global API we create a new method called constant get course list and we put constant query is equal to gql this tag and then paste the query okay obviously this need to be a sync and then we will just make the request so I will copy the existing one and we'll paste it here perfect now let's make a call so here get course list so it will be accessible throughout the application once we export it now let's go to the home screen where we want to display it right so right now we are display last time we display category list so in this time we will display the course list and over here I will add we need to add a new uh component but before that we'll give the heading so we'll have section heading type and inside that we have heading parameter and we'll say letest coures and save it okay and if you see this is display on the screen now you can give some margin from the top so what I will do from this section heading only I will add the margin top to 15 like this so it has a uh big space but that's fine we'll cover it on later on but right now if you see we have this latest course section perfect now we'll create a new new component inside the component folder and we can call it as a course list. jsx add the default template save this one and make sure to import inside the course list like this and save it now if you see course list text is showing on the screen next we need to face the list of course so constant get course list method we will Define and from the global api. getour list do then and we'll resolve the response okay so let's console the response first and we'll check whether we are getting the data or not so get course list I will call inside the use effect once this component get load so I save this one and if you see we got the data okay which bunch of big data but we have all the data okay now what we are going to do we'll Define one state we called constant course list comma set course list is equal to your state and empty ARR and then we will set the value over here okay so here we'll say set course list and then response dot obviously the list of course inside this course lists array so I will paste it here like this okay and now this course list will pass to this course list component okay and now inside the course list we'll accept it here as a prop so we'll dist structurize it here like this and then save everything now once we have the data let's use flat list to iterate the course list so I will use flat list from the react native and inside that we'll provide the data which is our course list then we'll render the item so we we'll add item comma index and the arrow function okay so inside that instead of writing code here we'll create a new component for the item so we'll create a course item. jsx add the default template and here we'll get the only course information okay so each course information will be passed to this course item and WR course item sorry course item and here we'll pass the course and we pass item as a information okay and let's save it and you will see the course item display on the screen now let's go to this course item and inside this course we'll let me clean this out and let's show the image first so image source let me close the tag and obviously we are using the image from the URL so I will type URI course Dot banner. URL okay then let's go height width of um maybe we can give width of 100 okay and we'll add the Border radius of 15 okay and save it and okay so let's add the height as well so we'll add a height of maybe 150 it might be bigger oh it's it's too big actually okay so uh uh we'll change the height and width of this one so we'll add 240 because we want horizontal so 240 and then let's add a height of maybe we can add 160 150 let's see how it looks maybe we need to add more uh okay so let's 130 we need to check which one is better and this is I think this is good okay perfect next let me add this 10 okay next uh after this image we'll add a one view okay and inside this view we will add the text information like um title of the course and everything okay so let's add a text and said that I will just write item do name oh sorry the course dot name because in this course is course see like this okay before that for this course list let's make this horizontal to be true okay like this see and also we don't want the scroll bar so just say show horal scroll bar indicator as a false now you will not find this scroll bar anymore Also let's go to this course item and and for this uh parent view we going to add the we will add a um let's add background color actually because we want to give background color of white also We'll add the specific width of 260 maybe and then let's save this how it looks perfect then we'll add the margin right of 15 also We'll add padding of 10 and then we'll add the Border radius of 15 maybe 10 okay and this is how beautifully it looks see okay perfect now obviously let's give some styling to this text so style and here we'll add the font size of 16 then font family I will add outfit bold okay then um I think that's enough let's add another text I'll copy existing one but in this case we need to show author name so author and if you want to take a reference of this one you can go to this uh tube guruji Academy okay the link is in the description where you will find the way we design see how beautifully we designed right the name this category okay if I go to this all course then the number of chapters and whether course is paid or not okay the similar kind of way we will design it here here I define author let's give the outfit and the font size of 14 here I'm going to change the color to colors do gray perfect okay next let's copy this one and we I want to show the number of chapters okay so I will put the view and inside the view let's put icon so let's make me get the icon for a book and I'm going to use I icon and let's search this particular book okay so copy this import statement paste it here and then copy the component and paste it here and let's say this is how it looks okay after that I will add a text and it will say number of chapters okay now it's very important let's go to this API playground and if you see the our chapter is inside this uh chapter and then we just need to face the length of the chapter okay another important thing obviously by default uh API this particular High graph API will only F the first 10 records okay so you have to mention like this for example in this case we mention we want to F first 50 record same thing inside for a chapter we need to do same thing for first maybe I will put 50 okay so first 50 chapter we want to F obviously in inside our database or content we just have 20 25 maximum chapters but if worst case we can put a maximum chapters which is first 50 so let's copy this for 50 uh chapters information and inside your Global API inside chapter I will paste it here like this okay and now we just need to get this length of this chapter okay so just I will put course do chapter dot length Okay put question mark and save it and if you see now it will show the chapter length Okay but some of them don't have the chapter that's why it's showing zero okay so we'll handle that situation as well but first let's add this text this called chapters okay now we going to show this particular chapters only if it has a course courses okay means the chapters are available then only we will show otherwise we will show empty okay and now which courses don't have chapter C it will show empty okay now let's bring these two things in one line so for this particular de I'm going to add display as a flex then Flex Direction I will add row so it will come in one line see then I will add a gap of four maybe and I will make Al line item to be in the center so it will it will be vertically Center see and then we'll change the color of this icon so I will give the color of colors do primary and this for this text I will give color gray color colors do gray so this need to be colors. gr and save it see like this okay and and in the same line I want to show the price as well so in order to show uh let's add over here only or maybe maybe uh we need to add uh after that is particular text okay so here I will add a text and we'll say if it's free because we have if it's free then we will say uh free otherwise we will say paid okay so we have property course. free okay and if it's true then we will show free otherwise we will show paid like this okay so this course are paid and if you see this course is free okay now bring this in one line so in order to bring this everything in one line I will WB this conditional view like this okay and now for this one oh sorry I will add a style I will make display as a flex then align item to be in the center oh sorry first we'll do make Flex direction to be row so let's check everything in one line see then we'll say justify contain space between and then align item to be in the center so it will be on the right hand side obviously I'm going to change this font and everything so let's add style We'll add font family outfit bold and also we change color colors. primary okay also I forgot to add font family here outfit perfect okay and if you see it is showing beautiful y now it's little bit complicated so what we can do uh for this complete view uh this particular view I'm going to add style we'll make display as a flex and just we'll do gap of maybe four like this okay maybe three okay or let me check we can give Gap here as well so let's gap of three yeah instead of showing here let's it's better to go at the top only okay and this is much better yeah so I think we need at the both places because these are two different view right so it's better to keep everywhere yeah that's now good and now we have this beautiful tag now important thing is right if this course don't have chapter it means this course are available on YouTube okay so we want to show that particular YouTube icon with some text okay so where we are showing this particular uh condition if the length is there then we are showing these chapters and everything but if not there then it means it is on YouTube so we'll add the same view I will copy the same view over here and uh instead of this book icon I'm going to change to YouTube icon so let's find the YouTube icon say this one okay so I will copy this name and paste it here and then I will change color to Red Simply Red you can put like this right and instead of chapter we say watch on YouTube save it okay and if you see see this is how it looks okay obviously we don't want to see show this chapter number we'll remove this one and how beautifully it's showing okay only thing that I will change the size of the icon to 20 yeah perfect and those who are on YouTube it will show watch on YouTube with the this beautiful whether it's a free or paid okay and this is how beautifully we design the particular uh course list uh cards okay I hope you understand this one now what we can do let's go back to this uh I want to show how we can reuse this component okay so right now we just face this all the course list but what if you want to just want to show the only react courses or some popular courses or Firebase courses kind of thing so what you can do uh here just I will say all course list I will copy this one I will say react uh maybe yeah just say uh react native course list for example okay now we rename this react native courses okay and if you see react native courses but this cours L we need to make sure this will get update okay so what we need to uh do here we'll write a new method we call get filter course list and inside here we'll pass a tag okay I will tell you what is tag so for each of these courses okay if I go to this schema and the course list we connected each of this particular course we connected with this tag okay and this tag is added in the enumeration okay so you will see the value so Google and Xs and everything okay and inside the content as well let me go to this course list content each of the course list we added with this tag see okay and from the API playground as well we are getting this tag information in the form of AR list so yeah here see okay we'll just filter it out so it's very easy to uh filter so let's go to the our method get course filter list and let's call this method over here like this okay and here we pass the value so in this case react native okay and now inside the tag we we will just say constant result is equal to course list so oh it's it in the small dot uh we'll say filter then item and we'll just filter with the item do tag do include the tag information which is this one okay if it's there then we'll return return the result so we'll return the updated filter list okay and save it and now if you see now we got only the reative courses so see so this is how you can use the component with writing code just with the small small twixs and tricks okay so this is how you can update now guys as I told you right in the beginning that how can be our layout will be okay so we designed this kind of layout or this layout but can you try this kind of layout which the small uh image on the left hand side then title uh the author here okay then you can mention the chapter number and whether it's a free or not okay so try this out I'm going to also uh right in the meantime and obviously you want to source code the link is in the description I will um show it in the next section how it will be look like okay but you can try on your own and let me know if you face any issue in the comment section so so as I say I added the vertical course list but here is thing right now if I try to scroll vertically I'm not able to scroll it Okay the reason is this particular screen or view is not a scroll okay so in order to make it scrollable let's go to this home screen right now because we are working on the home screen tab and for this view instead of this view just make it scroll view okay and same thing you have to do it here end the tag and then save it and now if you try to scroll it see it is scrollable now and this is how I added thetical course list okay so this look this give our application a little bit different look okay and it's so beautifully same thing I added all of this thing name and tag everything is same only the way we show it different and the main important thing uh as I created different component for the course list vertical name here in uh we did not mention horizontal which is true okay because by default horizontal will be false and then we'll get this vertical kind of list but here you will see the horizontal list because we defined the flat list as a horizontal is equal to two okay so this is how you can Define this different kind of layout for the any kind of list which we Define in the flat list so if you have any question let me know in the comment section and if you really need this course source code sorry then uh the link is in the description you can go and check it out if you face any issue while implementing this particular application so we'll see you in the next section so in this section we will mainly focus on this um course detail page okay so in the first part we'll complete this particular section where we are going to show video player the course information like course name description and then the option to access the source code demo and YouTube okay also here I forgot to add the button to enroll to the course okay because right now uh if user is not enrolled then we will show option to enroll to the course okay otherwise uh we can show up turn to continue learning okay so this kind of thing we are going to learn in this particular section so let's go back to our application and here let me close this all window and now let's add a new screen okay so inside the screen uh folder We'll add new screen and we can call it as a course details screen Dot jsx and add the default template rnf and save it and then uh let's add this course detail screen for in the navigation so right now in order to jump to this course detail screen you need a navigation okay and then we for that one we are going to use Tag navigation so inside the navigation let's create a new navigation and we can call it as a home navigation jsx the reason is home navigation because we are jumping or we are navigating from the home screen to the other screen and that's the reason we will call as a home home navigation add the default template here let's add the constant tack is equal to uh create stack navigation so right now you are not able to create the stack navigation because you need to add the uh stack navigation uh dependency okay so go to this Navigator and search for the tack and here you need to import this tag na ation Library so let's open the terminal and inside the new terminal let's add this stack navigation okay and once the stack navigation is installed let's wait okay so stack navigation is ready so create okay let's now add add import that stack navigation manually so I will import this create tack navigation it's similar to what we add the tab navigation okay so it's kind of similar so here I will just import this one and here we add the stack Navigator like this okay then let me clean this out and here let's write stack. Navigator and inside that you have to Define which screen do you want to add inside the stack navigation screen so here let's give the name I will call home and the component will attach the home screen component okay and the second is uh course detail okay and here we'll call course detail screen okay and save it now your stack navigation is ready your home navigation is ready now let's attach this home navigation screen to this particular tab navigation right it so because we need to connect it okay so here what we call home navigation and don't worry by default uh in home navigation the default the first page will be considered as a default page and this is the home screen so automatically it will render the home screen for this tab I just change this home or let's that's fine now we are ready let's close all the tab and now if you see right now you are able to see this uh header right because inside the home navigation you need to remove this we need to add the screen option and just say header shown to be false and save it okay next let's go to the item of this each of this course okay so that once you user click on any any of this item we want to press on press event to navigate to this new screen so go to this component and here we have this course item component so inside this course item components change this view to touchable opacity like this okay so that we can add the onpress event so let's add on press event and now on the Press on this particular item we want to navigate so for that one you need to define a navigation using use navigation okay and if you see this is importing from the react native navigation SL native like this and then add navigation dot you have to add the navigate okay so navigation. navigate where you want to navigate so in this case course detail okay so this name should match to our home navigation uh stag screen name okay and then save it now let's test this out if I click on this one see it jump to this course screen okay but if You observe here this tab is still showing Home tab okay and obviously it doesn't matter actually okay but if you don't want to show the tab here okay but if if you see if you click on home it will jump to this home hom page if I go here and click my course it will jump to my course like this okay to avoid this kind of issue or you don't want to see tab you need to do some tricks so first thing let's go to this navigations and inside the home navigation instead of using the home screen here we'll use tab navigation okay here we'll use tab navigation and inside tab navigation will keep home screen as it is okay so nothing will get change let's save this one save everything and boom nothing get changed but now if I click here okay let me check okay we got one error we'll check it out what's the issue let's go down so it say the action name navigate to payload course was not handled by a navigator Okay the reason is we added the tab uh navigation home navigation but inside the app.js file is still a tab navigation okay so here is still a tab navigation so here we will change to Stack n oh sorry home navigation home navigation let's save this one and let me close all of this warning message and let's click it now and boom see now it's jump to course detail screen and we don't have any more tab here okay so make sure that this is very important okay the configuration we did if you are confused go back and run this video again okay to understand this concept now let me go to this course detail page oh sorry inside the component we'll go this course item first the reason I came to the course item because here we need to pass some of the parameter so here in order to pass some value to this next screen from this screen you can mention like this okay I will Zoom it out and inside here now here I will type it you can write course and the value which you you want to pass so I will pass this course value as it is to this okay and the field name is course or we can call parameter name now save this one and now let's go to this course detail page so let's go to the course detail screen actually and inside here in order to get that parameter you have to write constant you can destructure right that parameter using params is equal to use route and if you see this use route importing from the react navigation and boom okay now if you want to see the value let's print it print it out inside use effect I will put the parents because whenever the parameter get updated obviously we get console this value so parents okay now let's see what is inside the param so now if I run this one let's let me go back okay and if I click it now if you see we got bunch of this value see from here okay now in it means inside the param we have this course parameter and then inside that we have the value so this is the what we have the actual value which we passed from this previous screen now let's store this value inside one state and here just we call set course okay and then we have the course value perfect now as I say uh in this particular prototype that on the top we will show video player obviously we have we need to show back button and the page title okay so first thing let's add the icon here let's add the view okay and inside that I will add back button icon so here I will search back filter the ionic icon which I like to use and I will use this icon so copy this import statement over here then copy this component name over here okay after that I will add a text and it will just say course detail okay and save it so right now it's if you see it's very very small let's give some style to this view we will save padding of 20 I will give padding top to 25 okay or maybe I margin top that will be good okay perfect now let's change this to maybe 40 and I want the course detail in one line so let's add style we'll make display as a flex and we'll add a flex direction to be row like this okay align item to be in the center perfect now let's add some style to this one so for font size I will make 20 font family make outfit bold I will make color colors. primary or maybe I will keep the color as it is as a black okay and this I will change to 77 perfect now let's give some gap between the icon and that so I will Gap of 20 30 like this okay and this look good now for this back button I we'll keep as it is now let's add on press even to this uh back button okay so let's wrap it to the touchable opacity and inside that I will put this I icon and here I will put on press okay now in order to go back to previous page is very easy okay first you need to obviously add the navigation here similar to what we added before is equal to use navigation and then in order to go back just write navigation. go back so it will go back to the previous page where you came from okay and save it now if I click on go back button see it go to this button see okay perfect next as I say we need to add the video player so let's create a new component for the video player and or or we can add obviously multiple things like video player description so let's add the component name video or we can course uh intro. jsx okay add the the default template and then inside detail screen add course intro and we'll just say course intro and this course intro is get added okay now in order to uh add the video player right we need to add one uh Library called video Expo if you search video Expo you will find this Library okay Expo video just install this Expo video library so inside the terminal I will paste it here and then we have to make sure from this course detail screen we will pass this course information so I'll pass this course course information as it is okay and inside the course intro let's accept it here as a prop okay let's save this one and this now if you see this video player right it's very easy to use just copy this video uh I what say video component and just paste it here okay and make sure to import this video component let's copy this import statement so Expo a I will copy it here okay also uh I will add the external styling for this video like height and width okay so let's add Styles sheet perfect so here I will add class name video and we will give width of 100% And we give height of 450 okay and then save it so right now we got error that reference video I will remove this one we don't need it let's open any of this file and if you see oh we got one error that said status I also don't need this one save it and if you see now we are we have this beautiful video I will decrease the size like 400 maybe okay and I don't know why it's showing height too much 250 is fine I think okay now once we have the video right uh right now if you have see you have the control and you can even play it okay but here you can mention is equal to True save this one now here instead of this hardcoded video URL we need to pass our actual so from the course let's add a course dot now if you want to see the uh which URL we want to pass if you see right inside the chapter so let's go to the chapter inside the chapter we want to show the first elements Ur video URL because that that is the introduction okay so inside chapter we have video video and inside that we have the URL so let's go back here and inside the course we have the chapter inside that we have video inside that we have the URL and now save it now let me go back once come back again so cannot say Source property okay so let's add course if course is available and now if you see we have this video uh playing okay only the the thing was missing that I need to face the first element of the uh video URL okay so that's what I figured it out but yeah now it's working okay another thing in the emulator you might not able to play the video okay right now if you see but if you go to the actual device in expoo app you will see the video is working fine okay so sometimes depends on the emulator version and the speed and everything sometimes it not work but if you see right now if I move forward see the video is there okay perfect next we need to add the title of this video here then I will put View and inside this view I add the text and we can call uh here will be the course. name okay see like this and we'll add the style to this one we'll add the font size of 20 the font family I will add the outfit bold like this okay we'll increase font little bit to maybe 22 perfect next what I'm going to do uh whatever the inside the course item right we have this uh information like author's information the name and everything okay so let me wear yeah from this one I will copy everything as it is okay so let's copy from this text until this point okay and let's add inside after this text and we have the iic icon we have we need to import the colors and let's save it let's see what else is M missing so it say ionic icon does not exist let's import that one so this ion icons I will import it here save this one then and that's I think that's pretty much we have okay only thing that for this particular view I'm going to add a display as flex and also I will add the gap of maybe 10 yeah like this okay now it has a author it has how many chapter is there and which is a paid or not okay perfect after that one we'll show the description okay so maybe I will show over here let's write H text or maybe let's add a heading section page do we have that let me check the component section heading it's called section heading section heading I don't know why it's not getting imported but let's import it from first so UT section heading from section heading okay and this section heading we'll add we'll use it here and obviously we'll we need to provide the heading as description okay perfect and here we'll add the description so obviously we need to add number of lines to only three and the description will be course dot let's see what is the fill name I don't remember actually so description only description and save it and if you see we have this bful description if you want to give margin top in the minus you can give margin top minus 10 like this okay now you can give the number of line for example five and then it will show the five line okay now obviously uh it's showing the blank one but yeah this is how it looks next what we need to do we need to add the three section over here for the source code if you go to our site okay which Tu GOI Academy here you will find this option source code abdom and YouTube okay same kind of option and icon we going to add over there okay so I already added this uh images okay so that what I'm going to use so for that one let's add different component don't want to mix it inside everything so let's add a component maybe inside the component folder and we can call it as a source section. jsx add the default template and then let's add the score section inside the home screen or not home screen inside the course detail screen okay here course section section and here we'll add just course uh Source section not the course okay it need to be a source if you see we have this beautiful Source section now inside here I will add one view view inside that we'll add image let's import this image and this image have source which is from the require because we are going to use local one so slash dot do slash let is uh go to the assets folder SL image folder and then let's loc at this uh this is for the okay let's find another one which is open source open source. PNG okay so it's saying okay this need to be open do Source like this okay now for this one let's give width and height so let's add a style we'll give width of maybe 17 let's get height of 17 let's save this one and this is look good to me let's add a text as well so we'll just call Source Code okay now let's add styling to this one so add padding of 10 we'll make a background color of white so colors do white then we'll make item align item to be in the center we'll make pairing of 15 maybe and we'll make border radius around it like this okay and let's add some styling to this one as well so font size I'm going to add maybe 17 then we'll add uh font family outfit perfect now I will copy existing one two times because we need to show the source code the demo and one for the YouTube and here we'll say YouTube Let Me rename this name to to actual YouTube and the another one which we have for web design and save it save okay now we need to bring everything in one line so we'll use this style we'll make it display as a flex Flex Direction I will add as a row then will say just if I contain will space evenly okay like this see also uh let's give some margin from the top so add margin top to 20 and I think the size is quite bigger let's make it 40 and this one has a 40 let's see how it looks yeah 40 is much better like this okay um I will make this font size to 14 and 14 yeah much better okay also if you see the width is not that much okay so what we you can do you can mention the proper width for example if I mention width of 100 okay let's WID of 130 20 and assign this we to all of this one okay like this so it will be in equal sides okay obviously we can give a gap 10 let's see how it looks perfect okay now we have this beautiful source code demo and YouTube now obviously uh we need to put this source code only mean we need to give access this source code only if user uh have the membership okay otherwise we are not doing that one that functionality we will do it later on but for now this is the just UI part also if you see uh at the top section right and this part description as well let me add the font family to this description so let's go to this course intro where we added the description and here for this style I will add the font family of outfit okay and let's add a background of white to this whole section that's will be look good let me check how it looks okay you can just try on on your own as well how you want to display like this okay and obviously we need to do padding of 10 that's look good not bad but it's up to you how you want to display okay or you can just add this um background white to this particular section like for example for this view only okay let's try to add for this view only see like this okay and that will be good actually so guys I hope you understand how we implemented this particular section okay it's quite easy you can try on your own design whatever you want to do okay it's up to you but later on now uh we want to give option to uh enroll to the course and obviously we need to show the all the chapter section okay here we are giving option to enroll to the course okay so we are obviously showing button like to enroll to the course or if user is already enrolled to the course then we can show the button as a continue okay obviously the logic behind the enroll course or continue button we uh we Implement later on but when we finish the UI part then we can implement the logic part so here I'm going to add new section and we can call it as enroll section okay and let's create a new component for that one so we'll create a component called enrollment section. jsx add the default template save this one and let's go back and add that component inside the course detail screen okay and if you see the enrollment section here is just simply we going to add the button okay and not a different thing so for this view only We'll add the style and I going add padding of uh maybe 15 let's see how it looks then we'll add a background color of colors do primary color and let's save this one then we going to add border radius of 10 and for this text I'm going to style we'll say text align in Center then I will add the font family of outfit medium and font size of 20 oh 20 is quite bigger let's add a 50 okay and let's add the color colors. white okay and this will be our enrollment this need to be enroll to course now the thing is uh if user is not member or is already enrolled then obviously we need to show a different button okay so here simply what I'm going to do I'm going to uh write one state so constant is enroll comma set comma set is enal is equal to use State and initially I'm going to add the value false okay see this is just for this part um for the UI purpose okay obviously the logic behind this one we going to implement later on so make sure and here I'm simply adding um is endroll if it's enrolled then I'm going to show different button and if it's not enrolled then we will show enroll to course okay same text I'm going to copy from here paste it over here and here we'll say continue and save it okay so right now if I see the user it enroll it means the value will be true and here it will show continue but if user it not enroll then will show false and then it will show the button enroll to course let's add add border to this particular section because it look little uh weird not weird but I will just add the border to that one so inside the course intro for each of this view okay so I'm going to add a border border width and 0.4 I don't know which oh I added incorrect border here not here but maybe this particular section okay that is not inside the course intro it is in the section uh course Source something Source section yeah so here let's try to add a border and let's look how it looks okay yep that's pretty much good let's add three or maybe four that's fine and let's save this one let's add it here as well and here as well okay and then I will give some margin from bottom maybe 10 20 we have to give margin bottom here actually perfect like this okay and now next we need to show the course lessons Okay as I say so let's go back and let me show you how we are going to design the course section so if you go to this tubei Academy appli the link is in the description and you can open any of the course okay so if I open this particular course you will see this particular section okay right now uh I already enrolled to this course and that's the reason it's showing this play button but if let's go to this course which I did not enroll but most of the course I enroll okay but let's go to this Disney and if you see right now it's showing this log button because I did not enroll to this course and this user is already a member that's why is showing the button call enroll now similar kind of functionality we are going to design over here so we'll create a new um component and we can call it as a lesson section. jsx add the default template and then inside the um course detail screen I'm going to add here lesson section and obviously I'm going to add a lesson section component and here we'll pass this course information and make sure to uh get here inside the props so course and save it now here we going to use the flat list so add the flat list before that let me add the section heading name okay and the heading will be lessons okay see then we'll add a flat list and this flat list contain only chapter data okay so if I go to this API um playground and if you see we need this chapter list only okay so in order to access the chapter list we can access with the course do chapter then we will render the item so item comma index and this information now here we will render each of the item so here is thing right you can use another component okay but you can Define over here so this will be a touchable opacity and inside that first thing we need to add the text okay so this text will be like 0 1 2 Okay so let's add that one so inside text I will just Define the index okay plus one because we want to start the index with the starting with the 1 2 3 okay currently index value is zero and if I save it right now if I see your is not scrollable okay so to make this scrollable let's go to course detail screen and make this view as a scrollable view and then save it obviously uh I don't know whether I imported scroll scroll view is imported now you might see this particular error that virtually should never be nested okay so that's fine completely because this is just kind of warning okay it will not give any uh issue in inside application but I I'm going to tell you in later on uh how to fix this error as well okay but right now just ignore this particular issue and now if you see it's now scrollable now let's go to the lesson section and then let's add another text which will be the uh name of the course item do name sorry name of the chapter or lesson okay like this and the third is we need to add the button so let's add the button the play button okay so I'm going to get that play button from here and we'll just filter out with the I icon and let's get this button okay so copy this import statement first let's paste it here and then copy this component as well and save it okay now we need uh everything in one line okay so let's add a style and we'll make display as a flex and we'll make Flex direction to be row okay now we want this one and introduction uh together okay so let's wrap this two text inside one View and save it now for this one let's make this uh justify content space between so this button will be on the right hand side and for this one as well we need to add display as a flex then we'll Flex then we'll say a flex direction to be row and then we'll give gap of 10 okay obviously we need to make item align item to be in the center so it will come vertical Center and same thing we're going to apply for this view as well this need to be align items perfect okay now let's apply some styling to this main view okay but before that okay that's fine uh let's add a padding uh maybe padding of 10 or maybe add 15 then I'm going to add a border width of maybe 0 5 like this also I'm going to add margin bottom to 10 I will make border radius of 19 uh maybe 10 let's add elevation so elevation is nothing but kind of Shadow effect okay see but sometimes uh actually actual device is look much better uh in this kind of screen it's not look good so right now let's remove this one okay and save it for now and if you see we have this beautiful effect now for this particular view which is the oh sorry for this particular text let's add some styling so style we'll add a font size of 17 then I will add font family outfit then um we'll add padding of 10 I'm going to add border sorry um background color background color now here I want to use a different color Okay so let's add a colors which I want to use and I will say primary _ light color Okay so the code for this one FF DD DD and that primary light primary color I'm going to add it here okay and save it and right now this is how it looks now let's add a border radius of 99 because I want to Circular and for this particular text I'm going to give width uh some width like maybe we can give WID 40 and then height 40 because we want it uh square and circular see and then we can make this text align to be in the center so it will be in the center and now for the color I'm going to you colors do primary okay and this is how it looks see so beautifully right same thing uh let's let's add some styling to this um text which is the name of the lesson font family I'm going to out fit medium okay and we'll increase the font size little bit so font size I'm going to add 17 maybe oh so we go have font size need to be in the number only so that's the reason we got the error let me reload the application okay so let me go back in any of the chapter and let's see perfect okay now we have the Beautiful chapter everything now if you see as I say in the beginning right the sometimes it works sometimes not now it's playing okay so sometimes just restart your emulator okay and it will work the video player now if I go down we this is look good to me and then uh let's increase the size so let's make it 34 okay okay and I'm obviously I'm going to change this color colors. primary okay this is how it looks perfect now next what we need to do as as I told you right if the user is uh not enroll to the course we want to show the log button okay so I will hold the one state called is enroll similar like before set is enroll is equal to use state so obviously as I say right it might be change this one but but for the UI purpose I'm going to add that one and here I'm going to add condition is enroll I'm going to show this play button for now otherwise I'm going to show the log button log icon not button the icon so let's go here and just search for the lock and you we will use this lock copy this component we already have the UT statement for that one and here I will make 34 obviously I'm going to to change color to colors. primary and save it so obviously um here we going to add one more condition if is enrolled then we can show this play button otherwise we will show the lock button if you see oh this need to be 34 okay and I'm going to change let's 34 is too big I don't know yeah and we'll change this color to gray okay like this obviously if this is a first element right obviously first element you want to show which is Introduction and we already showing the video so here I will write the condition r or index is equal to zero then show the play button for this one see okay you can you can also gray out this text little bit but I will keep as it is for now so this is how we can add the uh scroll effect now if you see add the 17 very if I scroll at the bottom right right it's little bit cut down and I after that I cannot scroll it okay the B solution is a kind of just a a sample solution just add empty view okay and for this view let's give some height for example style we give height of 50 okay and save it so now I can able to scroll it at bottom see okay so it's just a kind of uh way to give this uh end scroll okay so that's all for this SE that we beautifully added this particular lessons and everything now obviously there are a lot of things we are going to implement in the next section that uh to enroll to the course obviously user click on any of the source code it will jump to the browser then um if user just already enrolled to this course we're going to show this play button okay and later on in this course user completed some of the chapters we need to show the complete chapter list as well okay lot of things going on guys so please please uh watch this complete video and if you did not subscribe to my channel yet please do subscribe okay all the links the important links is in the description so you can go ahead and check it out and we'll see you in the next section so now in this section we are going to uh implement the course enrollment section where user can enroll to this free or paid course for example if you see on the screen right now if user open any of the course okay and depends on the course is free or not uh then depends on the condition we will navigate to this particular uh logic so for for example if the course is free then it will navigate to this course enrollment uh page and obviously then we going to save the information to our database but if course is not free okay then we uh here we obviously we are checking uh whether user is member or not and and if the user is member then we will allow user to enroll to the course okay but if user is not member then we need we will navigate user to buy the membership page okay and then obviously once user buy the membership then he can enroll to the course okay obviously uh for a paid course user need a membership to buy it okay and for a free course user don't need to buy any membership just he can enroll to this course okay so this is what the complete picture of the course enrollment don't worry if you confus because step by step we going to go through it so let's go back to our application so very first thing we need we we are doing here to check whether user is already enrolled to the course or not okay so for the um enrollment section okay so I'm going to go to this course details screen and inside the course detail screen I'm going to write a method called constant check is user enroll to course okay so I give the meaningful name to this one now here obviously we need a API call to check uh whether the user is already enrolled to the course or not so for that one let me go to this High graph and here inside the high graph we have one schema let me show the schema for the user enroll course to enroll the user we are getting we are saving the uh data like user email the course idid so in this case course ID is nothing but the slug name we are going to save okay because slug is unique for each of the course then we going to save completed chapter and the course list okay so completed chapter contains the U multiple component can we can save or multiple record we can save and the course list is nothing but we connect this reference to this course list okay so here obviously you can um you can have this option called reference where you can connect uh this particular schema with this course list okay and let me show the content example of user enroll course okay for example in this case if you see I I use this course ID and this is Slug name I kep then we have the completed chapter obviously we will Implement that later on and the course list means the list of course which we attached to this one now let's go to the API playground here let's add a new query and here we will search to get the user enroll courses okay so search for the user enoll courses okay not the user enroll course because user endroll course only accept the ID and obviously in this case we are not providing ID we are providing a course ID which is our slug name so let's find this particular user enroll course and here we need some option for example obviously uh we need a course ID okay but before that we need to pass some of the V uh conditions to fade the record the first is the email email ID of the user and the second is uh course ID okay so here I'm select the course ID here I will pass the slug name and then we need the user email okay we scroll down here we have the user email so two these two things we we are going to pass then if I scroll down now once we have the we condition right if I scroll down we going to fetch some of the um Fields like completed chapter we'll get the completed chapter with this uh chapter Med we will take it then we want to take course ID it will return the course ID just to return okay so this value uh we don't need a course list actually because we already have the course information then I will take ID it will and uh I think that's enough okay so what it will do once we pass this course ID and user email okay then it will return us the completed chapter information along with the course ID and ID okay not all of these things we needed obviously if you need any more thing we can add it here now if you want to test this particular functionality let's go to this content for example copy this course ID and let me go to here and we'll pass this Co ID over here also I'm pass user email light okay and let's run it and if you see now we have the result it means this particular user is registered to this particular course okay and then it will return the completed chapter course ID and ID okay that's what we wanted and if you see it return only one item okay because it's list now copy this query go back to your uh Global API file here we're going to add new method constant check user course enrollment course en enrollment now this will be a sync so I will add a sync like this okay so constant query is equal to gql tag and paste the query and now we will make this request so I will copy this and paste it here now two things we need first is Slug which is a slug name and another is email so where where is the course ID obviously here we will pass this slug name okay so here in order to pass the dynamic value you to write like this okay and then slug same thing for the email as well email okay and make sure to export this one and save it now here two things uh we need it okay in order to pass the value one is the email and other is the slug name okay so slug name and email we are getting uh okay so slug name we are getting from the course information okay so let me check we we we already have the course information but the email information we need to get from the users details uh login uh hdk which is kind hdk okay so for that one what we are going to do we need to write one context to get the users details so once we update that context we don't need to uh um pass the value and it will be accessible throughout the application so let me show you how so let's go to this app.js file okay and if you remember we have this Au context uh context here right similar context we will create here export constant we say user user detail context is equal to create context now this user detail context we going to use it here so I will WB this application inside this user context provider like this okay and obviously we going to put the value so the value will be user detail comma set user detail now obviously we don't have the state for that one let's define the state so constant we'll Define this state is equal to you T now over here once we have user authenticated we will set the value so right set user detail is equal to user profile because we already have this user profile information okay now wherever you want the user profile information you want to use in any other component you can just access using the context okay so let me just copy this this one two textt okay and now let's go to this any screen where you want to face the data so for example in this case um here if you see constant so here I will Define the context user detail comma set user detail is equal to use context okay and inside the use context we going to provide the context name which is user detail context like this and save it now we have the user detail information now what I'm going to do I'm going to add one use effect or maybe we can add it here only okay we'll add and and operator and the user detail if user detail is available okay then only we will execute this method okay so we'll just say user detail is available and and parameter is also or maybe that's fine is available and and and then only we'll check user in to course now here we will call that method Global API do check user enroll course M here we need to pass slug which is we'll get it from course. slug comma email so we email we'll get it from the user detail doil see then operator and then response we'll just console the response for now and then save this one now let's go back inside the console and let's open any of the course so right now we got the canot property slug okay the problem is right we need to make sure that once we have this parameter information then only we'll get the course information okay so maybe we can just write params and and operator and let's test this out now okay still we have this uh error okay let's write like this so here you just add the param course because when you add the set course right set course is asynchronous so that's the reason it's not getting updated immediately that's the reason I pass this parameter okay and make sure we have the parameter we have the user detail then only we'll call this check is user enoll course and right now if you see inside the terminal we have this uh empty value right it means us is not enrolled to this particular course okay and what we are going to do we are going to save this response so here we'll Define one constant we'll call um user enrollment comma set user enrollment is equal to use State and only the thing right for example if you see this is the user course enrollment sorry user enrollment course information is there so set user enrollment and here we will store response. user enement course of first value if there is any value okay and save it right now nothing will happen because we we did not save anything okay we got one error look like let me save this one yeah nothing okay everything is good perfect next once we have this data right we will pass that user enrollment course to this enrollment section because depends on that one we need to show this button okay so we'll pass user enrollment courses okay so let me copy what is the name user enrollment and we'll pass user enrollment okay in enrollment section we will accept it here now as we know that we already have e user enroll method okay obviously you can just use this user enrollment that value that also fine for example if I commment this and just use user enrollment so here we'll use user enrollment. length is greater than zero then only show this continue otherwise just show the enroll to course so save everything and if you see right now this user enrollment value is empty if you want to console you can just console to verify we are getting the correct value so console.log user M course and here we'll put the value L and if you see right now it's showing undefined Okay the reason we get identified because we are trying to get the zero value so you can just pass all the value like this okay and if I go to this enrollment section now try to print it out and now we are getting empty value okay just to make sure that's the correct value see okay and then here we are checking whether it it has a element or not okay perfect same thing we can do it for this particular um source code okay just to make sure everything is working so what I'm going to do inside the course detail screen same thing I'm going to pass to this Source section and let's go to this Source section and we'll accept it here oops user enrollment okay okay but here obviously if user enrollment and membership both are need here needed here okay so once user click on that one we have to check if user has the membership and then user has enrollment for that one okay for example let's save this one and let's add the on press event to this particular uh source code demo and YouTube uh sources okay so what we I'm going to do I'm going to write on press if event okay but okay we we'll implement this particular functionality later on it's not big deal okay it's just to click on because right now if you see we did not pass this course information here okay so let's pass that one first so to this Source section we need to pass course information then is course section we will accept as a course and now let's uh change this to touchable opacity so we can add the click event so this one as well to all of the three okay and now let's add the onpress event so here I will add the onpress event we say on Source click and we pass course Dot and this is the source code so let's see the field name so that is a source code so source code okay and over here so we'll say constant on Source click URL because we are passing the only URL okay and obviously I will conso the URL for now URL and let's save this one let's save this one as well and let's test this out so if I can click source code see the URL of the source code is showing okay now now copy this on press and same on press event we'll put it here and here as well okay only thing we going to change is this um now here we need a demo URL see uh is this one and then here will be a YouTube url okay and save it now let's test this out so we have demo we have YouTube Perfect now in order to open in a browser we have one property called link linking okay dot if you see we have the option called open URL and here we just need to pass the URL which you pass okay like this and save it now if I open the source code for example okay now emulator it will take time but it open the browser okay see obviously it's the emulator is a little slow oh thanks and it's open this particular uh source code um dialogue Okay so I will just skip that one so it means it's working so we are pretty much good with this source code now obviously here we going to check if users is member okay so we'll write is member Comm set is member is equal to use State okay so obviously we going to use um we might use context in future but right now just for the condition I will WR I'm I'm using this use State okay we might change it later on if user is member then only we going to open the link okay so here we'll say false for example save it and now if I try to click it it will not open because you are not member okay perfect let me close all of this now now one more important thing we need to do is we need to add uh we need to update this enrollment to course section as well okay because we have the users enrollment course detail okay so let's go to this component and let's go to this course enrollment section so here we have the user enrollment I think okay perfect we already updated okay I thought we did not update it but we already have that data now here we don't to write new method all called constant on enrollment PR like this so so okay we we'll do one thing instead of writing the endownment uh press method over here we'll write in our parent component which is the course detail screen okay so let's go to the course detail screen and here so I will let you know why we are saving uh putting this method over here okay and obviously in order to call the method on the Press of this button uh and obviously we need to call this method so to do that right first let's grab this in touchable opacity so that it will be a pressable like this okay and okay let's make undo this one and we'll wrap this particular text so let's wrap this text so it will be pressable and same thing I'm going to do for this text as well perfect now let's add the onpress event so here we'll say console. log continue and I will copy this on press event I will paste it here and we will say enrollment okay now save this one let's save this file as well and let's go into this particular page okay we have the one error that text string must be rendered within the text component wow okay just go back and try it okay sometimes we got unexpected error but that's fine now it's result automatically next here let me pause this video so right now on the Press of this enrollment we will see this enrollment text okay so let's click this and if you see we got this enrollment text okay it means this on press is working now let's add a one method here and we'll just we'll just say on enrollment press okay and this method we will pass back from here to this course detail screen okay so wh we use the enrollment section we'll call it here and just we'll call on the whenever this on enrollment Place event trigger we'll call this method like this okay obviously whatever um logic we WR inside the on enrollment press it will work now first thing here we going to check if user has a membership and if you this course is free Okay so let's check if course is free or not okay if course is not free then obviously here we will check is member or not okay obviously right now uh we are going to uh and we are doing the enr for the free course only okay and then we'll implement the for the membership so here we going to write logic uh to save the data so for that one we need to write uh create a mutation query okay and if you don't know what is a mutation so mutation will help to uh to um write a data into our database like create operation update operation delete operation okay so these kind of things call a mutation inside the graphql so if you see at the bottom right now obviously we use Query everywhere but right now if I select this mutation right and click plus sign now it will change uh to mutation the type of query and here as well the selection is little different now okay now we need to create a enrollment so just search for the create enrollment so if you see we have the option here create user enroll course and here we need to provide some of the information like course ID which we are passing as a slug then course list we will connect the course list by using slug again okay you can add ID as well not big deal okay then the user email uh users email whatever the email uh sign in with okay that email address and then it will just return the ID because I don't want any other field to return it and that's all and that's what our mutation query will look like okay now copy this mutation query go back to our application and inside the global API we'll create a new method constant save user enrollment so the course enrollment constant we see query or we can say mutation query is up to you gql and paste the and obviously we'll make this request now here we need a slug information and user email so I will just get Slug and email so here I will pass the slug name then we'll pass here again Slug and here we'll pass email that's all and obviously let's export this one and then save it okay now save this one as well so let me console over here that we just say need membership okay and let's save it just wanted to show right now if you see this course is a paid course okay if I try to enroll to course it will say need membership see okay but it's a free obviously it will not say anything let's go back search for the free course for example this this is free let me pause this video and here if I try to enroll it now see nothing is see because nothing's written inside this course. free okay now let's call that Global API dot save user enrollment and obviously we need to pass course do slug name and the user email so which is we'll get it from user detail. email okay so that's the reason because we already have all the information in this particular uh component okay so we don't need to pass from one component to other then operator and the response okay so we'll conso the response and also if the response is successful we want to show the alert message okay so alert message will be simple if you need to import from this alert um then alert then we have to provide the title which we will say great then we will show the message you just enroll to new course and then we going to add a buttons okay so the button you can add any number of buttons so right now obviously we will add only one button we can call it as okay oh sorry we need okay and then we'll say on press event if you want to do any operation so we'll just consolid okay press and we can also give the sty so obviously this provide a different styling okay if you have if you see cancel default restrictive so we will put cancel and this is how we can uh add the save user enrollment uh API call okay and this is what if the user we successfully enroll then it will show the message let's save this one and let's try to enroll to this course okay let's enrollment and if you see we got the the message that great you just enroll to the new course okay and save it now nothing is happened right now here okay but let's go to this content and uh go to this course enrollment okay let me select the last one and if you see this is what it selected okay if I open this one see the Rea to hospital booking app the enrollment is success ESS F But If You observe here it is in the drop mode okay because it's not publish it so the issue is you have to uh make it published okay as soon as you save the data so to do that let's go to this API playground and here once you add any data or update any data you have to make sure you have you will publish it so here if you came scroll down you have option uh publish user enoll courses something like like this see okay and you can just write like this and let's copy this one now publish many US your enroll courses count okay because it will publish whatever the courses you have uh enroll okay and let's add inside this API like this let's save this one and let's test this out again and now let's try to enoll it okay before that one more thing as soon as user enroll to the course we going to call this method check user enrollment course okay so that we'll get the updated data immediately so once we have the user enrollment successfully here I'm going to call this method okay let's call maybe below this one and save it now let's enroll to the course okay it's handoll two time by mistakely but if you see we got this message okay and immediately the button also change because now we already enrolled to the course and our this particular method get called to check whether user enroll or not obviously us we enroll that's the reason is return some value and that's the reason we CAU this button name continue okay let's make sure inside the database we have this information and if you see just now we end to this course and it is also published if you see the status is published okay so it means we successfully enrolled to the course next let's try to enroll any other courses okay so let's see this this is also free course okay and let's enroll this course and if you see you just enroll to the new course and button get also updated okay perfect now obviously as soon as we enroll to the course we need to enable this log button to play button okay so to let's do that so obviously we need to pass this course enrollment method of value to this lesson section and let me go to this lesson section and paste it here and over here obviously if you see uh we'll just commment this code out and we'll check the value question do length is greater than zero let's save this one and let's save this one as well and if you see as soon as you enroll to this course you you see this all button is now playable also not only this one but if you go to the page course which is not enrolled but here is a lock and as you are not member it will ask you for the membership okay let me show you in the console because we just write the console that need membership right see if you click need membership okay so I hope you understand until this point how we enroll to the free course next we'll learn how to enroll to the uh paid course okay obviously if user is not member we need to show uh the model to buy the membership and user buy it obviously we need to update everywhere inside the app that okay now this user is membered he can end to the any course so see you in the next section in the last section we uh implemented the enrollment course section but we only Implement with if the course is free then user can enol it but what if the uh course is paid and that that paid course obviously we need a membership okay so let's Implement that functional now so first thing we need to check whether user is already member or not okay so in order to check that one we will go to this app.js okay and inside here we going to add a context where we going to store whether user is member or not okay so we'll just add export constant membership context is equal to create context the reason we creating contact because anywhere inside the component if you want to check if member is there or not with the help of context we can easily get it okay and here we will write one method so I will just type uh check membership and here I will write constant check user membership like this okay and obviously for that one we need a API so let me walk through the schema first so inside the schema of the membership I just storing email the join date uh if you did not put the joint date that's fine because uh whatever the created date is there right uh that date we can put it there active with it's a true or false and then payment ID okay then let's go to this API playground and inside here uh let's add a new query and obviously we need a mutation query to create a new sorry in this case we are just fing the whether it's member or not okay so it will be just a simple query okay and over here if you search for the memberships okay membership obviously we need to find the memberships and over here just go where because we need to pass the email ID email ID of the user so we'll pass email ID okay and then it will return the simple ID nothing else okay if you want to get the created ad or whatever uh option you want to get you can just add it there okay and if I pass for example game Playa [e-mail] if I run this one if you see now this particular user is already member that's the reason you got this data okay but if I for example this is a different user now if I run it see it did not get any data it means this user is not member copy this query go back to our application and inside the global API we'll create a new method here we'll create a new method called constant check user membership this will be a sync so let's add a sync and then paste the query is equal to gql tag and the query and obviously we make the requests now here we need to pass the email so add the email like this okay perfect and also uh let me go back here we need we need to also check we need to get the membership which is active one okay because obviously if you user cancel the membership you can manually update the membership as a active as a false so we'll update the active as a true and this property we need to add it here comma active true now let's export this check user membership and then save it now inside this check membership method inside app.js let's use to check the membership so we'll say check user membership pass the user email address which is from the user detail. email do then and the response okay so what I will do I will just console the response here like this now it's very important this check user membership we need to call once user is authenticated okay so here right now if you see user is authenticated so I will just check it over here okay and then save it let's go back here and let me check okay if you see here we got the membership as a empty okay let me check everything's good and if you see right now it's we are getting as empty the reason is if you see we have this membership but it's a fault active is false okay it's not member obviously let me delete this record so let's delete this record as well because just make sure that okay we don't have that membership okay and still let me run it again and if you see oops it's loading and boom and if you see the membership is empty okay now we have this particular context okay let's define a state constant we'll say uh is member comma set is member is equal to use State initially I will set it as a false and once we have the response we set is set is member and we'll check response dot memberships let me copy this a let me go to API playground this particular field name membership question mark. length is greater than zero then only it will return true otherwise it will return false okay also once we Define this context we have to make sure that we'll wrap this context so that we can use it or provider value will be is member comma set is member and just wrap this okay and then save it now we successfully getting user membership information as soon as we load the page okay next once we are uh any of this paid course right here obviously we need to check whether us is member or not right and for that one user click on this enroll to course let's go back to course detail page course detail page and here inside the enrollment section okay so inside the enrollment section right now we have this on enrollment press method okay and this method we are returning back to this course detail screen see okay so obviously if the course is free we are allowed to enroll it but if not it need a membership so what we are going to do we are going to use context here first so let's add a context is member comma set is member is equal to use context and the membership context now once we have the membership context here we will write if not a member is member then we'll just return it okay but if he is a member okay then he can able to enroll it so right now what we need to do if he is not member then we need to show show some um new screen to enroll for the membership so to do that what we are going to do uh we are going to create a new screen okay here we'll add new screen and we can call it as a membership model do jsx now let's add a default template rnf and save it now the reason that I added model okay because we are going to use model uh screen okay so let me add Expo model model actually and this model look like this see if you click on this one on the top of your page you'll get the model and you can close it immediately without affecting the existing screen okay so this is how model will work obviously on Android and iOS the model um UI is little bit different okay now in order to implement that kind of feature obviously we added this model screen now let go to this home navigation and here we need to add that new screen so stack do screen will give the name is equal to membership and we attach the component which is membership model okay and end the screen now here we need to provide the option as presentation and in presentation we have different method called transer Model Model card now obviously here we going to provide the model okay and then save it now inside the let me close this one let me go to the course screen here we want to navigate to this membership model now okay so navigation will be similar okay so we already have the navigation here defined so we'll say navigation. navigate and the name is membership okay and then save it now if I click on enroll to course let me and now let's click it here and if you see we got this membership model okay and if you see it's coming from the down right let me click say okay perfect so our membership model is working and whenever member the user is not member then we are at automatically open it okay perfect that is working fine now what I'm going to do I'm going to uh pause the video here and I will Design This membership model okay so you can also try on your own I'm not going to show the code how how I designed because this is just simple UI that I'm going to design okay so here I implemented the membership and let me show you for example if I enroll to the course this is how it looks right now okay and if user click on any of this particular option then uh on the click of get membership now we are going to implement or integrate the payment Gateway as well okay but right now we will just keep it simple on the click of get membership now we will just enroll the user um to this member membership okay so let's go to this uh course details screen and inside this member right obviously we are navigating right now but if user is uh not a me sorry user is a member then we can enroll to the course okay and obviously we are going to use this particular uh code so what I'm going to do instead of copying this code multiple times I'm going to create new method so we just constant and we'll say uh save user enrollment and inside that I will paste this code and then whenever we need it we will call this method so for example over here and then over here as well okay perfect and save it now obviously if you right now user is not member then it's navigating to this page okay but on the click of this get membership now as well I'm going to um uh call this save user enrollment okay once user is member so let's go back to this course details screen oh sorry the Course membership membership screen and for this button we'll change do touchable opacity and we'll add on PR event so on press and obviously on this one we need to save the membership right so we'll say uh save new membership okay sorry membership like this now let's create let's create a new method constant save membership or we can instead of doing here okay that's fine we can we can do it uh we can write the code over here okay so obviously we don't have the method to create a SE membership so let's go back to our high graph to create a mutation query so let's add a new query and here we need a mutation select the mutation add here and then search for the create membership so here you will see create membership okay here we need to provide active obviously we by default we'll make it true the email add and I think that's all we need it okay we don't need a payment ID and anything payment ID we will need it once we add the payment information let's add for example 1 2 3 4 five default one and it will return us the ID okay now let's copy this mutation query go back to your project and here search for the global API yeah we'll create a new method constant create new membership this will be a sync constant query is equal to gql tag and paste the query now here we will pass the email and this email we'll send it here obviously right now we don't have payment ID we are putting default okay but once we have we'll keep it there and then we'll copy this one actually and we'll export that method and save it now in membership model let's call it here so save sorry Global API dot save user uh save new membership and here we need to pass the email okay so I I think we passed the email right yeah so it will be a create new membership and do then and we response now once we have the response then we'll alert the message that now your membership is activated so let's copy this alert message I will change the text create now you thank you for joining membership thank you for joining membership and okay press that's fine now inside the create membership obviously we need to pass email so let's get the user detail so I will copy this existing one paste it here and we'll get this user contact use context and from this user detail we get the member so user detail do email sorry and this email will pass now obviously save a new membership we'll call it on this method okay but we have to make sure selected membership is there okay select a membership means user is selected some value then only this same new me membership will execute okay now save this one let's go back to our application let's open this particular course which is paid let's click on enroll to course and select the sum of the the one which you want and now click on get membership now so right now we got error let's see what's the issue so message saying the alert is did not exist so let's add the alert okay and save it now obviously I think we we let me check the content that we have the membership added or not so if you see this membership get added but you it is in drop mode okay let me delete this one let me R everything okay and let me close this one first now let me in to course and click on membership now and if you see we got the message thank you for joining membership say okay nothing get changed because we did not updated anything yet okay but if you see in the membership right uh it is in the drop mode so obviously we need to publish it as soon as we create it so let's check the method called publish membership so see here okay so obviously we can provide this IDE as well or we can check another method publish many memberships this one okay so just call call this method after this create membership once we create it we can publish it now let me delete this membership first from the content delete entry and also let me go back here so this is a paid membership okay so paid I click on enroll to course this membership is open where is code yeah and obviously on the gate membership we are able to save the data okay but we have to uh update the membership information so simply we will update the context okay so because we don't have context here so let's get add the context call is member comma set is member is equal to use cont context okay and we'll call membership context here now what will happen whenever we be save it successfully right we'll just set his member as a true so everywhere it will be true okay and then save it now let me close this one let me try it again let get membership so do we have any error don't know oh we forgot to select the any value and click on get membership now and if you see now it's saying thank you for joining membership click okay let's close this one obviously we need to close it okay so instead of closing obviously we once we say okay we will just navigate back navigation. go back okay save this one and let's close this out now let me go back let me open this one one now now obviously this user is a member okay now if I click enroll to course now see you just enroll to the new course and now it's say continue button because now this user is membered okay now if I go to this any paid course for example this is a paid course let's go here now it's showing enroll to course click enroll and if you see you just enroll to the new course it means user is enroll to the new course because he's a member okay so this is how the membership going to work okay let me go back to our design and here if you see if course is not free then we are showing the model uh to buy the membership and once user buy the membership then obviously even though it's a free course user can enroll to the course okay so I hope you understand this particular functionality how we implemented okay just do the step by step and uh you will able to uh implement the whole functionality okay so next uh we going to uh show the course um chapter or lessons page okay where if I open any of the course right here obviously if user click on continue then uh we will open the new page okay it will only show the uh chapter name along with the video and then list of lesson which he completed or is it's going on okay that particular functionality we are going to do next so there will be one uh bug okay which I just found so right now uh as you know that right we uh we already enrolled these paid courses okay and if I go to this paid course if you see it's still showing to enroll to the course Okay the reason is if I go to this course detail page okay and I just console this response to get the user enrollment courses and it's getting as undefined okay even though we call this parameter and user detail the reason with this because sometimes parameter come first or user detail come first okay and there is some mismatch so the best solution is to pass this parameter course to this particular check user enoll to course okay and here I will accept it as a course and also instead of parameter doour just pass this course do slug okay so what we did we actually pass the value okay and that value is getting updated here so right now if I go back back now and come back again and if you see now button showing continue okay also wherever we use this check is user enroll course make sure to update uh the value okay so right now obviously we need to pass uh the course value so I updated here so that we'll pass a correct value to this method okay so this will be a quick fix uh for this one this particular bug okay also there one more thing I want to tell right now if user is not member right we are not enabling this source code to show it okay if I go to this uh let me go to this file called Source section and here we just checking if it's member then only open the URL but what if he is not member right obviously we are not telling user that okay you need a membership of kind of thing okay so for that one obviously you can navigate to this membership page okay so what we are going to do we will add constant navigation is equal to use navigation obviously this navigation we are inputting from this react navigation / native and then simply you can call navigation. navigate and the name of the screen which is membership and save it obviously right now user is a member it will go through it but if is not then it will navigate to this membership okay so this will be a quick fix for these two things in this section we are going to implement the watch lesson page where we are going to show the video player the name of the chapter each chapter which user select from the list of the lessons which we are going to show below and even user can mark the chapter completed okay and obviously this completed chapter we going to save in our high graph database okay so let's go back to our application oh uh yeah right now let's add a new screen so let me close all of these tabs and inside the screen we'll add a new screen call watch lessons. jsx okay I will restart my Expo Go app add the default template watch lessons Okay and save it now obviously we need to add this in our navigation so that we can jump from this previous page okay so inside the home navigation I I will add a new screen so I will copy this stack screen and here I will give the name as a watch screen and here I'll add watch screen or sorry watch lessons here will be lesson okay watch lesson screen now let's go back to our uh uh course enrollments uh component because where we have this continue button so let's make sure we have this enr main section over here and here we just write this console to continue okay so over here we'll write uh button event like uh on continue place okay obviously this button will pass back to the parent component so I will pass it here and obviously inside a course detail screen um where we have this component name course uh enrollment section okay here I will accept here like this and now you can just add the navigation from here as well okay so navigation. navigate and in this Cas is uh watch lesson and save it now if I click on this continue button it will open this watch Liston see okay now along with this watch lesson we need to pass uh various object so first is to pass the course in information and also we need to pass the user enrollment course so I will write user enrollment user enrollment okay so whatever the user completed chapter and everything we will be inside this user enrollment and then the course information they save this one and then let's go back to our watch lesson okay so here I will Define constant params to get all the parameter which we pass is equal to use route then I will Define constant for user enrollment comma set user enrollment is equal to use State and another is for course is equal to use State okay obviously I can get the course information from the params uh doour okay perfect now let's first uh okay so another thing we need is selected chapter because whenever user click on the chapter we need to save that state so we'll say selected chapter comma set selected chapter is equal to use State okay now obviously set selected chapter by default we will put the first chapter okay course do chapter on zero element okay so whenever we have the chapter the first element will will show now inside the use effect so let's define the use effect here and whenever we have the parameters information then we'll check if param is there then we'll set the set selected chapter okay so here as well you can set this value instead of setting here because parameter might take some time to fade the data right so in this case it will be easy okay and from for this enrollment I will just add params do user enrollment okay and save it perfect now we are pretty much uh done with this one next let's display the video player so let's copy the player which we have inside this course intro right so let me copy this one inside our course detail screen so obviously you need to import the video player okay so let me copy this from the course intro this Expo AB okay and also I will copy The Styling of this video okay so I will copy this one as well make sure to import this style sheet okay and I think we are good okay so here obviously we need to show the selected chapters uh video okay so selected chapter dot uh video. URL like this and then save it okay right now we got the thereor that video is undefined so we have to make sure if the selected chapter is there then only show the video okay so let me go back ignore this warnings and if you see now we have this video player okay obviously let's give some padding and margin from this one so I will add the style we add a padding of 20 like this now the think is obviously you can put this uh video or in in intro section okay but right now we'll keep here that's fine and let's add a back button and the uh name of lesson okay so we can get it from this course detail screen only so copy this view as it is I will paste it here okay and obviously we need to add navigations so I will add the constant navigation is equal to use navigation and touchable opacity let's import this one as well and the I ion we want to get it so let's import this ion icon button import okay so we are just copying from the existing one you can create a component so you don't need to write the code okay it's up to you and instead of course detail I will call it as uh lessons Okay let's save this one and if you see this is how it looks I will use some cap maybe 6 to5 perfect now next thing we need to do is uh let's put this in different component okay so TI or it's small actually we don't need to different component let's add a text here so inside view I will add a text and it will say selected chapter. name okay name of the chapter so in this case it's introduction say and another text which will be a button okay so I will add a view and inside that I will add a text and it will say Mark completed okay so it will Mark the chapter completed let me show you the quick demo so over here if I go to this course okay any of the course if I go here and click on okay so I need to okay let me log in it so if you see if I open any of the course and click continue you have option called Mark completed and as soon as you mark the completed if you see this particular course this Mark completed and showing in a green color okay so similar kind of thing we are going to do inside your our application as well so first thing let's give some style so style We'll add the font family and we add outfit bold let's add a font size of 20 perfect then for this one I will add style I add display Flex Flex direction we draw and align item to be in the center also we'll make justify content between so justify content and space between now let's apply some styling to this one so style we add the background color of colors do primary okay then we'll add padding of four then we'll make a border radius 10 maybe three and I will add padding horizontal little bit extra like this okay and for this one let's add style color of colors. white color and text align in Center perfect perfect okay let's give some margin from the top so margin top to P okay let let's give 15 and let's add the font family to this text which is outfit so we want all the font to be the same color same family so obviously we have this button okay obviously for this button we make you need to make touchable opacity and this one okay perfect and save now we have this beautiful button and the name of this chapter as well now next we need to show the all the lessons Okay so I will create an uh because we have this lesson section let's use the existing lesson section here so I will just add lesson section okay and make sure to pass the necessary value like course and the user enrollment so we'll pass course as a course and user enrollment as a user enrollment because we already have all this value right and then save it now if you see it cames directly over here okay now it has here own um scroll bar okay so you can remove the scroll bar so if I go to the section here will say show vertical indicator and just make it false okay and now see you don't have that uh ugly uh scroll bar okay now if you see this right now this page is not scrollable the reason is we need to make this uh view as a scroll label view so add scroll Lael View and here as well and save it okay now you can able to scroll it until the bottom okay perfect next whenever we click on any of this item we have to make sure that uh the name of the chapter will get changed okay and one more thing I just observed that uh we will make the background color of this lesson to be white okay now if you see I as I go in front it's showing the error that name is undefined Okay the reason is the course is not there so either you can add the question mark for example if I go to this course name where we have here you can add like this or you can add the condition selected chapter is there then only execute or show the data okay so for example let me go back click continue and if you see now the error is not there perfect see okay next obviously as I say we need to put this in white color so for the lesson section uh this touchable opacity only right we'll put background color say colors. white okay see how beautifully it looking okay so now whenever I click on any of this item we have to make sure this uh we are updating this title okay and obviously we are updating the video obviously only thing you need to do is to um to update the selected go back back here selected chapter okay so what we are going to do inside the lesson section I'm going to add on press event so let's add on press event and here we'll simply say on we can say chapter lesson chapter select method okay so and obviously we need to pass the item okay which is the selected chapter now pass this method back okay so here I pass this method back to this watch lesson okay and inside the lesson section I will accept it here obviously we are passing the item uh here we can say maybe chapter okay you can call any time because this is a value and inside the set selected chapter we will just set this value as a chapter and then save it now if I click on create app or maybe this login screen UI okay see it changed this change immediately this to the login screen UI okay if I say authentication using clerk see it Chang es to the authentication using cler so now if I click on this one right if you see this change but if You observe this is not look good right we have our button is going Beyond this uh screen right so to fix this is just one line of things so let's go to this uh particular view right inside this view for this text Mark this text as a flex one okay and save it and if you see if I click on second chapter now see immediately it's come below this one okay perfect next obviously right now if You observe right uh the video on the emulator will not update immediately okay uh because it lag little bit and the ram is not that much good that's the reason it's not update immediately but that's the reason I will definitely suggest to check it on uh the actual device okay so on actual device you will see the exact result what you what I I was saying okay because we already marking this selected chapter video URL over here okay and if you see the name is getting changed immediately not the video because video is little the video component is quite heavy okay that's the reason on emulator um is very hard to handle now next thing we need to do is to update the color combination of this one okay the we need to tell user okay you are you selected this one this particular chapter or this particular chapter so to do do that let's go to this um lesson section okay and here we need to pass the lesson selection the selected chapter so selected chapter I will say and I will pass it as a selected chapter only okay so let's go to lesson section and here we'll pass there okay selected chapter and obviously I will add the default value here okay so default value will be empty I or maybe like this okay it doesn't matter because we use this lesson section let me save this one to the previous screen as well if I go to this previous screen see here as well we use right and to not break anything here so let's add this value because in the previous screen we did not use this selected chapter okay so make sure that one now inside this touchable opacity because obviously we have lot of uh CSS right so better you can uh cut from here and add the new stylesheet okay let's add a style sheet here let's import a style and we'll say container okay and inside that I will paste all this CSS now what you need to do we will write a condition here so here we'll add if you want to do the uh if you want to add The Styling okay the depends on the condition you just add Styles Dot and a container okay and if I save it nothing get Chang see but now if you want to add a condition for example if select a chapter is equal to equal to item okay then we can add the uh style here right for example We'll add the background color will be colors. primary colors. primary okay now I will instead of question mark I will add and add okay so if this condition matches then execute this kind of uh this particular uh styling okay so instead of primary I will add the primary line and save it see if I click this this one is change okay so this we are it's showing that okay you selected this chapter or this chapter okay so this is how you can able to update the uh styling okay conditionally so I hope you understand how we updated styling conditionally okay because previously we update styling uh conditionally inside the inline styling and this time we put the external class okay The Styling class and then we use it here I hope you understand this one if you have any question you can let me know in the comment section now another thing we need to do once user mark this chapter as completed we need to save the data inside the database so let's go to this watch lessons and here we have this touchable opacity where we mark it as a chapter as a completed so add on press event we say on chapter completed so on this button is Click we'll call this method let's define this method constant on chapter completed and we'll Define this method over here now obviously we need to create endpoint for this one so let's go back to our high graph and inside here let me show you the schema so inside the user enrollment section obviously if you remember we already have this user email course ID course list also we have this completed chapter and this is the component repetitive component okay and if you see in the component section I added the completed chapter it only hold the chapter ID and nothing else okay very important let me show you the example so I don't know whether okay so inside the user enrollment courses let's open any courses and if you see inside the complete chapter we just add the chapter ID okay let's go to the API playground and here let's add a new mutation query because we want to up update the record in this case so add mutation click here and now we need to search for the query which has the update okay update user enroll courses so just search it here update because we want to update right so somewhere here update many courses yeah update user enroll course okay so here we need to pass the ID because which record you want to update okay that ID we already have have then we need to pass the completed chapter create complete chapter and the chapter ID that chapter also we have okay only this much information we pass we don't need to pass user email because in where obviously each each record is unique okay so that's the reason we are passing ID so copy this mutation query let me if you confused here right the ID which I'm using let me show you which one so inside the user enroll course right we enroll to this course right right and if you see if I open any of this course this ID is unique to each record okay so this ID we are using here and the chapter ID is the each chapter as a unique ID so that chapter ID we are using so copy this query go back to your Global API here we'll create a new method constant Mark chapter completed this will be async and then constant query is equal to GQ L paste the quy okay and then make the request now obviously here we just need a chapter ID which is the record ID oh sorry we need two things first is the record ID and then another is the chapter ID This Record ID we pass it here so we'll pass like this and the chapter ID will'll pass it here okay now one more important thing we just add the update data but we have to make sure we will return some value okay so I will return this ID so let's make sure to add this ID okay and also we need to publish the data because even though you update it right it will be in the draft mode only then you have to make sure you will update it or sorry publish it so just search for the publish user enrollment courses so here publish and this particular things I going to add there and then save it now let's go back to our application and make sure to export this one now let's go back to our watch lesson where we have this method called on chapter completed let's call our Global API dot Mark chapter completed and here as I say we pass you need to pass record ID so record ID is nothing but the uh the user enrollment do ID okay because in the inside the user enrollment we have this unique ID so if you want to see let me show you actually so here we console user enrollment save this one let me go back to the screen so let me add user enrollment and and user enrollment let's see I don't know why we are not getting data okay so let's use this one oh yeah we got it see okay we just saved it again I I forgot to say but here if you see we have this complete chapter the course ID which is Slug we use and the ID right the record uh the record ID this is the record ID we are passing okay very important that's the reason I wanted to show you okay and the chapter ID is the unique chapter ID okay so obviously that we will get it from the selected chapter. ID because inside the each selected chapter we have the chapter information okay so let me show you that one as well so if you see we have this chapter information right and from the each chapter we have this ID so this ID we are going to store then response okay now once we have the response we will just show toast Android dot uh here show and here we need to provide the message chapter Mark complete okay and we can show toast Android dot maybe you want to show top long bottom whatever so I will put short okay and save it now save this one everything and let's try to run it now right now I'm on the first chapter see okay now let's observe this one let's click Mark chter completed and I think I don't think so okay we got beautiful error let's see what's the issue okay the issue is here right inside the user enrollment okay so let me see if you have that query so if you see right inside the user enroll course we have the list of completed chapter okay not the only one chapter but we have the list here if you see right this is the list so obviously we need to fetch only the first element because here as well inside the course detail screen where we have this course user endro rollment section okay and then we are checking the length of it okay so let me find this out okay somewhere I think we are using the length Okay it means it has more than it might be have more than one value okay means 0 1 2 3 so that's the reason inside this watch lesson as well we need to get only the first element okay every time because by mistakely if you just click on two times okay our server run AP two times it might s two records okay so for that one I use first limit and save it now let's test this out let's mark this chapter as completed see we got this to message chapter Mark completed let's mark second chapter completed okay we have the chapter Mark completed now let's see in the database content let's see game play so maybe we have the latest one at this see the time okay maybe this one and if you see we have the record obviously I updated this couple of times so I will remove some of them okay but if you see let's try to Mark the let me go back and try to mark this third chapter as completed so Mark third chapter as completed let's see in the database now and you see the third chapter is came here okay you will see it here completed chapter three and the third chapter ID okay so this is how you can mark the chapter as a completed now obviously if you see here it is still showing this uh uh what will say the log button okay because here we need to pass the user enrollment completely so let me go inside the lesson section we are here showing the length Okay user enrollment length so you need to just fix it something like this let's see yeah so just Mark as a not it's not empty okay because sometimes it's empty so it's not empty then it will show like this okay perfect so I hope you understand this particular functionality okay if you have any question let me know in the comment section and if you face any issue while implementing this particular project you can access my source code any time now next what we are going to do we are going to implement uh the course completion or chapter completion you update UI right so once us that completed chapter we will F that data obious from the course enrollment and then with the one method we can check whether this chapter is completed or not this chapter is completed not and so on okay and obviously we going to S styling similar like this see in if in this case if this chapter is completed it will show like this see okay perfect so guys uh that's all for this section we'll see you in the next section as in the last section we completed the Mark chapter section and this uh lesson section as well obviously we are saving all the chapter which is Mark as are completed now it's a time to show the which lessons or chapter is completed okay and is very easy means uh we need to write one method and from that one we can just show it okay so inside the lesson section obviously we have this us enrollment okay just to make sure I will console this user enrollment okay for you so here we'll say user enrollment comma user enrollment okay and let's save this one and save all and let's just check it out here okay so if you see inside user enrollment we have this all the information okay so I just R and if you see inside the user enrollment we have this chapter ID and everything okay just ignore this error because because this is just uh it's not that much important but if you see we have this chapter ID okay now what we are going to do let me write one method constant and it will uh check whether this chapter is completed or not okay so we'll just write constant check is chapter completed okay so here if you uh see throughout the uh course right I give the very meaningful name to this course okay so it don't need a special mendation what this method is doing right so make sure whenever you are implementing some method or some functionality you will give some meaningful name okay so it's very easy to understand when you came on this app after so long time okay now here uh we going to pass the chapter ID over here okay and obviously we have this user enrollment okay so what we are going to do um we are just running um user enrollment dot comp completed so I will copy this existing one do complete stter do find okay item so it what we'll do we'll just find whether this chapter ID matching with the any of the record okay so for example if item and then we will pass um item do chapter ID it matches with the chapter ID which we passing to this particular method okay and we say constant result is equal to obviously what I'm going to do I will console log it for our understanding purpose and also I will return result okay now this method we going to call to this um let's call it for now over here okay because we want to show the background so what I'm going to do uh because we want to change the style accordingly right so here we can call call another method or another styling for example if check his chapter we pass the item uh so here uh let's add the method called and we pass the item do ID not the chapter ID because obviously this is a chapter and for that ID we need to pass okay and then uh we will write and and operation if that is match then for example let's change the background color okay so in this case we'll say colors dot green okay or light green we can say light green and save this one and if you see if we CAU one error that cannot find the find property so over here we need to get the first element okay because usually enrollment chapter is as I said last time as well it's a list okay so that's the reason so let's close this one let's go back again so it cannot con undefined value to object let's do one thing let's add the user enrollment and and operation and just check it now and now we don't have any error and now if you see we got the result that okay this three chap chapter has completed okay let's go here and here as well we have one error that can read property completed chapter okay we'll look into that one but if you see let me save this one over here at least we are getting the expected value okay now what I'm going to do here only I will also add the some more styling for example we added the background so let's change this color as well and here I want to change this color okay means I will change to check mark button so I will copy this method and for this particular text which we are going to show number here I will wrap inside the square bracket because I I want to show the condition and then I'm going to add the condition like color will be the not yeah color will be the uh colors do green okay so dark green we can give here and we can give color background color we can give light green as it is not big deal okay so and we'll say background color will be colors Dot light green okay let's save this one this is how it looks see okay and same thing for this icon okay I'm going to change this icon so right now the we have the user envelopment index zero that play button is showing and the lock button is showing okay we we can add one more condition over here let's add one more condition question mark and add this uh yeah let's add this this condition if this and and this matches then we're going to show the icon with check mark okay so I will copy for this for now and then if this is matches this will need to be question mark and what else will miss okay so this need to be like this perfect okay and for this icon I will find some icon which is check mark check filter and icon so this check mark okay and I will just put it here and color I will change to green and save it okay so nothing get changed really we'll see what's the issue now here instead of keeping it here because first it will check if index is zero and the user enrollment right now obviously every time index will come zero okay so better just cut it from here and paste it over here okay and if this condition match then it will show this green color icon otherwise it will show this user enrollment okay and let's save this one and if you see now here it's Chang immediately okay now if I go to this continue right now I'm getting this error. completed chapter is undefined Okay the reason is if I go to this watch lesson okay so inside the watch lesson we setting the user enrollment okay and we are setting the first element so I will remove this from here okay and also we'll make sure we also setting it from here okay parents and and set user enrollment and same thing I'm copy okay just to make sure if parameter is not get updated in time obviously this value will be empty over here or undefined so we have to make sure that whenever the parameter value available then we will set the value okay and then uh over here okay because obviously we remove this first uh the first element We'll add it here okay and then save it and let's test this out now so let's go to this folder here everything is looks good let's go to continue and if you see now it's work completely fine okay perfect don't worry about this video actually as I say right it will doesn't work but an actual device I tested is working fine and now everything is working as expected okay so right now if you see right as we completed this and this beautifully showing that completed chapter okay and right now if I on this fourth chapter if I want to mark this chapter as completed see the chapter Mark completed okay but the problem is here right now that is not reflecting over immediately okay because we are not updating the user enrollment or we are not fing the user enrollment from this watch lesson that we are fetching from this course detail screen okay and if you go here and on this one see this from this check is user enrollment course from here we are checking whether uh user is mean we are uh the user enrollment is updated or not okay so the question is how to solve this issue so for that one the best approach or easiest approach I will suggest is to use context okay once we use the context then we will update the context and when the contest get updated we will call this method okay so let me show you or you can try on your own but let me show you first here so we'll go to this app.js okay and here we going to we create a context okay and this context we will create generally okay because not only for to update the enrollment but whenever we want to update something we'll just change it here okay so we'll do export constant and here we'll say um reload methods okay and we create context something like this okay now obviously once we create the context we need to wrap it inside the provider so we'll wrap it here do provider and obviously we need to provide the value for example we'll say uh reload comma set reload okay and wrap this over here like this now obviously you need to define the state the basic uh sorry the default value for this reload so we'll add constant is equal to use State okay U I'm not passing any value for now okay let's save this one now let's go back to our um the watch lesson okay where we have the problem so whenever we first let's define the context here okay so that we can use it is equal to use context we say uh reload method oh we did not give the context name let me let me do that first so this need to be a Reload method context okay just the little meaningful name obviously I need to update here and over here okay and let go to this watch lesson and let's add it here make sure import it and now whenever we are updating this chapter right here we'll set some value for example update uh enrollment okay now here you can give any value doesn't matter actually because we just we are just triggering or checking whether the reload value is Chang change or not okay and now inside this uh user detail where we have the method sorry um course detail where we have this method right check user enrollment so here I will add the use effect okay and obviously I need to define the context over here Define this similar context right here make sure to import this context okay and here we'll pass reload method okay now here I will just say if reload is there and and means reload has some value then only execute this check is enrollment course like this okay and then save everything until this point we implemented everything for the paid or free course which has the chapters but what if this course is on particular on YouTube okay because on YouTube obviously we are not showing the video on our application we are navigate to that particular video on the YouTube application and right now if I open any YouTube video okay for example let's open this YouTube video and if you see right now it just not showing anything on the top side because it's a blank and here as well if you see we don't have lesson obviously because that's a YouTube video right so to fix this issue or this is not issue but this is uh to make or to implement this uh particular uh functionality what we'll do let's go to this course detail screen so let's go to this course detail screen right where we have this course intro okay so let's go to this course intro over here okay for this course intro I'm going to um pass one more okay so already we have this course information that's fine and from the course we will check if the chapter is not there obviously we not going to show the video okay so let me close it here and here if we'll put the condition okay if course. chapter. URL is there maybe we can put this condition or maybe this condition okay if this is this condition is valid then show the video otherwise we'll add the image with the banner okay and we'll add the tag source it will be a URI and then we need to put the course Banner URL okay let's give styling so style I will give width 100% height will give similar height of video which is 250 maybe get 280 and let's save this one and if you see now we have this video okay let's increase the height maybe 200 okay perfect and we'll make the Border radius border radius perfect okay now what happened uh we are showing if obviously this this particular lesson don't have the any chapters or anything it means it is on YouTube and then we are show them this beautiful uh Banner okay let's tast this out the one which don't have the uh YouTube okay and this is have a chapter for example and if you see nothing get changed for this video we have the YouTube and for the video don't have uh the chapters let's open this one it will show the banner okay perfect next obviously we need to update this continue button okay so let's go to the section called enrollment section okay and over here I think I don't know onment on continue press we have user enrollment we have okay we don't have the button for the uh YouTube video okay so either you can on the click of continue you can do the open on YouTube or maybe you can pass the course information and similar way what we did it for this particular Banner so for this course detail screen I'm going to pass one more where uh value which is the course okay because we from the course we'll get to know what value we need to show okay so let me format this first now if user INR is not there we will show the continue button okay but along with that okay I'm I'm going to copy this button I will paste it here okay and here I will write condition if course because we have the course information let me okay we did not get that one so let's get the course information we already passed from this one okay so here see and here we'll get if course do chapters has at least one element okay at least one uh chapter then only show this all of this thing okay otherwise and here similar condition but opposite like this and and I will put it here okay so obviously it will show this one and it I will just say watch on YouTube save this one and if you see it's saying watch on YouTube obviously we need to make sure that this particular button will not execute Okay so let me copy this condition over here as well and and operator okay see watch on YouTube okay if you want to put icon you can put the icon as well and one more thing uh the lesson section we don't want to show the lesson section so same thing I'm going to do it here as well because completely I'm not going to show this lesson section at all if there is a no chapter see okay but once you make sure this one let's make sure all of this uh those who have chapter right see here it's failed right because it's checking the course here you need to add this course colon sorry question mark means it's optional also inside the here as well okay and here okay or you don't want to put here you can put it directly on the uh return return statement only okay it's up to you how you want to handle okay see here as well we have the issue or better you can put here only and let's test this out see okay perfect again uh let's open me the YouTube video this one now it has everything watch on YouTube Just in enrollment section obviously we have this new method called watch on YouTube watch on YouTube okay so here I'm going to pass the course because course is already there okay nothing need to pass actually just write this method over here and I will put the linking do open URL and the URL we need to provide which is the YouTube url okay and then save it see now if I click on watch on YouTube it jump to that particular URL see now it's open the YouTube app and all okay but obviously we don't want to go here I will remove it from it there so this is how you can update the uh logic little bit depends on whether it's it's a YouTube video or it's a course inside our application so in this section we are going to implement the my course tab section where we are going to show all the user enroll courses along with the progress of each courses okay so if I go to this our uh tube G Academy website here you will find the the progress bar okay this is how we are going to show the card and the progress bar along with the percentage and how much chapter is he completed out of how many okay so this kind of thing we are going to add it now so let's go to our application and here inside the screen we have MOS screen tab okay so let's add some style to this one and make padding of 20 and I will give margin top to 25 okay and save it then we'll give the name my course here I will give some style let give font family outfit bold you font size of 20 let's save this one let's give maybe 20 7 okay perfect now after that we are going to show list of course enrollment okay so for that one we need a API okay because previously we faed the data only for the specific scores about the user enrollment now in this case we need all the courses which user enroll okay so let's go to this API playground and let me create a new query here okay and here I will select user enroll courses uh section okay so just search for the user enoll courses and here we only pass the emails users email okay depends on the users email we are going to f the data okay so obviously you can select the what are the things you need it okay so after here you need a completed chapter in the that we need complete chapter and the chapter ID as well then we need a course ID the course list as well okay very important that we are getting the course list so that author will get Banner URL then chapters okay to select all the necessary field which we need to so the same uh functionality we are going to I mean same field we are going to select which we uh selected before okay so I think that's enough okay and if I run this one you'll get all the enroll courses okay so here we need to provide the mail ID so we add users mail ID and run it you will see the enroll courses okay so this is the first then this is the second like this okay perfect now what you need to do uh copy this uh query go back to our application inside the global API add a new method constant get all user enroll courses this will be a sing method and then constant query is equal to J ql tag and paste the query okay and obviously we need to make a request so I will copy it from here and paste it here like this another thing obviously we need to pass the email so I will pass the email users email which we want to fit the data and the email and make sure to export this one okay next let's go to the my uh course cre and here first we need a users email detail right mean the users details from that one we will face the email ID so we have the uh context for that one set user detail is equal to use context and user detail I don't know whether we have the user detail context or not let me check the name so this one and save it okay let's make sure to import it like this okay and save it now obviously from the user detail we will get the data up here but let's write a method to get all user enroll courses from the global API do get all user en courses and here we need to pass email ID which is from the user detail do email dot then and then we'll get the response so I will just console the response for now and here this m method we call on use effect okay so whenever we have the user detail information available then only we will call this particular method like this okay perfect now let's save this one let's go back to our application and open this terminal so go to this my course and if you see we got this buch job data okay so from that we just need user en courses list like this okay let's save this in one state enroll courses list is equal to use State perfect now here we'll create a new component okay and uh for that component we will pass this uh enroll course list okay so or you can create here only because we just have the flat list and nothing else right so here we'll just add the flat list we pass the data as a user enroll what's the name I forgot yeah enroll course list only then render the item okay and here we need the item okay let's try to use this item okay obviously we are not going to use because we need to add progress bar but but let me show you the the course item okay so what I'm going to do I just add the course item and here if you remember we just need to pass course information which is the item no so this is not item if you see let me go back so here this information we need to send the course list okay so item doour list in that one we have the course information just make sure see okay so inside the course list we have author banner and everything let me check with oh yeah we select the name as well and let's save this one and I think something is missing let me check so here I think we forgot to set the value okay for the enrollment list so set enrollment course list and then save it okay and now if you see we got the data okay now this if you see right this item because this particular course item we mention the width and all that the reason it's showing smaller okay so that's the reason we are not going to use this course item okay otherwise you have to make some modification conditional modification so let's what we can do let's go to this uh component and create a new component and here we can call it as a progress course jsx Okay add the default template and whatever we have inside the course item I will copy all of these things including this navigation until the end of this one okay so let's paste everything as it is okay and obviously we'll accept it here as a course because we want everything as it is okay only thing we need to add is to add this import statement as well so let's add this import statement and save it okay now let's go back me close this one to a my course screen and instead of this course item now let's add the progress course item okay and save it and if you see still the same result okay because we just copy paste everything from the course now here instead of giving the width let's try to hide this WID and if you see now it's complete full screen okay also for the image let's not give width and let's see how it looks see like this okay so in this case I'm going to use some height more height perfect okay also let's go margin so here I just add margin bottom tot okay Mar bottom to five perfect like this okay and if you see all the cores are here next what we need to do as I told you before right so here we need to show this progress bar okay so instead of this particular number and all we are going to show the progress bar below that one now let's create a progress bar so in order to create progress bar let's create a new component called progress bar okay I created here inside the component folder and inside the progress core item below this thing chapter and will paste it here like this okay make sure to import it and save it now right now you will see here as a progress bar text is showing okay now let's go to the progress bar and here we going to remove this one and for this particular view we going to add style of height 7 okay and we'll add background color of colors dot primary and save it see okay our progress bar is ready now let's add the Box border radius of 999 and save perfect now what do we need to do obviously right now it's showing full okay but we can only show the progress bar uh with the some specific height for example if I give the height width width of maybe 100 and if you see it now show only 100 but the thing is how to get the complete width and then how to calculate everything here right so for that one let's add a constant and let's calculate the screen width first okay so in order to get the screen WID we'll get it from the dimension dot get screen do width okay so from this one we'll get the screen width now what I will do uh for now let's replace the screen width sorry uh the width value with the screen width and save it and you will see like this okay so this width is going beyond our card okay okay so to fix this let's multiply it by 0.8 see like this okay and now this is our 100% width we can call it as okay next thing what you need to do uh let's define one more constant and we can call it as a progress width okay this is our actual size of the pus bar okay so what we'll do we'll take the screen width okay we'll multiply it by the percentage of the chapter completion for example us completed chapter 20% we will write 0.20 like this and then we replace our BD with the progress width and then save it see like this okay so this is 20% if I say 80% is completed see 80% if you complete 90% it mean 0 point sorry it's mean one see like this okay so this is how it will work now the question is how to or how to calculate the percentage completion okay how much percent is complete and all so let's go to our progress course item so here a couple of things we need to get first we need a total chapters okay which we'll getting from this course uh chapter list then we'll need a completed chapter okay so these two things are important here we call constant calculate percentage completed okay and our uh formula here will be total chapter completed divided by completed chapter into 100 okay and and this will be our formula okay now let's get all the things one by one so for this progress course item okay let's go to this screen called my course so if you see our API response here we need to get this complete chapter section okay because we just send this course list we also need this completed chapter information so let's go to my course and to this progress item we'll call uh completed chapter and we'll send the length of this chapter okay so in this case we'll say completed chapter and length uh item do complete chapter. length okay and this will WR in the complete chapter just make sure let's get it here and let's consolle this value okay so inside the user f i just console this value like this and save it see for this for this chapter is complete six for this is one and for remaining two it's nothing perfect we are getting complete chapter now let's also get the chapter which is the uh total chapter let's say console.log total chapter comma course and then let's get this so course inside that we have chapter and then length do chapter do L and save it and if you see we have the total chapter l 10 10 10 now it's coming 10 10 because um here as I say right we need to get the chapter so let's get the chapter first let me show you so here we we are get we need to get chapter first 15 for example okay this is very important otherwise it will only show by default 10 record okay so inside the global API I will add it here like this perfect let me close this one you go to the my course and now let's see the console see 17 18 21 21 perfect now inside the calculate percentage completed we going to write out uh constant percentage is equal to so we have total sorry completed chapter so completed chapter divided by course chapter length like this okay obviously if you get the percentage it will be into 200 okay but let's get the only percentage without 100 because the reason is inside of or um let me show you so inside our progress bar right here we want in the decimal only okay not in the complete percentage we don't want a whole number and make this call this particular uh calculate percentage completed uh over here okay so I will just call uh percentage is equal to and I will call this method okay and this method will return the value percentage like this so let's save this let's save this and just check whether we are getting any information or not so here we okay so here we miss here uh instead of we need to get the total T right so like this let me clean this out and this one as well okay now if I save it let's go back and if you see we got some percentage okay now let's make it to fix okay two fix to two number so it will only two fix okay right now remove this console and in the progress bar let's accept here as a percentage and just add the percentage over here okay and let's save everything save this one and this one and if you see the change see now this is completed more this is less and this is none okay now here this is only showing some progress bar the the one more important thing here if you see carefully it's showing this background gray right so it means complete uh scroll bar and the completion with the different color so same thing we're want to implement here so what you need to do Wrap This existing view with another view okay and just for this view you need to provide background color like colors. gr color and save it and see the change okay so I have light gray we use light gray see so beautifully is showing right perfect now the last important thing is uh pending here is to show the number of chapter is completed and percentage is completed okay so let's go to this uh progress course item and where we Define the 17th chapter right we will replace it so so this one okay so here we going to show similar kind of this percentage sign so I'm going to call same method okay I miss it yeah only so I'll call this method I will multiply by 1,000 000 okay and here I will write percentage and save it and if you see now it's showing 6% this is showing 35% perfect okay like this also uh let me remove this icon because we don't want this icon anymore perfect or we can make this color maybe uh black let's add a black color or if we did not give color that will be black that's fine we like this okay and instead of paid we going to show total chapter okay so this particular text so we going to show the completed chapter which is from the uh let me check okay so we have this completed chapter over here divid by course do chapter do length and save it so this need to be little different because it's multip I'm dividing the uh this two value and save it see like this okay so out of 17 chapter 6 is completed let me go back and everything okay perfect everything's look good now let's change the color just I will remove this primary color and it will be in the black color like this okay so and now even though if you want to open from here right you just click on that one and it will directly jump on the course detail page okay where you left off you don't need a complete uh navigation implementation for the my course page okay it's already there you can use existing one and you don't need to add that one because we just copy the existing course item and put it here okay and if even go if I go to back button it will again jump back to this page okay now one last thing we I want to tell you is to refresh this okay if I pull this one I I need to refresh this particular screen okay so for that one let's go to this my core screen here we'll add one state constant is loing Comm set is loading is equal to use use State okay initially I will mark it as a false so whenever we call this method we will set the value is loading to True okay and once we have the value we'll set value to false now for this flat list there are two properties okay so there is one property called let let me close this uh refreshing and for that one you have to provide is loading and there is another property called on refresh okay so on refresh when you pull down then you have to call this method okay so it will get a latest information and then save it now now let's see what's the issue okay so maybe we need to call like this and if I pull see on pulling also it get refreshed immediately okay now obviously nothing get change but if you pull it it willall this perer so I hope you understand this how to add the uh on refresh event for this flat list okay and uh let me remove the show vertical scroll bar indicator to false so now we can able to scroll without that particular ugly uh vertical scroll bar okay perfect so guys uh that's all for this section I hope you understand how we implemented beautifully my course section along with the progress bar for each course okay so we'll see you in the next section so now we are going to implement the profile uh section so in order to build a profile section this is the this is basic l means where we are going to show profile image usern name user email and the M item like this okay so these are the main things we are going to implement in this particular section so I'm going to I'm not going to uh write each of the code here okay just uh I'm going to tell you what we are going to do okay so first let's add the profile uh text here okay then we'll add this menu item okay so for example here inside the menu I added the name the path okay where it want to go and the icon okay so this icon is nothing but this particular icon from this Expo icon okay because we are going to take only this name and later on we will replace with the dynamically that icon name then for my course the path we said okay but where we want to use Link then we will use the link and then we are not using path anymore okay so this kind of thing then uh after that one uh let's add the user detail information because we want to show user profile image and the name okay so like this uh I added this user detail section okay where I'm going to show image and this image is coming from user detail picture then we have this user detail given name and the email address okay then I added the flat list for this menu which we already have hardcoded okay and inside that I added touchable opacity and on the click off menu I'm creating this on menu click method okay so here icon if you see in this icon I added this name okay uh is equal to item do icon and then just a text with the styling this on menu click I method consist of this kind of eal loop where we we added this item URL if it's URL this it will open in a browser if it's a path then it will navigate to that particular screen and if it's a log out button then it will navigate to the login screen once it log out okay now uh let me save everything okay and let's see how it looks on the screen so right now if you see this is how beautifully it's looking on the screen with the profile image name and the all the details okay so that's all about this profile section now if I go on to go to the Explorer which which will navigate to the home screen okay see okay for examp for example if I want to go to this my course okay where it have all the courses which we already implemented in the previous section and so on okay so and obviously if I click on YouTube YouTube channel it will navigate to the browser and log out button will log out from the application and then it will redirect to this sign in screen so this is how we build the profile uh screen section okay so if you have any question any doubt let me know in the comment section or you can anytime access the source code the link is in the description and still if you did not subscribe to my Channel please do subscribe share this with your friends and family and please press like button okay so that it will um share with your friends and all okay so see you in the next section so we are pretty much uh end of this particular course but uh before that let's implement this category filter option we have this category filter option but right now it's not working okay we just implemented it but we did not attach to our actual course information okay so let's go to this category section where we have this component called category list and over here inside this touchable opacity on press event we going to set the category information so we'll add set selected category and here I will pass item do slug information okay so let me show you what I want want to uh say so this slug information we are going to pass uh to this um parent component okay so I will copy this and I will put it here so this need to be selected spelling yeah selected and we'll pass back to a parent component now let's go to this home screen and accept it here okay so here we we say category okay and let's console it for now okay we'll just make sure that we are getting category so let's open this one and if I click nextjs for example see nextjs is coming Firebase reactjs okay like that now let's add one method constant filter course list and it will filter the list of courses which I have but but before that one we need to create a one state and which will hold the original course list original course list okay and see here State original course list this is important because set original course list will not going to change any time okay so let's uh set the value oh sorry not here the course inside the course list okay so whatever the course list we have we'll set the value of that one like this okay and inside the filter obviously we are going to pass category which we want to filter it on and then here we'll say constant result is equal to and same thing if you see right we have already this information I will copy this paste it here and instead of category I will put just category here from the tag Okay so we are depends on the tag information we will check and we'll set the course list and then result like this okay now obviously we need to call this method whenever category get change like this and save it and now uh make sure to update this course list to original course list because that will be a con consistent and here as it is now save this one Let's test this out so if I click next just okay so nothing get changed let's select fire C whatever project has a Firebase is immediately change everything right everywhere we are showing if I click nextjs see nextjs is coming if I select sorry reactjs reactjs is coming okay now obviously I did not put all the tag here okay I put only some of the tags okay that the reason it's showing only that much information and obviously I'm going to put one more uh category here which will say all okay so all contains if you just click on all then obviously we uh say all this C uh course list okay perfect so this is how we can uh filter it out depends on this category now this is challenge for you guys okay and you can try on your own you can Implement same kind of functionality on the click of this search okay so user type it get the input and immediately you can uh filter the list okay so try on your own and let me know if you have any question so now we are at the final uh stage of the application where we are going to build this application and we will export the APK file so that you can install in your actual device okay but if you want to publish it on the Play store or App Store okay then there is a different way to do it okay and if you want to know how to uh deploy or publish on the App Store please let me know in the comment section so that I can make a video but right now let's make an APK file so first for uh in order to create that APK so that you can install it right you need to make sure that U you have the es C installed okay and this is the link so I will put put it in the description so you can go ahead and check it okay and uh make sure once you have es CLI installed let's go ahead and install it so I will open a new terminal oops sorry uh let me close this one new terminal and here paste that link okay so it will install the es CLI for in your application so we'll wait once it installed let's go to the second and let's log to the account okay so expose CLI account so here I will put es login and here you need to put the user um username and password okay I don't know it's correct yeah and if you see it's login now you can create a new account by going to this expo. da okay and here you just create a new account or if you have already you can just log in it here and then you will find uh all the app which you are going to build here in this section okay and same C initial you are going to use uh while log to the es login next let me go back here and here you can configure some of the things okay uh so right now we'll skip this step and we'll jump on this particular step to build the APK file okay because over here as well we have to create a build file okay if you see and uh you can give the profile name whatever profile name you want so in this case we give the profile name to okay uh you can do anything it's not matter copy this command and then paste it in your terminal like this okay and click it now what it will do it will build the files but before that as I say right uh from this particular um configuration command same thing you're going to do if it's not configured the es bill is not ready then from this command it will uh make sure that it's you will configure it okay and now if you see here it is asking question will you like to automatically create es project for this particular account okay sorry for this particular project so obviously you have to say yes and then once it created it will ask you the uh package name right so if you see right now you can you like com. tube guruji dot I will say codebox or you can say Academy Tu Academy okay like this and click enter now it will generate the key store this key store is very very important okay so make sure uh will not lose it okay and also obviously that this key key store is available on your uh Expo account as well okay because if you want to publish your uh application on a play store or app store right this key store important there you need to upload the key store and every time if you want to publish a new update okay this key store need to match there so right now say yes because we want to create a key store and here now our build is in the progress okay build is in the Que because we are using the free tire it will take time to generate uh the bill okay because we are not the priority we the free tire and if you see it's saying waiting in a free tire queue and right now the wait time is 60 minutes okay sometimes it depends uh depends on the on which time you are executing sometimes it's very quick it just you don't need to wait and you will execute it okay so we'll pause the video here and we'll wait for to build the uh our APK file and once the build is complete you can go ahead in export. da and find your build over here okay so that's all that's how you can uh download the APK file so that's all for this particular course I hope you understand how we build this beautiful react native um video streaming application for the learning in your course okay now you can go to the tug.com and explore more courses on my uh application where you can keep a enroll to this course and you can access the source code demo application and everything not only this but you can keep track of all each chapter here okay you can learn it here you'll find each chapter description okay and everything will be available on this tub guru.com or tub guru. academy.com so guys uh if you have any question any doubt let me know in the comment section and if you did not subscribe to my Channel please do subscribe press like button and hit that notification Bell icon so you will get the updated information from my channel so guys see you in the next course

Channel: TubeGuruji

Views: 23,092

Keywords: react native tutorial, react native app, react native, react native tutorial for beginners, react native project, react native hygraph, Build React Native Full Stack App, Video Course Learning, React Native Project, react native tutorial expo, react native application, React Native Full Stack Tutorial | React Native Project |Video Course Learning | Expo, HyGraph, React Native project for beginners | React Native Tutorial | Expo, React Native

Id: 1MqozxAvmsc

Length: 314min 5sec (18845 seconds)

Published: Fri Jan 26 2024