Now I also want to use this font family for the header title.
So here in my header component, on the header title,
I also want to set a font family to open-sans-bold so that we use that there as well
and for all other text in this application, I actually want to use my open sans font.
So for example in the start games green here, we have our text, select a number and to use the normal
open sans font, we can of course assign a style there and then use styles text for example and add this
text style here at the bottom and then use font family, open-sans. Now that works but it of course
has a downside.
The downside is that you now manually need to add this font family to any text in your app where you
want to use it and you have to add it directly on the text components, you can't add it to a view
and for example set this on the screen here and rely on that being passed down to nested texts,
unfortunately this does not work.
So if I would go to the screen here and I set font family to open-sans-bold so that we can easily see
if it works or not, you see this is clearly not bold, select a number is not bold.
So passing it down like this, like it works in CSS does not work because that isn't CSS, it's
Javascript and what you apply on an object is only applied on the element, on the component where this
style object is attached to.
So we would have to style this text individually but again, recreating that style over and over again
in all the different places might not be what you want to do in the end.
There are two workarounds or workaround always sounds a bit dirty,
two ways of handling this in a more elegant way.
One is that you create a separate component, maybe a body text component or just a text component, whatever
you want to name it and I'll name it
BodyText.js and it will be a very simple component,
I just import React from React and I import text and stylesheet
from React Native here and then the body text component here gets props and simply returns my text component
here where I output props
children in between the text tags so that we can pass content to body text by passing it between the
opening and closing body text tag when we use this component.
Then here I have my styles and there, I use Stylesheet.create
and of course I export this component like this
and now here in this stylesheet, I simply set one style which I apply here to this text,
styles
body or whatever you want to name it, have the body style here
and the one style I set is font family open sans and I'll use bold for now so that we can see that this
really has an effect
before I change it to the a bit harder to see, open sans, so open-sans-bold
and now this is a very simple component, just a thin wrapper around the normal text but a thin wrapper
that always sets this font family
and this means that whenever we want to have text that uses this one family, maybe in all places in the
app, instead of using the normal text component by React Native, we just use the body text component I
just created. So I can import body text from components
BodyText, importing that component and now I can simply replace the text component here with body text
and if we do that and we save this, we of course see that now this will be bold,
well if I would have used it on the right text, this is of course the user selected text, it's fine
there too but I want to go here to select the number.
So if I use it there, the body text, wrap this text, you see now this is bold and now we can also go back
and give our body text the actually intended open sans look which is still not the default font but which
can't immediately be seen that it's a different font.
So this is option one of passing text style around or a font family around,
you simply create your own text component which always has this font family and if you have multiple
different font families, like a title and a heading, you create separate components.
For example here, we have a title, well we maybe want to use that in other parts of the app too. So we
can add a TitleText.js file which is basically what we have in body text, so I'll just copy that and move
it into title text and then here, we have the title text name and here, it's title text and there, we use
open-sans-bold and maybe for the title,
also have a font size of 18 and now again, let's rename this to title maybe, makes more sense for the
style prop but now again, we have a very thin wrapper around the text and in all places where we need
the title, like in the header for example, we can get rid of this manual style assignment here in the
header component and instead simply import our title text from the title text component and use that instead
of text, get rid of this style assignment here,
like that and do the same in the start game screen. There,
this text can now be title text,
all I need to do is I need to import it. So let me
import title text from the components folder and there, from title text and we can now reuse this and
just as we did it before with the card for example, if you want this to still be customizable so that
we could set more on the title or override the font size or add a margin as we're doing it here,
well then what you can always do is you can still add style here to the title text, refer to styles title,
so to the title style I have set up down there in the start game screen and inside of the title text
component, you just need to make sure you merge these incoming styles with the styles you are setting
up there.
So here, style now points at an object where you take all the values in the titles set up here and
then merge them or override them with all the values set up in props style
and now you have an adjustable text layer which sets these default styles but which can be overridden
and adjusted to your requirements and
therefore we have the same look as before but now with more usability.
Now again, that's option number one.
The alternative to that would be that for example in the constants folder, you have your default-styles.js
file or whatever you want to name it and
in there, you export a default stylesheet and you need to import this therefore, import
stylesheet from React Native.
You export your default Stylesheet.create object and there you set up like your body text for example,
any name you want
and here you set a font family, open sans and maybe just temporarily so that we can see whether this
works, give it a red color.
Now you can import this into different files,
let's say in the game screen, there we can now import default styles from the constants folder and there,
default styles and if we now want that
default text style
for example here on opponents guess, well then all we do is we set the style here, reach out to default
styles and point at body text and you will see if we start a game
now, this text will be red.
So if we start this game, opponents guess is red.
So this would be an alternative to having separate components, that you simply have a globally managed
stylesheet which you import into different files
and now I don't really need a body text that is red but what I do want there is a title and there, I want to have
a font family of open-sans-bold and a font size of let's say 18
and yes I do have the same set up in the title text,
I'm just recreating it here to show both alternatives because now with the title being set up like this
in the default stylesheet, we can now go to the game screen and hear not use the body text but use
the title on the opponent's guess and the result of this is that if we now restart this game, we have
that nice title here.
So that's a valid alternative and it's up to you which one you prefer, separate components which you
reuse instead of the text component or the text component with a globally managed style
and as a side note, in that globally managed style, you're of course not restricted to managing font specific
properties, you can manage any styles here. So any styles that you want to share across components can
be managed in such a global stylesheet, that can be general layouting setups, that can be colors, that
can be whatever you want but typically you always have to option between creating separate components
like the card component which is a wrapper around the view or the body text or the title text which
are also just wrappers that add some styling or managing this here in a global stylesheet, it's
up to you what you prefer.
I personally preferred the component-driven approach because in the end React is all about components
and therefore I think we stay a bit closer to the default React world by doing it like this but it's
also not a decision where you always have to follow path A or path B, you can mix and match these concepts,
maybe you sometimes have something where a separate component doesn't really make a lot of sense, manage
it in a global style then and in other cases, maybe a custom component makes more sense than having a
global style setup.