1 00:00:02,230 --> 00:00:09,790 So I want to start with some font fine tuning in my tabs here, in the header and also the text here 2 00:00:09,970 --> 00:00:15,940 in all my recipes. I want to make sure that everywhere, I'm using the right font, my own custom fonts and 3 00:00:15,940 --> 00:00:19,930 especially here, in the header, in the tabs, we're not really ensuring this yet. 4 00:00:20,050 --> 00:00:22,970 Of course, it's relatively easy to ensure that though and 5 00:00:22,990 --> 00:00:31,040 let's start with the header. The header is generally styled, like the background color, with our default 6 00:00:31,040 --> 00:00:34,200 navigation options which we always set up on the stack navigator right, 7 00:00:34,210 --> 00:00:40,640 the default navigation options here allow us to style the header and for example, give the header 8 00:00:40,640 --> 00:00:43,390 in general a style and add a background color. 9 00:00:43,470 --> 00:00:50,750 Now important to recognize here is that header style really only targets the box, the background so 10 00:00:50,750 --> 00:00:59,540 to say, so the container in which the action items, the back button and this title sits, the title itself 11 00:00:59,660 --> 00:01:02,390 can't be targeted with header style 12 00:01:02,390 --> 00:01:08,420 but of course we get an alternative to that. Besides header style where we can style that header container, 13 00:01:08,420 --> 00:01:14,300 we also got a header title style and that unsurprisingly targets the text component in which our header 14 00:01:14,300 --> 00:01:20,420 title is presented and there we can style it like we can style text elements in React Native, for 15 00:01:20,420 --> 00:01:23,960 example by adding a font family of open sans, 16 00:01:23,960 --> 00:01:27,280 again I'm using the non-bold version so that we can quickly see the difference. 17 00:01:27,320 --> 00:01:35,560 This clearly is not bold anymore I guess, it's pretty clear to see, especially here on iOS and now if 18 00:01:35,560 --> 00:01:40,240 I set this to bold, I ensure that I use this right style on both 19 00:01:40,240 --> 00:01:46,280 iOS and Android. Now for the back text here by the way, 20 00:01:46,540 --> 00:01:53,380 we can also override that default which is the default system font by setting the header back title 21 00:01:53,380 --> 00:01:53,930 style, 22 00:01:53,950 --> 00:01:59,110 that's a separate setting we can set up here and there, we can also set the font family to let's say 23 00:01:59,140 --> 00:02:01,350 open sans, not the bold version, 24 00:02:01,360 --> 00:02:07,600 I don't want to have that in the bold style but I want to have it in my own font and this should now be 25 00:02:07,600 --> 00:02:13,470 open sans here and use my own font. On Android of course, this does not have an effect because there 26 00:02:13,470 --> 00:02:17,170 we have no back text. So that's one thing, 27 00:02:17,190 --> 00:02:24,660 that's the header, for the tabs it's pretty similar. There we can go to our tab navigator we're creating, 28 00:02:24,660 --> 00:02:25,940 like the material bottom tab 29 00:02:25,950 --> 00:02:26,700 navigator 30 00:02:26,880 --> 00:02:33,390 and this of course has our tabScreenConfig and then this second object where we configure the navigator 31 00:02:33,390 --> 00:02:34,440 itself 32 00:02:34,440 --> 00:02:38,880 and as always in React navigation, it's the second object where we can control the general look and 33 00:02:38,880 --> 00:02:44,270 feel of the navigator-specific things, like in the case of the tab navigator, the tab 34 00:02:44,280 --> 00:02:52,280 icon color, the bar color, the tint color or also the label style and indeed here on the tab bar 35 00:02:52,280 --> 00:02:56,330 options for the bottom tab navigator, 36 00:02:56,330 --> 00:02:59,000 we can add a label style 37 00:02:59,000 --> 00:03:03,010 and again, this targets the text component which holds our label, 38 00:03:03,140 --> 00:03:09,230 we can add a font family here of OpenSans-Bold so that we can clearly see the difference, if this reloads, 39 00:03:09,230 --> 00:03:12,800 now this clearly is some bold text. This actually doesn't look too bad, 40 00:03:12,800 --> 00:03:14,510 so I think we can keep this 41 00:03:14,720 --> 00:03:18,920 but of course you could also set it to just open sans if you want a thinner version 42 00:03:19,010 --> 00:03:22,320 but now I'd use our own font. Now for Android, 43 00:03:22,320 --> 00:03:29,600 here the material bottom tab navigator also has some configuration options but actually, it doesn't have 44 00:03:29,720 --> 00:03:31,910 a label style. 45 00:03:31,910 --> 00:03:38,690 What you can do there instead is on the separate tabs you're loading, so on the navigation options of 46 00:03:38,690 --> 00:03:47,170 the tabs you're loading, where you're also setting the tab bar icon and so on, there we can add tab bar label 47 00:03:47,170 --> 00:03:54,160 here where we could set a label like meals, multiple explanation marks to override what we use as a 48 00:03:54,160 --> 00:03:54,540 label 49 00:03:54,550 --> 00:04:00,490 now both on iOS and also on Android and that can actually be a string like this but you can also set 50 00:04:00,490 --> 00:04:07,450 this to a React component, to a text component namely and then in there, you can set up your label, meals 51 00:04:07,720 --> 00:04:11,490 but of course now here, you can add style and add any styles you want. 52 00:04:11,500 --> 00:04:16,120 So a little bit of a workaround since there is no other built-in way of styling this for the material bottom 53 00:04:16,120 --> 00:04:19,060 tabs navigator but better than nothing. 54 00:04:19,060 --> 00:04:25,060 So here, we can now set font family to OpenSans-Bold and if we do that, we of course also have 55 00:04:25,060 --> 00:04:29,950 to make sure we now import the text component from React Native because otherwise we can't use it down 56 00:04:29,950 --> 00:04:30,240 there 57 00:04:35,760 --> 00:04:40,980 and now with that, we also get this on our iOS of course because we're sharing the config, we'll fix this 58 00:04:40,980 --> 00:04:45,780 in a second but now, this is how we can set up our own style there as well but of course we now lost 59 00:04:45,810 --> 00:04:52,820 the colour which is the downside of setting this manually here and since we only need this workaround 60 00:04:52,820 --> 00:04:59,930 here, for Android, for the material bottom tabs, the easiest fix is to use the platform API and only set 61 00:04:59,930 --> 00:05:04,760 this tab bar label to this text component if we're on Android because only then, we need this workaround 62 00:05:04,760 --> 00:05:11,330 to set the font family. So I'll check if we're on Android and if that's the case, I'll return a text component 63 00:05:11,330 --> 00:05:18,650 here, otherwise I'll just return the text meals and then the advantage of just returning a text here 64 00:05:18,650 --> 00:05:24,710 simply is that our other settings which set the tint colour and the label style and so on will kick 65 00:05:24,710 --> 00:05:30,920 in and will not be overridden. If we set our own text component, we'll disable all that default feature, 66 00:05:30,920 --> 00:05:34,700 all these default features which are built into the bottom tab navigator. 67 00:05:34,700 --> 00:05:39,200 The problem with the material bottom tab navigator is that it simply doesn't have all these default features 68 00:05:39,200 --> 00:05:39,800 built-in, 69 00:05:39,860 --> 00:05:44,690 so there we need to override this but we only need to do this for Android on the other hand. 70 00:05:44,780 --> 00:05:48,290 Now we can copy that and do the exact same thing of course 71 00:05:48,290 --> 00:05:57,530 here for favourites, render favourites as a text on iOS and of course also in the text component for Android 72 00:05:57,590 --> 00:06:03,860 and with that, we now should have a style that works and this looks good. On iOS there, 73 00:06:03,920 --> 00:06:09,740 we basically didn't change anything and on Android, there we now also have our own custom fonts. 74 00:06:09,740 --> 00:06:12,520 So it's a little bit of a workaround which is required here 75 00:06:12,520 --> 00:06:19,130 unfortunately when working with the bottom tabs navigator but also not too hard to implement 76 00:06:19,130 --> 00:06:24,290 and with that, we're making sure that we're using our own custom font everywhere in the navigation related 77 00:06:24,800 --> 00:06:25,850 features of our app.