I want to get started with the most basic form of navigation and also the most common form of navigation
you have in any mobile app, and that's how to go back and forth between screens.
And for this will set up a so-called stack and navigator because pages or screens, I'll use these words
as synonyms here.
So pages and screens are basically managed on a stack of pages.
And whenever you go to a new screen, it will be pushed on top of that stack.
And the topmost screen on a stack is always the screen, which is visible.
And when you then click the back button popped off this screen, you were honest, popped off.
And since you always see on the app the topmost screen, you will see the screen below that, which
is the screen you came from.
That's why it's called Stack Navigator.
Now, that's the theory.
Let's simply use it and it will become very clear.
We import it from react navigation and its name or the name of the function we actually need to create
such a stack.
Navigator is create Stack Navigator.
Now, one important note.
This syntax is correct.
If you're using react navigation version three, if you're using reac navigation to audition for it
changed slightly, then you need to install an extra package like mentioned on a lecture earlier.
You need to run and install dash to save, react, dash navigation, dash steck and install this extra
package and with it installed, you import create Stack Navigator from reactor's navigation dash stack
instead of reac navigation.
That's a minor adjustment.
You then have to make for create Stack Navigator.
And when we create our navigators, for example, the tabs or draw navigator later you will have respective
packages you need to install, react navigation, dash taps and so on.
Again, that is all covered in the lecture you find before dyslexia.
Now here I did record this course with react navigation version free, which otherwise is exactly the
same.
It's only the import which differs and therefore I will import from react navigation here.
But if you're following along on version four, it's react that navigation dash stack an extra package
you need to install.
So that's how I react.
Navigation, this library works.
You create so-called navigators, which are in the end just you could say objects actually react components
as will turn out, which hold all the navigation configuration, which hold all the information, which
different screens you have and which will do the heavy lifting of loading different screens and playing
nice, smooth transitions for going from A to B for you.
So we need to import create Stack Navigator and then we can simply call that now create Stack Navigator
takes at least one argument and that is a JavaScript object where we configure the different screens.
We want to be able to move between.
Now, in this app, I want to start on the categories screen and if I tap on a category there, I want
to go to the category meals screen.
And if I then tap on a recipe there on a meal, I want to go to the meal detail screen.
So we'll need these three screens in our Stack Navigator so that these are the free screens we can move
between by using this stack pattern, by pushing new pages and popping them off.
And why don't we need favourite's and filters?
Because filters will later be added with the help of a draw.
It will be an alternative to this stack here.
And favourite's also is an alternative to this stack.
We will be able to go there with TAPS later, but not right now.
So let's start with this basic stack based navigation where we can go forth and back between categories
screen category, meals, screen and you'll detail screen.
We in the form react navigation about these three screens by registering them as key value pairs.
You take any identifier, any name of your choice, for example, categories, but this name is up to
you as a property name convention is to start with the capital character here, by the way.
But you don't have to do that technically.
So you use any identifier you want as a property name in this object you're passing to create Stack
Navigator.
And now the value in its simplest form simply is a pointer at direct component.
You want to load as a screen for this screen.
So in my case, that would be the category.
Screens all import this, all import categories.
Screen from screens, category screen, I can import this because there this is my default export.
So now we map this two categories, and this allows us to later tell react navigation does library we're
using that it should load the categories screen.
Now, as I said, this is not the only screen I need.
I also want to have the category meals.
So these are desistance, a second screen.
This screen will present all the meals for the chosen Category four that we have another component and
that's the category meals screen we prepared, which we import from screens category meals screen.
So we map this year.
Now, by the way, I mentioned that this is the simplest form of mapping, simply having the property
name and then a pointer at the component you want to load.
You also can pass the object here instead and set the screen property on this object and then point
on the at component you want to load.
Now, why would you do that?
Because now you can also set up additional configuration here besides the screen, you could set up
some default options for the screen and so on.
But this is not something we have to worry about right now.
Will actually take care about this later in this module.
Just already want to mention that.
Does this the shortcut?
Does this the longer form of telling navigation, which screen should be loaded for which identifier?
Speaking of that, we need a third identifier, of course, and that's the identifier that should load
our detailed screen.
I'll name it Meehl detail, and I want to point at my meal detailed screen so I'll import more detail
screen from.
And now let's go to the screen folder and there it's the detail screen and again, I'll use the shortcut
here.
We could use that longer form, but I'll use that shortcut and point at the detailed screen.
So with that basic configuration, we're telling react navigation, hey, these are the screens will
be able to move between right now.
However, that alone won't do much.
Why, because we're creating that Stack Navigator, but we're not doing anything with it.
So let's change this create Stack Navigator actually returns a navigation container, and that turns
out to be a react component that's all named as Meals Navigator, sounds like a fitting name because
that's what we have in the end here.
And now we're storing the component created by the Stack Navigator, which is basically a react component
with all the heavy lifting of loading different screens and playing animations.
Dishrag component is stored in meals navigator.
Now we could export the meals navigator here.
And try using it like this in Abcess to render it onto the screen and see what happens, but actually
react, navigation works a bit differently.
You also need to create an app container.
In app container, you need to wrap your route, so your main navigator in this case, we only have
one, we only have to stack navigator.
Let's wrap this with it.
Let's wrap the meals navigator we created by calling create app container and then simply pass the meals
navigator as an argument.
Create app container also creates a navigation container so all gives you a react component.
But this is now actually the react component you should use in your JSA code, because this now has
all the metadata about the navigation in general, about react navigation and so on.
So this is simply a pattern you need wrap your route, your most important navigator with that and use
this return react component in your jazz code then does basically to set up.
You'll always have when working with reac navigation later, you will also learn how to use multiple
navigators.
And one app, by the way, for now we have this one and we export this component, which just the end
creates.
So now in abcess we can start using this component.
So did we see something on the screen?
For that, let's go there and import.
The Meals Navigator from.
Navigation Meals Navigator.
Now, as I mentioned, Meals Navigator is now just a Riak component.
So in the end, what we can do is we can simply return us instead of returning our view with our text
here.
I will return meals navigator.
And since it's a react component, I can simply write some code like this with Dad if we save this.
We have a look at our application as it reloads.
And you might need to manually reload your app, you should see the categories screen once it reloaded
and there's, of course, is huge because this means that this works.
Now, please also note that you all, by default, get a nice header which has the default platform.
Look for iOS.
It's clean, flat, has this thin line below it.
For Android, it's more three dimensional because it also has a slight drop shadow.
Now, of course, it's missing a title and you will learn how we can add one in this module, but we
get this out of the box and this automatically also respects any notches you might have to status bar
you have here.
So it automatically uses such a safe area view.
And that's all to what I mentioned in the last course module.
Whilst you have this component and you sometimes need it, for example, in building an app with react
navigation, react navigation already wraps your views into a safe area view.
At least it will do a lot of the work you would have to do.
Otherwise it will make sure that your header looks good.
And that is a big thing because manually creating a header that looks good on all devices is actually
quite some work.
So that's what we get here.
The obvious question now is how can we reach our other screens?