1
00:00:02,270 --> 00:00:05,450
So, how can we assign icons here?

2
00:00:05,450 --> 00:00:09,580
How can we then also make sure that we use the color

3
00:00:09,590 --> 00:00:10,990
we want to use?

4
00:00:11,090 --> 00:00:12,760
Let's start with the color

5
00:00:12,760 --> 00:00:17,920
before we add the icons. Just like the create stack navigate navigator function,

6
00:00:18,020 --> 00:00:20,290
create bottom tab navigator

7
00:00:20,290 --> 00:00:25,250
also takes a second argument. First argument is your configuration object where you configure the different

8
00:00:25,280 --> 00:00:27,370
tabs and the screens they point at,

9
00:00:27,410 --> 00:00:33,600
second argument is also an object where you can configure the navigator in general

10
00:00:33,610 --> 00:00:35,290
and there, you have a couple of settings.

11
00:00:35,330 --> 00:00:40,120
Again, official docs are the place to go to learn about every single setting here,

12
00:00:40,310 --> 00:00:45,340
one of the more important settings here are the tab bar options.

13
00:00:45,380 --> 00:00:52,970
This is another object and in there, you can in detail control how the tab bar appears, how it's styled.

14
00:00:53,090 --> 00:00:59,180
You can set up an inactive tint color which is the color the tab has which is currently not active.

15
00:00:59,180 --> 00:01:03,160
You can set up an active tint color and that's what we actually need here,

16
00:01:03,170 --> 00:01:08,600
you can set up an active background color and an inactive background color as well of course to

17
00:01:08,600 --> 00:01:11,720
also change the background of the tabs here if you want to

18
00:01:11,930 --> 00:01:16,540
and therefore you have a lot of possibilities to really fine tune this to your requirements.

19
00:01:16,660 --> 00:01:20,000
And here, I'll set an active tint color because that's all I need here

20
00:01:20,000 --> 00:01:25,910
but of course feel free to play around with that and change background colors as well and change other

21
00:01:25,910 --> 00:01:32,330
settings and I'll set my active tint color to a value for my colors constant which I import here,

22
00:01:32,330 --> 00:01:35,390
I'll set it to colors accent color.

23
00:01:35,410 --> 00:01:37,300
You haven't used it before but now I'll use it

24
00:01:37,370 --> 00:01:42,290
and that's this orange color which we now have therefore and this is how easy we change the color

25
00:01:42,290 --> 00:01:45,900
the active tab has. Now that's one thing,

26
00:01:46,110 --> 00:01:50,280
please also note that this of course doesn't add an icon

27
00:01:50,280 --> 00:01:51,020
and how would it,

28
00:01:51,030 --> 00:01:57,300
we're not saying anything about the icon we want to add. Now for adding the icon, the straightforward

29
00:01:57,480 --> 00:02:01,860
pattern I think is that you go to your route config here,

30
00:02:01,860 --> 00:02:07,710
so to the config where you map screens to your tabs and you use the longer form where you add the screen

31
00:02:07,710 --> 00:02:12,000
property and where you then also add navigation options.

32
00:02:12,000 --> 00:02:17,370
By the way, you could also do this directly in the component of course by adding navigation options just

33
00:02:17,400 --> 00:02:19,700
as we did it before,

34
00:02:19,710 --> 00:02:25,080
however since meals here actually is a navigator, the only place of adding navigation options to that

35
00:02:25,110 --> 00:02:26,560
is of course here

36
00:02:26,700 --> 00:02:31,330
or also here, on create stack navigator.

37
00:02:31,560 --> 00:02:37,290
There you could also set up a navigation options key here on the second argument, on this object

38
00:02:37,320 --> 00:02:42,390
you pass as a second argument to create stack navigator where you configure the overall navigator to

39
00:02:42,390 --> 00:02:48,180
give this navigator itself some navigation options because the navigation options we assign to the meals

40
00:02:48,180 --> 00:02:54,060
navigator, so to the stack navigator are now the options which are taken into account by the tab navigator

41
00:02:54,270 --> 00:03:00,810
which uses this meals navigator as a nested navigator and the navigation options we can set here include

42
00:03:01,140 --> 00:03:10,680
a tab bar icon. We can add tab bar icon here and tab bar icon actually is a function. It's not a single

43
00:03:10,770 --> 00:03:18,900
icon you point it but instead, this is a function. It's a function that receives some tab information

44
00:03:18,990 --> 00:03:23,300
you could say, should go here,

45
00:03:23,330 --> 00:03:28,490
that's the argument we get automatically because this function of course will be called by React navigation

46
00:03:28,970 --> 00:03:34,340
and tab bar icon, this function here, has to return the icon which you want to render for this tab,

47
00:03:34,340 --> 00:03:35,720
so in this case for the meals tab.

48
00:03:39,680 --> 00:03:46,360
That means that I need to be able to use icons here and for this, we can import ionicons or any other

49
00:03:46,370 --> 00:03:50,680
icon set you want to use from @expo/vector-icons.

50
00:03:50,680 --> 00:03:52,440
Again, feel free to install this package,

51
00:03:52,450 --> 00:03:57,400
normally it should be installed automatically when working with Expo but you can simply run npm install

52
00:03:57,400 --> 00:04:03,040
--save @expo/vector-icons to be sure that you have it installed and you can use

53
00:04:03,100 --> 00:04:07,980
any icon set you want but I always use the ionicons throughout this course, I'll stick to them.

54
00:04:08,230 --> 00:04:12,340
With that, you can use ionicons as a component as you learned earlier in the course.

55
00:04:12,340 --> 00:04:18,580
So here we can just return ionicons like this to render an ionicon icon and you can now use any

56
00:04:18,580 --> 00:04:20,090
icon name you want here

57
00:04:20,170 --> 00:04:24,090
and here I want to use ios-restaurant which is simply an icon

58
00:04:24,100 --> 00:04:29,090
I found in the list of icons,

59
00:04:29,320 --> 00:04:32,750
this list here which I also showed earlier, there

60
00:04:32,870 --> 00:04:37,320
it's this ios-restaurant icon which I picked which I now use which I point at here.

61
00:04:37,450 --> 00:04:40,120
This is the icon I want to render,

62
00:04:40,120 --> 00:04:42,610
I'll give it a size of 25,

63
00:04:42,610 --> 00:04:43,990
you can experiment with that

64
00:04:43,990 --> 00:04:46,890
but I found 25 to look quite decent here

65
00:04:46,900 --> 00:04:50,200
in the tab bar and a color and that's now important

66
00:04:50,350 --> 00:04:57,610
of tabInfo.tintColor because the color we set here of course should be our tint color

67
00:04:57,610 --> 00:04:58,810
we set up here.

68
00:04:58,810 --> 00:05:01,980
Now of course, we could hard code this to color accent color here

69
00:05:01,990 --> 00:05:06,030
but if we then change it down there, we have to remember that we also change it up there.

70
00:05:06,040 --> 00:05:11,440
The good thing is and that's why this is a function, that React navigation calls this function for us

71
00:05:11,440 --> 00:05:17,830
and gives us some vital information about how our tab bar is configured in that tab info object and

72
00:05:17,830 --> 00:05:23,350
that for example includes the tint color we did set up, so that we can dynamically retrieve this here for

73
00:05:23,350 --> 00:05:29,440
coloring the icon, so that if we change the color down there for the tab bar, it's automatically reflected

74
00:05:29,470 --> 00:05:30,910
in our icons up there,

75
00:05:30,940 --> 00:05:35,810
so it's a little convenience we have here which we can use here.

76
00:05:35,810 --> 00:05:42,740
So with that, I'm rendering these icons for the meals and for the favorites, we can now use a similar approach,

77
00:05:42,770 --> 00:05:48,200
use that longer form where we set up the screen here and then add navigation options here which will

78
00:05:48,200 --> 00:05:52,400
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

79
00:05:57,400 --> 00:06:00,920
the favorites screen component therefore but to keep it all in one place,

80
00:06:00,980 --> 00:06:03,620
I'll do it in my navigation set up here instead.

81
00:06:03,620 --> 00:06:06,150
So these are my navigation options for this screen,

82
00:06:06,170 --> 00:06:11,420
just as for this navigator, the meals navigator, we can of course set up navigation options for a screen,

83
00:06:11,480 --> 00:06:14,280
that's what we did throughout the entire module after all

84
00:06:14,330 --> 00:06:19,880
and there, I want to do essentially the same, so I'll just copy that, add it here to this navigation options

85
00:06:19,940 --> 00:06:25,790
object and the only thing that differs here is the icon I want to use, here it's ios-star instead

86
00:06:25,790 --> 00:06:30,130
of ios-restaurant.

87
00:06:30,290 --> 00:06:36,170
And with that if we save this, I actually get an error because since I now use jsx in here, we need

88
00:06:36,170 --> 00:06:42,230
to import React of course, that's how React works because jsx behind the scenes is transformed

89
00:06:42,260 --> 00:06:48,510
to React create element as you know and therefore now after adding the React import

90
00:06:48,530 --> 00:06:54,680
here in the MealsNavigator.js file. This works and now we have icons which automatically take our

91
00:06:54,680 --> 00:06:58,180
tint color and that's how easy you can add icons.

92
00:06:58,270 --> 00:07:03,740
Now besides setting the icon, you might want to set the label as well and you'll see that by default,

93
00:07:03,860 --> 00:07:10,580
the label, meals and favorites is simply the identifier we assigned here when we set up our tab navigation

94
00:07:10,610 --> 00:07:12,050
meals and favorites.

95
00:07:12,050 --> 00:07:17,540
Now often, that makes sense but in case you want to have a different label, then in the navigation options

96
00:07:17,630 --> 00:07:20,780
of your screen you load here into this tab,

97
00:07:20,780 --> 00:07:28,910
you can set up a tab bar label property and in there, that is just a string where you could have

98
00:07:28,910 --> 00:07:34,310
favorites with an exclamation mark and if you set this, you'll see that now you have favorites with an exclamation

99
00:07:34,310 --> 00:07:37,040
mark here instead of just favorites as before.

100
00:07:37,040 --> 00:07:42,500
So you can override this default label which is assumed which normally is your identifier,

101
00:07:42,500 --> 00:07:47,510
if you want a different one, you can override it and of course, there are more options you can set and

102
00:07:47,510 --> 00:07:52,700
attached, you find a link to the official docs for this navigator where you can learn all about the options

103
00:07:52,700 --> 00:08:00,740
you can set up on navigator itself but then also on the navigation options of child screens, so of

104
00:08:00,740 --> 00:08:04,850
nested screens or nested navigators inside of that tab navigator,

105
00:08:04,850 --> 00:08:05,870
so what we're setting up here.