Introduction to Expo Router Layout Files

hi there and welcome to this tutorial on the fundamentals of xarata by the end of the series you will have a solid understanding of how xat

works and you'll be able to build most navigation flows we'll use Stacks bottom tabs models Dynamic routes shared routes we'll set up an or flow and we'll leave

this series open to extension so we may add other navigation patterns later while each lesson Builds on top of the content from the one before the ideas are Standalone so you could watch

the videos in any order but before skipping to your favorite section I strongly recommend that you watch this video as understanding layout files

really is the key to understanding [Music] router an expirat project will have a root folder called app which may contain

only screens and layout files the the app folder can either be at the very root of your project or within a source folder both of these are supported out of the box I prefer the source folder

because it makes it easy to add components and utilities and such without having to put them in the project route every project must have an index route so even if you don't use index

files otherwise you must have one file called index in your folder it is the screen that opens first when the app is launched the only way to open a different screen at first launch is

using a redirect but at this time the index file still needs to exist note that due to the existence of grouping folders which we'll cover in more detail in a bit it is possible for

the index file not to be at the very root of your app folder it may be nested in one or more grouping folders a project will usually have many layout

files and each layout file defines the layout for the screens adjacent to it broadly speaking a layout file has a default export with one of the following

in most cases it returns a navigator which will determine how adjacent screens can be navigated between there are three core Navigators a stack tabs

and a slot which is an unstyled Navigator the Navigator does not have to be the only thing returned on a layout for example you could wrap the navigator in

global providers and such as needed a layout file can also return a redirect this is a special component from XO router which will skip rendering

any child screens and redirect to a different route we'll use this in the all section later but it's worth noting that at this point you cannot use a redirect in the root layout although you

will be able to in the future and lastly you could return any other retive component or null of course which will mean that not the child screens are

rended at all and become inaccessible let's now try this out on a project this is a blank expat project with one layout file and an index

file the starter project is here on GitHub it's just a blank typescript project with router native wind and es L setup plus a couple of components I always end up

creating the big difference compared to react navigation is that when you return a navigator you don't need to list out all the screens in your layout file they will exist because this information is

inferred from the file system let me update this text to show the name of the screen now let's copy this index screen to create two more screens the second

and a third screen to link between screens we can use this link component from Expo router and provided an HF I'll also pass in this

push prop which will ensure that a new screen would always be pushed onto the stack if you ever add a new screen but you end up in this not found page when you try to navigate to it like I've just

done then do a hard refresh refesh of your app and now when I click on this link it opens the second screen it also automatically adds this handy little

header button so I can navigate back another way to navigate is using the use router hook so let me import my custom

button and on press I will call router.

push to push the second screen onto the stack and now this button behaves identical to our link you can also combine these so

instead of calling on press on the button directly I will wrap the button in a link and pass in the H ref as well as the push propop the button is not looking quite

right here because if using a custom component inside a link you also need to add as child and now we're using the link component

with our custom button there's just one other thing I wanted to call out here if we use a text element in the link then the link itself will handle the Press

event if we use a pressable component here with the text then we need to add as child which passes the props down to the child element this is why we don't

need to implement on press here a side effect of this is that if we now want to p pull this into a separate component like my custom button here

then we need to add forward ref as well as passing down any additional props let's add a link to the third screen as well so we could easily navigate to both from

index Frank kise from infinite red created this nice little utility to list out all the routes that exist in your app let's do it now with MP IND expirat

sit map it tells us we have an index route second and third now let's add a folder called

third and move the third screen in there now the route for the screen becomes third sl3 because both the folder and the file name are

used but if I rename the file to index the routee becomes third again another way to do this is to use grouping folders so if I rename this

file back to third but in the folder name add parentheses then the route becomes third again note that you can name the inside

of the parentheses pretty much anything so for example if you used tabs to group the botton tabs the tabs itself does not have any special meaning or power it is

literally just a convention the grouping folder name only becomes relevant if you have two screens with the same route all right here's an

exercise for you I'm going to add another folder here called fourth and inside fourth another folder called

Fifth and inside fifth another folder called Sixth and inside sixth I will add an index

file I'll call this a d deeply nested screen and give it a green background now what is the route for

this screen well to find out let's right click on the file copy relative path and see what we have the route starts from the app folder so we can remove source

and app straight away grouping folders are also not part of the route so these go away and the file name index refers to the index route for the given folder

so I would expect this route to end up with 5th sl6 let's verify this with the sitemap and indeed let's also add a link to the

deeply nested screen in the index page notice that we've created a bunch of folders but none of these have layout files that's because every folder does

not need to have one the nesting in a router code base can feel a a little bit overwhelming initially but just putting a screen into a folder doesn't actually

do anything special apart from changing dhf in most cases for every screen such as this deeply nested one you look in the same folder to see if you have a

layout file if you don't you go one folder up and look for a layout file and if you don't have one you go one folder up one folder up until you find one there's going to be one at least at the

very root to the project and once we find the layout file we look for the Navigator and this is the navigator that this deeply nested

screen is going by now let's go into the sixth folder and add a layout

file and we'll have a default export which returns a slot so the unstalled Navigator so if I refresh I'm not expecting anything to change here

because the slot this the unstalled Navigator but what if instead of returning a navigator we return a view and some

text let's also give it a red background just so it's easier to see now our deeply nested screen is not displayed so why is that the layout file

that governs the screen is the one closest to it so the one we just created this layout file however does not return a navigator so it doesn't return a slot

a stack or tabs therefore just a view and the text are rendered and never dis screen it's really important to know

that the layout files get executed from the outside in let me illustrate it a bit

further let's go into the fifth folder and create a layout file initially we'll just return a slot from this intermediate layout

file I would expect there to be no change because a slot is the unstalled Navigator but now let's change it so that we return some text in the

intermediate layout instead of the Navigator let's give this one a blue background to help it stand out so now when we try to access this

deeply nested routee we get halted in the intermediate layout file and finally let's try a redirect I'll update my intermediate

layout file to just return a slot again and then the layout file is right next to the dpd screen let's redirect to the second screen

so now when I try to navigate to this deeply nested route I in fact get redirected to the second screen let's see what's happening here

exactly so when we start to navigate to this deeply nested screen the execution always start at the very root of the project with this root layout file in

this file we are returning a stack which is a navigator so we're good to go further in the next layout file we are returning a slot which is also a

navigator so we are again good to go further and finally in the layout file that is adjacent to the screen we want to render we are in fact redirected away

from it in this video we covered some of Core Concepts in XO router layout files redirects and Navigators see you next time