1 00:00:02,350 --> 00:00:05,320 With that, we added tabs and yes, on favorites, 2 00:00:05,330 --> 00:00:06,970 we're not doing anything yet, 3 00:00:06,970 --> 00:00:08,370 that's something that we'll follow 4 00:00:08,380 --> 00:00:14,070 but we have tabs at least. Before we work on the favorites, 5 00:00:14,070 --> 00:00:19,620 let's work on the tabs a bit more because right now, we have tabs on Android that don't really look like 6 00:00:19,620 --> 00:00:25,080 we would expect Android tabs to look like, this looks more like iOS tabs if you ask me. 7 00:00:25,080 --> 00:00:27,840 Sure it works and you can keep that if that's the style you want, 8 00:00:27,840 --> 00:00:33,090 nothing wrong with that but it would be nicer to have a more Android specific look maybe and for 9 00:00:33,090 --> 00:00:39,300 that, we have a separate navigator we can create, though we have to install an extra package for this 10 00:00:39,390 --> 00:00:41,180 first of all, so let's do that. 11 00:00:41,860 --> 00:00:45,660 Let me quit that server here and run npm install --save 12 00:00:45,660 --> 00:00:53,490 and now that's react-navigation-material-bottom-tabs, 13 00:00:53,490 --> 00:00:58,920 by the way there also is react-navigation-material-top-tabs, I'll not dive into that in this course here 14 00:00:59,130 --> 00:01:04,170 but attached you also find a link where you can learn more about that alternative navigator. We'll use 15 00:01:04,170 --> 00:01:09,130 the material bottom tabs navigator here and install this package, this is how we start this. 16 00:01:09,150 --> 00:01:13,800 So let's wait for that installation to finish and thereafter, let's install one other package which we'll 17 00:01:13,890 --> 00:01:25,240 also need with npm install --save and that's react-native-paper. So let's install this 18 00:01:25,240 --> 00:01:26,680 as well 19 00:01:26,680 --> 00:01:28,720 and once this installation is finished, 20 00:01:28,810 --> 00:01:32,400 let's restart the expo server with npm 21 00:01:32,560 --> 00:01:37,940 start again because now we installed packages that help us render an alternative 22 00:01:37,970 --> 00:01:43,780 tab navigator and it's thankfully really straightforward to use and has pretty much the same or very 23 00:01:43,780 --> 00:01:48,730 similar configuration options than the bottom tab navigator, especially when it comes to how we set up 24 00:01:48,730 --> 00:01:54,730 icons and so on. Attached, you find all the docs for this alternative navigator and for that yet another 25 00:01:55,000 --> 00:01:56,160 alternative navigator 26 00:01:56,290 --> 00:02:05,080 I mentioned and let's use it by importing from this newly installed react-navigation-material-bottom-tabs 27 00:02:05,080 --> 00:02:12,770 navigator package here and from there we can import the create material bottom tab navigator 28 00:02:12,830 --> 00:02:14,310 function here. 29 00:02:14,450 --> 00:02:18,950 Now make sure you also have platform imports because we'll now need this because I only want to use this 30 00:02:18,950 --> 00:02:21,980 navigator instead of the create bottom tab navigator 31 00:02:21,980 --> 00:02:31,070 if we're on Android. So here we can check whether platform.os is equal to Android 32 00:02:31,070 --> 00:02:36,830 and in that case, I want to use that new create material bottom tab navigator function which I just 33 00:02:36,830 --> 00:02:37,680 imported, 34 00:02:37,740 --> 00:02:44,060 otherwise after the colon, we'll use the bottom tab navigator we set up in the previous lecture. 35 00:02:44,060 --> 00:02:49,700 So that of course leaves us with one question, how does the material bottom tab navigator work? How do we 36 00:02:49,700 --> 00:02:50,880 configure that? 37 00:02:50,990 --> 00:02:56,750 And the good news here is, generally it works the same as the bottom tab navigator. 38 00:02:56,750 --> 00:03:01,100 There are some details you can configure on the tab navigator itself, 39 00:03:01,100 --> 00:03:05,670 so for example which color to assume, when and so on that differs 40 00:03:05,690 --> 00:03:12,210 but regarding how you set up your tabs and match screens and set up icons, that's exactly the same 41 00:03:12,350 --> 00:03:18,650 and therefore we can actually take this entire screen config here, cut it from here and store this in 42 00:03:18,650 --> 00:03:24,350 a separate constant here which I'll name tabScreenConfig, you can name it whatever you want because 43 00:03:24,350 --> 00:03:25,990 that can be reused 44 00:03:26,240 --> 00:03:33,070 and now use the tabScreenConfig as a first argument both in the bottom tab navigator as well as in the 45 00:03:33,080 --> 00:03:40,010 material bottom tab navigator, just like this and that only leaves us with an alternative second argument 46 00:03:40,160 --> 00:03:45,290 which we pass to material bottom tab navigator and just bottom tab navigator. 47 00:03:45,290 --> 00:03:51,330 This second argument we pass, this object we pass as a second argument as you learned allows us to configure 48 00:03:51,330 --> 00:03:56,730 the tab navigator itself, for example set up tab bar options like the active tint color 49 00:03:56,990 --> 00:04:05,480 and that differs a bit because for the material bottom tab navigator, we don't set up tab bar options 50 00:04:05,480 --> 00:04:07,950 to configure our active tint color, 51 00:04:07,970 --> 00:04:14,530 instead we directly have an active tint color here in this object itself, on the bottom tab navigator, 52 00:04:14,570 --> 00:04:17,330 we had this in a nested object, in the tab bar options, 53 00:04:17,330 --> 00:04:18,950 we don't have that here. 54 00:04:18,950 --> 00:04:24,590 Instead here, we just set active tint color like that to colors accent color and there are other settings 55 00:04:24,590 --> 00:04:29,660 as well, for example you can set shifting to true and I'll show what this does and what false does in 56 00:04:29,660 --> 00:04:30,800 a second 57 00:04:30,890 --> 00:04:39,550 and with that, that's it for now. If we now save this, this will rebuild our project and reload it on the 58 00:04:39,550 --> 00:04:42,980 screen and we have the same tabs as before on 59 00:04:42,980 --> 00:04:43,550 iOS, 60 00:04:43,550 --> 00:04:45,140 that didn't change 61 00:04:45,140 --> 00:04:48,440 but on Android, we now have that more material 62 00:04:48,500 --> 00:04:53,200 look tab navigator here where we can now also switch like this 63 00:04:53,240 --> 00:04:59,270 and that's this shifting effect which you see here, that the tabs grow, that the label only exists on 64 00:04:59,270 --> 00:05:00,740 the tab which is active 65 00:05:00,860 --> 00:05:05,990 and if you set shifting to false here by the way, you simply don't have this effect, then you always 66 00:05:05,990 --> 00:05:08,390 have your labels there on Android as well. 67 00:05:08,390 --> 00:05:12,490 So that's now a look that looks a bit more like Android 68 00:05:12,650 --> 00:05:19,990 I would say and it's therefore a look which I want to have here and you can take this even further. 69 00:05:20,070 --> 00:05:23,690 Let's say we want to change the entire tab bar 70 00:05:23,830 --> 00:05:25,150 background color here 71 00:05:25,320 --> 00:05:30,800 depending on which tab is selected and have a nice ripple effect that changes this along the way. 72 00:05:31,110 --> 00:05:36,360 For this, we can go to our screen config and there to the navigation options and there, we have the 73 00:05:36,360 --> 00:05:37,780 tab bar icon. 74 00:05:37,800 --> 00:05:42,760 We can also set up a tab bar color here when this tab is selected 75 00:05:42,810 --> 00:05:51,160 so to say and for example set this to colors primary color and now important, this only has an effect 76 00:05:51,200 --> 00:05:58,850 if you do set shifting to true, otherwise this tab bar color prop which I'm setting up here will have 77 00:05:58,850 --> 00:06:05,390 no effect because only the shifting effect supports this and what we'll now have, the effect we'll now have 78 00:06:06,640 --> 00:06:12,810 is that if I save this, get the same look on iOS because there tab bar color has no effect 79 00:06:13,030 --> 00:06:17,770 but now you see, we really have our primary color as a background if meals are selected, 80 00:06:17,770 --> 00:06:21,980 if we select favorites, that changes to the other color. 81 00:06:22,030 --> 00:06:27,940 Now this change of course doesn't look that beautiful and therefore, we can simply change that by also 82 00:06:27,940 --> 00:06:30,950 giving our favorites screen its own tab bar color. 83 00:06:30,970 --> 00:06:36,430 So there we could say in the navigation options of the favorites screen next to tab bar icon, we set 84 00:06:36,900 --> 00:06:44,340 the tab bar color there to accent color and what we'll now have is a differently colored tab bar which switches 85 00:06:44,340 --> 00:06:51,250 from our primary color for meals here to this accent color for favorites with this nice ripple effect 86 00:06:51,250 --> 00:06:56,910 and of course the downside is that we don't see the icon then because accent color for tab bar color is 87 00:06:56,910 --> 00:06:57,740 not a good choice 88 00:06:57,750 --> 00:07:01,020 if our tint color is also an accent color. 89 00:07:01,020 --> 00:07:06,270 So if we use this effect, we might want to use white here as a tint color which we can always see against 90 00:07:06,270 --> 00:07:13,020 both the primary and the accent color and therefore here for the active tint color, we might want to use 91 00:07:13,020 --> 00:07:18,750 white instead of our accent color because white will work for both tabs then no matter if the tab bar is then 92 00:07:18,750 --> 00:07:24,540 colored in the primary color, that dark purple or in the accent color, that orange and therefore now 93 00:07:24,540 --> 00:07:26,640 you see we have this effect here 94 00:07:26,640 --> 00:07:32,610 and this nice ripple change to the other tab here for favorites. And I think that's a pretty sweet 95 00:07:32,730 --> 00:07:39,120 and easy to implement change that makes this look great on Android and certainly gives us a more distinctive 96 00:07:39,240 --> 00:07:45,660 Android-like look whilst keeping the default iOS look you would expect on that platform, it's really 97 00:07:45,660 --> 00:07:47,730 easy to implement as you can tell. 98 00:07:47,820 --> 00:07:52,700 Now a quick side note, if you don't want to use this shifting effect which I want to use here 99 00:07:52,710 --> 00:07:58,020 but if you wouldn't want to use it, then of course you might notice that the background color of your 100 00:07:58,020 --> 00:08:06,350 tabs on Android is not your primary color but instead, it's this a bit lighter purple, purple-bluish color. 101 00:08:06,360 --> 00:08:09,060 Now typically, you might want to change this too of course 102 00:08:09,060 --> 00:08:12,060 and as you see, tab bar color simply has no effect, 103 00:08:12,060 --> 00:08:14,080 this only works with shifting. 104 00:08:14,310 --> 00:08:21,330 Now if you want to change your background color for the entire tab bar in the non-shifting case, then 105 00:08:21,330 --> 00:08:29,570 all you have to do is here on the configuration of your tab navigator itself because it affects the 106 00:08:29,570 --> 00:08:30,410 entire tab bar 107 00:08:30,410 --> 00:08:36,980 now, you can set up a bar style property and that simply is a style object where you can for example 108 00:08:36,980 --> 00:08:43,240 set the background color to colors primary, like this and this simply changes the background color of 109 00:08:43,240 --> 00:08:47,180 the navigation bar for our Android bottom bar here. 110 00:08:47,180 --> 00:08:52,750 So that's how you can then change this if you don't want to use the shifting pattern here, 111 00:08:52,790 --> 00:08:53,860 the shifting look. 112 00:08:54,080 --> 00:08:56,000 I will turn on shifting again 113 00:08:56,010 --> 00:09:01,370 though, we'll set this to true again because I really like this different colored tab bar, I think that's 114 00:09:01,370 --> 00:09:07,100 a really nice look with that ripple effect that changes the color and that's how easy it is to implement 115 00:09:07,130 --> 00:09:08,660 different tab bars. 116 00:09:08,660 --> 00:09:13,820 Now again, there are a bunch of configuration options both for the tab bar itself as well for the navigation 117 00:09:13,820 --> 00:09:18,590 options of the screens you have inside of your tab bar and therefore you find you official docs attached 118 00:09:18,590 --> 00:09:22,490 where you can dive into every single option and explore them and play around with them.