Let's start with styling the drawer on the filters screen,
that's not difficult,
it's something we did before. In the filters navigator here in the stack navigator,
we in the end just have to set up the default navigation options we're also using for the fav navigator in
our meals navigator. So we can just copy this second configuration object here and add this on our filters
navigator here as a second argument to create stack navigator.
Of course, we can remove that commented out line
but with this simple change, we're making sure we're using the same navigation bar or action bar style
here.
So that's a simple but useful change, now for the drawer itself,
what about this look here and the style of the drawer?
Now for one, you can if you want control the entire drawer and change how items are laid out there and
not use this default of having a list with ripple effect here on Android and a different effect on
iOS
but I think that is a nice default which I actually don't want to change.
If you would want to, you can however replace this entire component which is rendered in here and attached,
you find a link to the official docs where you can learn more about this in case you need to customize
this.
What I of course do want to change is the style of these items and the text which is displayed here.
Now that's not too difficult,
let's start with the text. As a text, as you can tell, it by default takes these identifiers here, meals
fav filters.
Now of course, it can do that but meals favs,
that's not really a text we want to show to our users.
Therefore, I want to override this and we can do this with the good old navigation options which just as
before with the tabs where we also could control the label text, we have to set on our stack navigators,
either when we're creating the stack navigator, there beside setting default navigation options for every
screen in that navigator, we can set navigation options for the whole navigator itself which is then
not for the screens in the navigator but for the navigator when it's used as a screen which is what
we're doing here
and then here we could set a drawer label and could set this to filters with a couple of exclamation marks
just so that we see that this has an effect,
now we see that here,
so that's where we can set this, one option.
Alternatively here when creating the drawer navigator, we can use that longer form where we set up
a screen and where we then set up navigation options here and these are simply just alternatives where
neither of the two is better or worse,
you can use either of them
and now here, I will set drawer label to meals
let's say, that makes more sense to me than meals favs.
So with that if I now open the drawer, I see meals and filters. For filters, I now didn't override the
title because I'm fine with the default of taking my identifier
but for meals, I did override it.
Now what about the styling, the color and so on?
Well that of course can be controlled as well. Well just as before with for example the tabs where we
also could pass a second argument to create bottom tab navigator to control the layout and the styling
of the tabs
in general, we can do the same for the drawer. To create drawer navigator, we can pass a second argument
which is an object configured to drawer navigator itself
and there, we get a couple of options.
Again, official docs gives you an exhaustive list of everything you can configure,
for example you've got your content options which allows you to control the content in the drawer, so the
drawer items to the end and there, you got a bunch of settings you can set up,
for example you can set an active tint color which is basically to color an item has when it's active
and there, we can set this to colors, accent color if we want to, instead of using that blue default and therefore
now,
this is orange and this is how easy it is to change this, this is all we need to do.
Now if we also want to change the font that's used there,
we can do that as well. Besides setting an active tint color here on the content options, we can set up a
label style here
and that takes a style object which will be applied to the underlying text component in the drawer, so
we can set up things like text align there if we want to
or in my case here, simply set up the font family and set this to open sans, maybe like this,
not even the bold version. If we do that, we clearly see a difference.
Now I'll set it back to bold actually because that's nicer but to see a difference,
I think it was clear without bold.
So now, we're using our own font here,
the bold version and our own color
and that's pretty neat
I'd say, same of course also works on Android.
This is how you can work with your drawer,
how you can also style everything there
and with that, you learned about the main navigation patterns you can add to your app with the help of
React navigation.
Now obviously as I emphasized multiple times throughout this module, there's a lot to configure, all these navigators
have different navigation options and settings for the navigators themselves and therefore definitely
check out the official docs and simply play around with the different settings you see there to experiment
with what you can do. The things I showed here and the things we changed here are probably the common
things you want to customize which is why I did show them here
but again there is so much to do,
definitely check out the official docs. For this app,
the navigation part is basically done,
there's not too much else to add,
now it's time to revisit the general styling,
for example make sure we are using the right fonts everywhere, also in the tabs and in the header and
for example also for the text here which we're currently not
and then also fill the rest of the app with some meat. For example the detail page here which still has
some dummy content at the moment and also our filters page which also just has dummy content.
That's what I'll do in the rest of this module,
thereafter in the next module, we'll also make sure that we add more logic and that we for example can
mark something as a favorite and can therefore then add it to the favorites tab which currently doesn't work.
But for now, let's finish the styling and add the rest of the layout and content to this app.