So let's at this last main navigation pattern you see in mobile apps, and that's having a side draw,
of course, REAC navigation has us covered for that as well.
From REACT navigation, you can import, create, draw navigator, which does just what it sounds like.
It makes it easy for us to create this draw based navigation pattern and it gives us such a draw and
all the functionality we need to control the straw out of the box, which is of course very convenient.
So we simply create a new navigator and I'll do this at the bottom of this file.
And just a quick side note, of course, you could split that into multiple files and have each navigator
in its own file and then merge them together into one file by importing them into one central file.
That is something you could do.
I found it easier for this tutorial also to keep it all in one file.
It's also not too big of a file, but you could definitely split this.
So I will create my drawer navigator here at the bottom of this file and all stored in that constant
named main navigator, because in the end, that's what it is.
This will be our main navigator in the end because the tab will be inside of the drawer.
Navigator in the end, our tabs here.
So on both tabs, we have access to that side draw and decide or allows us to go to a brand new screen,
which will not be part of our tabs.
So the drawer navigator is above the tabs navigator in the hierarchy.
So how do we configure such a draw?
Navigator basically, just as we did before, it takes two arguments and the first argument is an object
where we configured the screens for our navigator just before we have identifiers like tabs or meals,
favs, whatever a fitting navigator is for that first drawer entry you want to have.
And here I want to point at my meals FAF Tab Navigator in the end, because that's when I want to load
there.
And on a second entry is the filters screen.
We must not forget that we have one hour screen, that's the filters screen, we haven't used it before.
Now is it's time to shine and actually all wrapped us into a stack navigator, even though it will be
empty.
So did we get a header there as well?
So I will add another Stack Navigator here with Create Stack Navigator.
That's a very simple stack.
It will have only one screen and that will be the filters screen, which would therefore need to import
here at the top because we're not doing that yet.
Let's import filters screen here from screens, filters, screen, and now we can use the filters screen
down there.
Whoops, not not here, but here in the Stack Navigator named as Filters Navigator or anything like
that.
And now it's just filters navigator, which map to filters in my drawer navigator and I only use a Stack
Navigator here, so they also have a header there and for no other reason.
Now on the filter screen will of course, work on this in a second.
But on there, there's one thing I want to do right away.
I will add my navigation options and I will add a header title there and set this to.
Filters or filter meals, anything like that.
With that, back to the Meals Navigator recreating that stack we're assigning to Fulton's Navigator,
Stack Navigator, to our draw navigator, and now we just have to use the main navigator here in our
app container to start with that.
And now if we save this, we see nothing, though.
Well, I said that the draw navigator would manage all the logic for opening it and so on.
The thing it does not do for us automatically is show a menu icon.
So it doesn't show a hamburger button for us, that's something we have to do and we can decide on which
screens to show it.
And of course, that would be the category screen because that's the rude screen for the meals tab and
the favorite screen, because that's the root screen for his favorites tab.
So in these two screens, I want to add to that menu icon and I add it in my navigation options, as
you learned, because, dear, I want to add it with the help of Hattar left.
Previously, we just had a right to add actions to the navigation bar to the header.
But that menu button typically is on the left.
We'll add it here and I will use my hattar buttons for this.
So we'll import from react navigation.
Hattar buttons does package we used earlier.
From there I will import hattar buttons and also item what we also use before.
And also import my custom header button, so header button from component's header button, so the same
pattern we used before for adding that star icon in the action bar.
Now I'll do it here for the menu icon for the menu button.
And therefore we can now go down to the left and there at Hattar buttons.
This year, as a component set the header button component to our header button component, we're importing
from our own custom component and add an item in there which allows us to define a title that should
be menu.
And then very importantly, I can name and there you can use EOS menu.
And by the way, you can always use the platform API here to use a different icon for Android and for
iOS if you want to.
And last but not least, also add on press to do something when that Putnis pressed.
And now this should render a nice looking menu button here on that screen.
And indeed we see it here on ISSUES and we also see it on Android.
Now, again, if you want a different icon on Android, that looks more like a typical Android icons.
The same is true for the taps.
By the way, you can use the platform API to render a different icon there to save some time.
I'll use the same icons.
So this is how we display the icon.
How do we now open to draw, though?
Well, for this we need access to the navigation prop and we don't have that access and the navigation
options like this.
But of course, we learned earlier that you can use the function form here where you then get your NAV
data.
You could say in that function you then have to return your configuration object.
So here you have to return an object in the end.
And now NAFT data has such a navigation prop.
So now here in on press we can say NAV data, dot navigation that will now be available, that's provided
by react navigation which executes dysfunctionally end.
And there you will have a toggle draw method.
You would also have open draw if you know you only want to open it, but toggle draw will open it if
it's closed and close it if it's open.
So here you have toggle draw and Datchet open the side menu.
So if we save that now, indeed the drawer opens.
We can work on the styling of the text we see here in the second, but this is how you can open that
drawer.
Now, before we take care about how this looks here, let's make sure we have to say on Favourite's
and of course, you can all to post a video and do it on your own here because the steps will be the
same as for the meals categories here.
It's a nice practice to offer, but after this short pause, you have to pause.
This video will do it together.
So where you successful, let's do it together and in the end, it's all just about copying this set
up here.
Tudy favorites screen, so I will copy this entire navigation options set up from the category's screen
to the favorite screen and replace my navigation options there with it.
Of course, that means that I have to rename this year to Favorite Screen and here change the title
back to your favorites.
But now I already have this dynamic navigation options creation function here where I have to target
raw call here.
The icon I want to use is the same.
We just have to make sure we import all the things we need to import and for that we can grab the imports
here from the categories screen as well, from the REACT Navigation Hattar Buttons package and from
our own header button.
Grab that and added here on the favorite screen.
Now, with that, if we saved, as this should be all now on the favorite screen.
We also have to draw and you can open it there as well.
We cannot just open it.
By the way, if we click on filters, we're all taken to the filter screen there.
We right now just don't have a way back.
But that's actually something we can all to fix right away.
Because on the filter screen, I simply also just want to have a drawer at the top.
So on the filter screen, I will also.
At my imports here, we had her buttons and on and then all the admin navigational options here, so
copied the navigation options from the favorite screen, this dynamic function, and added to the filters
screen and replaced the navigation options there, of course, therefore then changed this year back
to filters screen and changed the title back to filter meals or whatever you want here.
And with that, we should have a draw on the filter screen as well, and that allows us to go back to
our meals.
Now, a couple of things are missing, though.
For example, on the filter screen, the header looks totally different and therefore here on Android,
I can't even see my button because it's white.
The texture is not the text I want to display.
I also want to use different colors here, maybe different fonts.
So there is work left to do, but the basic draw functionality was added and as you see, again, with
very little effort.
So let's now take care about styling the draw and that filters screen.