So I want to start with some font fine tuning in my tabs here, in the header and also the text here
in all my recipes. I want to make sure that everywhere, I'm using the right font, my own custom fonts and
especially here, in the header, in the tabs, we're not really ensuring this yet.
Of course, it's relatively easy to ensure that though and
let's start with the header. The header is generally styled, like the background color, with our default
navigation options which we always set up on the stack navigator right,
the default navigation options here allow us to style the header and for example, give the header
in general a style and add a background color.
Now important to recognize here is that header style really only targets the box, the background so
to say, so the container in which the action items, the back button and this title sits, the title itself
can't be targeted with header style
but of course we get an alternative to that. Besides header style where we can style that header container,
we also got a header title style and that unsurprisingly targets the text component in which our header
title is presented and there we can style it like we can style text elements in React Native, for
example by adding a font family of open sans,
again I'm using the non-bold version so that we can quickly see the difference.
This clearly is not bold anymore I guess, it's pretty clear to see, especially here on iOS and now if
I set this to bold, I ensure that I use this right style on both
iOS and Android. Now for the back text here by the way,
we can also override that default which is the default system font by setting the header back title
style,
that's a separate setting we can set up here and there, we can also set the font family to let's say
open sans, not the bold version,
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
open sans here and use my own font. On Android of course, this does not have an effect because there
we have no back text. So that's one thing,
that's the header, for the tabs it's pretty similar. There we can go to our tab navigator we're creating,
like the material bottom tab
navigator
and this of course has our tabScreenConfig and then this second object where we configure the navigator
itself
and as always in React navigation, it's the second object where we can control the general look and
feel of the navigator-specific things, like in the case of the tab navigator, the tab
icon color, the bar color, the tint color or also the label style and indeed here on the tab bar
options for the bottom tab navigator,
we can add a label style
and again, this targets the text component which holds our label,
we can add a font family here of OpenSans-Bold so that we can clearly see the difference, if this reloads,
now this clearly is some bold text. This actually doesn't look too bad,
so I think we can keep this
but of course you could also set it to just open sans if you want a thinner version
but now I'd use our own font. Now for Android,
here the material bottom tab navigator also has some configuration options but actually, it doesn't have
a label style.
What you can do there instead is on the separate tabs you're loading, so on the navigation options of
the tabs you're loading, where you're also setting the tab bar icon and so on, there we can add tab bar label
here where we could set a label like meals, multiple explanation marks to override what we use as a
label
now both on iOS and also on Android and that can actually be a string like this but you can also set
this to a React component, to a text component namely and then in there, you can set up your label, meals
but of course now here, you can add style and add any styles you want.
So a little bit of a workaround since there is no other built-in way of styling this for the material bottom
tabs navigator but better than nothing.
So here, we can now set font family to OpenSans-Bold and if we do that, we of course also have
to make sure we now import the text component from React Native because otherwise we can't use it down
there
and now with that, we also get this on our iOS of course because we're sharing the config, we'll fix this
in a second but now, this is how we can set up our own style there as well but of course we now lost
the colour which is the downside of setting this manually here and since we only need this workaround
here, for Android, for the material bottom tabs, the easiest fix is to use the platform API and only set
this tab bar label to this text component if we're on Android because only then, we need this workaround
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
here, otherwise I'll just return the text meals and then the advantage of just returning a text here
simply is that our other settings which set the tint colour and the label style and so on will kick
in and will not be overridden. If we set our own text component, we'll disable all that default feature,
all these default features which are built into the bottom tab navigator.
The problem with the material bottom tab navigator is that it simply doesn't have all these default features
built-in,
so there we need to override this but we only need to do this for Android on the other hand.
Now we can copy that and do the exact same thing of course
here for favourites, render favourites as a text on iOS and of course also in the text component for Android
and with that, we now should have a style that works and this looks good. On iOS there,
we basically didn't change anything and on Android, there we now also have our own custom fonts.
So it's a little bit of a workaround which is required here
unfortunately when working with the bottom tabs navigator but also not too hard to implement
and with that, we're making sure that we're using our own custom font everywhere in the navigation related
features of our app.