Build React Native app from Scratch : React Native, Expo, Strapi, MySql | React Native Full Course

hey there my name is Rahul welcome back to T Channel and today we are going to uh learn how to create the educational app from the scratch using the react native this course is completely a uh beginner friendly okay and as you know right we took the poll on the YouTube and the education app is most Ed um course that which you are looking for so that I am creating the uh completely full stack re native application and I will teach you how to do that if you see on the screen right now uh this is the figma prototyping okay and uh as I told you we are developing everything from the scatch from developing the API to uh designing the or developing the application to publish the application app store and the Play store okay so let's walk through the application and then we will learn uh we will see which technology we are using for this uh uh particular course okay so in this course if you see right uh this is the login screen uh very first screen we are developing and uh with the help of Firebase uh authentication we are using this uh Google signin authentication system okay if I once I sign in on the screen you will la you will jump it on the home screen and here you will find this beautiful uh UI okay so here uh first of all you will see the your name the image you will have search by then we will learn how to filter out and how to search from our database so so that user can able to search in our application then we have this beautiful slider and here you'll see this uh video course right so I will teach you how to integrate the video in our application okay so that user can watch our video course as well then uh we have this popular course right so if you see in this prototype we added the basic python basic react jss and so on if I click on any of this course you will launch on this beautiful page where it describe the about describe about the course then the content of this particular course right this is very pocket friendly uh programming learning application uh we are building right now and if you see right in this python basic you have introduction variable data type number casting and so on if I open any of this right you will see this beautiful page where uh it describe the the particular topic okay I explain the topic with some example you can run this particular code and you will get the output on the screen as well also if you click on the next button right this particular uh if you see right there are in this particular introduction section there are five topics in in this case um we are showing like this right and once you finish this course we'll come back to our previous page where it show the tick mark okay this particular course you completed then we will learn how to save uh each user data in a database right through the API so this is very helpful uh for those who are completely beginner then uh as I say right once I click on any of the page you will learn how to navigate from one page to another page we will learn uh react navigation the tab navigation and so on go back to our page and if you see that if I open the video course you will see this you can play the introduction video and if I click on any of these particular uh course content the it will play the video because this is a video course okay so guys uh watch this complete uh course right uh for you as I told you this is completely beginner friendly I I'm creating this uh course in in a small small videos okay so that you can understand you can learn each section and you can practice it Okay Also let's let's I'll see which technology uh we are using for this one okay so first of all as you everyone know this is the react native application which we are going to build right so obviously we are using the react native okay so don't worry if you don't know anything about the react native uh you don't need to worry about that because I'm teaching from creating the application from the react native to publishing the application on the Play Store and App Store okay so you don't need to worry about that one then with the help of Expo right we are going to build our application this is the very much one of the most popular build tool in the market in order to build the react n application as you are beginner right this tool help you to learn react to much faster so we will use this build tool okay and with the with the help of this Expo you can run your and test your application directly in Mobile okay so it's very uh interesting then as I said right we are building the API so we are using the strappy uh content management system okay this is the completely free open sources and uh with the help of uh this strappy we are um managing our all the content for our application and this will also give us the API without writing any of the code okay so I will teach you the stripy as well uh how to create the stripy application and how to publish it as well okay also I will create I will teach you how to create API from it right so as I say you don't need to write a code for this API if you are using stripy okay then in order to store the images and everything we are using Cloud iny So This Cloud is again it's free completely free okay and we will connect this uh Cloud iny to our strappy application so that whenever we upload any content with the image or video it will store in our Cloud um server okay again this is completely free and in order to use database stripy provide various type of database you can use it right in this application we are using mySQL database okay and again we are connecting stripy with the MySQL I will teach you how to do it okay on the internet this is the only one course you will find with the all this feature in one course and everything we are learning from the uh scratch and the last but not the least the Firebase we are using uh the Firebase in order to uh authenticate uh and add this Google sign in in our application so that you will learn how to integrate Firebase in our application and then you can use the uh authentication um service from the Firebase also if you are interested you can use other Service as well once you integrate the Firebase so this is very important you need to learn Firebase uh integration with the react native and another thing right uh if you are using the MySQL from the local from your machine obviously you don't need to pay anything it's completely free but if you want to put um MySQL on the server I will recommend this hostinger share hosting okay and uh this is very much cheap share hosting you will find it I put the link in the description you can use it so you'll get the 75% off on the hosting and you can buy it okay so it's very cheap you can just pay $2 a month okay and it includes unlimited my SCH database you can use it okay and you can I will teach you how to connect this remote MyQ data with with the strappy so that we can put all our application content in the strappy uh CMS okay and this obviously connected to the mySQL database so I will teach you everything from the scratch so guys as I told you this is the one of the best course you will find in the um YouTube right now okay so please if you did not subscribe to my channel subscribe to my channel and watch all this video okay at the end of this course I will um I will put the Lucky Draw from my the Sub sub subscribers so please subscribe to my channel and we uh those who subscribe to my channel and at the end of this course it he will get $25 of Amazon gift card okay so please subscribe now and before doing any further delay let's begin so in this section uh we are going to uh create the react new application using Expo so if you don't have the node just install in your system the first uh go to the and install this nodejs okay then uh if you go to go to this expo. d/ tools website right you will find uh this particular command line right to install the Expo globally so go ahead and install this uh npm install globally okay uh using the command prom I already installed so I'm not installing again but if you did not have this Expo go um in your system then please install that one so as I told you this Expo uh is a very fast and very easy build tool in order to create the react native application and once you install this right as I told you uh you can run your project with the Expo go application so first uh uh you have to search Expo go on app store if you are using iOS or a Google Play Store if you are using the Android and go ahead and install this particular application in your mobile devices okay so that you can directly teste uh your uh application directly in the mobile while you are doing the coding and everything right so I will tell you how to do it once you do it right uh make sure you are ready everything and then we will create the application right but make sure you will install this particular angular CLI okay in order to to create the application then just type on Google Expo create app okay and it will open uh first link you can open it right and here you'll find the step by-step guide in order to uh create the applications so let's copy this one and uh go to your folder where you want to create the application open the Comm prom and uh once you are in the Comm PR right just uh paste this particular link so it's saying npf create Expo app okay once you enter it uh it will ask you the project name okay so here you can write proceed yes and it's ask your application name so in this case I will say uh educ education app okay and enter it and it will uh download install all the dependency which need uh need to be to create this react native application okay okay so it will take some few minutes it created and it's saying your project is ready right now in order to go into a project just run this one CD and education app so you will be in the project uh directory and in order to open the vs code just type code space. okay it will open vs code uh with this project okay so for this one um to create the react application we are using the uh Visual Studio code okay so if you see right our project is open in a vs code okay and these are all the files I will explain this all the file structure and everything and we will run this application as well uh so now we will run the application okay so before that let's walk through the all the files and project uh folders that we have uh in our project so if you see right uh these are the asset uh this is the asset folder and it includes the all our images video or any other files right which we need in the application so we keep everything in the asset folder basically uh it includes the images or video MP3 something like that right then node module you can ignore that one for now in the app.js right uh this is the starting point for our application right now if you see right um this is the view so view is nothing but whatever is showing on the screen right and if you know in the web development we have D tag right so it's something kind of similar so view tag is uh in order to the view name itself did not to show on the screen right that's why it's View and in the text tag right it we show this particular text okay and just ignore this one for now then we have this app. Json which include the configuration of the applic or application right so include the name of the application okay the version number of the application then the orientation right now obviously we working for the portrait mode and the icon of the application as well right if you have splash screen for the application that also be is included in the app. Json so if you want to change it you can change it from here okay then uh for the Android and iOS we have we can set the config the package name and everything right so everything uh we will see in the detail when we are going to publish the application then we will touch this particular app.js file in B.C config.js right now I just ignore this one and then it's come to packet. Json so it packet. Json it include all the dependency which we need for the application uh so when we create this application this uh couple of uh few uh dependencies already installed right if you see the Expo status bar react and react native is already installed and also these are the script to in order to run the application in various uh environment okay now let's try to run the application so first of all let's go to uh terminal and in the terminal click on new terminal okay and in order to run the application just type Expo start Okay so on the right hand side you will see this uh so on the so on the right hand side this is the my Mobile screen which I mirror on the uh desktop so that you can able to see what I'm doing and okay so let's go to this uh Local 1 192 okay so if you see right once we run this export to start we will get this QR code okay and also uh this is the local URL uh uh which you can open it right in order to run the application now on the left hand side you will see uh you can run this application directly on the Android device Simulator for that you need to install Android Studio okay and from there you can run uh start your emulator same for the iOS if you have iOS device and if you have IOS emulator in your PC then you can run it okay then you can publish from application from here um so locally on internet you can sheet but all of this we will uh discuss later in this course right now what we have to do uh in order to run this application on your mobile devices here in the connection type you have to select the tunnel okay so once you connect them the uh connection type as a tunnel and then you have to go to our Android device right so so here right uh you have to inst install this expoo app from the app uh Play Store so right now I'm using the Android device okay so if you have iOS device you can install from uh the Expo Go app from the uh App Store as well right and then just open this app store okay and once you open it will ask you to login or create the account so just do it right and the same account you have to login it um on your application as well right if you needed once you run the application right and once you open the expoo app you will see these two option right where you can your app name and everything will be there right and this is the URL uh in order to open the application right so let's just click on the second um URL right and if you see here when you select the tunil type right you will get this Expo and some URL right so that URL will will only open in the Expo application so just click on that one and it will take some uh few second in order to download the application in your mobile and then build the application right so if you see in the bottom it it's a few minutes later so our app is now loaded completely right um and this build is completed and if you see on the screen we are able to see the openup app.js to start working on the app so this text is written in app.js if you see here right this text open up app.js to start working on your app right so this particular text is uh written in between this text tag right and text tag which is imported from this uh react uh Native if you see right this one now if you remove this one and replace with something else like subscribe to Guru G channel right and if I save it instantly it will reflect in your application right remember I am running this application on my mobile device I just mirror it uh it to my PC right so this is the sub uh mobile view only okay so if you see instantly it it get changed right in no um delay or anything and this is how it works second thing um before um end of this particular section I just want to tell you in a vs code there is one extension called uh es7 plus react okay so let me increase the size if you see right this extension you have to install this extension in vs code this extension will help you to write the code much faster okay uh so whenever you create one new component uh you need your default template right so this um extension will help you to create that uh default template very quickly so I will tell you in the next section how to use that one and also uh from the next section we will start building our application and we will connect the Firebase uh with our application so that we can use the Google sign in so watch this full uh full particular course and if you do not subscribe to my channel subscribe to my channel thank you so welcome back to another episode um of educational app by react native okay so this is a complete uh react native course for the beginners and we are uh in the tutorial where we are be going to build the Google authentication system for application right so we are building the login page with the Google signin authentication using the Expo so here uh in the last section right we uh able to run the project okay so in this tutorial uh first of all let's create a new folder called app and inside that app I created another folder called assets and uh inside that I created another folder called image where I kep the image uh for our login screen if you go back um to our prototype right you will see this prototype like this where we have image at the top then text and then we have this button right I will share this uh prototype with you so link is in the description so you can check it out and you can use it for your reference purpose now here uh in this app folder right I will create another folder called Pages where I will put all my pages like login screen home screen kind of thing right and inside this page I will create one page called login.js right for login screen so now uh if you remember in the last video I told you to add the extension okay and the right now we are using that extension so right now we have to Define some template here right the starting code we can say that and if I just write R right and you will see this bunch of option right and if you see right we we are working on the re native so just type rnf and you will see this default templat get created directly without writing any code because this extension will give you the basic template in order to start writing our code right so in the uh this default template right we have this View and inside this view we are showing the test called login now in order to display this login on the uh our devices right you can say emulator you have to import that in app.js right so I will right now I will remove all of this code and here I will import this login page right so make sure you'll import this one right if you see right I imported this and we import this login as well and just save it and if if you see right login uh text is getting printed because in the login.js we just have this particular login text if I change to login with signin you will see this text as well right login with signin kind of thing okay so I hope you understand this particular thing how can you import the component in one another correct so right now I will remove this styling because right now it's coming in the center if I remove the styling and now it this text is coming in the left side corner left side top Corner okay now in the login.js if you see the Prototype we have image at the top and then we have this section and also if you see right we have the beautiful rounded Corner as well so you will Implement that one as well so I will remove this particular text and let's add the image first so we have uh in order to add the image in the react native we have tag call Image okay and when you are using this tag make sure you input this tag if I click on image right you'll see this tag get imported right and close the tag now we have to provide the source okay and the source which is we are fetching is from the local only so here we have to write required okay so when you are fetching The Source from the local if you are fetching it from the some URL it's a different word I will tell you how to do that as well later in this particular course so let's write require and inside this require you have to give the path okay so here I can say uh Slash then uh then assets oop sorry then assets then inside that is we have images and inside this image right we have image called login.png and save it as soon as you save it if you see right hand side the image get display on the screen okay perfect now next uh you don't want to give any styling because the image is already in the correct size but you can give width height depends on your requirement next we have the text uh called Welcome to education app okay so let's give the text here okay and just write welcome to uh uh so I I gave this uh application name as a code box so I will write welcome to codebox right so so if you see right when I write this welcome to text box in the text uh tag right so it display on the screen now you can give some styling to this one right so let's give styling so when you have to write style in double curly bracket you have to write The Styling and all so here I can say uh font size to be like let's say 30 pixel okay or you can say 35 pixel 35 only and then you can write text to be align the center and also I will make the font to be bold so let's make font to be font weight to be bold okay so if You observe one thing right right now I'm giving the inline styling right so this is the inline styling but you can Define The Styling outside as well so in order to Define The Styling outside right add the default template using our extension and just type RN SS so it will add the uh default template to write The Styling and make sure once you add this you will import the style sheet from the react native okay and then you can just copy this all of this styling REM from here and here you can add it so I can write welcome text okay and inside that you can write your styling okay perfect so this writing The Styling externally right will help you uh to structurize your code beautifully okay this is very important and if you are writing styling because for example if if you are giving styling and which has a number of properties right then it's better to Define styling outside otherwise you can do you can Define the uh inline styling okay so I Define The Styling but here now you have to attach this style right so you can access this welcome text by defining styles do welcome text and if I save it you will you will not see any change because I applied the same styling right now let's give some margin from the top so I will not give margin I will give padding so let's say padding okay so here right uh just gives comma first and then if I have padding right you'll get bunch of option so let's padding and I will say padding from the top top like uh four 40 something like this right but before that I will wrap this particular text in one view okay so Define View and inside that view I will add this text because we want to give the this rounded corner right that's the reason and then I will apply this uh inline styling here okay or not in styling let's define external styling so right say uh let's add one container here I will remove this padding top from here and say let's container okay and inside this one let's give comma here first and here you can Define padding from the top so just WR padding top let's say 40 okay and then you can apply it here right you got the error because we did not Define the style So Def style do container and save it and if you see right text is coming because we added the margin also uh in order to add the corner right first of all what we will do we will move this particular view to the top so just margin top and here I will give the margin minus 20 okay so if you see right uh it mve to top right but you don't see anything because we don't have background color right now background color is transparent so let's give background color and here we can give background color to be white so let's define background color in uh code and if you it's mve to up now and now if you try to give the radius um at the top right so if you see border top right radius let's give 20 and if I save it you'll see here right it change completely right same you have to give border top left so or start radius you can say and just give the 20 here again not start actually so here it's it's border top left radius and save it and you see on both side we got this radius effect you can give more 30 for example and save it right we got this beautiful effect um I will make it minus 25 okay perfect now let's add this particular text because if you see um because let's if you see right we have this login and sign up text as well so add that text particular text so below this we will add the text and just say logins SL sign up right now in this case I know the styling is little bit so I can use styling here directly okay the uh which is the inline styling and I can say the text size uh oh but first of all I will take text align to be in the center if I save it it's coming in the center correct and also I will give some margin from the top so just write margin top to be 40 okay and uh text size or font size not text size but font size uh to be 25 25 is more 25 like this perfect okay and then we have button right now if you see our button is have icon and rounded corner with the text correct and the background is kind of blue so in order to ACH the I will Define in a view first okay and inside view uh I need to Define uh icon and then text let's define text first okay and just just write sign in with Google okay and save it you you you are able to see this particular text right now here we will apply this uh some styling to this one so I will Define some styling here first so here you can Define button and here I can Define style so first of all I will give the background color okay and now I want to give blue so here is thing right every time when you using some of the color right you have to uh define the color code every time and it's very hard to remember the color code or find the color code right so in order to uh uh solve this issue right what I will do I will put all the color code in one file so first of all let's go to a app folder and inside this app folder I will create one folder called shared okay so in this shared folder it contains all the file which uh which is we are sharing across the application and inside this I will say color. JS file so let colors. JS now here we can define the color so just write export default because we want to export uh it because we we can use it anywhere right and here we can define the color code so right now our application has a primary color which is kind of blue so let's take the uh color so let's go over here and I will just copy this color code come back here and Define in uh code so we have this primary color just save it and in order to access this color right you have to import this colors first so if you see right the it's importing from the shared SLC colors import it and then access this using this particular colors. primary and if I save it right you don't see any change because we did not apply this button to this our um view so just write style and then in in a single curly Braes just access this using Style dot button okay and if I save it you will see this change right next uh let's give some padding so I will add padding to be 10 and also I will add the margin from the all axis to be 30 and save it if you see it's working perfectly fine now we want to add the icon Google icon right so in order to add the Google icon uh we have uh the offic I don't know whether it's official or what but we have this icons. export. FYI right you don't need to in any dependency because it's I think it's already uh defined in our Expo application so here you just need to search the uh icon which you want I put this link of this Google icon sorry the link uh the library this particular website URL now right now I'm using this logo Das Google on this icon and this icon is coming from the iic Icon right if if I click on it you will see this import statement so make sure you will import this particular statement so import it here like this and then in order to use it just copy this line of code and come into the our view and paste it here and save it right now as soon as you save it you'll see this uh icon is coming so here you can change the color so I will change to White okay and this com to White right now let's apply some styling to this text as well so I will apply this in line only so here I can Define the text color not color but just color right so color to be white right so let's define the white color in our color. JS so white the white color code is a FFF save it and just access this one colors. white and save it if you see it's coming to sign with Google with the white color now in order to bring this in one line right in our button view right let me close this one just Define it uh display make it display as a flex okay oh so you have to Define in a code Flex right and save it and then you have to define the flex Direction right now it's a column by default but you have to Define as a row so it will come in a one line you see perfect now let's give some margin uh some gap between these two right so I what I will do I will simply give uh right margin to this icon so let's add the style and I will this margin right to be 10 okay perfect and now bring this in the center so to this button view I will say justify content to be in the center perfect right you can do the item to be aligned so it will come in the vertically Center so uh item align item to be in the center if you see it's vertical coming the center everything and now let's give some rounded corner I don't know why is Okay so rounded border radius to be t 10 and save it and if you see perfect right now let's give some login sign up some margin from the top right so what I will do I will give margin from the top like 80 it's come little bit down perfect and if you see our prototype it look perfectly fine right it's similar to the one which we have prototype you and once we design our UI I hope you understand this particular thing now let's add this Google authentication as as well uh to our this button right so once I click on this button right I can able to uh log in with the Google so with the help of Expo Google authentication we will add this functionality now in order to add the Google authentication let's go to this particular official website of this uh Expo and here you will find some step in order to follow and add the Google authentication okay so first of all you need to install this particular Library so just copy this Library go to your application and uh ex execute this lineup code okay so and make sure I have application is running side by side here I will add the new terminal and paste it and click enter right so in it will install this uh Library okay then you have to get some credential okay so you have to get Andro Android client ID if you have working for iOS then iOS client ID and web client ID right I will tell you how to do it uh one by one right so if I scroll down right and if you see right we have to add this lineup code where it asking for the Android client ID okay another thing right there is some trick which uh not defined in this particular documentation and I will tell you how uh because this is very important in order to uh work this particular authentication on the YouTube you will not find the single um video to add this client uh the sorry the Google authentication using the Expo right because this is some not a tricky but this is the but this is some tips that I can give you so that you can add it so once you install let's go back to our application and make sure the library is installed perfect now to get this Android client key okay let's go back to uh Google Cloud just you have to go to Google Cloud sign in if you don't have account right and where you need to create a new project okay then select project and here you can say click new project right here I will Define the project name so right now I will give the project name as a code box okay and uh just click on create so our project is get created correct so it's creating the project I think okay so project created now here right make sure you will select this code box uh this particular project and once we created right and here first of all you have to add this uh o consent screen right once you select this code box you have to add it so if you see right you get some warning so let's configure the consent screen first and here first of all you have to uh select the user type right so right now we are um using this authentication for everyone so click external okay and just click create then it will ask you the application name so I will give the code box then it's asking support email I I gave this my support email you can add logo domain whatever you want right so it's up to you and just give the email address so I will give the email address as admin at tub guruji tocom okay and just click save and continue so once you did it uh I will just skip this all these steps because right now I don't need it and just click back to dashboard and our consent screen is ready now okay so you can say publish app because uh you can use it and publish it okay so that uh you don't need now go to the credential uh section and click on create credential here you have to select all client ID then you have to select the application type is Android because right now you are for the Android you can select the iOS if you want for iOS here I will will give the uh the name for this client ID right so I will give the uh client ID for Android and client ID Android okay I'll just write Android client ID okay so package name it is very important if you go back to our application right and uh let me close this one and go to the app. Json file so if you go here and select app. Json right here in the uh Android section you have to add this package right so you can add your own package whatever it's right now I kept like com. tu. codebox right so uh by default you will not come with this package name you have to add it manually right so I added this package name and then let's go back here and add this package name right now you have to add this shn certificate fingerprinter right so in order to get this one right go to our documentation page and here they give the step in order to um get this shn credential right before that execute this lineup code okay and then once you execute it make sure you will add this es you have to create this file called EAS dojon and add this default template okay you'll find this default template on the website you can just go and you can find it but if you don't find it I will put my source code and so that you can use this particular uh file okay once you have this a s dojon file just run this particular line of command Okay so es credential so let's go here and run this particular line of command okay so here right now it's saying slug uh fi code box not matching so let's let me go back to app. Json I change to education app which is default and let's try to run it and if you see right uh I want it for development so select development now it ask me to create the key store say key store so it asking me set have new key store right or download existing key store so I already have existing key store but in this case we click set up new uh key store so here you will see the S create a new bill creating configuration or code box so I have already so say yes here and then if you scroll up right you'll guess this fingerprint just copy this fingerprint right so follow these steps uh if you don't understand right you can go back uh to the official website and you can find it all documentation here right now copy this shs keyword and paste it it here okay if you see right I added this one and just say create okay now you got the client ID for our Android client Android devices right you can do it for iOS right now let's go back uh in our login.js page correct and from the documentation right if you scroll down you have to change this you have to add this schema name okay so go back here and in app. Json file right we have this app. Json you have to add this schema name so I will add code box also I will also update this slug name with the same schema name right otherwise it will not work okay if I save as it is I will tell you how and why if I change the slug as it is okay that's keep it at there then add this two statement so copy this one go to your login .js file and and here in this login page right I will add this two statement and afterwards uh if you scroll down right we have this line of code which also need to be adding the login.js so let's add it here then we have this two line of cod right app.js so also add that one as well over here right so right now we are not added this CL iOS Cent ID I will remove it from here and uh here right if you work um right now we already have this uh Android client ID so I will copy this and client ID from here and just paste it in Android client ID section also we have to add the Expo client ID here right because in documentation is they did not mention and that's why many of the times it will not work but we have to add expore client ID now the question is from where we will get this expor client ID right so the best way go back to our Google Cloud again and create a new credential okay uh the O client ID here in application type we have to select the web application and then give the name so I will say web client ID okay Expo web I will Expo web client ID and then you can add the UR here right so in this case you have to add URL like https then. expo.io remember and just trust me no one going to tell you this particular hack okay here as well you have to write uh red URL so in this case right you have to write your username of the Expo so in this case I mine was at theate RRS 301 slash you have to write the slug name which is is our code box so here we gave this um schema name sorry right so if you go back app.js on we give this schema name code box so write the code box and create this particular uh client ID for our Expo and if you see we have this client ID copy this client ID go back to our application and in our login.js add the Expo client ID like this perfect now we have this particular lineup code now let's try to sign in okay so here in with the on the click of this sign in with Google we need to call um the Google sign in right uh we have to call this prompt async if you see our documentation so we just need to call this prompt async on press event right so in order to add this on press event right view has don't have this property so in order to add this on press property we have to change this view to touchable opacity okay so in the later the uh course I will tell you different type of touchable properties but in this case I will write touchable opacity which give you the property of the on press event right and which have the um animation effect of on the click it as well so I will write on press if you right we have different different option so in this case we want just on press and let's bring it down and in the on press right we have to call Prompt async that's all right and save it and once you have this one right it will it will uh do the authen with the Google so just save it now on on press right let's click on it right it will ask me to uh select the browser so just say Google browser and if you it will land on this page right and it ask you to sign in with the Google it asking whether you want to jump it or not so just say yes and you will see this error right you can't sign in because app sent an invalid request right and if you find the error this is a redirect URL mismatch so let's close this one um make sure you will replace this uh you will run the project so I will stop the server and then I will run it again so it's building I to sign in say just once say yes and if you see right we got this option to select the account because um you have to make sure when you change the app. Json you have to run the project select the account and if you see we successfully able to sign in now we don't did not get any access token we are not getting getting in the sense we are not saving anywhere the username anything right but we are able to successfully launch on the Google prompt and then we can able to sign in right now the next task uh to get the access token in order to face the response if you go to this uh documentation right here you will see the how to get this um user data right this is the way to get the user data and the some steps right so let's do that so if you see right you can just copy paste this line of code okay and paste it here uh in our screen but in order to to understand all this particular thing right let's define in use effect first so us effect is a inbuilt react hook okay so add the function so when you Define effect like this right it will execute infinite time when this component will get load right so in order to avoid that just pass the empty array so what will it will do it will only execute once when you load this login.js right otherwise if you want to execute this use effect function at certain point for example some variable change you can pass that variable Val variable so that whenever it change it will execute this us effect I will show you how so right now let's define if uh statement here and in this if let's say response so this response is nothing but the response which is getting from the uh sign in right when you sign in and in this response authentication right Al not authentication just type uh just type response. type is is equal to equal to success then you have to save the token right so Define some variable so here I will Define the constant say access token comma set access token in order to set value for this access token and use another INB called use State okay so this use state will hold the value for the given variable okay and and then in this response type right set the access token using set access token variable so change to token just change to token okay and here access our token using the response dot authentication dot um access token okay so now we have the access token you can print that access token here so just write console.log access token okay so access Tok will get print now you want to execute this use effect when the you got the some response right and here right initially as I told you this us will get executed but initially we don't have the response value right just so that Define the question mark like this right if I save like this right you'll see this error because okay first of all you have to add the US state so import this use State as well and then you'll get another response called our type is not is null because we don't have any response here right so mark it as a question mark so it will act as a um optional value right and now pass this um response here so that whenever the response value get changed this us will get executed okay now let's uh save everything okay and let's go back here and let's try to sign in now so sign in just once say yes say Google Play and right now we got the access token as undefined so let's see why it's showing undefined okay because we just set the value right so what I will do I will copy this and paste it here and then save it and as as save it right because already we authenticated right now we are getting this access token perfect okay now from this access token we have to um we have to get the user data correct so let's define one uh method called G user data H write Arrow function and now if you go back to our documentation you can just copy this lineup code to get this uh user information right so what it will do because we already have access token right uh this is uh this is the assing function Market as a sync so what it will do from this URL uh we are passing the uh token in heer right so in this case we save our token in Access token so replace this token to access token and in this once we execute this line of code right it will face the information by passing the token and in the response we will get the uh user information okay so it's setting in state user info so what we will do we will Define another use State and in this case uh we are doing for to save the user info so just write user info and here set user info okay and now just scroll down and here you will uh setting the value for the user info so what I will do I will also print the value so just write console.log the user okay so now we are not executing this line of code right uh so so what I will do get user data right here once we get the access token I will execute this get user token as well okay if I save it right it will come to this line of code and it will execute right so what I will do just to make sure user detail and save it right so I don't know why it's not showing but let's let's let's do one thing uh let's try to sign in again okay so let go to click on Google sign in just once say yes say gam playay app okay and uh C Equity is missing I don't know why let's let's um everything is let's save it again right once I save it right again if you see right I don't know what the issue but you will see this user detail and we have the email address the family name the given name we have the picture of the user as well right and once you open this URL you will see this picture if you click if I open this one right you will see the picture as well okay because we just authenticated and uh everything looks good right so I hope you understand this particular section because it's very easy just some of the things which not defined in the particular um documentation which you need to implement it for example this Expo client ID or configuring this app.js file getting this uh sn1 credential in order to upload it on the Google Cloud everything right so I hope you understand this particular section right now we just uh sign in with the Google and set up everything okay in the next video what we will do with the help of um once us sign in with the Google right we will store this value locally so that we don't need to sign in every time when you open the app app and then once user sign in we will jump from this page to the homepage right so if you see our prototype once us just sign in right let me close this one once us sign in uh we will save the value and then we will jump to this home screen it means we will cover two important top topics in the next section first is to uh save the value for the user and then we will navigate from this screen to the another screen so we will also learn react native navigation s which is very very important part so guys watch this particular course and if you did not subscribe to my channel subscribe to my channel because this is very interesting course and you will not find anywhere uh on the YouTube okay so in the last section we implement the Google signin uh using the Google cloud and using the Expo library right so in this particular section we we will learn how to save uh the data locally when you user sign in uh with the Google and also how to jump from uh login page to the homepage because when you sign or authenticate right you need to uh after successful Au authentication you need to uh jump to the homepage also whenever you refresh the application we have to make sure that every time we don't want to show the login page because we already login right and we are we don't want to show login every time when user uh comes to our application so that particular feature we will Implement in this particular section uh if you remember in the last section right uh we use this access token and this access token we use by setting the state okay and with the help of set access token we are setting the value for the access token but in the um react n or in the react right uh once you set the value you can't use immediately right and that's the reason sometimes times or many of the times uh the value in the access token will be null right and that's the reason we'll get the error so instead of this access token right uh replace this access token with this response. authentication do access token so we can directly access it from this particular uh response but make sure this response and and the response which are we are getting from this await fet is not supposed to be similar right so what I will do I will change this value of this response like this okay and everywhere uh in this whatever the response which we are using right I will change to just response R SP right and yeah that's all and now it will work okay so this is particular uh fix uh you have to make now we now here here is thing right once we sign it we have to save our data and right now we are saving in the user right but we want to jump to the new page so let's create a new page first so go to the page uh folder and here you can go to the uh create this new file sorry uh new file and then write home.js right so this is my home screen I will add the default template so rnf okay and this is my default template and save everything right now let's go back to app. Json sorry app.js right and here we can write condition okay so before that uh we need to know whether user is sign in or not right so to to implement this particular feature right we are using the uh use context so in the react native we are the use context is a inbuilt hooks okay and which is very powerful hooks so I will explain uh that that how used context is used and what is the importance of the used context now in this picture on the left hand side uh when we want to pass the data from the parent component to the child component right uh without the context we have to send manually right so if I passing this data to The Container component and again into from the container component we want to pass to child component and then from the child component again if they have uh extra child component right then we have to pass like this right and this is hercal way that we need to pass but if you think about in the if you consider this right side image right here once you define this um um context right and you wrap this context to the U main component right so you don't need to pass the data you just access that data in the uh any child component that where it comes under this parent component right and that's where the context is quite powerful so in this particular section right uh we will cover this use context and how to create your custom context as well okay so let's go back to our application uh I will make sure the app running side by side so here in the app folder I will create a new folder called context okay and in this context I will create one file called Au context okay JS now here uh just Define export constant and say Au context right make sure the name of this um context which you are giving is similar to the file means uh it's not um compulsory but is better to give the similar name okay and then here you can write create context okay you can pass the value n and make sure you will import this create context from the react okay and save everything so just now you just created your own Uh custom context right so in order to use this context right uh first of all right uh if you remember uh we can save our data using uh user data um used data right and this use State can be used with the context in order to access the data anywhere right so for example here I can Define like this use Au context dot provide right and whatever you define inside this context right and if let's define some value here so for example uh this provider has some value so in this case I can give uh user data comma set user data right so don't be confused here right so this user data and set user data these are the uh value we can pass it for for example now let's Define constant here and inside we can Define here the use State method right so user data comma set user data okay is equal to use state so now simply right if I Define home as well here for example right just consider this one and the component which def inside the home as well right which is obviously parent of this home component sorry child of the home component right whatever we Define inside this provider this component can access this our user data okay directly and I will tell you uh how to do that okay but before that we have to make sure that something we have some value in the user data right so what we will do uh we will add the US effect first here okay and obviously I want to ex only once okay so right now I don't make any changes here right now in user data we don't have anything right so what I will do I will write if condition if user data has something okay if us null for example say uh or you can select if us uh have something then obviously I don't want to go to the login I want to go to the home home page okay otherwise I want to go to the login page okay and let's remove this one so okay sorry this is a turn operator so if user data is there go to the homepage otherwise go to the login page and complete this one okay now if you see right if I save this one obviously user data is empty right now and we don't have anything right that's the reason it's jumping to the login page and here you can obviously uh um uh consol it okay because obviously we don't have anything in the user data so you will not get anything but for now I will not write anything here okay so remove this one okay now how we can we can set the value when you sign into the Google right when you sign into the Google we have to make sure that uh it will jump to the homepage right so let's go to the login page so in this login page right we will access this context right so in order to access the context the context is nothing but the value which is in the user data right so you can write like this constant here you have to write the curly bra is very important right and here you can access user data comma set user data okay and here you can write use context okay make sure you import this use context okay and close it and now inside this use contact which contact do you want to use so in this case our contact is authentication contact right so I write Au context make sure you will import this Au context as well now whatever the value is we Define in the pan component right it is in the user data and you set data but right now obviously it's empty because we don't we didn't not set any value in app.js for the user data right so what we will do once user log here right we will make sure uh here we will set the value so I will set set us the data and I will just pass user here okay so user have we have value in user and when user login we will set the value as soon as we set the value right it will reflect everywhere wherever we use this context right so right now if I save this right and if I try to login now say yes Google Play and if you see as soon as I log in it jump to the homepage the reason is if you go back to our app do um JS right now we have this value because from login we set the value and automatically it reflect in this particular component because uh context um used to you use the state globally okay that's the reason uh the use contact is so much powerful so now if you understand right as soon as login it jump to that page but if I refresh it right if I refresh this one you'll not get change because right now it's again on homepage right but uh we are setting the value that Ison every time it will jump to this page only right but when you refresh the page for if you refresh the application it will again come to the login page okay let's wait if you see right it's again come to the login page because we we did not save the value right so now in order to save value we want to store the value locally save value locally right uh this is the async storage this is official um local storage Library provided by the Expo right just copy this line of command and go to your application and paste it here so let me go to the new terminal I don't know what's happening here and just paste it here okay so once it installed I will tell you how to use it so so if you see our library is get installed um in the Shar we have this shared folder right create a new file called services so services do JS right so inside the services right uh we have to make import one statement so this is for the using storage right and below that what I will do I will write constant and here I will write one method to set the user data so I will write set user or okay uh and uh the arrow function and this is a sync function okay so I will write a sync and here write a wait okay and in order to set the value right you have to write a sync storage dot set item and you have to pass the key the whatever the key you want to give so in this case I will write user data okay and then the value we want to pass right so what I will do uh here I will just pass the value okay so whatever the value passed to this particular function that value will be set to this user data okay and uh just save it right also in order to get this um local storage right I will write another meod called get user o is equal to async not a sync this function not will be a sync and arrow function right remember when we are storing the value our our value is in the Json format right and this set item will not um understand the Json right so uh I will convert this value into string so what I do I will just write Jon stringify and convert to the value J we have I add this in know circular bracket and here in order to get the data right just write uh a sync storage let me bring this down uh dot gate item and here we want the we want to pass the keys so our key is user data right and that's so so I will get this in a one constant call constant result I say constant value okay and we have to return the value so what I will do I will say return value but this value need to be in the Json format so I will just write json. pass right perfect and save everything okay now in order to access this particular uh method right you have to make sure you will export this one so just write export default and then you can export this two function so Set uh user art and then get user a and save it now our service is ready so you can able to set the value and get the value from local storage now go back to our login.js and here if you remember right we are setting us the data but we have to make sure we also set the local storage value so what you can do you can write uh you can access first the uh this particular service just write Services uh I don't know why it's coming this recommendation so if you see right in Services we have this uh service from the shared folder so write Services dot you can set the user Au correct and here you can actually set the value for the user authentication so in this case I will write uh user correct and make sure this is a sync function just write a wait okay and save it now if I say you don't uh get any change but obviously uh once you log in right you will uh you can set the value locally in your uh user OD key okay now go back to our app. Json so here we can go back to our app.js sorry and then here you will you can check whether in local storage do we have the value stored right so you just need to write uh the condition like Service uh here you can access the services uh again and here Services we have a method called get user out right inside that this is the promise okay make sure um remember this thinks that this is a promise so we have to write um oh sorry Services dot sorry then we have response and the response okay so here we will get the response so just write the response first okay ah I don't know why I'm getting that much okay console. right response uh I don't know why it's coming a lot of okay now let's okay just go back to app.js and we are retaining response now what we will do if the response if that is a response right then what I will do I will set the user data right and I will set the value of the response correct and if we don't have anything right we don't have any value in the response I will set the value in data to be a null right so it means if we have value to the set user data obviously it will that go to the hom page instead of going to the login page right if you we don't have any value in the user data then it will go to the login page so the only important thing here right because we are accessing our uh checking and accessing our local storage whether we have value or not if value is there obviously we'll go to the next page otherwise we will go to the login page save everything and now we got the error unexpected token oh so let's uh go back to the services and here um we have to this is perfectly fine so okay so this need to be a await function actually a sync function just write await and here make sure you will a sync function as well and save everything and let's go back and try to sign in so I will sign in I will say yes Google Play and right now I jump to the homepage that is perfectly fine now try to refresh the application and it's supposed to go to homepage so if you see is coming to homepage right now let's go to the homepage and try to log out try to add the log out function so what I'll do um here I will write change this to button okay and I will give some title like title to be log out okay and save it if you see so button is not exist uh let's make sure you'll import this Buton button and save it right now we have log out button so we will add the onpress event right to this on PR event what I will do I will write one more method in the services in order to clear all the local storage so I will write constant uh log out okay and uh so just in this log out right you can just write a sying storage dot clear so it will clear all the local storage value right and now I will I will call this log out method so just write services from the services shared folder do logout [Music] so oh sorry so it's not coming the reason is you have to make sure you will export this particular value so that you can access it so log out and now if you go back to home doj you can access this log out method okay and now save everything now if I click on log out right if I click on log out oh it's actually log out you don't see anything because we did not jump or uh move back or we are not updating the context value but if I go back to app.js right and just uh do some space and save it it will jump to the login page okay because the reason is uh on the log out function we did not set the value of data right let's set that value as well so if I sign in again I say yes sign in it will go to the homepage right and uh in the home.js right we can access the context here and we can set the value of context right so what I will do here I can Define uh constant and we will say user data comma set user data is equal to use context because we want to use the context and the context name is authentication context right now here we can call this log out function as well as we can set the value of US user data to be null so I will write set user data so it need to be a data not D and to be null okay so what it will do it will update everywhere wherever we use this context right and save everything right now if I click on this log out button right see it jump back to the login page immediately and now if I go back say yes okay and it will jump to the homepage as soon as right even though if I refresh the script right it will go to the homepage as uh homepage with the log out button uh okay so this is how uh it works so I hope you understand all the concept of the use context and a sync storage which is used to store the value locally on devices okay so if you have any question please uh com uh write in the comment section or you can DM me on my Instagram Channel at tube Ki and you can join my telegram Channel as well so in the next section uh we will start building the home screen okay and uh also we will uh set up the stripy as well our back end so that we can um write store our all the content and there from there we will go forward okay and uh please if did not subscribe to my Channel please subscribe to my channel and let's see you in next section so in this section we are going to display the user information so once we land on the homepage we are going to show the user name along with the user profile image okay and after that we will also add this search uh box okay so right now um let's go back to our your um vs code and here uh I will open my app as well so right now I will remove this button okay so because I don't want it anymore here okay so I will remove it and save it so after that uh let's add a new one component okay so we keep this heer and search by in different different component okay so create a new folder in the app so go to the app and just add new folder called components and inside this component I will create one file called Welcome header. JS okay or you can add the home heer whatever you name want to give the name you can give and add the default template so react native function and enter right so it will add the welcome heer make sure you will import that one in a home.js right because we want to show this uh header at in the home page right so I save it once I save it you'll see this home welcome header name because that is written in the text right the welcome heer now I will remove oh I will keep as it because we want to show hello over here first and then we want to show the um the name of the user right so here what you have to do uh as I told you right we are using the context right and that cont text uh we can use it here right because that it is a nested in a home and then in a again in welcome heer right so what we can do just add that one so constant curly Braes user data comma set user data okay and is equal to use context and make sure you'll import that one and and which context do you want to use so in this case is O context okay so we able uh we successfully added the contact now we have the user information in the user data right so what you have to do you just simply type it here okay and access the username here so in this case it's a user data I will add this question mark because optionally if it's not there it will not gives any error and save it now if you see right it's showing the game play because that is the username okay I will WB this in one view okay because we want to show the uh image as well and the right hand side right so in order to add the flexes and everything I added this in a view so let me structure it beautifully okay and then I will add the image so just add the image so in this case we have to add image using the react native image Library and the sorry the image tag and here we will give the source so in this case right we want to show the data or show the image using the URL and which is not in our local right in the local we use uh require function to access the local image but in this case we have to show the image from the URL so I have to write like this and then you have to write Ur URI right so URI and then you can give the URL okay so in this case the URL is the user data because we have uh image in your user data right and inside that we have picture property so picture which show the user okay image so right now obviously it will not showing in the screen because we did not provide any height or width right so I will give the inline styling here so just write style okay and in double curly I will go the width of 14 and height of 14 okay and we can give the Border radius we want the circular right so I give the 100 and if you see I'm able to get the profile picture of the login user right now uh we want use some styling so it will come uh horizontally right so here uh to this D right the parent de gives inline styling and I will write display to be Flex or let's let's give the external styling so what I will do I will create a template here so just write react to stylesheet right and make sure you'll import this Styles sheet okay so import that one you do the react to and just write it here container the name the class name and inside that I will write display to be flex and the flex Direction I want a row okay that's all so Flex need to be in the quote actually it's a string and apply that style to this parent view so just access it within Styles dot the container okay and save everything if once I save it came you know one line right now give some gap between that so I will write justify content to be in Center okay and save it also oh sorry so not just Center we want to just space between okay you want the space between two so I add space between and also I will um make sure it vertically it's Center so I just write Al item to be in the center okay perfect now we want to give some Gap okay so if you see our prototype throughout the application we have the Gap right so let's give some U padding to our application so what you have to do um go to the page screen right and here what we'll do we will add the padding so let just I will give the inline Style and here I will write a padding of 20 and save it and that's all right it's it's came perfectly fine uh now if you see our prototype right uh the Rahul son the name the username is little bit um the font is uh bold okay so let's give some font uh some styling to this usern name so I will give inline styling here okay so style the double code you can give the font size to be 20 and font to wait I will go bold okay and as soon as I save it you will see the change perfect okay let me give a comma here that's all so when a user login right it will jump on to this page right and then it will show you the user profile name and the name of the user okay now let's add the search bar if you see our prototype we have this search bar below this welcome heer right so let's first create the component so let's go back in the component folder and I will create a new component called search bar search bar. JS okay then add the default template theact native function so it will add us a default template and I will remove this particular text okay and make sure you will import that in a home.js after welcome header so let's add the search bar here okay and make sure you import that one as well then let's go back here and first of all we will add the icon so let's go to uh this icon. export. FY uh which we learned last time how to we how to add this uh icons right and let's copy this import statement okay and paste it in the search bar and uh and then copy this uh icon and paste it here okay so here uh we want to change this color right if you save this and if you see right we got this black ion so I will change this color uh so in the color. CHS I added the gray color Okay so let's go back to our uh search bar and here I will change this color and let's access the color from the color folder so colors Dot and the gray okay after that uh we want to add the input right to uh so that you can type it so in order to add the input uh react need to include this text input property okay so add this text input and make sure you'll inut this text input as well so if you you see the text input imported from the react Nat okay and close this one I will add the placeholder as well so add the placeholder and I will say search okay and if I save it you will this you will see this search placeholder right which is our input now we want everything in one line so what we will do I will give some uh styling to this one so let's add a style and I will write the style here because we have lot of style which we want to to use so I will write it here uh so I will add this template make sure you will import this Styles sheet and then add the style so I will say container and inside this I will write style so let's say display I think we did not added this one let's add okay now it's added right so display and we want it to be a flex and then Flex direction we add it as a row okay perfect and let's apply this style here because we did not apply that's the reason we got the error but we let's apply the style styles. container and if I save it you will see the change okay now I will change this background to White right so let's add the background color and the code for white is just FFF and save it let's do some padding so I will do padding of uh 10 okay and save it also do the rounded corner so rounded border radius I mean to say so let's add the Border radius and it to be a 10 okay and in order to give some box Shadow if right if we have property called elevation and just add the elevation so in this case I will add the elevation value to be two okay and let's give some margin from the top so let's say margin Top This margin top to be 10 okay and save it and everything's look good right only thing that uh we want to add is just add the Align item to be in Center so it come vertically in uh to be Center L item to be Center perfect what I will do I will give some margin between this uh search I placeholder and this icon so let's give some inl styling to this I icon and just WR in the double code margin right we 10 and save it and if you see everything works perfectly okay so I hope you understand and this particular section that um adding this welcome hiter and we also add this uh search bar as well and for that we create different different component now the thing is right we can use this particular components anywhere throughout the application right you just need to import this particular statement for example let's add the will computer after the search bar right you don't need to do anything once you add that right you'll see this like this perfect right this is what we wanted so I will remove that and save it okay in the next section we will um install the strapy okay so and then we will create the API from that one we will add the contain into that one so in next section we completely uh focus on the strapy and how to set up the strapy okay so see you in the next section in the last section we learn how to display user data on the UI in this particular section we will learn how to install strapy so in this video we will learn what is strapy and the what is the use of stripy then we will learn how to install the strapy and set up strapy for our application then we will connect this trappy to the MySQL so that our database will be myql for our content and afterward we will connect strappy to our Cloud inary so that we can store our all images video on a cloud inary and after that we will learn how to generate the API from the strappy with without writing any code so all of this we will learn in this particular section and uh let's begin in this section we are going to install this strappy okay and uh strappy is the one of the best open source uh headless CMS available currently uh on the internet okay and this trpy is completely free so uh you don't need to pay anything okay if you are doing the sale for State okay and if you see is free forever and uh the reason that I am using the trappy uh because it's very uh customizable the UI is outstanding and also it provide a lot of plugins that you can use okay if you go to the their Marketplace they have lot of plugin that you can use it and the the way once we install and when once we look into this strappy I will I will make sure that you will definitely love this strappy okay um the another alternative for this one and you can use it you can search it on Google or YouTube uh the name is uh sanity okay that is also open so that is also free but the thing is you cannot control on the the which database you are using in the sanity okay in strapy you can use of post SQL graphql or you can use the MySQL okay database as well and it's as I say it's customizable that's the reason we are using strapy and very easy to install and you don't need to do anything as I say uh we will create the API as well uh without writing any code okay so what you have to do uh just copy this particular line of code okay and go back to your project uh folder where you want to uh install this trappy and in this case open the command prompt at the desired location okay and then um just execute this line of command which you copied okay so in this case you can give the uh name of of the project you want to give right I will say uh educational app backend okay and enter it then it will ask you some question let's say yes and then it will ask to uh different type of installation the quick installation it's very quick you don't need to do any Uh custom setup or anything right and it use a post SQL as their uh default database right but in this case as I told you we are using MySQL so uh that's the reason I select the MySQL so that I will tell you how to do customization because on the internet you will not find anything uh any video like this where we are using MySQL connect to mySQL to the uh stripy so let's select the custom and here I will s the JavaScript then we have option SQL light post SQL my SQL so in this case we will select the MySQL here we have to select the database name now uh for this particular tutorial I'm using the hostinger service right and uh this is one of the cheapest and best hosting you'll find on the internet the link is in description and if you use that link you will get the 75% off on the hosting okay so here you have to enter the database name so in this case the um this is my database name I will put the host so in my case it's a tug.com then the port number I will keep as it is then the username uh I will paste like this and the password so I'm entering the password so it's saying enable SSL connection I will say no for this one and then it will create and GED the file for us okay a few minutes later now if you see our project is now uh generated right so let's go to the project so I will do CD [Music] educational app- backin and now I'm in the project right and in order to run this project you just need to type npm run develop right and it will run our uh strapy project so it will give the port number where you can uh do the uh you can check the uh application so it's saying the x is denied by user right the code box and blah blah blah so the reason is right so if you go back um let's go back to our hostinger right and in the hostinger once you created this database you have to make sure you will give the access to the remote MySQL okay so what I will do let's go to the remote MySQL and select the IP as any host okay and choose the database so in this case is a code box and just create it okay so it will create the remote connection for the database and now if you go back to this um command prompt and try to run the project it will take few uh seconds in order to generate the um uh the database and everything tables and everything a few minutes later and uh now if you see right our project is run successfully and it's it will open on the Local Host port number 1337 and if if you see it it will ask you to register for the admin because you are asking the first time right so I will say and last [Music] name Tu guru.com enter the password so I will enter my password confirm password and just say let's start okay now if you see you landed on the strappy dashboard okay where you can do anything thing whatever you want even though if you want to change the logo of this one right and you want to customization you can do that you just need to upload the logo it will change everything lot of things uh you can explore in this one once you log into this one okay and uh afterwards uh I will tell you some of the things to generate the API adding uh adding the contents and everything right so when you um in this particular course right when we uh adding any content I will teach you how to build the content for this one and how to add the content for our application through the strappy so it's very easy okay and uh I I'm sure you'll love it okay now the next is if you see right in media type if you upload any new asset right just upload new assets go to browse file and here for example I will upload this particular Banner okay and say upload access to the library so once it upload right uh it uploaded to the uh strapy right and you can access the um particular link by copying this link and you can just paste it and you can access this one right but uh in this case right what I'm doing uh we will connect this our strappy to the cloud cloud inary This Cloud is the one of the so now in order to connect this strappy to the cloudinary right make sure first uh you will create this cloudinary account and one once you sign up to this Cloud unary um then go to this dashboard section I put the link in the description okay so if you join with that right you will get the extra credit uh for the storage so just go back to this um our strappy and go to the marketplace right here you'll see the lot of option uh go to the providers which is official uh and made by strappy this particular plugins right and you'll see this various option like A W uh a wss3 buckets to upload this one right uh in this case we are using Cloud Nary but you have option to use Firebase uh storage and lot of things right here uh click on more okay so it will jump to the documentation on this particular strappy and you will see uh the command in order to execute it right uh to install this strap uh Cloud for your strip project also uh there are some uh we need it right so once you uh log to the cloud inary you will find this Keys as well so first um let's copy this line of commands and execute in a command PR so what I will do I will go to this command Pro I will stop the project first and then I will execute this line of command okay so it's installed successfully okay so let's run the project so before that right open this project in a vs code because we have to add some uh code into this one so I open this you know vs code and then let's go to a documentation of this one and if you come down right it's saying in the config folder in the plugin. Gs you have to copy this line of code so I will copy this one okay and let's go back to this uh stappy vs code and in the config we have this plugin uh we don't have any plug-in uh file right so create a new file called plugin. JS okay and inside this just paste this particular code okay now you have to replace this Cloud name key and secret uh with your uh cloudinary account okay so the name is right this plugins. JS so make sure the name is correct so right now I will just rename this to the plugins. JS okay and then go back here go to the cloud inary and here we have to copy this Cloud inary name then uh I will paste it like this right directly so you can put it this variable in a environment file in order to avoid any issue right for the understanding purpose I will keep it like this only and then API secret key so we need the API secret key here like this okay and save everything now we uh almost set up everything just make sure in the go to the documentation and everything is there right the another thing that we need to modify security Med configuration right so in the middleware DJs you have to update this particular lineup code okay so just copy this lineup code oops copy this lineup code and then go back to vs code here in the mid. JS file in the same config folder you have to add it okay so like this and just remove this stripy because we already us this stripy here save this one and uh and uh go back here right make sure everything is done and npm install provid we this line of command already so now let's go back to our Comm PRT and stop just rerun the project okay so I will run the project and once this project is uh run let's open this one so opening Local Host 13 3 7/ admin just log to the account okay with the credential which you created and you will jump on this page right now go to the media library and let's try to add new assets so let's browse the file here I will add the new file for example the banner of our course let's upload it and you see it's uploaded right in order to make sure that which uploading to the cloud right copy this uh link and paste it here okay and if you see the URL is resources cloud.com okay so it means it's uploaded to the cloud only okay and if you want to check go to the cloud dashboard go to the media library and here we'll find our image get uploaded in the dashboard that's all so you can upload the image you can upload any type of file okay uh to This Cloud underw using our strapy so we are pretty much set ready with this trpy uh uh CMS okay and we successfully set up and install this trpy as well now next uh if you see our application so in this one right uh we are going to uh add this slider and for that we will add the slider in our stripy first and then we will uh with the help of API generated from the stripy we'll use this API in our application in order to display the slider on our application okay so in this section we are going to implement the slider for our application so we will fetching the data from the strappy and then we will display it on the um on the application okay so first of all uh we need to add the content uh the slider information into the strappy so before that we will add the uh slider content and then we will add the data into that one okay so let's go back to our uh strappy dashboard right here if you find uh this content type Builder right this is the plugin where you can add the content type so let's create a new content type uh which is called a collection for our slider so just type the uh name I will give the slider so I will keep everything as it is okay uh we have advaned Sitting as well but uh I will keep everything as it is and create uh just go to the next right here uh it will ask you to select a field for your collection type so we have different different option like text email password images a lot of things right so in this case I will say select first text and I will say name of the slider okay uh then you have option whether this short text or long text okay or do you want to make it required feel it's up to you okay I will keep for now as it is and then I will uh also add another field and which is a media where uh user should able to upload not user but admin should able to upload the image right so I will say image okay and we have option multiple Media or single media so we want to show only single media so I will select single media and in advance setting I will make sure it is a required field okay and if you see right we have different different option so right now it's selecting all but we can only only add images uh as a media type right it's up to you and I will keep as everything as it is Click finish right once you are done with this one just uh click on the save button so it will create the collection type of for our slider so that now we can add the slider as much as slider we want from our content manager so right now it's restarting the application because we just added the new uh collection right so we'll wait a few minutes later now once our application restarted right you will see the slider is everything added right now you can add it later if you want to anything right for for now for this section we just want this name and image right now go to the content manager and here you will see the slider section uh the collection type which is slider we just created right and here you can create a new entry okay so let's click on new entry so here you can give the name of the slider so I will say slider one and now you can upload the image so this is a required field right so you can appload New Image or you can have existing image which you can upload right now I have existing image so I will select that one and just click on finish okay and just click save so now once you sa right uh it's not it it just in the draft mode right now you have button called publish so just click on that until unless you did not click on publish it will not publish actually right and if you go back now you see this uh particular slider images get added okay perfect now next we have to enable API for this particular uh contents all the contents right so first of all go to the settings here you will find the uh sorry you will find this user information called use roles here in the roles you have called public right click on that one and inside this you will see this our collection which we have right called slider don't touch any other I will suggest okay and click on slider here you can give the permission to access this particular API right so it's create Del so everything option you can give it or you can just say okay just want to face the data and don't modify anything right I will s all for now for our Simplicity purpose and click save okay so if I click on find right you will see this this is the API get point so let's try to access the part API so so in order to access this API right you have to uh open this Local Host then select API and the endpoint of that particular API so in this case our endpoint is/ API / slider me just a slider okay so I will select like this if I enter it right you will see the slider information so inside this data we have ID is equal to one then we have attribute call name and everything right but if you see we don't get the media media or the image URL right because in order to get it right you have to write like this question mark populate is equal to Star and if you click um enter right now you will see the extra field called image and inside the image we have the URL right here is a URL so we have lot of option but because the thing is right uh different format it will automatically convert your image in different different size if you see right width height and the URL for this one the small the medium size large size like that right you can control on that one it's up to you now we successfully uh added this API end points uh and we are able to access the endpoint from the stripy but right now anyone can access this one right unauthorized user everything so in order to avoid that we will create the API for sorry the API key for our uh API and we will use that one so in the sty we can do that so go to the settings here you will see this option called API token right from here you can create a new API token so click on the create new API token here you can give the name so in this Cas I will say uh code box AP then you can give the description if you want it will say the duration of the AP right after um whether that API is will be um ending on 7 Days or 30 days 90 days right now we select the unlimited then you have token type whether that particular API token will be on read only or full access or custom so I will say full access and you have to make sure that the uh you want to give the access to everything right so you can give the custom one right now I give the full access and just click on save so it will create a new uh API key so make sure you will copy this API key but because uh once you save it and you you go back it you will not able to see this API key so if you lose this one you have to create a new one right so I will copy this somewhere and let go back here okay and now your API is ready now that API key you can pass into the heer of the API call and then you can able to access it so now in order to F data from the API we are going to use this Library called API source which is depends on the exos okay so you can use exos or you can use API source for for this tutorial I'm going to use API source so in order to install it uh execute this line of command in your project and uh once you R it right then in the folder go back to the shared folder here we'll create a new file called Global api.js where we will write all our API call here okay and whenever we want to to access that API call we can access it from this Global api.js file okay so let's uh let write a code in order to fade data right if you go to the documentation of this API Source you will find the way to in order to past this data right so I will just copy this and paste it like this okay and this is a base URL so we will replace this base URL with our base URL right and if you see this is our base URL Local Host 1 337 okay so let repl this one this one okay and here what I will do I will remove this accept Okay and here we will add the API uh key okay so in order to add API key we have to pass the API key like this and the key okay so we can copy the key which we copy in the last um uh session and just paste it here once you paste it right just save it make sure you will import this create uh from the API Source okay now in order to write the API call right for example let's write a um endpoint call to fade the slider data right so I will say uh get slider is equal to and here we can pass API so it has a lot of different method called we have gate we have post okay we have update a lot of things okay put so in this case we want to F data so just write API doget and here we will pass the URL right mean the Endo so just uh the end point in this case the endp point is the sliders okay that they this complete um slider question mark popul so like this okay and save it now in order to make it eligible to access anywhere in the application right make sure you have you will export this particular uh end points method right so just write like this so in in the export do export default you have to make sure you'll export this Cate slider and save it now let's go back to our home.js and where we will call our um this particular API right so go to the pages in The home.js so what I will do I will write method get slider okay and uh here this is this will be a function aing sorry this is assing function okay and in constant result is equal to Global API so we are accessing our API call from the global API dot so in this case uh we have the G slider method right do we have data so we want data right just write data like this okay and console this result so console do log and result okay now in order to call this one right we have to use use effect in built react hook so you can write like this and now this use effect will execute every time uh when you did not specify any empty array or something right so in order to execute this only one when this components load I will pass the Mt array okay and I will just call this G slider here like this okay and save it make sure your app is running now I'm just writing I'm consoling this particular result right and if you go back to the console you will see the result we are getting as a null right the reason is uh if you go to This Global API right we are using this local host and Local Host will not work uh in the react native when you are trying to face that data from The Local Host API right so in order to fix this issue go to this uh settings and in the setting we have this uh option called Network internet in the network internet go to the Wi-Fi where you will find this IP address right copy this IP for address and replace it with your Local Host okay and save it once you save it you will get you will find this data okay now your API will work so if you using using the Local Host API right then make sure we'll replace with the um the IP address okay now we got the data perfect so in this section we are going to implement the slider for our application so in the last section we already fetching data uh for the slider okay so let's go back to our vs code and if you see right with this base URL and the with the HTT client API sauce we are able to successfully face this particular uh slider information in home.js component right so uh for slider go to the component folder and create a new file called slider. JS Okay add the default template I will add like this okay and save it make sure in the home.js after the search bar you will add this slider component make sure to import the slider as well and save it if you see we are able to display the slider name okay so now again uh go back to the slider. JS here what we will do uh in home.js right we fade this get slider so instead of uh fetching in know home.js we'll fet this uh slider in slider. JS so copy this lineup code okay copy like this and paste it here make sure you will import all the necessary uh Library like use effect or here we want GL Global API right like this and make sure the slider you are getting all the data okay so result I will just like this and I will just make sure that we are getting data okay perfectly we are all getting everything right now next we will save this data uh in a state right so what will do I Define one variable called constant in this constant we will Define the state so let's say slider comma set slider equal to use State and I by default I'm passing the Mt now here we'll just set the value of the slider by setting the set slider and I will put the result inside that now if you see right uh this is our response for the slider right and right now all our information contain in the attribute field correct so and inside again in the image we have all the images correct so for our Simplicity purpose we will remap this particular uh Fields according to our use right so here what I will do uh I will remove like this okay and uh we'll map this one right so I will constant uh response is equal to result. map and I want to map the item right so map item okay so in inside this one we will map it for example for ID we will map item. ID so here right inside the result we again have data right so just make sure you'll uh access the data using the result. data and then in the item we have item. ID so here I think we have to map like this okay and then after item id we want the name of the slider so name can be accessed by using item dot attributes if you see right this is the for example item this is our first item this is our second item right so first item we have ID we already access the then we have to access the name so name can be accessed by using the attributes so copy this one so item do attributes and then we can access by using the name okay after that we want image so let's say image then same item dot attributes dot now in the attribute we have the image URL inside this image uh object right so let's say image dot again inside the image we want we have the field called Data data and inside data we again have field called attributes so make sure you access the attributes and then we have a fi in the attribute called the URL so just ignore this format and we can access directly this URL right so this is the high quality URL which we uploaded right or depends on your choice you can also uh face this thumbnail as well right it's up to you uh thumbnail size is a little bit smaller but for now I will access directly the URL okay or you depends on the size you can access it but for now we will access URL and I paste the URL here okay now interesting thing if you try to uh console this response right I try to console this response here and let's see how we are getting the data right and if you see right we are getting the data what we want right if you see object ID is one and image right let's let's clean this one little bit so what I will do I will remove this one and also I will write here slider list in order to check whether we are getting correct data or not and I print it I saved everything let's go back here right if I if you see right I'm getting ID I'm getting image and I'm getting name as well okay and this second I don't know why we are getting this error but we'll see the issue we are getting but for now we are getting the list whatever the list we want right so now make sure you will update the slider so just make it um by setting the slider value by setting the set slider and inside that we'll put the response as simple as that so this is our response correct I will come in this console because we don't want it anymore now we have to display it on the screen if you see the mockup right right we have this image and uh if I scroll this right I want to move the slider horizontally as well in order to uh display this sliders right um we have to iterate this one so for that one we are using flat list so in reative flat list is one of the powerful uh property where we can iterate the value okay from the list or ARR list or whatever right so uh let's define the flat list okay and close the tag so inside the flat list we have to provide some um value and plat list provides some properties say for example in order to um display the data right we have to add the data for the flat list so for example in the data property we have to pass the data which data we want to show it on the screen so in this case the data is our slider right because uh if you see we store our data in the slider so we are passing that one in a slider then we have to render the uh this particular slider right one by one so in order to uh display that one uh flatlist has one property called render item inside that we have to define the value for example we'll say slider okay or just say item uh no need to say slider so item okay this is Arrow function like this right make sure uh the all the curly and everything you have to display like this only okay otherwise it will not work it will not sometimes it will not give error as well so make sure that one then I will add one view okay and uh I will close this one inside that we want to display the image correct so I will what I will do I will add the image with the react to image proper image library and then close the tag so here we have the URL right so we have to pass source and in Source we have URI and then we have to pass the Ur So in this case is item do image so if you see we have this image right that that what we are passing okay and save it now let's give some width and height for this one right so I will give in line only so let's say style and let's say width to be 100 for now and the height to be 100 okay and save it now once you say you'll see this uh image is displaying on the screen okay so now what we have to do we want to give the width the uh the screen of the width right so in order to Define that one right here we have one property called Dimensions okay so Dimension has the some method so in this case we'll say get okay so we want to get the dimension of what we want to screen or window so in this screen we will see screen and then what we want we want to height or width so in this case we want to width so what it will do it will return the dimension of the screen uh the dimension of the uh screen and the from that we can face the width only okay so save it if you see it's it's covering all the screens with the defined width right and then we can increase the height for example I will say 160 okay and 150 is fine for me okay like this perfect okay now uh let's make the corner to be rounded so I will say border radius to be round round so 10 for example okay yeah this is fine for me now okay and for this view we can give some uh here only we can give some style and we we will give some margin from the top so let's say margin Double C margin from the top we'll say 10 it will come down little bit now it's coming in vertically right so we want to show it horizontally correct so in order to Define horizontally flatly have one property called horizontal right and if you say horizontal by default the value of horizontal is false but we can Define it as a true and if I save it it will say it's it's it's showing horizontally right now I can scroll it if I scroll it like this right you can see this I can able to scroll this value okay now if you see correct this width uh is too much if even though if I scroll until this points this U width is coming so what we will do we will multiply with the 0.9 for example let's say how it looks and if you see still bigger so I will say 85 and this is okay for me okay and what I will do I will also give margin from the right so I will say margin right and 10 okay maybe 15 and now if you see it have some Gap it also have the value right perfect one more thing if you observed right uh this when I scroll is horizontally right it is showing the scroll bar we don't want that scroll bar so in the flat list you can also remove the scroll bar so you can just write scroll bar enable and you can say false okay and show display now you will not see the scroll bar at all oh sorry the scroll enable is different one okay we have property called show horizontal scroll indicator where you can see the false okay and then save it now if you see we don't see any uh scroll bar at all perfect and uh I hope you understand this particular uh things okay I will just change this to 87 for example little bit okay perfect now uh I hope you understand this so what we learn in this particular section that we can able to uh fade the data okay and we we created a new component called slider then we um we save that particular slider in one uh each state and then we iterate the state using the flat list so flat list is very powerful tool in the react native where you can iterate as long as um the list or whatever you want right and throughout the application at many places we are using the flight list so under understand this flight list guys um in the next section right we will uh implement this video course okay and then I will I will show you how I added that in the uh strappy and then uh we will display it on the screen okay in the last video we learn how to implement this slider and also learn how to use the flat list in order to display data horizontally and we can scroll it same Technique we are going to use for this video course and we are going to implement uh video course listing in this particular uh section so I created this video course collection in the strappy okay and this this is the content type builder for this one uh the video course if you see right I added this title description video URL image and then I created this component field okay and so that I can able to add the content and sorry for the video I can add the video topics as much as I want okay let me show you how it looks when you are going to add a new content for the video course so for example if I uh adding this particular uh course information right I added this all the details along with this video topic so in the introduction we have introduction and the description along with the video URL okay and I can add as many as we want that's the reason this component is very helpful so you can reuse use this component right if I want to add new one I can add it here okay and just I can add multiple one okay no limit so this is how uh it works okay very simple uh so you can try it if you want to uh want my strappy dashboard access so let me know in the comment section so I can also upload the source code of this uh strappy dashboard so so you can directly use it okay for your application so let's go back to the our design and and if you understand right when you scroll it we want to scroll horizontally so let's go back to our vs code and here uh we'll create a new component called video course list video course list.js okay so inside this let's add the default function okay and let's save it make sure you will import that in a home page so let's import it here so in this case is video course l if I save it uh why it's not showing yeah if you see right it's showing the video course lead over here right I'm using the emulator that's the reason it's little bit slow okay now first of all we want to fade the data okay so we want to add the endpoint in our Global API so I will write a new endpoint called get video course is equal to and we have get API here we want to add the API so for this one I have this API video the end point is video Dash courses okay so will add it here like this and make sure once you add it you will import it so I will import it here get video course okay and save it now let's go back to slider. JS oh sorry sorry uh so you have to go back to the video course list.js where we will F this uh video course okay so I will create new method so let's video course and it will be a a sync function here uh I create one call response is equal to so let's f it from Global API then we have method called get video course and here we say data okay so in response we'll get the data now if you if you learn the slider right if you see the slider we map the data according to our use same Technique we are doing here so I will map this one so and I will save it in the result so response. data do map this case the item so make sure you uh this all these brackets and everything okay and this is first is ID so item. ID then the field we want is title description okay so let's say um in this case title will be item. title then description I will get des and say item do attributes so here right we want to mention the attributes because uh this title contains in know attributes so attribute sorry item. attributes. title and same here do description right so we want the image so let's say image so item do attributes do image. data dot attributes. URL Okay so so if you see uh inside this image we have data inside that we have attributes and inside that we have URL okay and same thing uh we will put the video topic directly in one item okay so let's say video topic and here we can say item dot attribute. video topic so it contains video topic and everything okay so we are not mapping this one for now we'll keep as it is okay if you want to map you can map it okay so let's say everything small perfect now we will store this one in one state so constant video list comma set video list is equal to your state and I will pass the empty one and here I will make sure that I will set the value for the video list by setting video list bracket the result okay so you can print the response if you want so I will console the result okay but uh we have to call this method in use effect right so you know how use effect will work so write in use effect okay I will pass the Mt and I will just call this once only when this component get load okay and uh if you see if you go back to the console you will see this name and video URL everything right coming in this particular uh what you say this particular uh video list okay now we have to iterate it correct so in this case again we are using the flat list okay the say flat list inside the flat list I will pass the data first so data is the video list after that I will r render the item so render item uh here I want to render the item okay and here I will Define The View inside view I will write my code so after that we have to display the image if you see the mockup we have to display the image that's it nothing else right so just write image so you'll import the react native and then you have to pass the source so in this case source is our URL so I will pass into the URI then item Dash we have called uh Source called image correct so I'll pass the image then I will put the inline styling so style is equal to equal to I will pass the width in this case if you learn right we are passing the width but uh for this course we can uh give the manual width size right so I will give the for example 200 then height will be 100 and let's see how it looks so if you see right it's looking perfect fine I think the width and height is okay I will do 180 here okay now we want it horizonally so just make horizontal to be true for this flat list okay and save it then apply some styling uh so here you can apply The Styling for the image or you can apply for this view as well I will add image only so here I can give margin right to be then border radius I will mark it as a p okay and it perfect sorry here we want to say horizontal we true okay and we give some margin from the top so I will add it here only style margin up to be 10 I give 15 so uh one more if you uh see here right we have the title called video course right so let's give that title first so I will add the text here and I will just write video course okay and let's give some styling to this one just style insert that I will give the font size to be 20 then font to be a font weight I will give bold and save it let's give some little margin from the bottom to be three okay and this look good to me and if you see oh so if you see this one right it's working perfectly fine okay and now I can able to scroll it you can remove this scroll indicator so just write horizontal scroll indicator to be false and that's all so you'll not able to see the horizontal scroll indicator at all okay perfect so we successfully implemented this video courses particular section we are going to build this popular course list so if you see in the UI we have two different uh course list right one is the basic and another is Advance here we are not creating two different components we are creating only one component for the both of them only thing that we will pass the value whether it's a basic uh course or whether it's Advanced course okay and depends on the value we are going to f the information I already created this particular uh strappy uh collection for this course list okay and this is my API response if you see the API endpoint I'm filtering the data uh depends on the type of this particular course okay and if it's basic then I'm only facing basic if I change to advance it only face the advanc one okay and if you see the type is Advanced now okay also if you want to learn more about the how to filter the data in your on stripy you can go to the stripy documentation and here you will find the all different types of operator and depends on that your data will get filtered out okay so let me show you how I made the uh this particular collection if you see right I have the name type then description and then I I created this uh components called introduction B not introd but if I click on this component you will see this content and topic and everything right so if you want to know this trappy back end code let me know in the comment section so let's go back to our application in vs code and this is our application right now okay so let's create a new component we called um Force list.js okay I will add the default template native function and I'll save it now go back to our home.js here we will add that particular function let's say um course list okay say like this now first of all I want to pass as a basic uh the type is a basic course list right so I will pass the type which is equal to basic okay now in order to accept this particular prop which we send from the course lead in the course lead we have to accept it as a prop so I will say okay so when you're passing any value uh through the this component you have to accept it here so that you can use it right if you want to see let's um add the use effect and inside that I can console this type type okay and and I will save it now let's go back here and if you go to the console right let's bring it down you will see the type is basic okay in the same way if I go to the uh home.js I will add another one which we can call Advance right and now you'll print the basic and Advance as well okay because we using the same component only difference is passing different type of course okay now let's go back to Global API and here I will add the new API so let's say get course list and here I will pass the type so course type right and the end point is the same which I created okay so this is the Endo I'm passing directly here okay only thing that you need to change this is to replace the type with the the type which you want to pass right so I what I will do here inside that I will add as a type okay and save it make sure you will export this one and save it now you are ready with the API endpoint right now go to the uh course list.js component and here we'll call this component so let's create a new method called constant get course list which is a sync in here you can add the meod so in this case I will write constant response which is equal to um let's say Global API dot in this case is our course list right and we have to pass the type so we already have a type okay this one and and data that's it now in thisse we will get the result right but we will filter filterate out the result according to the our requirement right the same way which we did for our video course so let's say constant result is equal to response. data do map item first of all I will add the ID so item. ID then we have the name description okay so let's say um name of the course which is item. name then description description then so one we we forgot that we need to add the attributes uh because it it the name and description is in the attribut so make sure that don't forget it otherwise you will not get the result like this perfect then what else we have we want the image of the course so obviously item. attributes do image data do attributes. URL okay where we have the URL of the image and the last but not the list that we have this um topics okay so let's say topic is item do attributes dot topic do just I will just face the topic here okay and not anything else so just write as a topic okay perfect now we have all the data we can console that data so write console. result and just it okay and if you go back here okay make sure you will call this particular G course list inside this use effect if you see we get the result we have all the information which we need okay everything is ready perfect now we have to display it on the screen so we will use the flat list we learned the flat list in the last section only so just write flat list and inside the flash list provide the data so data is equal to uh we have to add this data in somewhere in the state so Define one state called constant course list comma set course list equal to use State pass the empty initially and then we have to set this course list over here okay set the course list and add the result like this and this course list we will pass here okay so like just course list if you see this course list we have to pass it okay if you think name is different C is small okay and here C is capital so make sure that one then we have to render the item so here we'll write item and then inside that I will add the view initially inside view I will display this all the course list so if you see this mockup right the first of all we have this image and then this uh name of the course okay so here I will write the first image I will display the image and then we have to add the source make sure you import the image in order to get this recommendation and then source so in this case the source is our image URL so I will add the URI and inside that I will just provide add. image item. image okay then we will give some width and height let's give in style we'll give the width of 100 we want to give more is give 180 and then height is 120 let's see how it looks now if you see we got this um images and the name as well I added this text as well and it's showing on the screen also I added this text as a heading for our course just I'm replacing uh with this video course as a basic course and we want all advanced course so okay so here I we just replace the basic word with the type so whatever type it is it will convert into that particular one okay so right in this case it's a basic course and another is advaned right right now if if you see right I can't able to scroll on the screen so I will fix it after this one right so first of all uh let's put everything in horizontal line and change and give some styling to this particular um course list okay so here I will save width as a and I also make the corner to be rounded so I have radius border R to be rounded as a t and we want the flat list to be horizontal so just say horizontal is equal to true and save it right so it will come as a horizontal and if you see Advanced course list also display on the screen correct um if you see our um this course right we have this uh information as well written below this one right so let's change this size also I will keep as it is just I will give some margin from the right so let's margin right to be 10 and then we want this background to be white so I will say style and background color be color of I will import from the color and we have the color do white and save it so we have white color now and here instead of giving margin here right let's try to do margin here then you'll see this change also uh give the Border radius to be 10 here as well you'll see the difference also we want this text to be padding so let's add a view here directly and then we will give the padding for that view only so I will add and I will put this text inside this View and for this view I will give style and I will give padding of 10 like this and then it will show like this right and if I move it it's showing correct also we have to make sure that we will remove this um side slide bar right so just show horizontal scroll bar indicator which is equal to be false okay and uh in order to change the layout right uh because it look like a squarey so I will add this withd and let's add more and let's see how it looks this look good to me also I let give some margin from the stop so SL St and we'll say margin top 10 also one more information we want to display is the lesson number of lesson uh in that particular course right so we have this topic information right so we'll show the length of this particular topic so for example let's add the text here and here I will say topic okay question do length I save it you'll see number of length of the topic right and let me show you in the uh response so here topic we have only two topic introduction get started right so in that case we will show the number and after that we have just need to write lessons so just write like this after this just write lessons you see perfect we can give some styling to this as well so just styling this style and then the font bit to be bold and I will increase the font size as well like this okay and let's compare with our um and also I will give the font style to this one so let's say first of all I will change the color color colors. gray perfect I will keep as it is okay or you can change the font weight light font weight I we change to um this perfect and if I scroll it you will see the course as well okay you can change the height it's up to you how you want to display okay if I change this height to like this it will show like this and I think this is perfect for me okay now we will fix this scroll indicator okay if you see right I can't able to scroll it correct so let's go back home.js and here we have to wrap this view inside the scroll indicator so here we have the um function called scroll view okay and what it will do it will allow us to scroll the um user interface if I see right now I can able to scroll it so you can learn more about the scroll view on the Expo official website okay it has their own um properties as well okay but right now we don't want it and just we are showing like this okay and if you see everything is look um looking good so here the last thing if you see right right now we are getting uh the basic B course title with the B smaller right so in order to fix that issue in the text right you can write text transformation as a CSS property and here you can go like capitalize okay so it what it will do it will Capital the first letter of the each word if you see now basic course advant course right and it will fix for us I hope you understand this particular section in the next section we are going to build on the click event so once I click on this one right we will learn how to navigate to the new page so in the next section is completely about the react navigation and how to do the navigation from one page to another page right so that particular section um concept we will cover in the next section so in this section we are going to implement the react native navigations so for example if I click any of this course right I want to jump to the next page right right and that is nothing but a navigation so navigating from one page to another page so for that one we are going to use this react navigation so react navigation is one of the best library in the market and it is fully supportable to the Expo and the react apps okay so uh I I dropped a link of this react to um URL uh in the description so you can go and check it out so let's go to the documentation of this one and here first of all you need to install this dependency so copy this dependency go to your project and execute it then if you go back here right uh if you are using the Expo right then you have to install this additional uh dependency and if you are using the be react native you have to install this one right depends on your operating system you can choose any uh npm or this yarn okay so let's execute this another one as well and after that this R navigation provide a different types of navigation so for example the stack navigation or the tab navigation if you know about the tab okay so in this example we are going to using the stack navigation because uh we are jumping from one screen to another and it's completely a tag stag based okay so go to this hello react navigation so here in this particular uh page it explain how to use this particular stack navigation okay so after installing to this two dependency you have to install this tag navigation as well so execute this line of command and then uh here is the example that how to use this tag navigation okay so in our example or in our um app right uh on the click of any of this course we have to uh display this course detail page right and which contain the course content and everything so let's create a page for this our uh course details so let's go to the page section right and here I will create a new page so in this case we have to go to the on pages folder okay and here I will create new page called course detail so let's call course details. JS so here uh we will add the custom uh react native function so just type rnf and we will create course detail right and save it now in order to add the navigation right we will keep all of the navigations uh files in one folder so in the app folder we create a new folder called navigation and inside this navigation we create a new folder called home navigation.js so whatever the navigation we are doing from the homepage we will add it in the home navigation.js okay and here we have to add the default retive function okay so we added this function so if you see this example right uh first of all we need to add one constant and this is the uh create navigation the object we are created right so make sure you copy this one and just use this one over here okay and make sure you will import this create navig uh stack Navigator okay so if you see this statement when you need to import it so then if you see this example right it explain how to use it right so first of all uh we will remove this code and we will add the stack do Navigator okay so this stack is coming from this Con uh constant stack object and then we added this navigator from it and inside that we can uh display the screen which you want to display right so in this case stack do screen okay and then I will close this tag inside this you have to define the component if you see this example right we have to define the which component do you want to uh use for the particular uh navigation right so first of all we'll Define the component so component will be a home in this case okay and the name of the component so for this navigation what name do you want to give so in this case I will give home and save it another thing uh we will add one more uh screen here so the another screen is our course detail right so I will write course detail like this and the component name will be a course details and save it now it will not work until and unless you have to specify in in our app.js file so in I go to the app.js right and this navigation you have to wrap it in the um Navigator container so if you see this right the navigation container inside that we added this tag Navigator correct now we created for home screen so I will just put this tag Navigator sorry the N uh this navigation container around the home screen right so here I will see I will um put it like this so navigation container right and inside this nav navigation container we will add our home navigation right and here we don't need to specify this home here okay so the reason is let me uh save this one and let's see whether we are getting the correct result or not okay so we got one error let's see what's the error here let me give this down so it's saying so it's in encounter while trying to resolve the module react context because we int added a new um library right new dependency so let's uh rebuild this project okay so I will stop this project and I will rebuild it and now if you see we are able to go to this our home screen right and we are not using this particular home component directly in app.js instead that we are using our um custom home navigation um uh Library so the component which contain the navigation for the home screen right also if you see right when we add the navigation you will see this home uh the top bar right and it automatically get added when you added the any navigation to the screen so in order to remove this one right so let's go skip this one and let's go back to the home navigation okay here you can define whether do you want this particular uh heer or not so you can get screen options and inside that you can write either shown to be false okay and let's save this one and if you see we remove the heer for all the screens okay so this is first step now we able to successfully created the navigation for home screen right now how to jump from this particular page to another page on the click of this uh course right now for that one go to the course list and here we will add the on click on press function right so in order to do that right if you remember for button we added the uh touchable opacity right so we will add it we replace the view with the touchable opacity because it has a function that we need it right so the properties on press event right and on the Press event we will jump to the another page so here um I will write one fun method first okay and let's write method constant on press course I will write it okay like this and here I will pass the course information okay that particular course information and this course information I will pass it so and just call this particular method from here on press course and here I will pass the item so item contains the all the calls information just the selected call okay and if I want to print here console.log course course and save it now if you go back to the uh console right and if I click on this one you will see this particular ID and the the one which we selected the basic python on correct now how to jump to the another page so first of all you have to Define one um uh hook right which is called the navigation is equal to so I I defined the constant navigation and here you have to use navigation okay and make sure once you use this uh make sure to import that one okay and here you have to just Define that one so you can write navigation dot navigate okay and where you want to navigate so in this case we want to navigate to the course details so course details this name should match the name which we give in our uh navigation right so in this case we give the name for the course detail page is course Dash detail make sure it's matching with this one right and then I save it if I save it if I click on this one for example right and if you see it jump to the course detail page right the name is uh at the top but if you see it's showing here right now to pass this data from um our previous page right let's go back to a previous page and if I pass some data from this page to this page you have to just Define like this so here after give the comma and inside this curly braces you have to define the uh the data which you want so in this case I will write Co data and the pass the information which you want to send so in this case the course okay the selected course so I will remove this console and you can access it in the course detail Page by using this word course data okay first of all I will save it okay now once you pass this data right you can accept uh this particular information over here so in order to accept this uh the the data which you sent from the previous page you can do like this constant you can say param is equal to use route okay like this this dot you can add the params so from params you will get this particular information if you want to print it right you can print like this use effect and like this okay we will conso the information so here I will say course just write parm that's fine okay and here I will console this par value so just console this one and save it now right now we don't have anything if I click on it right you will see this data right and we just printed out and this is our data okay and it's coming from this course detail page from the use effect which we consolid right now you can uh right now if you see right this one so inside the object we have another object called course data so you can access this course data by using parm do course data that's it okay the one which we give name here right so same name you have to give in order to access the only the object which we needed right and then that object we can save you know one step so in this I will write like this course set course is equal to use and I will just set the course over here using this value okay and I will remove this one I will save everything and now in this course we have this course information which is we are getting from the previous page now the you you might have the question why we are sending the uh data from previous page to another page the reason is right you can also load the data on this page depends on the ID but we already have all the data in the previous page right so in order to avoid that loading and making the extra API call we are sending the existing data to the next page so that we can use it right so I hope you understand the react navigation how to use it how to install the dependency and how to write the navigation for the um particular page okay and depends on that you can uh use it so in the last section we implemented the react native navigation in our application so on the click of any of this particular course it will go to the course detail page right in this particular section we are going to implement this course detail page if you see our uh the mockup we have this course name the author right now we don't have author but I will put the random one and then we have the course image and then we have the small description about the course okay and then we have the course content so and uh don't forget we also have this um back button as well okay so let's go back to our application and let me open this one as well okay so here uh in the course detail page okay first of all let's add the back button for that one I will go to this I ions Expo and I will search for the back button and I will take this Arrow back button okay so I will copy this import statement then go to our project and then import it here as our import statement then let's go back again copy this one and here I will paste it here okay so I will paste like this I save it you will see the back button right first of all let's give some padding so let's say padding style and the padding of 20 and I will just give some margin from the top just padding from the top then we have the name of the course so below that put the name of the course so I will add the view inside view I will add the text and here we can Define the name of course so already we are setting this uh course data in a course uh variable right so just add course and then course name if I save it you will see this name of the course let's apply some styling so let's go style and here I can say uh font size to be 20 and then I will make the font it to be bold and save it and this look good to me then another text by the author right author name so I will say like by tube guruji so if you did not follow my Channel or subscribe to my Channel please subscribe to my channel and let's apply style to this one as well so let's apply style and I will sing the color of this one right uh from the colors file and which is oh sorry let's make sure we're adding color file correctly and then I want to add the gray color like this okay and if you see okay it's look good now we will add this uh the course image so after this one let's add the course image okay make sure you will import that course image by from react native and then apply the source so in this case source is our URL so I will write um URI and then the URI is course. image and then let's give some height and width so apply some style and I can give height of 100 let's see how it looks and if you see look good right let's add the height more height like this okay and also I will do some padding from the top so let's give margin from the top I will give margin not pading and the Border radius to be rounded so this is also look good to me then if you see right we have this uh about course description correct so after this I can say B more text and I can write about course and so I will use some padding to this one so margin top 10 first and then um font wait I will do bold let's see it looks good I will also increase the font size so I like font size to be 16 okay let's see how it looks I think this will look good okay and then we have this course information so will add the text and inside that I will add the course do description and you see we got this course. description now now here we don't want this full course information right uh then only first three lines we will show so in the style we give the only first line so okay so let's say number of lines this a uh text property and we can provide the number of size we want to give right so also we want to use style okay let's remove the style for now and let's see how it looks if you see right we only get the first three lines it's up to you how many lines you want to show it right so for example if I want to show four lines it will show the four lines okay and let's give some styling to this so I will give style and uh I will change the color of this one so color I will give color dot gray okay and this is perfect for me okay now the next we have the particular scor content content okay now in order to add this course content what I will do I will create a new component and that component I use for this course content and then that component I will UT in the course detail so let's go back to our component page here I will say course content.js okay and let's add the default uh function and make sure you will import that in a course detail page so after view Maybe I will add this course like this and save everything if you see you'll get this course content as well okay um then here go here and let's give some styling to this parent view so I will add the margin top to 10 okay and uh we have the text called course content okay and it's been bold color so I will change this course content content here I will change the style so let's go uh font weight to be bold and also font size to be 16 I say it look good to me okay now the thing is right uh if you go to the course list right and in this particular oh sorry uh if you go to this um course detail page right we have this course information okay in that course information we also have the topics right uh if you see this course list page and here we manipulate this particular uh result right which you are getting from the API so we have this topic as well that topic information we need to send it to the course content right so we can send only the topic or we can send the whole um course response as well it's up to you okay so in this case for the Simplicity purpose we don't know whether what we need in the future right I will send all the course um data so let's go in course digil page and here you can say course data is equal to I just write course is equal to course right and in course content accept it as a prom so so here I will say course okay now we have the course information here as well okay and inside that we have the topic and that topic we need to uh map uh you we have to fil what is say iterate it right and that's the reason we need to use the flat list for this course content right so I will add the flight list here okay inside this flight list first we have to provide the data right so in this case our data is not the only course so but in the case is course. topic okay and then we have to render the item okay I will give the question mark because if sometimes the topic is not there right then I don't want to fail our application so that's the reason I give this um question mark which is the optional so you can say topic is optional okay and render item is let's give the render item and inside that I will add this View and now let's just print the topic name so this say I will write the text and this is item dot so if you see our uh this course list right and we have this topic and inside topic we have this uh name called topic right so this name we have to show it right so I will say item top topic and if I save it if you see we are getting all the topics name perfect now the only thing remaining we have to show this number this name and this button okay and we have to use some styling okay so let's add the text here okay and I will add the index here so index denote the uh 0 1 2 3 4 right it given by the flat list when you render the item so in this case I will just render the index okay and if I save it you will see 0 1 2 3 4 right but we want to start it from the one so I will just add one and now sorry I will just add one and you see 1 2 3 4 5 is coming right I will again wrap this to the uh inside the view or okay I don't I don't want it actually I can apply some styling to this view okay and what I will do I will display this as a flex add the flex and I will make the flex direction to be row so I want Into Me one line you see right and then we also want to give the button right so let's go back here and here we I can answer for the play button so let's have this play button I want this play button so I will copy this import statement I will import it here and then our render com render component here if you see everything will be there right now let's apply some styling so first of all I will add the background to be white so here I can say background color is from colors o sorry not from here so colors. white and then I will also give some margin bottom five and I will do padding 10 that's good also in make vertically center right I will do the Align item to be in the center so everything will be in the uh vertically Center as well okay and now I will also make the corner to be ler rounded so I will say border radius let's comma here and add the Border radius five maybe okay and that's good good so now if you see this right we have this um number 1 2 3 4 right and it's little green color correct and the font is bold and some apply some styling to this number as well so here I will say um font weight to be bold then font size to be 20 let's see how it looks that is okay for me and the color is colors. gr and save it okay and I will give some margin from the right so here I can say margin right 10 let see maybe 20 okay and if you see right this number in one line now and this text also in the one line right only thing we have to uh move this icon to the right correct so let's apply some styling uh to the text first this text uh topic text so I can say font font size 20 then font weight bold and say if you see this one oh we don't want the font size that much bold okay we can remove this one let's go like this and that is 15 is okay so for this icon let's change the color first right so here here I will replace this black color with the color dot in this case is capital c plus do primary right is blue color right primary yeah perfect okay now in order to move this um icon to the right what I will do I will add the style and here I will add the position absolute first okay and then I will make right to be zero okay if you see and then let's give some margin from the uh left okay so let's let's change the right to be like five you see right or maybe 10 and that is okay if you see this mockup let's compare the mockup and it look good to me okay and now we have the course content let's give some um style to this to the flat list you can give the style to the flat list as well I just want to give some margin from the top so I will say five here 10 like this and we have this basic course python about course everything right the last thing we need is pending is once you click on this uh icon right it's supposed to go on to the back page right now it's not workable right so let's go back our course detail page and here we have this icon right so wrap this icon uh with the touchable opacity so you will get the on press property so that uh on press of the any that icon right if I save it and now it's clickable right so only thing on press of this icon oop sorry uh so let's add the onpress and here you can call the method right so in order to use it right you have to add the navigation here so let's add the navigation you have to use navigation and in order to go back to the page right let's I will call it here only okay instead of creating new method so I will say navigation dot we have button called go back okay and save this and if I click on it now it will go to back page you see okay perfect if I click on it it's going to the back page perfect so one more thing uh is remaining is if I click on this video course right it's not going to course detail page because we didn't not added on PR on this video course right so let's go back to our uh video course page right we have this video course list correct here we have to add the on prent so instead of this view right uh the similar way that we added in the course list right if you see this course list page we added this touchable opacity and there also we have added this on preent same functionality we have to implement here so I will change this view to the touchable opacity okay and I will close the tag and here then I will add the on press event okay like this I will copy the same uh onpress course here right like this it here make sure you will add this navigation okay so we have to add this statement and paste it here okay and make sure you import it then just you have to call it here on press and here you have to uh send this item information so it as a course right and here we are getting that one so on press course on press course right and everything now if I click on it right now it jump to the next page the interesting thing you are not able to see the about course and course content because here this map is little bit different right the one which we have in this uh course list page right so what I will do I will change this to description and if I save it now you'll see this uh let's uh go back here let's come again if you see you get the description same thing we have this video topic instead of that I will just add the topic go back here come on this page you'll see the one two okay the interesting thing let's let's uh open this video on topic API right so let's go back our API and let's open the video topic video course API endpoint right so here we have video topic name called video topic and inside that we have the name and description not the topic so what I will do I will use the video topic okay already we have the topic information only thing what I will do let's go back course detail page right and we here we are showing this uh not here in the course content right we are showing uh item. topic correct but also what I will do I will write one more condition if topic is not there then we let show the name okay so if item dotop uh so I will I will say like this this if item is item. topic is there then show item. topic okay otherwise show item. name save this one you see it's coming up this is the ter Operator just I'm checking whether the topic is there or not okay if it's not there obviously um our uh logic will decide okay this is not uh the regular course it's a video course right and then it will display like this okay also if you see right we don't have this uh name title of the course right so let's go back to the video course list right and here we added the title as about not the name correct so same thing we can apply over there or you can change it here so I will change this to name and I save it okay and let's go back come again you see it's coming up now if you go back open this this one it's coming up perfect so I hope uh you update uh you understand and updated this particular section as well okay and we are able successfully able to implement the um pretty much this homepage once you open this navigation you can navigate to the new page and everything okay now the interesting part once you are on this page right and you have the all the content which you want to show it on the course detail page on the click of any of this course we want to display uh the screen called The Details page where we are showing actual information right also not only that one right but each screen we have to show like this so if I click on this side it will go to next page and everything right so we will Implement that particular feature now in the next video so now in order to display this particular uh course chapter content right uh on the click of uh this in course content we have to add the navigation First on the click of this one right so for that one let's first add the uh new page so here I will add the New page called course chapter JS I will add the default function now let's go back to our home navigation so inside this home navigation I will add one more stack screen let's add stack do screen and let's give the name so in this case I will give course okay and they then give the component name component is our course chapter okay the one which we created just now and save it now we have to add the on press event for this course content okay so let's go back to the uh course chapter page sorry the course detail page where we have the course content right click on that and then we have this view correct so change this view to touchable opacity so that we can add the onpress event I will update this one and over here I will add the onpress event and here we can add the function directly so first of all I will add the constant called navigation and uh the reference of that using the use navigation okay this navigation will help you to navigate to the other screen so I will add the navigation Dot and navigate and where you want to navigate copy this name of the navigation so in this case is course chapter like this course chapter and save it right and uh if I h on is right it's and click on it you will see jump to the course chapter it's showing the course chapter at the top right perfect so we successfully able to navigate from the uh previous page which is our course content to the next page which is our course chapter right here we are going to display this information so here in our um course list API so this is the API that we use right so I little bit changed this one so I added this populate uh topic and also the populate image in order to get the exact data what I want okay and everything as it is I did not change anything okay so if I go back here right I'm getting all this basic course advant course as it is right so I did not change uh anything else so for this course uh let's implement the uh course chapter uh section okay so right now we once we came on this page right uh we click on this any of this course introduction we are supposed to get this information and if you see right we have this back button and everything so first of all let's implement the back button I will copy the back button from the uh course detail page which we implemented before right so I will implement the same back button uh in course chapter page so let's Implement here okay uh make sure you'll import this uh touchable opacity also I icon so let's copy this import from the I icon so this import right and I will paste it here oh sorry uh not here in uh course chapter here okay and uh then we have to on the back button right we have to go to the back button so what we will do I will write constant navigation is equal to use navigation okay and need to go back to the back button also uh similar uh as per course Details page right we have the styling I will copy the same styling and I will paste it for this course uh chapter uh page okay for this particular View and save it if I click on back button it will go back right if I open this one it will come here and if you click on back button it will go back so this is working perfectly fine correct now in a course chapter page what else we want if you see this mockup we have this progress bar okay we will Implement later but before that we will implement this title python basic right so let's add the title over here so after this one I will add the text and we have to add the title but right now if you see right we don't have any data over here right so in order to get the data first of all on the navigation we have to pass data to the course chapter okay okay so from the course detail page we have this uh in a course content right if you go to the course content we have this uh navigable opacity on press event right so over here in the navigation. navigate we will pass the data so in this case we'll pass only the particular uh selected course uh contents information so if here I can say course content and items so in items we have this particular data right so if you see uh in item we have this first information right this name basic and everything means okay this first information in second we have this one third like this okay and inside this we have the uh inside this we have the topics and everything right so we you can just pass the topic as well it's up to you okay uh let's only pass the topic and let's see what we getting so is here you can see item. topic save it in a course uh course um chapter page let's go back to the course chapter page here right you have to accept that as a parameter so here you you have to write constant param is equal to use route right so with the help of Route you have to accept the uh paramet uh parameter which we passed from the previous function so here what I do in use effect will just try to console this information whether we are getting or not so in console.log let's pass the just print this one so parm do course content right and uh let's save it let's open the console okay let's go down if I click introduction so getting the introduction only okay so course content getting only the name of the top topic and nothing else the reason is uh in a code uh somewhere right uh for example maybe in the course um course list page right how we mapping if you see right we have map with the item attribute. topic so let's see so item do attributes. topic and set topic we have this topic correct so that's the reason only passing this information so what we need we need everything so uh let's go back to course content here instead of item I will pass the item and not the topic and save it let's go back here try to open something and if you see right we got everything I think so let's see use for course content yeah now we got everything okay so here we have to make sure we are just passing item because we are we are dealing with the topic only in this particular case right if you see here uh from the course right we are just passing this topic you see here right that's the reason we are getting just a topic information we have to access first of all sa this information in state so I will one variable called constant sorry in this case we will say course or just we say chapter and set chapter is equal to use okay and over here inside this one you can add the say chapter as parameter do course contain and in the course content you can add the content only so you can add the content that's it U let's this particular content okay make sure the spelling and everything is correct okay so now let's implement the the chapter content part so here we are going to use the flat list okay and then I will uh tell you how to go to the next uh content when on the click of the next button okay uh like this one on click up next you should uh go to the next uh content okay so let's add the flat L first okay then provide the data so in this case the data is the chapter okay if you see this is our data okay then we will add the uh render item so render item it function and here we will add the view okay first sorry so first we have the the title uh right the python basic we implement this later on but first we'll implement this all other content so here first We'll add the text then item dot so in this case right if you if you see the um if you see this response right we have the uh content then we have the name and the description so in this case we want name so just get name and paste it here and save it if you see we get the three um names right because we have three um information on this particular screen and this is flatly screen that's the reason is showing three times okay so next we uh let's give some styling to this one okay so what I will do I will do style so let's give font Siz of 18 and I want font weight to be bold okay perfect you see it's coming perfectly good now in order to display the text the description right so let's add the item description and now in order to add the description we just add this item do description okay and you'll see all the description for each of this chapter okay now we have to add the input and output so before that right let's add the flat list and in in the in the flat list uh just Define the reference first so here what I will do I will add the reference okay is equal to reference and think in refence like this and we I already Define one reference called chapter uh reference and use that here so here you can Define chapter reference equal to reference okay we are using this reference in order to uh move this okay but before that now make this plat list horizontal so horizontal which is equal to true and save it now it's horizontal right and also Define one more um property here called page enabled okay so what happen if you do the page enable right on if you scroll it right it will just move to the next uh section but before that one also after uh adding this page enabl right make sure for this view you will add some um styling so what I I did adding this style uh I'm giving the width with the screen dimension width and then I'm adding multiply with the 0.85 and margin and padding okay so once I Define like this right and if I move right it move to the next section completely that's what we wanted correct but this functionality instead of uh scrolling with the m with the finger we will doing with the button okay but before that let's add the input section so if you see right we have this input on the Run button and the output right it's quite simple so I will just copy paste that particular section here okay so under this one I will paste everything as it is it's simple just just you have to add the view and add the background some um input and everything right and save it so we'll see like this right right now if you don't have input is not showing here right so that what you have to do you have to add one condition so for this view right you can uh you can mention here with the if condition if the item do input is not equal to empty right then you can Define this view along with this icon and everything so I will wrap this view inside one more view call this view like this and after this one I will add that view okay otherwise show null okay as simple as that and if I save it you see it's not showing anymore if I click next so so right now we don't have next button let me change this particular thing so on the next right here on press event I just added this scroll to Index right so this is very important property so here I will change this chapter reference and scroll IND this is used to move to the next page right so right now I just moving to the next means one the page one right but that logic we need to implement and uh everything is else as it is so save it okay if I'm go back to go to the next page right you will see this particular section so it's showing the code if I run this one you will see the output as well right so that particular logic I impl here only okay when it's done you'll see the output okay the source code is available so the link is in the description you can check it out okay now the important part is on the click of next button right you have to go to the next page every time right so we have to save the index so you can say current index here and let's define index at the top section so you can Define one index here so constant index comma set index set index so initially we will give the zero index so use State and index value will be zero initially okay and uh everything will be as it is so so on the click right once we click to the scroll to index right we have to make sure that current index will be uh the current plus one correct so what I do I will move all of this part in new method so call on click next and here let's move to this part okay so constant on click next you can it like this okay also instead of putting the current index you can pass the index from here right so you can pass the index like this and this this index you can pass on click one once index is passed here you can accept it here and you can just do the index + one and save it so let's try so on click of next it's going next on click of next it's going next on click is finished okay because we don't have any index uh third index correct so we can handle that issue as well so that issue you can handle with this uh if or with the try catch block for example if I put the try catch block here right C exception e you can write console. e now if I click next you will not get the error but instead of that what you can do you can navigate um this you can navigate to The Back Page okay so what we do navigation do navigate navigation. go back actually so you order to go back right and save it now if I click next it will go back to this page right if I go to get started if I run this one right we don't have any output that's fine go to the next page everything look good go to the next page it also look good go to the next page and it work right one more thing we need to do here right if you check right every time even though you did not click the out uh click on this run button the output is showing right because let's let's try it right if I came here right and there's no uh output for now if I click run the output is displaying and if I go to the next still output is there because here we are setting the output value right on the when we set run is true right we are not making it false so every time when you click on set run right you are making true on the click of next you have to make it false so go back here on the click of next right make sure you are setting the set run to be false and save it go back get started run that's fine go to the next see now go click next see it's working right perfect and uh so this particular uh this section PR is completed only thing that is remaining now to order to display the progress bar for this particular chapter so we'll Implement that one now so in this section we are going to implement this progress bar so depends on the current status means uh if you on the first content or second or third the progress bar will help you to show the progress of your current chapter which you are working on okay so in order to um add this progress bar right we are going to implement uh we are going to use this react native progress Library okay this is third party library and uh which is quite easy and quite um interesting to use so you just need to install this particular dependency so copy this dependency go to your project and uh install it I already installed it in my uh project so once you to install it okay let's uh go back to our course chapter okay and uh if you see right where we want to show it correct so go back to the components and here create a new component called progress bar. JS Okay add the react native function and this progress bar is there right now in course chapter come to this um View and below this view right uh the back the back button right we have this back button below this we will add this progress bar so just add this progress bar and if I save it you will see the name progress bar right now over here we are going to implement progress bar so I will delete this one and save it now if you see the documentation of this progress bar it's very easy to use you just need to use this progress bar you have to provide the value how much progress you want to show and the width okay okay so I will copy this one and just paste it like this okay and make sure you'll import this progress bar uh import statement right so I will just import this statement and save it now if you see on the screen right once you save it now you can change the size for example if I put 0.8 and save it right you will see this change correct so the value is ranging from0 to one okay and the width you can give whatever you want so in this case what we will do we'll give the width is equal to the width of the screen right so what we'll do we'll update this one and we'll write Dimensions dog we want to get the screen width so let's say screen okay and then width property okay and I will also give the 0.85 okay so like this perfect okay now you can change the value 0.2 for example if you see 0.4 like this right and it will work now the thing is depends on our um next button right we are going to change this and we provide this value to this uh progress bar okay so go back to our course chapter here what we will do we will Define one constant we'll say progress uh then we'll set progress okay use State now this PR will help us uh to set the value first of all what we will do initially I will pass the zero okay and also for each chapter right I will set this progress bar to zero first so I will set to zero okay the value of the set progress bar it depends um we are going to pass between the zero to one okay now if you come back right we have this on click next button and we have this index value because we know whether this is next first index or this is second index or this is third Index right and depends on that we have we have to provide the value correct so here what I will do I will set the progress okay and instead of providing in this because we want to provide the value from 0 to one right 0.5 0.7 right we have to do some calculations so what I will do I will do index + one/ we have the chapter. length right so we have the chapter so we know okay in this particular course for example let's go back here and in this particular course we have two chapter right or let's go back let's check bigger one okay so in this particular course we have first then if I click next we have second and again next we have third so in this one we have three chapters so that length I'm getting it here and then the current index which I'm on + one and then I'm dividing it right so you will get the value between 0o and one okay and just set the value now once you have all the value right make sure you pass that value as a props so here you can say progress is equal to value of the progress so we'll say progress okay so we are passing the value go back to progress bar and accept it here as a prop and will say progress now this value we have to replace with this one okay and save it save everything okay go back now if I have S python syntax right right now is zero nothing is there if I click next you see we got the first if I click next we got the second is fully completed and if I go next it ends perfect 1 2 and three right so this is how it works one two right mean half of the you already completed and this is last one so last so this is how progress bar will work okay if you have any question regarding progress bar or anything let me know in the comment section now the next uh in the next section what we are going to do one once this particular uh chapter is completed right and once it um it user is on the last screen right make we have to make sure that this uh button name will change to finish okay after that clicking on the Finish button we have to make sure we are we are giving the tick mark here the the uh green tick mark right the one which we have in the screen for example if you see this screen right we have this tick mark so that kind of tick mark we want to give it okay so that particular functionality we are going to implement in our next video so if you did not subscribe to my channel subscribe to my Channel watch the complete course for this particular react by um building the educational app and we'll see you in the next video so welcome back to another episode of react native building the educational application so if you did not watch uh my previous uh course or previous video of this particular course then go and watch that first so in this particular section we are covering very important topic called uh to track the user progress when user complete the particular section okay and that particular um data we are storing in our database okay so if uh I open any of this particular uh course right uh if I open this one you'll see that I completed this first particular chapter right and it will do with this uh green tick mark for example if I open this getting started right I completed this section if I click next right I'm here I can run this one if I go next you will see this progress by as well right and if I click finish as soon as I click finish right it will jump back to this uh course detail page and if you see right this tick mark is get uh display on the screen as soon as you finish that particular chapter okay so this particular section we are covering so in this particular on right once uh user click on the Finish button right we are sending all the uh required information in our database in our strapy so if you go back here right and here I created the course progress um uh collection here okay so if I go to course progr you will see the user ID I'm saving the course ID the course content ID all these things right type is just a uh the variable app but if you see this all variable um in core progress I am storing okay and once we store it I'm also using the gate API in order to face that information so all everything um including this how to fetch it how to display it how to post it everything we'll learn in this particular section so now let's implement the uh course uh progress right so here first of all uh in global uh Global api.js right I added this two end points one is to set the course progress and this is the end point and I'm passing the data information because this is the post request and in order to get the course progress right I am using this uh endpoint and I'm filtering it with the I'm passing user ID and the uh course ID okay so that we'll get the some result so now let's save this information okay and let's go back to our course uh chapter page right here if you see right uh we have finish button uh on Place event right so if you come here right here we have on click next correct and this is the Finish button so if you go back here right uh if in this catch block we added this navigation. go back right so if you finish it it will go back to the screen correct so over here we will add the uh our data means we'll post the data in the server so first of all I will write the constant data right and inside that I have to write like data like this right and again inside that I have to write the all the field which I need to send it right so in this case the first is U ID okay so then uh next field is the course ID and then next field is a course content ID okay this one so these three fields we needed first of all we have to take user ID right so with the help of au authenticating context we can uh we can use this uh user data and from the user data you can get the user ID right so it's very easy you have to do like this and then use use the context and Au context right because in authentication context we have the user data so I will just access that ID using user data. ID then we have the course ID right so in for this course ID uh we have to F it uh from the uh we are getting this parameter right from that we can f it so I will just write parm is Parm dot course ID okay because we are passing the course ID so right now we are not passing but we have to pass it so for example if you go back to the course detail page right here we have the uh course content and uh not here actually so if you when we are navigating right so maybe in the C content right here we are navigating right here we have to pass the uh this particular variable called course uh ID so here we will pass the course ID oh actually we are passing the course ID here right if you are not passing make sure you'll pass this course ID okay and course ID is nothing but course. ID and this course ID you have to accept it here like you give you comma here so you'll not get any error and the last is the course content ID right so from the course content we have we are getting this course content right and each course content has its own ID so just uh to access the ID you can write like this okay make sure if you are not passing the course ID you will pass it in the uh navigation uh when you are click on the particular uh content right and that course ID you have to pass it okay that's all and save it now we have the data now you you have you might might have a question why we are passing data right so here so let's go back in strappy post API and if you search that right uh you will get how what type of all this type of post right so create a new entry and everything right so for example in order to post the data right uh this is a gate entry this is a post request right if you see and this is the example so whatever the field you want to pass you have to pass in the data uh object right so that's the reason we pass in the data object now let's call the global API dot we have to set the course progress so set the course progress pass this data information then and the response okay now uh on this response we will go back so we will write the navigation do go back and save it okay okay as simple as that now let's try it and make sure we are getting some data so I am here right right now we have only uh let me check we have so we have uh three records okay so what we will do I will go to the introduction and uh let me go back so right now we don't have any anything go back introduction run this we don't have anything and finish okay so we try to push the data let's refresh it and if you see we got the new record 113 right the course content ID is three and the ID is four okay and we got this data perfect that is what we want now we are successfully able to uh set the course okay now let's go back to our uh course detail page okay over here we will F this uh particular uh data okay all this data by using the user ID okay so first of all what I will do um let's let's just Define the uh new method okay so let's call constant get course progress okay and the arrow function so here we'll define global api. get course progress and over here you have to pass two parameter if you see right user ID and course ID correct so make sure you will add the uh you will get this user ID from the user context use context the one which we are using that which is the O context so I will write like this user data comma say user data is equal to use context make sure you input the all the model and then we have the authentication context now we have the user user data. ID which we needed and the second is the course ID right so course ID in this case is parameter do course data do ID okay I will I'm not using the course do ID I can use it but sometimes right when you set this value for this particular course it not immediately reflected right so that's the reason I'm using parameter because parameter has very initially we are getting this value right so that's the reason I'm using the parameter doour do course data. ID okay then then we have response okay now we are getting the response so if you write like console.log response. data because in uh this is a so we our response is will be in the response. data right I will write here my resp response like this okay and save it now if you check here right if you um in the console sometimes console will not work properly but that's fine uh we will ignore it okay and we will just set the data okay so here I will add the new state called constant um user progress comma set user progress oh sorry progress and is equal to your state okay inside this I will set the user progress data so here right uh first of all I will manipulate the data so I will check response dot data okay data because I need the actual data and here uh I will check I will manipulate data as I say right so I will WR constant result equal to response. data. data then I will map it okay like this and I will just copy the existing code okay so I'm adding ID the course ID and course Content ID which we are getting from here okay and that's all I needed right and this result I will set like uh set user progress for set user progress perfect that's all okay now make sure you will call this one right you have to call this particular one only when we you have this course data. ID so here you can write param doour data. ID if it's available then you can call this function otherwise don't call it and I will pass it as a null okay now once it call it right it will set the value and that value you have to pass to this course content because we have to say this symbol right so what I will do I will write course um user progress is equal to user progress okay progress okay and access this part parameter in course content so if you go to course content here you have to pass it like this right user progress that's all correct and let's try to print it out here so in use effect I will print the value like this okay so I have the user progress and let's save everything okay so if you see right uh this is the user progress and we are getting value right we are getting three value for this particular course ID and the course uh sorry particular course ID and that particular user only right if you see the uh the user ID is the 111 right now don't ignore because course ID also matters okay and that's what we get it if is a duplicate obviously sometimes it avoid it right so don't worry about that one so we have all the data okay and uh now what you have to do we have to add one method to verify to check whether uh this particular um course is completed or not right so in order to add that method uh you have to go to the uh in a course content only right you have to check the user progress and here you can check user you can add one method okay and over here you have to just pass the uh ID so here you have to pass the course content ID right mean because uh here right uh here only we will add that matter so right now what I will do I will just write the uh Content ID to check each content right and then I will return true or false depends on the condition for example in this case user progress I in this user progress right because we have the data I will find from the item with the item dot course content ID is equal to equal to uh Content ID okay this Content ID if it's find in this part user progress it means this user already completed the particular course correct and then we do uh we will show the check mark so make sure this check us the progress you'll call somewhere here like this right so um after this index plus one right we will add that condition so right now what we have to do let's add this icon this is a check mark Circle icon and I also applied some color and everything and the condition is quite simple right so condition is just you have to check whether the progress uh check user progress you have to call and you have to pass the item id okay and if it is true then show this icon otherwise don't show anything okay and if I save it right if you see right we got this icon correct go back come here you see because two of this P course is completed that's the reason it's showing correct but now we don't want to show this one and two we just want to Icon if it's completed right so what you have to do you have to uh cut this text and put it here instead of null right so if the course is not completed then show this text otherwise show the icon if you see it look like this perfect right I hope you understand until this point now next let's go back let's try to come on this particular page we are getting Perfect all everything ready right now if I try to uh complete this python syntax go to the next go to the next and finish it right you see the we completed the third of the uh chapter but it's not showing it right but if you come back and go to this basic course it will show it now this is the glitch you can say right because even though you finish first time you'll not get showing first time but you come back and come to this course again then it will show so in order to resolve that issue right go to the course chapter and if you remember right uh we added this navigation. go back correct so what we will do we will little bit modify it so I will remove this particular one and just add the navigate okay so we actually navigate it instead of go uh calling the go back function from the navigation right so we'll navigate it so name navigation of name of how the navigation is the force details okay or sorry call details and then we have to pass some parameters here right in order to trigger the use effect from the course detail page so I will pass the params and here we will pass the course content ID okay is equal to parm doour content ID sry course content do ID okay and one more important parameter you have to write merge and you have to provide the value as a true okay this is very important once you navigate to the course detail page right go to the course detail page and over here right in this course detail page here you have to Define uh one value in use effect so here you have to call the use effect meod because this use effect method help us to face the value from the user course user progress right but progress so in order to um execute this line of Command right mean this particular use effect you have to pass the parameter that is parameters dot the one which we Define here right the course content ID okay what will do when you navigate it it will check okay this value is change and once the value is Chang right then it will call this use effect okay remember when you U use the navigate. go back it will not um call this use effect because you just go back to the previous page without doing anything right because that's the reason content will be same you are not calling any new API but when you uh implement this kind of navigation right and passing the parameter and merge you mention the true that that time it will execute this uh use effect and it will execute our uh two methods which we need right now if I save everything now try to okay let's go back here okay let's try to complete this python commands right if I here next and finish it now you see python Comm is completed now without doing anything right we don't go back and don't need to do anything if I go back still it's there right let's try on different course so I will select this Advance Python and only two content are there right so try to complete the first one select next and finish and if you see it's completed perfect so I hope you understand this uh particular section I I know this uh video is going getting longer so in the next part we'll see uh another uh part of this particular course and see you in the next video if you did not subscribe to my channel subscribe to my channel and watch all the previous video if you have any doubt any uh any error in the uh doing any anything you can DM me on my Instagram Channel or you can put in the comment in the comment box and if you really like this video please press like button thank you so in this section we are going to implement video course uh to view the video okay and we are integrating the YouTube video in our applications if you did not watch my any of this video uh of this particular uh course then you can watch um before um watching this particular video okay so so today I am we are going to build this particular section let's walk through what we are going to build so if I open any of this video course right I'm talking about the video course and you'll see uh everything as it is the similar the other course we have right and then uh go to the course content in this case if I open the course content you will see the video you can play the video and the description right I can able to play this video I can able to forward all of these things because this is the YouTube integrated video you can go back and everything will be as it is right so we are covering this particular section because we already completed uh the course listing and everything here right so uh we pretty much completing uh going to complete the application uh the remaining part is video course so we are completing this particular section So currently if you check the application right and if you go to the uh video course and you open any course right it's jumping to the course chapter page that is our default page which we implement for the all other courses except the video okay so now first of all let's go to the uh course content page right here if you remember right we added this navigation okay and it's going to the course chapal page but when the navigation is the of type video we don't want to navigate to the course chapal page and we want to create a new different page right so first what I will do I will remove this particular line of code from here okay and I will create a new method constant on on chapter PR on chapter PR and here I will add that condition okay this is this need to be Arrow function okay like this make sure the item is here right so we have to pass the item here so I will say course content and this course content I I have to pass it here okay so just call this method on chapter press here like this okay and you have to pass this item value okay and save it if you go back and you back any of this particular one right and let's make sure it's working now it's working okay now what you have to do you have to differentiate whether you are opening the video course type or the basic regular course right so for that one let's go to our course list right right so we have here course list and somewhere and we also have the video course list so if you go to the video course list here uh when we are navigating to course detail page we are passing the course data right along with that we will also pass sorry along with that we also pass the course type okay and here I will say video and same course type I'm going to pass in a course list as well because we also have the course list where we are going to the course detail page right right so here as well we pass it to course type as a text only okay just to differentiate and save it now in know course uh in course detail page right we are getting this this course type using this parameter correct so what you have to do you have to pass this course uh type to this course content right and we are using this component in order to pass it correct so here what I will do I will just write course type is equal to parameter dot course type okay and this course type now available over here right just need to accept it here like this course type okay now we have the course type okay you have to write the condition if the course type is equal to equal to text then navigate to this particular course chapter page okay otherwise I will console it and it will say this is video course okay perfect and save it now let's TR it okay so we have this uh console open I will open it like this now if I open the basic python this is a text based course right if I open any of this right uh I'm okay so when I open this right it navigate into course chapter page correct but now if I come back and if I open video course right and open any of this course it just saying this is a video course it means it's not going to this course chapter page that is what we wanted correct now what we will do we will navigate to some other page so for that we'll create a new page in our page folder so go to the page folder create a new page called play video.js Okay add the default template so react native function okay with this shortcut and you'll get this default template now you have this new page right you have to make sure that in the navigation you will add this particular uh screen in the stack right so just copy the existing one replace this name I will give name this to the play video and the component name right so here in this case is play video and save everything okay now go to the course content page here copy the same existing navigation and paste it here right now here is thing right you can optimize this code obviously you can just change this uh navigation and keep as it is it's up to you right but as this course is a beginner friendly I will keep things separate little bit okay now here in order to instead of navigating this course chapter I will navigate to play video okay and when the course type is not a text Bas it means the course type is a video and save it now if I click it on this inter you see play video is coming it's very at the top correct so let's me give some padding here so I will add the inline styling and I will use some padding 20 from all side and margin from the top that's a 10 a 25 and save it you see play video is coming that is what we wanted now let's add some UI so first of all we will add the back button then our uh chapter name here and the video and then description okay so first of all let's add the back button okay so if you know we already added the back button in the course detail uh and course capter page right so I will just copy paste here like this I will import all the statement which we wanted so now make sure you will import all statement okay and the one more which we now need to install is I icon as well so make sure you'll import the I icon okay and you have to add use the navigation as well you see the button is coming so for navigation I will add the constant nav uh navigation is equal to use navigation okay perfect now if I click on this button it will go back to the previous page okay now back button is working now also in the play video right uh if you go back go to this play video sorry we already have in play video so we will accept the parameter because uh when we uh jump it from this course content we have this course content right that need to accept it here okay as a parameter so here I will write use param is equal to use uh route okay and then the parameter which I we want right here like this and uh I will accept that we will store it in uh use state so I will add the use first okay and also we will add the use State here so constant and video Chapter set video chapter is equal to use State use State perfect like this okay I will pass it empty here I will set the video uh chapter and is parameter and if you go back right we want the course content so the parameter doour content and now we have this video Chapter uh available in the video Chapter okay correct next we will add this text here right so what we'll do I will write one condition uh if the uh course video chapter is available then only show the uh information right so I will write like this if video chapter is there I will add wrap it everything in view like this okay otherwise show null okay and we'll put this text inside this view okay now here what I will do you want to show the title correct so in order to show the title just write video chapter. name right because in uh in the the field name called name it is in the video Chapter data so that's what we are calling right and if I save it you will see the introduction like this okay Al add some inline styling so I already have some styling I will add like this so okay so just make the font Bold and the font size is increase okay and also we'll skipe some space to this uh video Sorry video and then we will add the description as well okay so so I will just copy paste the existing code which I have and I will paste it like this right and I'm accessing this description using the video chapter. description that's all you see video description is coming now the important part is came here to display the YouTube video correct so for that one I'm using the third party Library the link in the description this is the react to YouTube If frame uh okay which is available on GitHub so you can access it the link is in the description so for our Expo application right first of all we have to install the web view right if you click on this Expo app installation you will open this web view make sure copy this line of command and then execute this one in in your project okay once it install go back to this particular documentation and then you have to install this particular dependency which is for the installing the YouTube iframe so so go back to our application again and execute this one now if you go to the basic use right here you will see how to use this particular um YouTube player right so I will just copy this lineup code right you will see right this is the YouTube player and this is the some of the call back function and also using the US dat in order to play the video or not right so I will copy this one and uh before this description I will paste like this okay and you have to make sure that you will add this I frame okay so add this I frame also you have to add this line of code because we are using this playing use State here like this and this particular T change as well so I will add it like this so after this I will add and uh okay I think it's playing also came here I will keep it like this make sure you will import this use call back okay and and remove this alert because we don't want it here like this and save it right now once it save right it will show you the video you see right now this is the default video because it provide the default ID right so we will replace this ID with our video ID so in this case video Chapter dot video URL so URL contains the ID of the video and if I say it you see it's coming back right you can decrease this size I will put it to 20 okay the space between this one and voila it's working all right now if I go back open this different video and you see it's showing the title it's showing the different second number video and the description the different video it's showing every time right if I play the video you see it's playing with the video as well okay that's all so I hope you understand this particular uh section if you don't if you have any question any doubt please comment in the comment section or you can DM me in the on my Instagram Channel and the YouTube channel as well okay or you can do on my telegram as well and if you not yet subscribed to my channel subscribe to my channel and uh next course is coming uh so maybe in the next course right we will just a little bit do some um uh changing and also we will uh publish this application on the App Store and play store so we are in the final section of the this particular course called build educational app using the react native so today in this particular section we are going to uh export or publish the APK file so that uh you can install uh in your real device as well as as you can share it with your friends okay so uh just go uh to the Google and just search for the Expo build APK and you will find this first link called build APK for Android emulator and devices okay here uh Expo recently made some changes okay there are two things so for example if you want to install uh the uh this particular application directly to the Android device or emulator then you have to export with the help of APK file in order to publish the app on Google Play store then you have to be extension with the aab file for this particular section we are going to export uh APK okay and then I will let you know how to do it okay the step by step so first of all if you don't have anyes es. Json so make sure uh it is there if it's not there then create one okay so if you see I have the ES dojon file and then copy this whole code okay in Bild prev everything and paste it in your project okay so if you see preview uh the build type is APK the preview to preview three okay the development was previously there so I kept as it is okay I just added this build um line of code okay then you just need to do this line of command now you can run your bill with the following command then you have to put es Bill P Android profile and preview okay and then you can run this particular APK as well okay so for example let's copy this line of command go to your project uh let me put application like this open a new terminal and paste it here okay also you have to make sure in app. Json right uh the SL name will match the name of the application which is very very important okay otherwise it will throw error ER so make sure the slug name and this name will match okay and once you build this es build Android profile view right then it will ask you some question before that I will let let me explain a couple of things right so preview is the name of profile you can give whatever you want okay and uh this is the profile obviously is there but pre you can give as it is right as as I say so let's execute this lineup command so it will take some few second so it's saying the slug of the project identify extra education app does not match the slug field okay so this slug name it need to be like this actually this profile is like this so let's try it now and if you see I don't get any error okay and if you see start uploading to the as okay and if you see waiting for Bill to complete you can press contrl C to exit so right now our build is in process okay you can search it by clicking on this particular link okay right now we are on free tire uh so I think uh 30 bill you can make it every month for free okay which is more than sufficient for any developer and Let me refresh it let's say view build so here you have to login it okay I will log to my expo. account log in it okay and uh here you can select the project which you want okay so in this case is a educational app so let's check and it's if you see right it's is getting built okay so right now it's in the build so it will take some time to build it okay and then we will wait for some time a few minutes later now if you see uh our bill is finished and uh the APK generated if you click on control and on this particular link it will open browser and immediately it will download APK for us okay now this APK you can send it to your device and it uh and it will get installed immediately okay also uh you can instantly run it on your uh Android emulator as well okay now the next thing uh the way right now you can just send on email or or you can uh share this APK with your uh Google Drive anything right second way uh you can share this with your friends and family uh by going here uh if you go to our Local Host 193 Port uh let me reload this one once maybe this one okay yeah here so here we have option called publish or republish project right click on that one enter the all the information okay and just click on publish project now what it will do it will publish your application on Expo uh. okay and then you can access this particular application so let it uh finish this publish publishing and we will wait for some time a few minutes later now if you see our uh pro project is get published successfully click on this one expo. host one once you click on it right you will see this your app icon this education app and everything right now anyone can uh scan this QR Code by going to the expoo app and they can able to access your application okay or you can just share this uh link with your friends and family and once they have the Expo app it will get installed immediately okay so here you can publish make it publish or something you have lot of option to do it right so this is the another way you can publish it also if you want to share uh this with your friends and family then let's go to the Firebase console okay if you don't have one then create a new one okay and there you have option called uh in the release monitor you have option called app distribution okay inside the app distribution you can just drag your APK file and paste it here okay I already did it see like this right and then you can copy this link or you can send it to anyone or you can add the test group or the test user right so I added these two people and you can see who can who uh you invited uh who can get access and who downloaded this particular APK as well so all this uh analytics will you can able to see it in your pbess console okay so this is the one of the best way that distribute your application for free okay so you have the invite link you can create in new invite link if you want depends on your domain or something like that right or you can create a test group as well okay for the uh all the testing team or anything now uh that's all for this particular section and I hope you like this whole tutorial of building the education app using the react netu if you did not subscribe to my Channel please subscribe to my channel and thank you for the 1,000 subscribers also if you have any question or any doubt please comment in the comment section or you can DM me on my Instagram Channel at the tube gurji or you can join my telegram Channel as well so guys uh I hope you understand everything so guys uh thank you and uh that's the end of this particular uh series of building the react native education app so see you in the next uh tutorial

Channel: TubeGuruji

Views: 43,885

Keywords: react native tutorial, react, javascript, Build React Native app from Scratch, Build React Native app, React Native app, React Native app from Scratch, react native full course, react native full tutorial, React Native, Expo, Strapi, MySql, Build React Native app from Scratch : React Native, Build Educational App using React Native, Tubeguruji\, react native for beginners, react native tutorial for beginners, react native, react native expo

Id: 0-NwPCCzXv0

Length: 269min 29sec (16169 seconds)

Published: Sat Jun 24 2023