Path Aliases & Layout Groups

[00:00:00]
>> Kadi Kraman: This part is optional but in this course we are going to have like a pretty deeply nested root, like a couple of really deeply nested files. And we're gonna have a couple of top level folders that we need to import things from. So initially when I wrote this you do end up with really long and tedious paths but we don't need to suffer this.

[00:00:20]
We're using a TypeScript, so I recommend you set up the Path Alias. And this is actually set up to using the default template. And we just don't have that because we are using the TypeScript template. And basically all need to do is update your TS config and add this path alias to.

[00:00:40]
Well, whatever you want. Where can I keep it simple? You can add a part A, so you can have multiple ones, you can add it to multiple folders, etc. But we are gonna just add one top lower one, so that if you do @/, it'll link to the root of the project.

[00:00:55]
So I will copy this, go to our tsconfig.
>> Kadi Kraman: Here we go. And now instead of doing theme, we should be able to do @theme, because this will link to the top of the directory. Obviously we are flat currently, but this also means that when we refactor these components, these files, which we're going to do, then when you move these files, this theme link will still work.

[00:01:29]
So it's much it's very useful. And let's update the other theme imports as well. Okay, next up let's talk about layout groups. So our app is going to have an onboarding step. So the user will be faced with a special screen that opens only when they open the app for the very first time.

[00:01:53]
We're not doing authentication in this workshop, but you could use a very similar mechanism for setting up authenticated routes. So we're going to do a check in -app to check whether the user has gone through the onboarding flow, and if they haven't, they'll see the onboarding screen instead of seeing the app screen.

[00:02:10]
So if you think about how auth works, it is literally the same thing, so you could use the same mechanism, but you will check whether the user has a valid auth state. So for this, we'll need to use groups. We need to have a full screen modal that can render over the top of these bottom tabs.

[00:02:29]
So if I defined a new modal screen just in this app folder, then it will get rendered as a tab because our layout here is a bottom tab's layout. So, in order to have a modal rendered on top of our tabs, we need to use layout groups. So, folders that are surrounded in these brackets are layout groups folders, the name of this folder isn't included in the path of the screen.

[00:02:59]
So in the HREF pop the screen and they should don't show up in the root. So let's create a new folder called tabs and it will be a grouping folder. You can actually call this whatever so it is a convention that we call the tabs for the bottom tabs you could literally call this whatever so the name of it doesn't actually matter.

[00:03:21]
And let's move all of our files into this tabs folder.
>> Kadi Kraman: And now in our top level app folder, let's create a new file called onboarding.
>> Kadi Kraman: And this will be a placeholder screen. So let's just copy the content from here.
>> Kadi Kraman: And now we have a layout file here with our tabs, but we don't have a layout file at the top, so let's create one.

[00:04:06]
So at the very top, let's do a layout.
>> Kadi Kraman: So in our layout file, let's export default function, call it layout. And we want to return a stack. So, we want to render both the tabs and your onboarding screen as a stack and then we have a stack.screen.

[00:04:36]
So, this will be a screen that renders all of these tabs. All the bottom tabs. So this is like one of our layouts, I will say name will be the tabs. So, notice that we're not doing tabs/index because this has a layout file and then it will let this layout file configure how everything is laid out.

[00:04:58]
So, we can just link to this folder instead It. And the other screen that we have is our onboarding screen. So let's do name onboarding.
>> Kadi Kraman: Okay.
>> Kadi Kraman: Yes?
>> Speaker 2: So the only prerequisite for the taps, the name is the parentheses that's it, you can, anything within that is, so you could have named it whatever you want, like you said.

[00:05:25]
>> Kadi Kraman: I could have named it whatever you want. Yes, yes, correct.
>> Speaker 2: And that's the export router then?
>> Kadi Kraman: It is, yes. Yeah, so it is a layout root. So I mentioned that everything, like the root of your app, so the first screen that opens is the index screen in your app folder.

[00:05:40]
And you notice that there is no index screen in our app folder, but you need to have an index path. So if you think of how these files that we have now translate to file paths like HREFs, we have like this index file is /index because it is app/(tabs)/index right.

[00:06:02]
App isn't included because that's just our root, tabs is omitted because it's a grouping root and index is the index root so this index file still resolves to the main entry point in our app.
>> Speaker 2: So if you didn't have the parentheses there would Resolve [CROSSTALK] it would resolve the It would part of the route.

[00:06:23]
>> Kadi Kraman: Yes, correct. Yeah, it would, and it would actually give us an error because we no longer have a root index file.
>> Speaker 2: Okay, interesting.
>> Kadi Kraman: All right, so now we actually get two headers, and this is very common when you are nesting navigators because by default everything will have a header and then we are going to hide one.

[00:06:41]
In this case, let's hide the top one here so we don't need one that says tabs. So let's add some options and we'll do headerShown: false.
>> Kadi Kraman: Okay,
>> Kadi Kraman: .So, now we want to be able to check whether the user has finished onboarding and if they haven't redirected onboarding.

[00:07:13]
So by default, your app will open the index roots, the root index file. So what we can do, actually the order of rendering is going to be that it goes to this layout file, and then it goes to this layout file, and then it goes to the index file.

[00:07:33]
So we can intercept our rendering in this layout file in our tabs directory. So I'm gonna code this for now, so let's do a const has finished on boarding, and let's say false.
>> Kadi Kraman: And now we can use a redirect component from expo router so we can do if the user hasn't finished onboarding, then instead of returning this tabs layout, we're going to return.a redirect And the HREF is going to be our onboarding route.

[00:08:31]
>> Kadi Kraman: So now when I reload my app, it actually opens onboarding. And if I change this to true and reload my app, it will open my app.