So, how can we assign icons here?
How can we then also make sure that we use the color
we want to use?
Let's start with the color
before we add the icons. Just like the create stack navigate navigator function,
create bottom tab navigator
also takes a second argument. First argument is your configuration object where you configure the different
tabs and the screens they point at,
second argument is also an object where you can configure the navigator in general
and there, you have a couple of settings.
Again, official docs are the place to go to learn about every single setting here,
one of the more important settings here are the tab bar options.
This is another object and in there, you can in detail control how the tab bar appears, how it's styled.
You can set up an inactive tint color which is the color the tab has which is currently not active.
You can set up an active tint color and that's what we actually need here,
you can set up an active background color and an inactive background color as well of course to
also change the background of the tabs here if you want to
and therefore you have a lot of possibilities to really fine tune this to your requirements.
And here, I'll set an active tint color because that's all I need here
but of course feel free to play around with that and change background colors as well and change other
settings and I'll set my active tint color to a value for my colors constant which I import here,
I'll set it to colors accent color.
You haven't used it before but now I'll use it
and that's this orange color which we now have therefore and this is how easy we change the color
the active tab has. Now that's one thing,
please also note that this of course doesn't add an icon
and how would it,
we're not saying anything about the icon we want to add. Now for adding the icon, the straightforward
pattern I think is that you go to your route config here,
so to the config where you map screens to your tabs and you use the longer form where you add the screen
property and where you then also add navigation options.
By the way, you could also do this directly in the component of course by adding navigation options just
as we did it before,
however since meals here actually is a navigator, the only place of adding navigation options to that
is of course here
or also here, on create stack navigator.
There you could also set up a navigation options key here on the second argument, on this object
you pass as a second argument to create stack navigator where you configure the overall navigator to
give this navigator itself some navigation options because the navigation options we assign to the meals
navigator, so to the stack navigator are now the options which are taken into account by the tab navigator
which uses this meals navigator as a nested navigator and the navigation options we can set here include
a tab bar icon. We can add tab bar icon here and tab bar icon actually is a function. It's not a single
icon you point it but instead, this is a function. It's a function that receives some tab information
you could say, should go here,
that's the argument we get automatically because this function of course will be called by React navigation
and tab bar icon, this function here, has to return the icon which you want to render for this tab,
so in this case for the meals tab.
That means that I need to be able to use icons here and for this, we can import ionicons or any other
icon set you want to use from @expo/vector-icons.
Again, feel free to install this package,
normally it should be installed automatically when working with Expo but you can simply run npm install
--save @expo/vector-icons to be sure that you have it installed and you can use
any icon set you want but I always use the ionicons throughout this course, I'll stick to them.
With that, you can use ionicons as a component as you learned earlier in the course.
So here we can just return ionicons like this to render an ionicon icon and you can now use any
icon name you want here
and here I want to use ios-restaurant which is simply an icon
I found in the list of icons,
this list here which I also showed earlier, there
it's this ios-restaurant icon which I picked which I now use which I point at here.
This is the icon I want to render,
I'll give it a size of 25,
you can experiment with that
but I found 25 to look quite decent here
in the tab bar and a color and that's now important
of tabInfo.tintColor because the color we set here of course should be our tint color
we set up here.
Now of course, we could hard code this to color accent color here
but if we then change it down there, we have to remember that we also change it up there.
The good thing is and that's why this is a function, that React navigation calls this function for us
and gives us some vital information about how our tab bar is configured in that tab info object and
that for example includes the tint color we did set up, so that we can dynamically retrieve this here for
coloring the icon, so that if we change the color down there for the tab bar, it's automatically reflected
in our icons up there,
so it's a little convenience we have here which we can use here.
So with that, I'm rendering these icons for the meals and for the favorites, we can now use a similar approach,
use that longer form where we set up the screen here and then add navigation options here which will
be merged with any navigation options we set up on favorites screen 05:52.430 -- 05:57.400 but please note that of course you could absolutely also set up the navigation options here in
the favorites screen component therefore but to keep it all in one place,
I'll do it in my navigation set up here instead.
So these are my navigation options for this screen,
just as for this navigator, the meals navigator, we can of course set up navigation options for a screen,
that's what we did throughout the entire module after all
and there, I want to do essentially the same, so I'll just copy that, add it here to this navigation options
object and the only thing that differs here is the icon I want to use, here it's ios-star instead
of ios-restaurant.
And with that if we save this, I actually get an error because since I now use jsx in here, we need
to import React of course, that's how React works because jsx behind the scenes is transformed
to React create element as you know and therefore now after adding the React import
here in the MealsNavigator.js file. This works and now we have icons which automatically take our
tint color and that's how easy you can add icons.
Now besides setting the icon, you might want to set the label as well and you'll see that by default,
the label, meals and favorites is simply the identifier we assigned here when we set up our tab navigation
meals and favorites.
Now often, that makes sense but in case you want to have a different label, then in the navigation options
of your screen you load here into this tab,
you can set up a tab bar label property and in there, that is just a string where you could have
favorites with an exclamation mark and if you set this, you'll see that now you have favorites with an exclamation
mark here instead of just favorites as before.
So you can override this default label which is assumed which normally is your identifier,
if you want a different one, you can override it and of course, there are more options you can set and
attached, you find a link to the official docs for this navigator where you can learn all about the options
you can set up on navigator itself but then also on the navigation options of child screens, so of
nested screens or nested navigators inside of that tab navigator,
so what we're setting up here.