Stack Navigation

[00:00:00]
>> Kadi Kraman: Now, let's look at the different types of navigation you can do. The basic type of navigation is a stack navigate. By default, everything's rendered in a stack. And it means that when you navigate onto a new screen, It renders on top of the old screen, and then the new screen renders on top of the old screen, so we have a stack.

[00:00:26]
So when you go back, it will go back to the previous screen.
>> Kadi Kraman: Let's add a couple new files. So let's add a counter.
>> Kadi Kraman: So I'm gonna copy this file, because it's just gonna be a default layout where we have a view and a text just as a placeholder, so I'm not gonna type it out.

[00:00:52]
>> Kadi Kraman: There we go, and let's also add this placeholder screen, so idea.tsx.
>> Kadi Kraman: So let's do IdeaScreen.
>> Kadi Kraman: So this will be the screen for whatever you would like to build.
>> Kadi Kraman: Now, there's three main ways to navigate between screens with explorator. The default one is using this link component.

[00:01:26]
Just make sure we run.
>> Kadi Kraman: Yeah, default one is using this link component. So we can import link from experimenter, and inside here, you can just write some text actually. So you can say, Go to counter.
>> Kadi Kraman: And this, you need to give it an href of where you want to link to.

[00:01:53]
So let's say we want to link to counter,
>> Kadi Kraman: There you go. Let me just give it some style. So textAlign center,
>> Kadi Kraman: And marginBottom: 18 and fontSize 24.
>> Kadi Kraman: This style isn't that important, I'm just doing it so it will be a bit easier to see on the screen.

[00:02:26]
All right, so now, when I click on this, you can see that it navigates another screen on top of my shopping list screen. And you can use gestures, actually, to go back. So, specially when you're doing this on your phone, you can see you can swipe from the side.

[00:02:46]
Actually, the fun thing about this is if you're on an Android phone, it looks a little bit different. Yeah, so on Android, that's another thing that I didn't mention. So the header actually looks slightly different on Android as well as on iOS as well, and that's because by default you get platform specific styling.

[00:03:06]
So we have a slightly different shadow here, so it's using an elevation and the heading is aligned left. And this is not a mistake or a bug or anything, this is intentional because it looks more natural to the platform. But you can customize it and you can make both of your apps look the same.

[00:03:21]
Anyway, so if you go on Android, I can't actually see it that much on this emulator. But on a physical device, you get a different animation when you navigate back.
>> Kadi Kraman: All right, so the other way to navigate is programmatically. So let me add a text here and say, Go to idea, and then let's wrap this in a TouchableOpacity.

[00:03:57]
>> Kadi Kraman: And I'm just gonna copy these same styles.
>> Kadi Kraman: Text, there you go. All right, so now we have Go to counter, and then we have Go to idea, lovely. So here, you can use an onPress. So router has a use router hook, so you can do a const router = useRouter.

[00:04:37]
So this will be an export from explorator. And you can do onPress, you can do router., and you can see all the different things you can do. So mostly, you would do router navigate, push or replace. So the difference between them is that push will always push a screen on top of the stack.

[00:05:07]
So replace will obviously replace the screen, that's a little bit more obvious. But then navigate will navigate to the screen, but it might navigate back. So for example, if I had my index screen, my idea screen, and my counter screen, and then I did router navigate idea, it would actually go back in the stack, because an idea screen already exists in the stack.

[00:05:33]
But if you want to guarantee that you're always going forward, so adding another screen on top of the stack, you would use push. So in this case let's use navigate and we want to go to our ideas screen.
>> Kadi Kraman: So open that and then we will navigate to idea.

[00:05:53]
And then the third way to navigate is using these navigation buttons that get added with React navigation. So you can see, by default, we actually get these header buttons, so I can go back all the way up and down the stack. That rhymed unintentionally.