Fonts Q&A

[00:00:00]
>> They're media queries, so you can size up fonts for like tablet display that kind of thing.
>> So there aren't media queries, and the way you would size up fonts is that you would use the size of your screen. So for example there is, okay, so for example in this theme file, for example, if you did font sizes.

[00:00:25]
So something that I always do, font sizes for my apps is I will do font size 14, just 14 etcetera. So you would have really I think eight is kind of small waist smaller she would go to do 8 12, 14 16, etcetera. And then if you were on a larger device, what you could do, is you could import Dimensions from react native, and then you can use these dimensions.

[00:01:08]
So for example okay so you do const. Screen width is dimensions, get. well so you can use a this window screen. I think Windows, is better to be honest. And so so this is where you get the scale as well. So you got pixel density. And actually it comes with a font scale, which I think is a user defined property.

[00:01:38]
So you could use this to like choose the right font, that you would need for your particular platform. And then basically like in your theme objects, when you define it you could say okay, so depending on the properties of the user device, make these like different. So even though it's font size eight, so say that you're a tablet, it would be like eight times, 1.2, or something that.

[00:02:07]
So you scale it up in your theme file, and that's the benefit of having a theme file. Because you change it in one place, and then your whole app will scale automatically. And just in case you didn't know, if you ever need to reference, the screen size, there is a hook, which is called use window dimensions.

[00:02:38]
So this is from React Native, and this basically gives you the width and height of the window. So for example for some reason you need to know exactly how big the screen is, and then like size your content accordingly. You can use this as a hook, and this is equivalent of importing dimensions from React Native, and doing dimensions get Window.height, or dot width.

[00:03:04]
But the benefit is that it's a hook, which means that if, for example, your user rotates their phone, which means that the width and height become inverted, this would know about it in wood fire. And then would automatically update.
>> Is there any way to set global styles?

[00:03:21]
>> I'm glad you asked that. So what I do, almost always, [LAUGH] is basically in components. I would create a text component. So usually it would be like whatever the app is called text, so I don't know hypertext. And then this component would have the font style done, would have the font style applied.

[00:03:47]
So for example, you do react from react. And then export const app text. Cool and then this will return a text. And then this should act exactly like your normal text word. So just pass in the text children, so import text [COUGH]. Okay, and then this would have a font style applied to it, and then you can also add props.

[00:04:46]
You can have this, have the text props Select text, text base, okay, there we go. Text props I knew it was important. Okay, so if you give this the text props, right? Then it will like any of the properties that the text has like this could have as well, so you do children props, and then apply it to your text.

[00:05:28]
Right? And where the font comes in, so if I do, AppText type, so this will be text props, and that is how you can combine types, so you want to use all the types of text was going to have, anyway. And then some custom types. And then here you can set a font family.

[00:05:56]
And here, I would usually use an old one, so you could do bold, regular. Italic. Right? So the component where you use it, it doesn't need to know what exactly the font is called. Cuz really in a component you wanna know, okay, is it bold, is it regularly, is it italic?.

[00:06:20]
Or if you have two kinds of fonts, I think most apps have like two different fonts. So one will be for one sensor effect and it's pretty common. Then you could say like like which style it is, depending on your app. And then you could use the font family here, well you basically pass in a style.

[00:06:45]
Which so would need to extend the styles that you get. Start with this. Come on, okay, yeah so you would need to. Know I'd seen, cool. Yeah, so here because the user, you could set extra styles on this text, need to pass in style. But then as well as the style, you could say that if.

[00:07:31]
Like font family would be like. Fontstyle. React useMemo. And then you could get the actual font style based on the font family that user passed in, so if one family equals to bold. Turn. Fontfamily. Theme. My autocomplete isn't working all the time, it's very frustrating. So import theme.

[00:08:32]
Theme. So theme dot. BLANK_AUDIO]. Font can be bold. And then you could apply the font style here. So it depends here. Right, so effectually like this is on high level how it would work, and then usually I would add all the different properties that I would need. So for example, for the size, like, I would set the sizes that I support in the app.

[00:09:18]
So I can say you can only do eight, or 10, or 12, etcetera. So this kind of gives you an API for like all the valid things I would do, font family, size, color, like anything you need. So then in your app when you use text, rather than using a text element and style it, then you would use the app text.

[00:09:43]
And then basically, it would work the same way, you would pass in just the text and the properties. Yeah, and then a goal of for me for this text element, is that you would never need to pass a style into it. So the idea is that if you were to use your App Text, AppText All right, so then I could do font family bold, see that when I did font family, it gives me all the options which is super handy, I don't need to go to any other file.

[00:10:19]
And also size, identify some style, size. But the idea is here that you should never, ideally, you don't have to pass in any other styles for this text. So your one and only AppText will have all the different variants.