Now we had a look at basic navigation with navigate and navigate is your most important tool
but actually when being inside of a screen, of a component loaded with the help of a stack navigator,
you have alternatives to navigate.
You also can use push instead of navigate, though that doesn't take a Javascript object but instead takes
just the route name here,
in this case category meals as a first argument and with that, you'll get the same behavior as before.
The question of course is why would you then use this.
Number one it's a bit shorter than navigate because you're not passing an object but that's not the
primary reason,
instead using push here can be useful if you want to go to let's say a page where you already are on.
Now let me show you what I mean.
If I revert this and I navigate to categories here,
so to the category screen which is the screen I'm already in. If I do that with navigate, what you'll see
is that nothing happens if I tap this.
Now if I use push instead and I therefore just pass categories as my first argument because that's
how push works, you'll see that now this works and I can go to the same screen over and over again and
it's pushed to the same stack over and over again.
Now of course, you might wonder why would I want to push the screen I'm already on onto this again.
Now in many apps you might not need this but let's say you're building an app like Dropbox where
you have folders
between which your users can navigate,
if you're in a folder, you want to go to another folder.
Now each folder is the same folder screen technically, just with different content loaded into it. In
such a case, you might want to go from folder A to B which uses the same component, the same screen in
the end but with different content, in such a case you could use push to still be able to push that new
screen which is the same screen onto the stack and load the same screen with different content,
this would be one scenario where you could need this. In this app,
we don't need it so there's no need for push but you have this in scenarios where navigate wouldn't
take you to that screen,
push always will when inside of a stack
navigator. Here however, I will revert this to navigate which takes an object with a route name which then
points at categories because here, we absolutely don't need push, that is category meals though. So this
will do for this app,
now you also have other explicit navigation options,
let's say from the category meal screen, you want to be able to go back.
Well of course, we are able to go back with the help of this back button but it's also not that untypical
that in some apps, you have some other thing your users can do where you want to take them back then,
for example let's say you're on a page where you can set up some configuration and when you click
the save button, you want to save that configuration and you also want to leave the screen.
Now for this scenario, you might want to be able to trigger a back navigation manually and don't wait
for the user to press the back button because that might force the user to press a save button first
and then go back manually which is not the best user experience.
So here, I will kind of simulate this by just having a go back button here in our screen,
so in our jsx code and when we press this, I want to be able to go back, I manually want to trigger
a back navigation.
You can do this with the help of the navigation prop because there, you have a go back method you can
call and this does just what it sounds like.
If we save this and I go to the meals, if I click go back, we play the back navigation.
Technically, this pops off the screen we're on and goes back to the previous screen in the stack
therefore. As an alternative to go back, if you're in a stack navigator, you also have pop which does
what the name implies, it pops off the current screen on the stack
and since you always see the topmost screen on your device, this also plays the back navigation,
so this is an alternative to going back. Difference is that pop can only be used if you're in a stack
navigator,
go back is also available in other navigators which we'll use later in this module.
Sometimes, you'll also want to go back all the way to your parent component,
let's say here in the MealDetailScreen. There we can also add a button and on this button
here, I want to go back to my categories
let's say and therefore, I will add onPress and in this function here, I can use props navigation pop,
right,
because this takes us back. Well the problem with that of course is, it takes me back but only to the
screen before this screen, so to the screen.
I came from. I want to go back to the categories screen though,
so I want to skip two screens at the same time.
For this you have pop to top,
this is another method you can call which simply pops of all screens from the stack and takes you back
to your root screen.
So if you click this, we get the back animation and we're back on our root screen which in this case
is the category screen,
so that's an alternative here. Now with that,
there's only one last possible navigation action you might sometimes need. Let's say on the categories screen,
you want to go to category meals but you don't want to add it to the stack but you want to instead replace
your current component in the stack with it, so that there is still only one screen in the stack but
that screen is then a new page,
that also means that you won't be able to go back on the new page because the stack would be empty thereafter
which means your app closes.
So in case you want to do that, you can use replace. Replace
also just like push takes just an identifier like this and replace also takes you to the new screen,
it plays no forward animation though, instead it instantly jumps there and you get no back button automatically
because the stack is empty otherwise, this is the only screen.
This could be used for example on a login screen where a user did sign in and once signed in, the user
shouldn't be able to go back to the login screen,
well then you could simply replace the login screen with your you are logged in screen with the user
profile or anything like that.
If you still try to go back, nothing happens because you can't go back, there's nothing else in the
stack. Therefore of course, replace is absolutely not what we need in this app,
I just wanted to introduce this here, though we will see more available patterns and how you go back
and forth between pages and when you might want to replace or switch between screens like this throughout
this module, just wanted to introduce it already at this point, still here, I will go back to navigate
with the route name pointing at category meals. And with that, you had an overview of some of the basic
navigation methods that allow you to go back and forth between your screens. As I mentioned, we'll of
course see many patterns in action throughout this module, for now this is it and I'd say with that out
of the way, it's time to actually add some meat to this application, make sure it's a more realistic application
and not just a dummy application like it currently is.