So now we worked with navigation quite a bit, we're able to move forward and backward, you learn how
to add icons and action buttons here to this header, how to style and control the header in general,
how to pass data around.
And these are all crucial things for mobile apps you're building with react native.
Of course, these are things you'll do over and over again when working with REAC Native to build apps.
Now, this is not the only form of navigation we could implement, though we can also add tabs at the
bottom so that we can switch between different sections in his app, which of course also is a typical
pattern, you know, from mobile apps and which is also the pattern I sketched out at the beginning
of this module.
I want to have two tabs in his app, one for all our meals, or in this case all our categories, and
one for just our favorite meals, the meals we marked as a favorite.
That, of course, brings us to one important question how can we add taps when working with react navigation?
And that's thankfully not too difficult.
Let's go to our meals navigator Jaspal, which is where we set up navigation and dare we created a Stack
Navigator.
You need a Stack Navigator whenever you have screens, pages in your app that are connected with such
a forward, backward flow.
That's the typical stack navigation what we're using here.
And of course, we'll still need that even if we now also add taps.
The good thing is you can simply have multiple navigators in your application and that's exactly what
I'll do now.
From React navigation, besides to Stack Navigator, the Create Stack Navigator function, we can also
import T8 Bottom Tab Navigator and that does just what it sounds like.
It allows us to create a navigator that works with tabs at the bottom.
So create bottom tab navigator.
It is.
And we can simply create an additional navigator next to our meals.
Navigator, let's say so.
Here I will damed is.
Meals Faf, tab, navigator, you can name it whatever you want, that just want to be really clear
about what his navigator controls and will controls are meals and favorites with Taps and I call Create
Bottom Tabs, Navigator and storage.
A result of that in this constant the result of this justice before for to Stack Navigator, isn't the
end a react component.
So we can store that here and we'll soon be able to use distant.
Now how do we configure that tab navigator then just like the Stack Navigator, the TAB Navigator also
takes the object where we have to inform it about the different taps, so to say the different sections
to different screens we want to load when we click to different tabs.
And there I have two tabs which I want.
One tab should be what we see here.
So our stack in the end, not just this screen, but also the functionality to go to another screen.
So I want to have the entire stack here in one tab and a different screen or a different stack in the
average tab.
And the good thing is you can use a stack or any other navigator as a screen in this navigator, so
what you can do here is you can set up an identifier that's maybe named meals.
That is totally up to you, that name.
And now you could point at a screen here.
You can also use that long form with screen.
But I'll use the shortcut and just directly point at a screen here.
At the screen at which you point here can even be just a react component, as we created here in the
screens folder or well, since this year, as I mentioned, all the returns are reac component.
It can also be the result of create Stack Navigator.
So indeed, I'll use the Meals Navigator here as my screen to be loaded for the meals tab.
In the end, this is how this works is how we can set this up.
So that's our first tap.
The second tab will be our favorites and there I have no stack yet.
We might later add one, but for now I'll just point at the favorites screen.
Let's import that favorites screen here in the middle navigator file import favourite's screen from
the screens folder and their favorites.
Screen like this and now simply point at the favorite screen here for our favorites identifier in the
Bottom Tab Navigator.
This is how easy we can set up a tab navigator, the question now is how do we use it?
Well, in the end, it's now this navigator, which we want to use as our route navigator in the app
because it includes our existing Miles Navigator and it also allows us to go to the favorite screen.
So in the end, I just use this year in my app container instead of the Moelis Navigator, because the
Meals Navigator now is nested in this tab navigator.
And that is how you can combine multiple navigators in the native app driven by navigation because you
can simply mix and match them together.
You always have one route navigator, which is in your app container and that makes sense.
You have one entry point to your app.
But does Route Navigator kind of course, have over nested navigators as we have it here for this tap
where we point at the Meals Navigator and if now is safeness and our app that for restarts, you see
now we have tabs at the bottom here and we can click them to go to our meals stack here and we can use
this stack just as before.
But I can also switch to favorites, go back to my stack, which even keeps its stated Wazzan.
And that is how easy we can add Tab's same on Android, of course.
Now, of course, it's also noteworthy that these tabs don't look that great yet.
It would be nice to have an icon here and not just some text.
And we'll take care about configuring these tabs just a second.
But this is how easily we can get started with tabs.
And this is how you can think about using multiple Navigator's in Ariake navigation app or in the app
using react navigation.
Now with that, let's see how we can actually add icons and how we can configure our taps a bit more
also to use a different color than the default blue here.