Nested Navigators

[00:00:00]
>> Kadi Kraman: And a final topic around navigation is nesting navigation. So in native land, you can nest navigators pretty much infinitely. So a stack within a tab, or a stack within a stack, or a stack within a modal, or a stack within a stack, within a stack, you can pretty much go infinitely.

[00:00:20]
So to convert a screen into a stack, the process differs whether the screen is a named screen like your home screen or idea screen, or whether it's an index screen. But regardless, we're going to convert the file into a folder and then make it the index screen of that folder.

[00:00:42]
So, we're gonna have a stack in our counter tab. So this will be a stack navigator inside of a stack navigator, and we're going to add a screen for the history here. So to do this,
>> Kadi Kraman: So this is the screen that we want to convert into a stack.

[00:01:11]
So in our after-actors, create a new folder and call it counter. And move our counter file into our folder and rename it index. So notice that the screen path, the href, the url didn't change because it used to be called counter and now the screen is the index file of the counter folder so it's still called counter.

[00:01:49]
>> Kadi Kraman: All right, so now.
>> Kadi Kraman: We need to add a layout file here. So let's, in our counter folder, let's do _layout.
>> Kadi Kraman: And by default, let's do a stack. So export default layout. Export default function layout.
>> Kadi Kraman: And we'll return a stack, which is imported from Expo Router, and we'll have a, this is the name, and we're doing Stack.Screen [LAUGH] name="index", lovely.

[00:02:49]
>> Kadi Kraman: So go to counter, okay, so this is something that you will often have when your nest navigators, you end up with two navigation headers. And the way to deal with it is that you hide the one that you don't need. So in our case, let's do an options, let's give it a title counter.

[00:03:17]
>> Kadi Kraman: Okay, so now we have two headers that are called counter, but which one do we hide? So in this case, we actually want to hide the outer one, so the one that we defined first. The reason being is that we're going to have two screens in this inner stack and we want to show the header of the inner stack screen, so we want to hide the outer one.

[00:03:40]
So in our root layout let's go to counter and do headerShown: false.
>> Kadi Kraman: And now we have our single header, all right, and the last thing we need is to actually be able to navigate to it. So with the react navigation, we can use header buttons, which is quite a convenient way to navigate between screens.

[00:04:09]
So in our layout file, the counter layout file, let's do a header, right.
>> Kadi Kraman: And this will be a function.
>> Kadi Kraman: Let's return some text. This is always a good thing to do. See the things are rendering.
>> Kadi Kraman: There you go. So this is where this icon or button or whatever you want is going to get rendered.

[00:04:44]
So to the right of the header. So in this case, I think it will be handy to use an icon button once more. So let's choose another one.
>> Kadi Kraman: Let's do the history.
>> Kadi Kraman: What is a good history icon? Can't remember which one I use now, maybe this one.

[00:05:18]
>> Kadi Kraman: Yeah, well, it doesn't really matter which one you use, but I'm gonna use. I want to use the same that I did in the example, so let me see. I'll use material icons, history. I'm just gonna copy it from here for a bit of consistency. All right, and then let's render this material icons, and it's called history.

[00:05:54]
Size is do 32 and color, let's make it a gray color.
>> Kadi Kraman: Lovely. And now we want to use a link. So this is the link from Expo Router. And let's do href, and we want to link to, so what's the screen? So we want to link to our history screen that I'm not added yet.

[00:06:34]
Let's add a history screen. So, we need a new file call history.tsx.
>> Kadi Kraman: All right, and I'm gonna copy the contents of the idea file because it's just gonna be a placeholder again. So call this a history.
>> Kadi Kraman: Lovely, okay.
>> Kadi Kraman: Again, so we wanna link to this screen.

[00:07:10]
So the apple is in count, so it will be /counter/history. So here we'll do counter/history. Okay, and now when I click it, we can navigate. But one thing that's a little bit annoying here is like this button is actually quite small, so you have to tap right on the button.

[00:07:44]
And this is not great UX, you want to kind of increase the touchable area so butter fingered people like me who are just approximately pressing the button could also press it accurately, and if we actually wrap this in a pressable.
>> Kadi Kraman: Here you go. We can use this thing called hitSlop, so it's hitSlop.

[00:08:10]
And it basically defines an area around the pressable area which also triggers the press. So let's do 20. And this actually won't work because if you parse in a component inside the Expo Router link, you also need to mark it as child. There we go, so now this works.

[00:08:33]
And notice that I can actually press next to the icon now, and it will still open. So instead of having to press right on top. So this is a great UX thing. If you're ever using icon buttons that don't have a defined border, this is a great thing to do for UX.