With that, we added tabs and yes, on favorites,
we're not doing anything yet,
that's something that we'll follow
but we have tabs at least. Before we work on the favorites,
let's work on the tabs a bit more because right now, we have tabs on Android that don't really look like
we would expect Android tabs to look like, this looks more like iOS tabs if you ask me.
Sure it works and you can keep that if that's the style you want,
nothing wrong with that but it would be nicer to have a more Android specific look maybe and for
that, we have a separate navigator we can create, though we have to install an extra package for this
first of all, so let's do that.
Let me quit that server here and run npm install --save
and now that's react-navigation-material-bottom-tabs,
by the way there also is react-navigation-material-top-tabs, I'll not dive into that in this course here
but attached you also find a link where you can learn more about that alternative navigator. We'll use
the material bottom tabs navigator here and install this package, this is how we start this.
So let's wait for that installation to finish and thereafter, let's install one other package which we'll
also need with npm install --save and that's react-native-paper. So let's install this
as well
and once this installation is finished,
let's restart the expo server with npm
start again because now we installed packages that help us render an alternative
tab navigator and it's thankfully really straightforward to use and has pretty much the same or very
similar configuration options than the bottom tab navigator, especially when it comes to how we set up
icons and so on. Attached, you find all the docs for this alternative navigator and for that yet another
alternative navigator
I mentioned and let's use it by importing from this newly installed react-navigation-material-bottom-tabs
navigator package here and from there we can import the create material bottom tab navigator
function here.
Now make sure you also have platform imports because we'll now need this because I only want to use this
navigator instead of the create bottom tab navigator
if we're on Android. So here we can check whether platform.os is equal to Android
and in that case, I want to use that new create material bottom tab navigator function which I just
imported,
otherwise after the colon, we'll use the bottom tab navigator we set up in the previous lecture.
So that of course leaves us with one question, how does the material bottom tab navigator work? How do we
configure that?
And the good news here is, generally it works the same as the bottom tab navigator.
There are some details you can configure on the tab navigator itself,
so for example which color to assume, when and so on that differs
but regarding how you set up your tabs and match screens and set up icons, that's exactly the same
and therefore we can actually take this entire screen config here, cut it from here and store this in
a separate constant here which I'll name tabScreenConfig, you can name it whatever you want because
that can be reused
and now use the tabScreenConfig as a first argument both in the bottom tab navigator as well as in the
material bottom tab navigator, just like this and that only leaves us with an alternative second argument
which we pass to material bottom tab navigator and just bottom tab navigator.
This second argument we pass, this object we pass as a second argument as you learned allows us to configure
the tab navigator itself, for example set up tab bar options like the active tint color
and that differs a bit because for the material bottom tab navigator, we don't set up tab bar options
to configure our active tint color,
instead we directly have an active tint color here in this object itself, on the bottom tab navigator,
we had this in a nested object, in the tab bar options,
we don't have that here.
Instead here, we just set active tint color like that to colors accent color and there are other settings
as well, for example you can set shifting to true and I'll show what this does and what false does in
a second
and with that, that's it for now. If we now save this, this will rebuild our project and reload it on the
screen and we have the same tabs as before on
iOS,
that didn't change
but on Android, we now have that more material
look tab navigator here where we can now also switch like this
and that's this shifting effect which you see here, that the tabs grow, that the label only exists on
the tab which is active
and if you set shifting to false here by the way, you simply don't have this effect, then you always
have your labels there on Android as well.
So that's now a look that looks a bit more like Android
I would say and it's therefore a look which I want to have here and you can take this even further.
Let's say we want to change the entire tab bar
background color here
depending on which tab is selected and have a nice ripple effect that changes this along the way.
For this, we can go to our screen config and there to the navigation options and there, we have the
tab bar icon.
We can also set up a tab bar color here when this tab is selected
so to say and for example set this to colors primary color and now important, this only has an effect
if you do set shifting to true, otherwise this tab bar color prop which I'm setting up here will have
no effect because only the shifting effect supports this and what we'll now have, the effect we'll now have
is that if I save this, get the same look on iOS because there tab bar color has no effect
but now you see, we really have our primary color as a background if meals are selected,
if we select favorites, that changes to the other color.
Now this change of course doesn't look that beautiful and therefore, we can simply change that by also
giving our favorites screen its own tab bar color.
So there we could say in the navigation options of the favorites screen next to tab bar icon, we set
the tab bar color there to accent color and what we'll now have is a differently colored tab bar which switches
from our primary color for meals here to this accent color for favorites with this nice ripple effect
and of course the downside is that we don't see the icon then because accent color for tab bar color is
not a good choice
if our tint color is also an accent color.
So if we use this effect, we might want to use white here as a tint color which we can always see against
both the primary and the accent color and therefore here for the active tint color, we might want to use
white instead of our accent color because white will work for both tabs then no matter if the tab bar is then
colored in the primary color, that dark purple or in the accent color, that orange and therefore now
you see we have this effect here
and this nice ripple change to the other tab here for favorites. And I think that's a pretty sweet
and easy to implement change that makes this look great on Android and certainly gives us a more distinctive
Android-like look whilst keeping the default iOS look you would expect on that platform, it's really
easy to implement as you can tell.
Now a quick side note, if you don't want to use this shifting effect which I want to use here
but if you wouldn't want to use it, then of course you might notice that the background color of your
tabs on Android is not your primary color but instead, it's this a bit lighter purple, purple-bluish color.
Now typically, you might want to change this too of course
and as you see, tab bar color simply has no effect,
this only works with shifting.
Now if you want to change your background color for the entire tab bar in the non-shifting case, then
all you have to do is here on the configuration of your tab navigator itself because it affects the
entire tab bar
now, you can set up a bar style property and that simply is a style object where you can for example
set the background color to colors primary, like this and this simply changes the background color of
the navigation bar for our Android bottom bar here.
So that's how you can then change this if you don't want to use the shifting pattern here,
the shifting look.
I will turn on shifting again
though, we'll set this to true again because I really like this different colored tab bar, I think that's
a really nice look with that ripple effect that changes the color and that's how easy it is to implement
different tab bars.
Now again, there are a bunch of configuration options both for the tab bar itself as well for the navigation
options of the screens you have inside of your tab bar and therefore you find you official docs attached
where you can dive into every single option and explore them and play around with them.