Building Navigation in React Native with Expo Router

what's up not Jazz developers welcome back to a new live stream and today I have prepared for you something interesting today we're gonna learn how to use the new navigation system for react native application which is called Expo router so yeah export router is a new library that will help us manage navigation in our react native applications it is developed internally by Expo shout out to even bacon for making it possible and the whole concept and the way it differentiates from our navigation systems that we are used to work in rack native application is that Expo router is working based on files it's a file based navigation system and if you worked with nextgs or other Frameworks that are working based on file based navigation then you will right away understand the benefits and how it works so so in a couple of words basically we create we simply create folders and files in our application in our source code and that automatically creates our routes and screens so uh the idea is that it's really simple to build our applications declaratively by simply creating these files in this video we're gonna get our hands dirty with this Library we're gonna put it to test we're gonna see what's possible at the moment and how easy it makes to build react native applications and yeah we're gonna see how to actually use it if you are a ready first of all make sure to subscribe to the channel hit the like button uh if you take value out of these tutorials and if you have done that I think we can get started and right away jump into the coding part because it's gonna we're gonna experiment with a lot today so uh first of all o everyone in the live chat how are you doing guys uh yes I think everything is ready here um does it support query parameters too I already see a lot of questions I can ask for yes stay tuned until we get there I'm gonna try to cover as much information as possible of what at the moment possible what is coming up and uh yeah we're gonna discover all of these things together so um yeah let's get started and for that check out the Expo slash router GitHub repository and from here we can open up the documentation right away and I would encourage highly to have a documentation side by side even if you're following this video tutorial just because this library is quite new and a lot of things might change so just have a look there uh see what's what's different what what is changed and you're gonna be able to follow along easier um for getting our hands dirty to see how to put this library to test we will need a project an export router created a template for us so we can easily generate a brand new project that automatically has Expo router so for that let's copy this command let's go ahead and open up a terminal for us I'm going to do that right here let me go ahead and zoom it in so you can also see it something like this so let's paste the command uh if you didn't see it it's npx create react native application create react native app slash T and with router this is the name of the template let's go ahead and press enter and wait until this command initialize initializes and generates our application it will ask us for the application name we can go ahead and say Expo router yeah export router yes we should download our JavaScript dependencies and then we should be ready to go hey thank you very much uh clips for becoming a member and supporting our Channel I really appreciate that thank you uh while that is being initialized guys throughout the video if you have questions drop them in the live chat or if you're watching this afterwards leave them in the comments below and I'm gonna try to answer them does it support uh separate stack navigations for authentication and normal just like rack navigation yes it supports uh authenticated protected routes and they have a specific page on that in the documentation that uh explains how that happens um I haven't prepared that yet in this video but at the end if we have some time we can get into implementing this authentication workflow where you have protected routes based on Authentication all right back to our application our project is ready and what I'm gonna do is I'm gonna open it with code so let me do code and Export router if you don't have the uh the shortcut code in your terminal just simply open your editor of choice in my case best visual studio code and open that directory that was generated now I'm gonna go ahead and zoom it in a bit something like that yeah and at the moment we do not have anything but let's go ahead and open a terminal you can do that from the top bar terminal new terminal and here let's go ahead and do npm start simply npm start without clear that will run our Metro server from here we can run the application on on an Android device by press pressing a if you are working on a Windows or Linux in that case you can open it on Android emulator where we can open it iOS by pressing I and also we can do that on web and I'm going to talk a little bit more about web support for export router in a bit later I'm gonna open it in on iOS just because it works a bit better for me and we're gonna wait until it opens but it should work both on Android iOS and also on web so something like that will look good so right away um if you look without touching anything in this application we do not have um basically any director here except the node modules and Dot Expo which is the Expo cache so if we press on this button it will automatically create a directory here but the directory is called up and it has a file index so what just happened here well it automatically set it up for us and showed us how we can create our first route and here we can see um the first concept of a file base navigation what we have here is our app directory will contain all our screens and all our navigation and our index.js file is the first page that our application will load now if I'm gonna refresh the page it will automatically save his hello world that is taken from the index.js all right now if you want to uh actually I'm going to go ahead and open it on um web as well because on web it's much easier to navigate between screens so I'm gonna go open back the terminal and here I'm gonna press on W to open in browser let's see if that works as well but it should and yes here we have our browser then displays our application default export router will handle the 404 route so if we try to navigate in by going manually to some link that does not work so I don't know ABC and if I'm trying to go there export router automatically handled that for us and it shows a custom 404 page but how do we create now some custom Pages for our application with previous libraries we would have to create our screen then we would have to create the navigation stack then we will have to add the stack then with this stack.screen layer but here what we have to do is simply we create another file in our app folder and let's go ahead and create for example a profile.js here I'm gonna generate a simple component just for us to see it uh probably I'm gonna add a bit of styles like Flex one and I want to align them in the center so a couple of styles here to make it centered like these and yes in our iOS application at the moment we will not be able to see that page uh however on web we can right away go and say uh yep let's go to the page slash profile and if we go there we'll right away see this text profile so just by creating a file called profile.js in our application folder it automatically mapped it to the URL slash profile actually this works on iOS as well and for that um uh for that I'm not sure if I want to show you at this moment and confuse you no I'm gonna show you a bit later how how we can test that when we talk about deep linking um okay I see a comment very not related to uh I had to export router but yeah showing the triceps like will happen will happen but uh probably we can do some some contest for it like losing a challenge or something like that that's a good idea for for uh punishment so um yeah I just show you how we can simply create route based on files let me check what I want to show you next the next part is moving from a screen to another so if I go back to our home screen here how can we move from our index to web profile page before we I do that I will go ahead and add some configuration for my vs code in order for it not to complain about some tags this is just everything will work even without this this is only to get rid of this red squiggly things will you get rid of them please it should come on come on oh my God you should work I'm gonna close and okay never mind I'm gonna go ahead and continue uh like this with this rest quickly lines which are ugly but they do not prevent us from going forward so what I wanted to do is from our home page which is index.js I want to navigate to my to our profile for that we can use the component link that we can import from export router and somewhere here in the main after our after the last text we can go ahead and say okay we want to link the text of a link will say open profile and what we have to uh to make this work we just have to send the href similar to how you would do in web for um a link tag a so the href for us is slash profile we saw that by accessing slash profile we open the profile so let's navigate to slash profile just by having this I see the open profile here maybe I can add some Style but no never mind I'll just press on this open profile and it automatically redirected us to profile now I can go back with the web and here on iOS I can do the same by clicking I am redirected to the profile page on iOS I have to refresh to to go back because we do not have a back button yet but we're gonna implement it shortly so as we saw to navigate we can use the link component imported from Expo router we pass bear the href and we pass the route where we want to navigate to um now in order to be able to go back from for example from profile back to our home screen because in web like that easy we can use the back button for over browser on iOS like we do not have a back button and I think on a physical device you can swipe from the left to go back but here it doesn't seem to work so for that reason we would need a back button well to do that let's open the profile.js and first things first we need access to the router in order to call the back function to get access to the router I'm going to import a hook called use router from Expo router at the top of our component I'm gonna get this router using the hook use router now uh probably after the profile I'm gonna add I don't know a button that I can import from react native not weblets import it from react native will it work on web as well or should I just use a text the title is going to be go back uh and on press I can call the function router not function I can use the router reference to call the function back so just simply calling router.back we will navigate back on iOS let's try yes we are back we can go back to open profile we can go back to the home screen now we have like these two-way navigation towards the screen and navigating back in our stack let's check if that will work on web as well yes the button from react native works on web as well and that should work on Android similarly perfect now um you might think how we can send data whenever we navigate with rack navigation better straightforward we we're passing an extra object to the params and that object was the data that the screen would receive in our case there are a couple of ways we can do that and let's see them both for example let's go to the index uh let me check if if I can style this link a bit just to make sure that it has I don't know some font size 20 and margin vertical 10 as well um and will the link accept the style I think it should Styles dot link and let's go back to our home screen yes open profile is there I can even do one to eight bold and I don't know it's okay uh let's do text decoration is it line or underline underline come on it should be text decoration okay never mind it's good so we have open profile here well we want to know what username for example is that profile so that on our profile page we can greet him like hello Vadim for example well if you have experience with web development uh passing data to a page you usually would do that through URL parameters and URL parameters are the data that is coming after the question mark here in the URL and after the question mark is where yeah like we put the data and the format is simple we put the name of the variable for example uh yeah name and then equal sign and the value so if I do a name Vadim that will send the data name with a value Vadim to our profile uh so let's go ahead and profile and here we will need to get access to this data to get access to this data actually I'm gonna try to see if I can do it from the router dot no from router I don't see it but we have another hook called use search params using this user params we can get this parameters from the URL so programs equal use search params now let's go ahead and probably start by simply console logging our params just for us to see it what structure of the data we have so it doesn't matter our own web or on iOS let's press on our open profile and nothing happens if I do go back okay if I go back there yes I see it open profile yes and on the web is it also working I think I have to refresh the web for it to work known web it doesn't work you know I don't see it working on the web but as you saw like I'm we're gonna test that uh in a moment but on iOS we saw that it sends this object with a name with one property name and the value is Vadim similar way you can send multiple parameters here not only one for example you can split different properties with an end and here you can say I don't know name and surname that's gonna be seven right so here in the profile if I'm gonna look in our console log we see the name and the surname in this object so we can right away destructure them from vaporam's name and surname and we can create the user for example hello name I will keep it only with a name so if I go back open profile Hello by dim and if I change it from here to Alex open profile Hello Alex not sure if you can see it but I can do it Style font size 13. something like that let's see why on web that is not working no when web it's working as well oh I was expecting the console logs to appear here for the web but the thing is that the console logs for the web will appear inside that cons the debug tools of chrome so if I do open profile here they should be here like object no I don't know why it's not appearing foreign but we see that this data is actually sent here so this was one way we can send data through via href uh as a string as a URL parameters however in some cases this might not be the most user-friendly way to do that so Expo router also allows us to send to the href an object similar to how we would work with react navigation remember that export router is built on top of react navigation so a lot of things are similar there so if we send instead of a string here if we send an object here we need uh the path name and the path name is slash profile and the second one is params so the params is what you would expect in rack navigation where you would send like an object with for example name and it's your name like this open by themes profile and they are open Alex profile so if I go back here we can open Alex profile Hello Alex go back open by this profile hello madim so these are the two ways we can send the data we can either do it with a string to the href uh in a similar style as you do URL parameters or you can send it as an object to the href with a path name and params object in a similar way as you are used in react navigation hello how are you doing uh yes I was expecting it to look to the browser but for some reason no all right so we saw how we can send data hmm now [Music] um we think we've profile Pages at the moment the way we designed it right now um should we just keep the web version no I will move web versions somewhere there so that we have a bit more space no no no actually I wanted uh to use the web version you know just to show you these these things so for a second I'm gonna move away um so at the moment yes we can send data and we can open profiles uh using the parameters URL parameters that are after this question mark and we saw that here in profile question mark and sending the name username surname and so on however this is not exactly how you are used to for example navigate to a profile page of someone and I'm saying this because if you go to Twitter for example and if I go to my profile it's not Twitter then question mark name equal Vadim not just Dev it's actually simply Twitter slash Vadim not just Dev because this is first of all much easier to share much easier to remember and besides that it has a lot of other Advantage behind the scenes in terms of search engine optimization because every page for every user is considered as a separate page in our case the way we have it at the moment basically what we are saying is okay we have one page profile and based on the data that it receives this profile can render different data what we want to do is to have Dynamic pages and dynamic route thank you so the way I expected to to work is in a very similar way how Twitter does I would like to have our application URL then slash and then the username of a user and that should automatically lead to an open user's account to do that Expo router enables us to work with Dynamic routes how do we do that well Dynamic route for example instead of having the name of a file simply profile.js we're gonna put the name of a file inside curly bracket not curly brackets but square brackets like this profile dot Js now what we say here is that this part profile is that Dynamic variable that is going to automatically be parsed from the URL and actually it doesn't make actually sense to help profile because the variable Vader is the username of a person so we can call it as uh as we want but the thing is that uh this is going to be the variable that we're gonna receive from the use search params so besides the name surname now we are also gonna receive a username that is going to be parsed I'm gonna actually delete the username what's your name now we're gonna receive this username dynamically from the URL that is going to automatically be parsed there so let's go ahead and display it uh hello name and I'm gonna do there in parentheses let's do them username something like this yes now it's profile now back to our index.js we will no longer redirect to slash profile but in a similar way as Twitter does twitter.com Vadim not just Dev let's do it here as well href slash okay this is going to be for Alex and this one is going to be for by dim not just Dev if we look here let's go back let's open Alex profile we see hello and the tag Alex because that's the URL slash Alex similar way if I open Vadim where it's but I'm not just Dev just because the URL in slash video not just Dev and because our URL is dynamic we can do slash anything and that is going to be the data that is going to be parsed as username because that's how we named our file and is going to be accessible using the search params with the same variable name as our file username okay does it make sense with Dynamic routes and the thing is that now all of these routes they are separate pages these are not uh URL parameters this is actually URL the part of the URL that matters in a way Akash thank you very much for your donation that's so nice of you madim can you please make a video on this ICD integration push notification with AWS amplify and how to integrate UPI with our AWS amplify project with Uber Eats um yes we're gonna do something in that direction but this is quite Advanced topics we have it in our private course in our premium course specifically for cicd where we have built a full system to take your application from from a commit message all the way till the market and this includes basically you push your code to GitHub it will automatically deploy your backend to a different environment to a production environment so you have multi-environment backends in order not to mess up your production data when you're working in development or when you're testing it will then go ahead and automatically test the application it will probably build both IOS and Android application and separately will deliver it on play market and App Store so it automates and saves you so much time as a developer and what you have to do is just push your code to GitHub way take a coffee and in 10 or 15 minutes your applications are already on the market so it's quite Advanced it's quite in depth like only the cicd module in our premium course is I don't know it's it's it's it's a couple of hours I think it's around 10 lessons and all of them are around one hour so it's quite quite advanced uh and now we are working on the push notification module which is going to be available in the course soon uh so yeah but on the YouTube like I'm gonna try to see how we can simplify these things in order for everyone to be able to follow along and Implement them as well back to our export router um do you have any questions regarding this Dynamic route and how do they work so now we can have like the username as part of a route and also we can send additional data like the name the name can be for example Vadim and yeah in this case I was working with Vadim like this so yeah it was already working but for Alex for example we can add it with question mark then name equal Alex Sandra so if I go back come on and open Alice profile I see Hello Alexander and then um username is taken from the URL path foreign this is very helpful having this Dynamic URLs I'm gonna simplify it like Venus when we have when we are dynamically linking to users based on a list of users for example so if we have um usually how it would happen like you'd have either a list of users or a list of posts basically a list of data and in your application you would go ahead and map program so users.map I'm gonna map through each user and for each user I'm going to render um link and this link I can copy it here from Alex and render it here so now I'm going to replace the name here with user dot name and dynamically I can send here uh the path to that user by moving to a template string like this we need to put it into curly brackets like this and sending it dynamically from user dot username and this dynamically creates this link based on the data that is coming from either our database work from some dummy data so with this having uh with with this structure we can delete the other links for example from here and if I go back I'm going to save these two users and if I add the third one it will automatically create I don't know the name for it here so if I do like this yes it works perfect and yeah to to be correct like you need to also provide a key here with a unique username but yeah that's uh that's the good part about it like we can dynamically uh display links we can dynamically create routes and Pages for based on our data no Alexandrite everything is fine okay so um perfect now uh going back probably to our iOS simulator to show the next part and the next part I want to show the next part that I want to show is about uh layouts and layouts are the files and the parts of our screens that we want to reuse across multiple screens so for example think about navigation headers the navigation header is something that will stay the same across different screens in the same part of your application or bottom tab Navigator with bottom tab Navigator you want to share it across and you don't want to basically Define and create it in every single screen so the way it works uh in order to define a layout what we have to do is we create the layout file inside of our one of our directories for example here with underscore layout dot GS and by default Expo router at this moment comes with two uh with actually three layouts one of them is the stack layout and if we import stack from Expo router we can export default layout and here let's and let's go ahead and return the stack layout well I don't need the name probably there so I can do it simply like that and what that does it it applies this layout in our case the stack layout to all the sub files and sub routes in this directory so at the moment we have only one directory but later on we're gonna look into how we can Nest things how we can put things together and group them together and what I need to understand is this layout is applied to all them components and all the routes inside them directly that it is in so in this case layout applies to the username to the basically the user profile and to the index and we see here at the top the header because the header is what makes is one unique part of our stack Navigator it shows at the top it displays the name of a current screen and also if we navigate to another screen it automatically has this back button so we can go ahead press back like this all right so as you can see it's pretty simple at this moment and you might think like if there is a way we can customize this header for example yes it's possible and we customize it a similar way as you would customize them let me open it up somewhere as you would customize this stack come on where is my Chrome uh so where is it yeah you would customize it in a similar way as you would customize the react navigation because as I said export router behind the scenes use this react navigation so when you want to know about something how you can configure go ahead and look through the documentation of react navigation because at the moment the documentation of export router is still in progress It's a new library and a lot of things are not yet documented but if you go here and look for example I don't know for example let's see how to change the header color so color uh or for this text screen native stack Navigator and here we can look at some of the ways you can adjust um yeah the recommendation here is a lot like I'm not going to show you where exactly to find uh but what you can do is you can go ahead and using screen options and screen options are the parameters that will apply to all the single screens inside this Tech Navigator so if we do screen options and here we can say I don't know header tint color and I'm gonna go with something like this that is going or for example red in that case our title is going to be displayed with red in a similar way we can adjust the uh the whole header style so if you send header style and here it expects an object you can say what background color for example you want for example blue and I need a comma here and right away we have this blue background so as you can see we can adjust all everything about them the layout and the stack Navigator here uh I prepared some styles for this one so if I do it like this one more uh it's a nice yellow background with um bluish color for the titles uh all right but uh and that will automatically style it for all that nested all them child screens because we are uh we are customizing It On The Stack level using the screen options and these screen options will be sent to all the screens however in some cases you might want to adjust the Styles only for um to adjust the the stack screen only in specific screens so for example on the home screen let's start with adjusting the title because if I send here title I will change the title to title on all the pages even here everything will be title well that's not what we want we want the title to be changed specifically on the home screen how we can do that well we can go to the specific screen for example index.js and here we can as well import the stack and simply by rendering in your component tree this Tech dot screen like these we can go ahead and pass options and override all the screen options that we passed here not all of them but the ones that we need so if I want to change the title I'm going to say options title equal to home screen and on this page the title is home but if I go to the username page the title remains username based on the file name this is one way you can adjust it usually you would do this to adjust the styles for example if I go if I want to have different styles for the stack screen inside the user.js I'm gonna render it here make sure to import it and we can do it the other way like for example I want to change the header to to reverse the tint color and the background color and now if I'm gonna go to this page it automatically nicely animates from one color to another like this um regarding the screen titles I did it with just by using the stack screen and with option Title Here this is not the only way we can do it because we can also do it inside our layout so if I delete it from here and if I refresh that's going to be index I can in the layout I can provide inside our stack I can provide the stack screen but for that we need to close the stack tag and we need to provide the stack Dot screen and if you provide the name that matches the file name for example index in my case then you can specify the options for that specific screen so title will be home and right away we adjusted the title like this in a lot of cases this is much better because you keep uh the logic about layout uh in the same place but this is not always possible and specifically in cases where you have Dynamic data for example in the username what I want to do is to display the actual username or the name of a user in the header so in the layout we will not have access to that data so it's also fine to do it through the stack screen here by passing title title and here the a variable a dynamic variable for example username and now if I go back if I open my profile it's by dim Alexander it's Alex and so on so in case you want it's you want to adjust static data then I think it's better to do it in the layout in order to keep all the code related to the layout in the same place however if that data is dynamic then you can do it using stack screen inside our component and this will also override what is already there perfect so we saw how we can use the layout to adjust the Styles and layout of our components and if you're asking about like header buttons and other stuff like that or header logo that's all possible um if you worked with react navigation then everything that is possible in react navigation you can do here because behind the scenes we are exploratories using react navigation so for example in the layout if I'm gonna do a header right here I can specify the component that I want to render on the right so what I can do here is I'm I can go ahead and render um button or not a button I can do um you know what I can do a the best example would be to render an icon so if I just let me grab an icon Expo Vector icons for example info I will go probably with this one so if had a right I want to do it to render the and design there let me make sure to import it as well at the top now I will see this icon that I can adjust the size and color and so on uh yep like this and we can also have a on press does it yes it has an on press and we can I don't know say alert more info just make sure to import alert from react native yeah now if I'm gonna press it here I see the model more info and that's going to work the same here on the web I can press on this one and it should actually alert maybe alert is not working on the web but you can find a cross-platform solution for that based on the point is just to show how we can use web screen options I mean all options from react navigation to adjust our header we've had a ride this is well you can do a header uh title if you want to render for example your logo there but also possible in the middle so yeah you can play with it and you can adjust it based on the needs of your design and application regarding models models models models yes what you can do is you can have [Music] you can have models I'm thinking Weber to show it now or a bit later but yeah let's play with it because this is not I haven't prepared that but I know that it's super simple to render models for example if I go on the profile page here and on the profile page we want to to open we want to have a model so a model to do that let's go ahead and create a file for that model I'm going to call it model dot GS and let's do react native functional export to just generate and simple model now we have this model here and in the layout I'm gonna go ahead and Define some options for it so stack.screen for the name model no uh with I'm gonna start simply by opening that model somewhere let's say actually from I would do it from this instead of the alert I would open the model I'm interested if here in the layout I'm gonna have access to the router so const router equal use router because we want to navigate to that screen model now when we press on the info button at the top instead of alerting I want to do router dot push that's another way to navigate not only with link but also you can do with router.push Slash model because that's our screen if I do that it automatically redirects me to the model but it's not presented as a model right well we can change that easily by specifying some options to the stack Dot screen I will specify the name model because I want to apply some options specifically to that screen and the options were not options is it presentation no it's not presentation here it should be here presentation model simply by saying that will it work yes it is displayed as a model and in that case I can also I don't know adjust them some of the Styles not to have it with yellow but that yeah that's not the point background color white so here is our model and that's how easy it is to create it like that's that's like really impressive what we had to do like I would uh a goal or I would recap so I just simply created a new file inside app you know inside our app directory called model.js based on this file export router automatically created the route slash model okay having that route slash model uh we we need to navigate their based on some user event that user event I decided that is going to be whenever the user presses on this icon in the top for the header right uh so I simply done router push slash model to navigate to the model screen that is not it we also needed to apply options presentation mode model in order for this screen to be presented as a model and by doing that we have a model screen working what about bottom navigation tab we're gonna get there foreign probably it makes sense to put it only for the home screen not to have it everywhere yeah I think that that makes a bit more sense but yeah like again it depends on the need needs of your application okay okay okay Rado hello thank you thank you so the next steps the next steps in our plan is to go ahead and work with um what did I was asking what about bottom uh navigation tab what about them yes we can do that also quite easily with Expo router uh how about him where can I find the names of the extensions you use in vs code uh I have a video on the channel called top vs code extensions and where I show like most of my best code extensions and also the theme and everything else that I'm using so I just set it once and I forget about them something like that uh uh okay so what is the next step as I said I want to show you how we can use tab Navigator right well with that Navigator um uh look what I'm gonna do with tab Navigator I'm going to show you something but then I'm going to explain why that's not the best way to do it so I'm gonna start by all right I want to change our root navigator from a stack navigator to a tab Navigator you can pause here for a bit and not follow me because we're gonna do it a bit differently but what I'm gonna do is I'm gonna comment out everything that I have here for this tank and I'm gonna import the tabs tabs from Expo router and to Red to make our Navigator as a tab Navigator I will simply do export default tabs by doing that and refreshing replication what we see is right away we see tabs on the bottom index for the index model and username okay uh actually I was expecting something else to happen to be honest let me try to re restart the server but the problem with this approach uh and actually the documentation is not recommending it is because this way we are um where is it come on hi this way we are exposing some of the routes that are automatically generated for for us that we do not want to expose for example we have 404 route this is a root route so that's why it's not that recommended to have a tab Navigator as the root layout and I don't know why now it doesn't show but when I was playing with it I was seeing all of those tabs in my tab Navigator uh exposing like a 404 route uh and other routes that the user do not have to see I'm gonna go ahead and see maybe here it shows no here is what it doesn't but yeah still that's not recommended and what we're gonna do is I'm going to go back to how we had it before with a stack Navigator in our route and we're gonna look at how we can create nested Navigators an estate Navigator is basically um yeah Navigators inside Navigators and we can do that by simply creating directories so if I create here a directory for uh home for example I can have here um the screens that you'd have in um in a bottom tab navigator for example on Twitter so I'm gonna open Twitter somewhere here and we have their I think that the first screen is a feed.js and I'm gonna do Rec native function export feed uh I'm gonna copy paste this into the for example search I'm gonna rename this to search like this and I'm gonna do one more for them what messages and let's go ahead and rename it to messages like this so now what we have is uh let me try to open it on iOS and see if it still works but yeah the best way to see it at this moment is going to be here because we will be able to um yeah to to manually navigate to that feed messages and search for example to navigate to the feed what we have to do is we will put a slash home because well the first part here then slash feed and we see it unmatched home feed okay I'm gonna stop the server I'm gonna restart it with the dash dash clear um option in order to to reset everything oh I made a typo actually it's feed like this so having home slash feed we already see it uh receive a screen that we are looking for and if I do home dot messages I see messages okay perfect now let's go ahead and Define the layout inside this home directory for that I'm going to create that layout folder of the layout file let's go ahead and do new file underscore layout dot GS and here we can go ahead and import the tabs from Expo router and we can export default we can start by exporting the tabs but we're gonna We will definitely want to adjust them so let's go ahead and Define a custom component here that will initially simply all right turn tabs I don't even need the return statement let me actually do it with return like this okay so what we see is we already see the tabs on the bottom and we can navigate from feed search messages and so on just by exporting these tabs from here well there is still a lot of things we we uh we want a bit different for example we um we might not want the home uh header to be visible when we are on this page to do that we're gonna go the home the home header is coming from our root layout if you remember here we said this color background color tint and so on so what we can do is specifically for our not index but for the screen I'm gonna specify the screen stack dot screen with a name home because for the specific home screen in this tank I want to add some options that will hide the header so let's do header shown false now in these Pages the header is uh is not display but if we go on the actual route URL we see it here at the top okay uh the next question you might ask is okay but how do we make these bottom tab Navigator our root thing like the main thing that you're seeing when you open the application because yes like on web you can do a slash home slash feed that will display with the tabs but for example in the mobile application if your refresh replication you will still see the index file basically the the root file come on low so as you can see we still see this one well what we can do is I'm going to go ahead and comment out with everything from this from the index return statement and what I'm gonna do is I'm going to return a component called redirect that we can import from Expo router the Expo router and we can redirect to uh to a specific URL for example to the home and if I redirect to the home it will automatically go to the first tab there so if I refresh I right away see where Home tab Navigator because from the main page I simply redirect there all right but that also allows us to go ahead and have this I will copy this return statement I will actually copy everything from here and I'm gonna go into the home um probably in the search and I'm gonna put it here just because I want to show you that yeah I'm also gonna remove return and then comment everything else I want to show you that we still are able to go from this bottom top Navigator back to our one of our root pages and the root pages is that username or model or other pages so for example here in the link it will redirect to a root page not a top page so if I go to the search now I see this hello world part of a bottom tab Navigator we see the bottom tab Navigator but if I press open by them profile I go to a page that is outside our bottom tab Navigator that's why we do not see it at the bottom and I can easily go back there and the same way I can check some other root uh screens screens that are in our root application folder does it make sense let me close everything um yeah at this moment we have covered quite a few of topics we have covered how we can have nested um nested screens by putting them in separate directories and whenever we put it into a directory that will be another um part in our URL so basically the home directory is slash home and if I do slash home slash feed that's how it navigates to the application when home directory then feed file this is what it will show when which we saw how we can have uh bottom tab Navigators we saw how we can have a stack Navigators with a layout and also we saw that it's possible to navigate from inside a bottom top navigator that is not our root Navigator to navigate to a screen that is part of our root stack Navigator like username that's a very common pattern for example to have some screens like the profile a profile page to to have it uh displayed without the bottom tab Navigator or a page of a post either is saying that's easier when navigation I'll update my app to xper router yes I also think that's that's super easy like um it's it's really it's really easy to wrap your head around of how your application is structured this way like you will visibly see like how you uh structure your screens when you create a new screen you just simply create a new file and you have automatically a route for that you don't have to create towards the screen then go to the right navigation um to the right Navigator think about how you can add it there then uh in a lot of cases if you have typescript you'd also have to go ahead and adjust the types for that navigator to accept a new route per run we want to think how to navigate to that page so I think this way like it simplifies a lot of that that part um and what I wanted to say is again regarding these bottom tabs you can adjust basically everything that you would be able to adjust um come on come on come on but you'll be able to adjust in the um tub material bottom tab Navigator so if you go here and look for them the documentation of a material bottom tab Navigator you'll see how you can adjust a lot of things like how you can um adjust the active color of your icons how you can have different bar style how you can have a different icon for your tabs I'm going to go ahead and try to show you a bit of these features how you can do but that's not the topic of this video because at the end of the day this is about react navigation and it just happens that it's the same here as well so what I'm gonna do is forbid tubs uh uh yeah what like if we need to apply the same uh configuration to all the screens inside the Navigator we use the screen options property on the Navigator itself so for example with screen options I can say how is it called how is it called the um uh label top bar show label and I can say false and this will automatically hide the labels right and this is a property that I want to apply for all of them however for properties that I want to apply individually for every single screen for that I'm gonna go ahead and have to add the closing tab of tabs and inside it I'm gonna have to add tabs.screen and by specifying the name of a screen that I want to adjust and for that just look into your files how is the name of a file well first one is feed right so if I'm gonna adjust the name of a feed um let me just quickly open up my nose to see what um what I can I put there so I want to adjust the icon for our field to do that we're gonna pass options options not screen options because this is the options for this screen uh and I want to do tab bar Icon by doing that you can specify a function that will render your icon so the icon that I was looking for is from font awesome font some from oh give me a second where are you show all windows did they close it alright never mind let's go to the Expo Vector icons and here let's do home and I'm gonna look it from font awesome I'm gonna import it like this and I'm gonna render the icon like this font awesome home 24 black and right away you can see it here at the bottom well I don't want to render them always with black I want to render them based on the color that we will receive from that Navigator itself because this color will be dynamic and what I mean by that is that when it's active it's going to be that tint color but you can also adjust by pressing here active top bar active tint color for example pink and that will have it with pink or red it will be red or any other color that you prefer I'm gonna leave it like this by default it's blue and whenever that another tab is active this color is going to be uh a grayish color so yeah that's how you can adjust the icon and you can do that for other screens as well for example I'm gonna copy it for our search screen so here search will it work yes it works I managed to put it correctly and another one for messages I'm gonna do envelope I think uh it's not message any song I messed up the name messages and explorator automatically says layout children no route named messages and if I look in my files I see that I named it with a capital m so that's nice that it has really nice um error messages that are clear to understand so we can go ahead and move from one to another similar way for the home you can adjust like the title of the of the screen so the title will be feed so at the top you see feed for this one you can say search and yeah it changes as you might have expected okay foreign so with tabs we are done with nesting Navigators we saw how it works uh maybe something else that is quite important is and quite a usual use case is having um is yeah like having nested Navigators basically every tab from here uh sometimes is a stack Navigator for example when I go to messages you would first see a list of messages and when you press on one message you would go to Via chat room with that user but at the end of the day you are still in the messages tab here right so let me try to design this use case because I think it's a very common and any all applications have this uh stack Navigators for every tab of air tab Navigator so let's see how we can do that well to do that we're gonna have to move from a file which represents a screen to a folder that represents a navigator like a group of screens so let's go ahead and create a folder called messages um yeah I name it with lowercase but that's that's fine and inside messages I'm gonna do index.js for the main screen of that slash messages I'm gonna copy everything that we have in messages which is not a lot and I'm gonna put in the index file of our messages folder now I can simply delete the messages file because we are moving from a screen to a group of screens so here we have index and I'm gonna do yeah like a message with um message yeah messages with uh Lucas and Van hear messages with Alex these are just a representation of seeing a list of messages in your messages tab our icon is already broken because we in our layout of the home screen we call it messages with capital M but now we switch to messages with lower M so sorry for that and if it doesn't update automatically that's also a problem uh what you should do is probably stop the development server and try to restart with clear that's another issue that um is happening like when we are changing the structure of our navigation um the caching get gets in the way and sometimes messes up and sells but there is no such uh file but go ahead and clear the cache run it again and it should be good to go foreign what do they do wrong messages no did they mess up the name hmm yeah that's interesting it doesn't want to apply it this way but if I create the layout inside the messages maybe maybe you see what what I did wrong but I'm trying to access them the subfolder messages to apply oh I think maybe it won't messages dot index but that's not exactly yeah you see um if I access it like messages slash index it will put it here but the problem is that if I'm gonna have another file there for message room dot Js and here at Native functional export message room uh this will represent the room the chat room where I can chat with a specific user how we're gonna get there we're gonna get there from the index.js and instead of having a text here I'm gonna move it to a link and the href of that link we need to import it from Expo router the href to that link is going to be we can by the way also add relative links so in this case I don't have to do home slash messages slash message room which will also should work like this what I'm gonna do is message room uh I'm gonna add it as a relative URL like this message room so if I press on Lucas now not found but if I don't have it like this yes uh my room no no no no it's not exactly what I wanted so that's another thing to to check uh to check out let me put it in the notes relative uh pops for href okay so I see now that the problem is having the message room here it added it as a separate tab in our tab Navigator that's not exactly what we want we wanted messages group to be a stack Navigator as one tab in our bottom tab Navigator so by default if you put it like this it will just consider them as part of them parent layout let's go ahead and add the layout for this group layout dot JS for the messages and this layout I'm going to Define it as a stack layout so we're going to import stack from Expo router and I'm going to export default let's return a stack now what I want what I actually want to do is the message is to be a stack part of that okay something is working first of all I see only three tabs not four which is exactly what I wanted uh I again lost that the icon for my messages screen here but that's a good sign because that means that if I go back to my home layout the layout from a home which is our tabs that means that I can remove an index from here and I can leave only messages yes wow it works actually very very smartly I didn't know all of this but it's very intuitive like that's exactly what you expect so initially I didn't have a layout inside my messages and it was adding the screens that we defined inside the messages to the parent layout and the parent layout is our tabs and what it was actually doing it was simply adding more tabs there but when I added the layout in the messages and I said that no this is another stack Navigator in that case uh yeah these two like the index with messages and so on these are part of this layout of a stack Navigator and the messages there's a one group is a nested Navigator and is represented as one tab here and I can go to messages I can click on Lucas and it goes to messages room and as you can see like this is this is a nested Navigator like here we have like the stack room the stack navigator for our messages but on the bottom we are still on this top so if I go back to home and now back to messages it remembers that we are in the message room with a user so yeah now if I'm gonna go here and if I'm gonna try to do that relative path maybe now it will work so if I try now not found why not found message room href it's not like this no message room yeah that's interesting but it doesn't work as I expected like this a relative path maybe I'm doing it something wrong but relative link relative accepts relative paths like slash settings like going one screen up or should work but accessing yeah maybe I'm doing something wrong but okay that's that's still that's still acceptable like I'm gonna go ahead and move these to the other text messages as well so you can do uh what you can add to the message room the ID of a message room like I don't know one two three then message room slash four five six that's usually how you do like you'd have an ID for that message room and the message room will have like ID here so now uh having the ID as a dynamic path for the message room we can go ahead and get it from them use search params and message room with ID and here we're gonna put the ID I'm gonna go ahead and add some Styles just for you to see it I'm not gonna go crazy with Styles today but just the font size like this and in the index here let's let's yeah let's add some styles for uh margin 10. font size 24 it's okay and I'm gonna copy these styles for all our messages uh Link Link okay so if I go to messages now I see free separate message rooms and if I press on one of them and it says that it's not found message room one two three message room method oh it's not message room it's messages then where ID yes messages then by ID like this and here we see a message room with id123 and later on you can query the data from your backend knowing this ID um yes that's how you would do it uh of course you would adjust a bit like with the with headers styles to to make sure it looks good for example most probably it's okay to have a header for the upper tubs but for the messages you don't want to see the messages tab at the top maybe and to do that in the home layout for the messages here you can say header shown false and that uh kept it for feed search but for messages it's not there so you just simply receive the index which is coming from the layout of our messages and here again you can adjust adjust all of this by specifying options for your screens for example stack dot screen and for the name uh index you want to save and then title is messages title messages but for the other screen where the name is ID the title should be message room so if I do that messages if I go there message room I can go back to all messages here can be uh yeah and that's how we created a very common user interface and navigation system that you might see in a lot of applications foreign guys I really like it like it's for me it's also the first times that I'm using it uh and it seems very very straightforward um it's it's it's easy to grasp everything how it works and how it's structured in your application you don't have to keep track of all of this in different places like having in the source code like your screens and having another folder with navigation with contains all The Navigators now you you simply have to properly structure your files in your project and that automatically generates and structure your navigation system and also in my opinion this will force uh developers to structure the screens and their application much better because based on that depends how it works so it's a it's I think it's a win for for Developers and besides all of his developer experience that makes our life easier it comes with a lot of benefits out of a box that I might not got the ability to to showcase by default and you will realize the importance of this benefits that you get out of the box only if you already worked with navigation libraries and specifically with some some topics like deep linking and how to generate them and also Universal links so with Expo router we get deep links by default and what does that mean that means that users of your application can share links to your application that will automatically open specific Pages there so how does that work uh for that we're gonna use a library called URI scheme that will help us basically simulate a user pressing on a link that is specific to your application these links are called Deep links so let me go ahead and open a terminal clear and and let's write this command so npx then we're going to use a package called URI scheme to help us run this uh send these signals directly to our simulators and we're gonna open a URL that at the moment looks like this because we are in development but when your application is in production the URL will look uh for example the name of your application for example Facebook then semicolons and then slash slash and web path to YouTube to a profile or the path to a post Alan called it I think this expirator will make using deep links in notification easier to implement yes exactly like Alan mentioned about notifications and to better explain how deep links are useful is for example whenever you receive a notification on your phone for for from an application for example someone liked your post and when you press on that notification the application doesn't just open on the home screen the application opens the application specifically redirecting you to the post with that ID right so that's what deep links are used for having links to parts of your application and with export router this is done automatically for us so as I'm saying we're gonna use the npx URI scheme to send these signals of opening a deep link copy this command from from from here I'm gonna even Zoom it more uh you can have the application closed on the device but make sure that the development server is running so I can close it I can start it again so you can see it and what we need from here is this URL like make sure that this URL is the same one as the URL that we write in the Deep link here so 192 168 0 47 90 0 0. for you it can be different so make sure it matches after that add two dashes and then slash and here is where everything is where you put the urls so if we want to navigate to our username for example if you received a notification on your phone like this user just followed you and if you open click on that URL you'd expect to go to that user to see who he is so just by sending a deep Link in the notification called with uh for your application and then like username were like let's say by dim not just Dev I also have dash dash iOS because I want to test it on iOS if you're testing on Android put dash dash Android so if I do that let's click enter it automatically opens the application but not just open the application but automatically redirects us to the page of the user with this username by them not just that and let's wait until it builds so we can see it hello but I'm not just Dev uh go back probably will not work here because we navigated to a specific page and we are actually liking them root Navigator but you get the idea like all of these deep links are working automatically and it will work for nested screen as well for example if I want to navigate to a home screen for example home slash home slash what messages for example a user sent you a message we want to open the application in home slash messages messages slash by deal of that chat room so one two three for example that will automatically open the message room with idea one two three then you receive another notification with another uh ID it will go and open that message from here so yeah that's how easy it is to implement Universal links for your application and just by using export router you will automatically have them and your users will be able to share links to content in your application awesome so yeah that's that's something that uh we should not take it from for granted because deep links was always a pain for mobile developers and it was always complicated because you have to manually create them for all four of the pages that you need and when you forget one page or you move it to another place and everything broke so now everything is is taken care for us okay yes I think that's uh most of the things that I wanted to show you about Expo router I'm gonna continue using it and seeing other cool things that it can do another thing that um I didn't manage to show you how to do is shared links shared links um where let's see shared shared shared routes shared routes is a concept that I've been struggling with at my startup when I was developing it because yeah the problem goes like this so we have multiple tabs in our application in the feed you have like a list of posts and you can press on a user to to check his profile in the search you can search for a list of users you can press on a page to see his profile in messages you can press on a user Avatar to go to and see his profile so as you can see like there are pages that you want to navigate from a lot of places and it was always a challenge to know how not to duplicate your code and how to include this shared page in a lot of other stack Navigators in a lot of other tabs for example so the solution that export router is bringing is called shared route and what we can do is basically add the same route in different groups for example in home we can have user.js in search we can have the same user.js in profile we can have user.js and they will all match the same the same route um it's also cool that we instead of not copy pasting it multiple times we can Define it once using an array like this and by having it defined like this it will match both up slash home slash user and also up slash search slash user so we can prevent writing and duplicating our code and write it only once and have it being shared automatically for multiple stack screens so Visa bank is really really powerful and definitely uh you should you should check more about that and try to implement it in your application uh all right so I think I'm gonna stop here guys if you enjoyed this video let me know Down Below in the comments um if you if you loved it if you want to implement it in your application and if you have any challenges also let me know I'm gonna try to help you don't forget to subscribe to my Channel smash the like button if you enjoyed this and turn on the notification Bell because we are going live every single Friday at the same time with a lot of Project based tutorials uh we are building a lot of applications with cool Technologies so you don't want to miss that out thank you for being here with me till the end and I'm gonna see you next Friday bye guys have a nice weekend ahead come on

Channel: notJust․dev

Views: 53,270

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, expo, expo router, navigation, navigate, slacks, route

Id: yyGS0adZdsU

Length: 104min 39sec (6279 seconds)

Published: Sat Feb 04 2023