Well to reach our other screens, we need something which we can click, which we can tap.
Later we'll have our grid of categories here and we will work on this in this module too
but just to get started with navigation, I will add a button,
so on the categories screen where I have this text, I want to add a button which I can tap to go to the
category meals screen.
So here, I'll add this React Native button, the one which is built-in and set a title of go to meals
and when we press this button, I want to trigger a function which actually takes me to the category meals
screen.
Now we set up that category meals screen here
but how can we now go to it? Well for this, it's important to know that any component you loaded with
the help of React navigation gets a special prop passed in automatically, so any component mapped to
one of your screen identifiers here,
so in this case these three components, will get the special prop. Nested components in there don't automatically
get it, just the top level components you mapped to identifiers in your navigators.
So that's a special prop I'm talking about,
let's have a look at it.
So here in props, we can extract it and let's simply start by console logging props here, so that we
can get an idea and for now so that we don't get an error,
I'll just pass an empty function here to onPress.
So let's save this and let's see what's inside of props.
This reloads, we have the button which doesn't do anything and here in the console, we indeed see props
isn't empty.
This is our props object
and there we have a navigation prop which itself is an object which has some actions,
okay but which also has for example pop, push, replace, reset and a navigate function, so a bunch of functions
in there, functions which help us get around in our app.
It also has a screen props prop, so our prop has screen props which we can ignore for now.
So this what's inside of props and this navigation prop, this navigation part which is in there,
really helps us,
so this navigation prop. It helps us here because when we press this button and I'll do this with an
inline arrow function here, of course you could have a separate function which you create and which you
then map to onPress,
this helps us and this can be used to navigate around.
So on props navigation, navigation is this special prop we're getting by React navigation because we loaded
this categories screen component with the help of our navigator here,
this special navigation prop has a navigate method
and this is your main method,
the most important method for getting around with the help of React navigation. How does navigate work?
Navigate takes an object as an argument and in this object, you can set up the route name to which
you want to navigate.
So you pass a route name property in this object which you pass to navigate and now important, the route
name you specify here has to be one of the three route names I set up here.
Now route names are the identifiers you show chose in front of these colons, so the property names in
this object you passed to create stack navigator.
These are your route names and
this is what you can now use to navigate around. So here I want to go to category meals,
this is the route name I want to use,
so hence here, I point at category meals but not like this,
this in Javascript would look for a category meals variable, instead to a string named category meals
because this will basically tell Javascript and React navigation in the end that you want to go to the
route which has the category meals name and that is this route here.
So now, this is how you can go there.
If we now save this and we click on go to meals here, you see we go to the meal screen, we get this nice
animation out of the box, we get this back button which looks exactly the way we would expect it to look
on iOS and all of that works out of the box without any extra work, no if check, no manual animation
code, we get this out of the box thanks to the React navigation library.
So with this, we can go forth and back to our meal screen, to the category meal screen and then back to
the category screen and this also works on Android. There we get the Android specific routing navigation
which looks a bit different than on iOS, it's the navigation animation you would expect on Android, of
course you can also use the device back button to then go back.
So this is how you can navigate to a different screen and please also notice that navigate of course
doesn't say anything about the direction we want to go, it doesn't tell React navigation whether it should
play that forward animation or that backward animation. React navigation automatically detects this because
under the hood, it manages this stack of pages I was talking about, this stack of screens and in this
stack, right now when we start the app, we only have the category screen but when I press this button,
navigate in the end tells React navigation that since we're doing this inside of a component which was
loaded with a stack navigator, that we want to navigate to a different screen which should be pushed
on top of the stack. This is simply the default behavior and hence, it knows that it wants to go forward
because a new route was pushed, which means it's added to the stack, we want to go forward and when we
click the back button which it adds automatically, it pops this screen off the stack and since it removes
something from the stack, it knows that it should play the back animation. So that's what's happening
behind the scenes, you don't really need to worry about that and that's the good thing,
I just want you to be aware of that, that React navigation is doing the heavy lifting for you there and
manages this stack of screen and the according animations you need therefore under the hood for you.
Okay,
so that's allowing us to go back and forth or forth and back.
Now your challenge for the next lecture where we will then do it together is that you also will do the
same on the category meal screen and make sure that we can also go to the MealDetailScreen
from there. Shouldn't be too hard, in the next lecture, we'll do it together.