1
00:00:02,280 --> 00:00:05,200
Let's start with styling the drawer on the filters screen,

2
00:00:05,220 --> 00:00:06,560
that's not difficult,

3
00:00:06,570 --> 00:00:11,080
it's something we did before. In the filters navigator here in the stack navigator,

4
00:00:11,100 --> 00:00:16,500
we in the end just have to set up the default navigation options we're also using for the fav navigator in

5
00:00:16,500 --> 00:00:24,090
our meals navigator. So we can just copy this second configuration object here and add this on our filters

6
00:00:24,090 --> 00:00:29,270
navigator here as a second argument to create stack navigator.

7
00:00:29,350 --> 00:00:31,870
Of course, we can remove that commented out line

8
00:00:31,870 --> 00:00:39,220
but with this simple change, we're making sure we're using the same navigation bar or action bar style

9
00:00:39,220 --> 00:00:40,450
here.

10
00:00:40,450 --> 00:00:45,580
So that's a simple but useful change, now for the drawer itself,

11
00:00:45,580 --> 00:00:48,770
what about this look here and the style of the drawer?

12
00:00:48,780 --> 00:00:55,690
Now for one, you can if you want control the entire drawer and change how items are laid out there and

13
00:00:55,990 --> 00:01:01,120
not use this default of having a list with ripple effect here on Android and a different effect on

14
00:01:01,120 --> 00:01:01,910
iOS

15
00:01:02,050 --> 00:01:05,680
but I think that is a nice default which I actually don't want to change.

16
00:01:05,710 --> 00:01:10,930
If you would want to, you can however replace this entire component which is rendered in here and attached,

17
00:01:10,930 --> 00:01:15,850
you find a link to the official docs where you can learn more about this in case you need to customize

18
00:01:15,850 --> 00:01:16,510
this.

19
00:01:16,780 --> 00:01:25,050
What I of course do want to change is the style of these items and the text which is displayed here.

20
00:01:25,060 --> 00:01:26,550
Now that's not too difficult,

21
00:01:26,590 --> 00:01:32,500
let's start with the text. As a text, as you can tell, it by default takes these identifiers here, meals

22
00:01:32,530 --> 00:01:34,550
fav filters.

23
00:01:34,570 --> 00:01:39,020
Now of course, it can do that but meals favs,

24
00:01:39,040 --> 00:01:42,250
that's not really a text we want to show to our users.

25
00:01:42,250 --> 00:01:47,540
Therefore, I want to override this and we can do this with the good old navigation options which just as

26
00:01:47,560 --> 00:01:53,920
before with the tabs where we also could control the label text, we have to set on our stack navigators,

27
00:01:54,160 --> 00:02:00,460
either when we're creating the stack navigator, there beside setting default navigation options for every

28
00:02:00,460 --> 00:02:05,690
screen in that navigator, we can set navigation options for the whole navigator itself which is then

29
00:02:05,700 --> 00:02:10,510
not for the screens in the navigator but for the navigator when it's used as a screen which is what

30
00:02:10,510 --> 00:02:11,500
we're doing here

31
00:02:11,740 --> 00:02:19,570
and then here we could set a drawer label and could set this to filters with a couple of exclamation marks

32
00:02:19,570 --> 00:02:22,100
just so that we see that this has an effect,

33
00:02:22,150 --> 00:02:23,720
now we see that here,

34
00:02:23,770 --> 00:02:27,220
so that's where we can set this, one option.

35
00:02:27,220 --> 00:02:32,800
Alternatively here when creating the drawer navigator, we can use that longer form where we set up

36
00:02:32,800 --> 00:02:38,260
a screen and where we then set up navigation options here and these are simply just alternatives where

37
00:02:38,590 --> 00:02:40,230
neither of the two is better or worse,

38
00:02:40,240 --> 00:02:41,830
you can use either of them

39
00:02:41,980 --> 00:02:47,840
and now here, I will set drawer label to meals

40
00:02:47,840 --> 00:02:52,760
let's say, that makes more sense to me than meals favs.

41
00:02:53,600 --> 00:02:58,670
So with that if I now open the drawer, I see meals and filters. For filters, I now didn't override the

42
00:02:58,670 --> 00:03:02,100
title because I'm fine with the default of taking my identifier

43
00:03:02,240 --> 00:03:04,580
but for meals, I did override it.

44
00:03:04,580 --> 00:03:08,420
Now what about the styling, the color and so on?

45
00:03:08,420 --> 00:03:15,020
Well that of course can be controlled as well. Well just as before with for example the tabs where we

46
00:03:15,020 --> 00:03:21,260
also could pass a second argument to create bottom tab navigator to control the layout and the styling

47
00:03:21,260 --> 00:03:22,130
of the tabs

48
00:03:22,130 --> 00:03:28,190
in general, we can do the same for the drawer. To create drawer navigator, we can pass a second argument

49
00:03:28,220 --> 00:03:31,320
which is an object configured to drawer navigator itself

50
00:03:31,550 --> 00:03:33,290
and there, we get a couple of options.

51
00:03:33,320 --> 00:03:37,880
Again, official docs gives you an exhaustive list of everything you can configure,

52
00:03:37,880 --> 00:03:42,980
for example you've got your content options which allows you to control the content in the drawer, so the

53
00:03:42,980 --> 00:03:47,730
drawer items to the end and there, you got a bunch of settings you can set up,

54
00:03:47,930 --> 00:03:53,960
for example you can set an active tint color which is basically to color an item has when it's active

55
00:03:54,090 --> 00:03:59,870
and there, we can set this to colors, accent color if we want to, instead of using that blue default and therefore

56
00:03:59,870 --> 00:04:00,320
now,

57
00:04:00,320 --> 00:04:05,170
this is orange and this is how easy it is to change this, this is all we need to do.

58
00:04:05,330 --> 00:04:08,980
Now if we also want to change the font that's used there,

59
00:04:09,080 --> 00:04:15,710
we can do that as well. Besides setting an active tint color here on the content options, we can set up a

60
00:04:15,710 --> 00:04:17,120
label style here

61
00:04:17,120 --> 00:04:22,010
and that takes a style object which will be applied to the underlying text component in the drawer, so

62
00:04:22,010 --> 00:04:24,810
we can set up things like text align there if we want to

63
00:04:24,950 --> 00:04:32,870
or in my case here, simply set up the font family and set this to open sans, maybe like this,

64
00:04:32,870 --> 00:04:36,550
not even the bold version. If we do that, we clearly see a difference.

65
00:04:36,550 --> 00:04:40,790
Now I'll set it back to bold actually because that's nicer but to see a difference,

66
00:04:40,880 --> 00:04:42,890
I think it was clear without bold.

67
00:04:42,920 --> 00:04:44,950
So now, we're using our own font here,

68
00:04:44,960 --> 00:04:47,570
the bold version and our own color

69
00:04:47,570 --> 00:04:48,530
and that's pretty neat

70
00:04:48,530 --> 00:04:54,130
I'd say, same of course also works on Android.

71
00:04:54,170 --> 00:04:58,460
This is how you can work with your drawer,

72
00:04:58,460 --> 00:05:01,700
how you can also style everything there

73
00:05:01,940 --> 00:05:07,850
and with that, you learned about the main navigation patterns you can add to your app with the help of

74
00:05:07,850 --> 00:05:09,270
React navigation.

75
00:05:09,290 --> 00:05:15,770
Now obviously as I emphasized multiple times throughout this module, there's a lot to configure, all these navigators

76
00:05:15,770 --> 00:05:20,990
have different navigation options and settings for the navigators themselves and therefore definitely

77
00:05:20,990 --> 00:05:26,060
check out the official docs and simply play around with the different settings you see there to experiment

78
00:05:26,060 --> 00:05:31,820
with what you can do. The things I showed here and the things we changed here are probably the common

79
00:05:31,820 --> 00:05:35,000
things you want to customize which is why I did show them here

80
00:05:35,090 --> 00:05:36,580
but again there is so much to do,

81
00:05:36,590 --> 00:05:40,950
definitely check out the official docs. For this app,

82
00:05:40,970 --> 00:05:43,960
the navigation part is basically done,

83
00:05:43,970 --> 00:05:46,410
there's not too much else to add,

84
00:05:46,430 --> 00:05:50,360
now it's time to revisit the general styling,

85
00:05:50,360 --> 00:05:56,600
for example make sure we are using the right fonts everywhere, also in the tabs and in the header and

86
00:05:56,660 --> 00:06:00,590
for example also for the text here which we're currently not

87
00:06:00,590 --> 00:06:06,050
and then also fill the rest of the app with some meat. For example the detail page here which still has

88
00:06:06,050 --> 00:06:11,810
some dummy content at the moment and also our filters page which also just has dummy content.

89
00:06:11,810 --> 00:06:14,290
That's what I'll do in the rest of this module,

90
00:06:14,330 --> 00:06:20,330
thereafter in the next module, we'll also make sure that we add more logic and that we for example can

91
00:06:20,330 --> 00:06:25,700
mark something as a favorite and can therefore then add it to the favorites tab which currently doesn't work.

92
00:06:25,910 --> 00:06:30,470
But for now, let's finish the styling and add the rest of the layout and content to this app.