Build complex layouts with Expo Router v2 and Expo SDK 49 | File Based Routing | React Native

hello everyone welcome back to another react native video and today we are going to talk about Expo router and if you don't have any experience with Expo router then it's totally fine because we are going to build everything from scratch and you will learn about stack navigations tab navigations models and all the nested navigations so you're going to learn a lot in this video so without further wasting any time let's get started so this is the Expo website and first you need to go to the sidebar and under routing you will see installation and this is the command to create a latest Expo app just copy this command and open the terminal and paste it here so now you're going to name your application mine will be learn Expo router and hit enter this is going to take a couple of seconds to load all the boil code and once it's done we can close the terminal let's just give it a second okay so it's finished now we can close the terminal and open open the code in vs code let me just drag that here and let's make it full screen I've already opened the simulator so let's make it full screen as well and adjust both of them in one screen like this and let me make this smaller and this one to side okay first of all we're going to run this application using this command npm run iOS and this is going to create a build of our application and send it to the simulator and then we can see our application running so the application is running and as you can see by default they have implemented tab navigation at the bottom you can see two tabs and on the tab one you can see an icon on the top which will open a model I think so when you press it it opens a model so by default they have implemented tab navigation and a model now let's see what do we get when we install a fresh application in app folder this is where all our code will go all the layout model and tabs assets will hold our fonts and images and these are just predefined components and here we have a constant folder for all the colors we're not going to use all of this code so let's remove the code that we don't need let's moove this components folder and let's also remove this constants folder and inside app folder we are going to remove all of this code because we will be building this app from scratch so let's delete all of this we're going to build everything in app folder and if we create any component it will automatically create a route for us so no need to specify the route in navigation files so let's just create an index file and this will automatically create a slash route and let's just call it homepage and the way it works is basically export outer checks all the files and directories and it will create all the components and the routes based on their file names so in our case because this is a index file so this route will be slash let's just reload the application so as you can see we haven't provided any navigation and by default we are seeing homepage it works very differently in react navigation we have to manage all of this in navigations so let's say I want to create another page called register so for that what I will do is create another file and I will name it register. TSX and it will automatically create a route named SL register so if I go to/ register this page will show right away and the way we can test that is by running this application in web version so let's just press W on the console and it will build the web version and it should open in the browser okay so it opened in another screen so let me just copy the address and paste it here and by default you will see the homepage because it exist on the slash route and if we go to SL register you will see the register page so it has automatically created a route for us and we haven't provided anything in any kind of navigation and the index file was representing slash route because it's the main file in any route there's another way to create this register route first we need to create a folder named register and inside this we're going to create a file index. DSX and we're going to write the same code register and delete the Old Register file and it's going to work exactly the same it was working before it's going to look into the register folder and the main file index. TSX will be provided so let's move to browser and refresh this now you can see the register page now how do we add a header around this page just like how we can do in react navigation and for that we need to create another file underscore layout so let's create a new file and name it underscore layout. DSX and let's create a basic functional component inside this and we are going to return a component from export router and the component is called stack we just going to return this empty component and when you save this you will see all of our component will have this header and because we are on index page that's why it's showing the index in header and how we can change it we have to specify that in our stag so let's add stag do screen and the name for this road will be index and to change the header we need to provide some options and let's add title home and now we need to close this tag and when I save this you will see the header name just changed to home from index so this is how you can add header to your files and modify all of the screens one by one if you want want to so let's add this one more time for our register route so let's just copy this and do the same for our register this is going to be register /index because that's the route name and the title will be register um I just mispell this it needs to be single X okay we have defined our register route but how do we navigate to register route within our application let's move to our index route and first let's add style to make it it centered Flex one justify content Center and item Center this will Center AL line all of our content so now we're going to use another component from export order it's called link so let's import link component and we're going to provide HF property to the route that we're going to navigate it's called SL register and uh we are going to close this component and add a button inside this so let's add a button and the title for this button is going to be open register page now let's close this button tag and save this um why is this showing red lines okay it needs to be slash register slash that's why it's showing but it will work just fine so now when I click on this uh button it should open the register page but it's not going to because the link isn't applied on the button tag yet so for that we need to add another property as child this will apply to the button tag now and when I click on this button it's going to open the register page now if you want to change the header you can go to layout file and add whatever the header you want let's say register page and this will change right away but I'm going to keep it registered so if you want to change the style for your header you can do that as well you need to add some screen options in your stack so let's add a property screen options and inside that we're going to add headers style and the background color for our header will be black so let's add a black color and this will change the background color of our header so now we need to able to show the header title and for that let's add a property header tint color which will be white now we can see the header title but we don't see the fonts in the status bar so for that we need to use another component from Expo so let's move to our index file and add that component in here and the component is called status bar and we need to provide a style to this with light colors and this will change all the fonts in light colors now we have a black background with white colors so this way you can modify your header Styles now let's remove this and get back to our white header next we're going to learn about 40 four page error so let's say the user goes to a page that doesn't exist so we need to show him properly that resource was not found so the way we can do that is we need to create a file and the file name will be parenthesis missing. DSX so this page will be shown every time a user goes to a page that doesn't exist so let's just name this two page and for now let's add not found like this and let's add some styles to this text so let's add a style property and give this a font size of 20 so we can see it clearly so how do we test this we need to go to our index page let's just misspell this register route so let save this and when I open the register page now it's showing not not found page that we just created and you can change the header name from our layout file so let's go to layout and copy this register out and we need to specify the route name which will be parenthesis missing and the title let's say 404 and when I save this you will see the header just changed so let's move back and let's change the things to normal just like how they were before so let's save this now it's working fine so next we're going to create a model so let's create a file login. TSX and let's create a basic functional component and this will say login and this is going to say this is a login model save this now we're going to navigate to this model from our register page so let's go to register page and add a link HF will be/ login because it's in the same directory and we need to add as child because we're going to use a button and this will apply the link to this button now here we're going to say open login model and let's close the tag and save it now when I click on this button this is going to open the login model but you will see that it's a page it's not a model and to make it a model we need to specify that in our layout file so let's go to layout and we're going to just copy this register route let's change the name to login like this and we're going to change the title to login model now we're going to add a property presentation as model so that it's not a full page it's a model now when I press on this button it's going to open the login model as a model not a full page so this way you can add a model you can also open this model from a header button just like how they showed it in the buet plate code and for that we need to move to register route and here we're going to use a property header right and this will return a template and we're going to return a button and the title for this button is going to be login and we need an onpress method so let's use an empty method for now and let's save this okay we need to provide an empty method that's why it's showing this error so let's add an empty method now we're going to use the router to move to the login model so let's define our router using use router from Expo router and now using this router we're going to push the login model let's remove this and add router. push SL login it's going to open the login model so when you press on this login button in the header it's going to open open the login model so now it's working now next we're going to work on Tab navigation and we're going to create a folder to handle all of our tabs so that we don't create a mess in app folder but we are not going to specify the tabs in url and for that export router has something called groups so if you use parenthesis around a route this won't show in a URL but you'll still be able to navigate to all the tab so let's create our first tab let's create a file 1. DSX and you'll be able to navigate to this file using slash1 you don't have to specify slash tab SL1 that's the reason we are using groups so this is why the groups are for so let's call it this is tab one and we need to navigate to it from our home route so let's copy this link and call this slash one and this will say open tab one I didn't specified SL tabs in the URL because we're using groups but if we were not using groups we had to specify that okay we can navigate to this tab one so let's move to tab one and add some styling because the text is very small so let's add a font size of 20 now we can see the test and next we're going to create another tab so let's create a new file 2. TSX we will have two tabs and let's create a functional component and this will be tab two let's just copy the text from one tab let's copy this text from here paste it here and this will be this is tab two okay we have created all the tabs but we don't see the tab navigation at the bottom and the way we can do that is to make this a navigation so let's add a underscore layout file and inside this file let's create a functional component and we're going to remove all of this and we're going to return a component tabs from export rter and it's going to turn all of our tabs into tab navigation so let's move to tab one uh we need to refresh the application so now when I open the tab one you will see we have another tab navigation and at the bottom you can see we have tab one tab two and we can create other tabs very easily just by creating a file inside the tabs folder so let's create another file let's create a file and let's call it boom. TSX let's create a functional component and when I save this you will see it instantly creates another tab into our tab navigation so let's remove this file so this is how you can create tab navigation and uh this has created another header inside our tab navigation this is coming from our previous navigation and the one is coming from our tab navigation so we only need the header from our tab navigation so let's move to our parent layout and here we're going to specify tabs route so let's just copy this and change this to tabs and we don't need the title and presentation so let's remove this and we need a property header shown to false this is going to hide the header for the tabs only so on the tab navigation we don't see the parent header and our Tabs are working okay so now we need to have a back button to go back to previous navigation so let's move to tab one and here let's define our router using use router Hook from Expo router and let's add a button and the title for this button will be go back and let's add on press method using our router we can use a function do back and this will take us back to the previous navigation so when I press on this button it goes back to the previous navigation okay so both of our navigations are working now we need to be able to change the header title and tab or label at the bottom so we need to move to layout file in tabs and here we're going to use a component tabs do screen and the name for this screen is going to be one as the file name and some options and first we're going to change the tab bar label to Capital One and let's close this tag and save this now this will change the label of the tab bar now we need to be able to change the header title so property for that is header title and we're going to change this to Capital One as well let's save this uh we need to add a comma after this property so yeah okay so the header title and the tab bar label is changed now we need to do the same for tab two as well we need to change the header and label so let's just copy this one more time and change this to two and numeric two for the headed title and when I save this and go to tab two you will see the header just changed to numeric 2 value okay so let's change this back to normal now so far we have learned about stack navigation and a tab navigation inside stack navigation so now we going to create one more nested route inside tab navigation for the posts and let's create a folder post inside tab navigation and let's create another file index. TSX and by default this is going to assume that this is another tab inside tab navigation and if I create a functional component and save this you will see another tab just appeared by post /index name because that's a file name we are going to convert this into a stack c as well but before that we need to style our post component so let's Center all of our content Flex one justify content Center and align item Center as well and here we're going to provide Three Links to the three random posts so let's move this and add a link href is going to be/ poost slash ID of the post and this is going to say open post one so let's copy this two more times for three random post and let's change this to post two and the third one to post three that's supposed to be the post ID the links are not clearly visible so let's add a style to add a font size of 20 and save this and let's just copy this for all the post as well now if you notice all of these links are dynamic because all of the post IDs are different and they're unique so we can't just create all of these routes in in the same folder because that will just create a lot of files based on the IDS so we need a way to dynamically pass this ID to a page and that will fetch the post for that ID and if you want to create Dynamic route then we need to provide the file name with brackets and inside the bracket we need to provide the parameter name that is going to be dynamic so let's create a functional component and change the page name and this is going to say this is post Details page like this and when I save this you will see another tab just appeared into our tab navigation that's the dynamic ID path so we need to fix this we need to make this into a stack navigation so let's create a layout file inside post folder and here we're going to create a functional component that will return a stack component so let's import stack component from Expo router and when I save this you will see all the extra tabs in our tab navigation are gone and we have only one route which is post and here you can see the post links and we have a extra header that is basically coming from our tab navigation and the second header is coming from the layout that we just created for the post so we only need one header so let's move to layout in tab navigation and copy this screen and we're going to name this post let's change the header typ title to post and T our label to post as well and we're going to add one more property header shown set to false and this will hide the header for the Post tab only so if we move to post tab now we will see only one header and that's coming from the post layout that we just created and if we move to other tabs those headers works fine as well so now we need to change the header title for this post navigation so let's move to the layout file in post and here the root component is index file so we need to change the head title for the index component so let's add a stack. screen component and name for this is going to be index and let's add some options to change the title to posts and let's close this component and save this now the title will be posst instead of index so next we're going to copy this one more time for the dynamic route as well the name is square brackets with the ID parameter and we need to change the header title to post details and let's save this now if you go to the Post Details page you will see we have the post details as a header you can also use the title property to change the header title this works the same as well so if I change the property to title this is going to work the same as well but strangely our back button is gone in post navigation this happens sometimes in development board so don't worry you just need to reload the application and this will be f fixed so let's just reload the application move to tab one and now we need to be able to fetch this Dynamic ID in the post Details page so let's move to post Details page and here we need to get our ID from a hook that is called use local search params and that is provided by export outer you can use this to fetch all of your parameters and let's add our parameter here post one if the ID is one so if I move move to post one you will see we have post one and if I move to post two you will see we are going to post two so let's increase the font size for this text to 30 so that we can see it clearly so now if I go to post one you will see we have a bigger text and our Dynamic ID is working as well if you want to change the header title based on this Dynamic ID we can do that as well so if you want to change the header title we need to add stack. screen component component inside this Dynamic route and to this component we're going to add some options to change the header title to posts plus the ID that we got from local search prams and close this and save this now we have made the dynamic headers as well so if I go to post one you will see post one and we can change the header to whatever we want so let's change this to post details and and let's move to post two and this will say post details 2 and same for the Post details three so now let's move back to our homepage go back and go to tab one Tabs are working we can go back and let's go to register page our login model is working and we can go back from here so let's move to our post and with this our deep links are also working and that means user can open a specific page inside our application using a link and uh that will be the post link so let's move to deep link testing this is the web version of our application so let's move to react navigation do/ deep linking and here let's see how we can test this on iOS if you scroll down you will see how we can test this and here is the command to test this on iOS we need to provide URI scheme open address of our application and then the rest of the URL with D- iOS so let's move back to our application and first thing we need to do is find the address of our application so let's move all the way up and here is the address of our application so let's copy the address and move to another terminal let's make this terminal bigger let's check the command that we're going to use so we are going to write U scheme open address of the app and then the rest of the URL with iOS okay so let write npx Ur scheme open and then double codes and then the address of our app sl- Das slash let's open post one so post SL1 and then the double codes and then D- iOS okay let's hit enter and see if it's working okay it just open the post one that means our deep links are working now let's close the application and see if it can open the application as well and this time we're going to open the post two so let's write post two and hit enter and it opened the app and it moved to post to so our deep links are working as well and with this our application is complete and we have learned about stack navigation we have learned about tab navigation and nested navigations we have also learned about models deep links and all these little things so with this our application is complete and if you find this video helpful do like the video And subscribe the channel because I've put so much effort in this video so I'll leave the GitHub repo for this project into the video description so you can check out the code and if you still have any questions about anything you can ask them into the comment section and I'll try to answer them as soon as possible so this is it for this video see you in the next one

Channel: Code With Nomi

Views: 20,347

Keywords: react native tutorial, react native ui design, react native tutorial for beginners, react native app, react tutorial, react native project, react native crash course, learn react native, react native ui, react vs react native, react native, react native expo, react native for beginners, javascript, react native vs flutter, react native cli tutorial, react js, reanimated, expo router v2, expo router react native, expo router tutorial, expo router, expo router tabs, navigation

Id: jJl-DZ3d8k8

Length: 25min 54sec (1554 seconds)

Published: Mon Oct 16 2023