1 00:00:02,210 --> 00:00:07,310 Now I also want to use this font family for the header title. 2 00:00:07,310 --> 00:00:10,990 So here in my header component, on the header title, 3 00:00:11,000 --> 00:00:18,560 I also want to set a font family to open-sans-bold so that we use that there as well 4 00:00:20,300 --> 00:00:27,110 and for all other text in this application, I actually want to use my open sans font. 5 00:00:27,440 --> 00:00:35,480 So for example in the start games green here, we have our text, select a number and to use the normal 6 00:00:35,870 --> 00:00:45,080 open sans font, we can of course assign a style there and then use styles text for example and add this 7 00:00:45,350 --> 00:00:55,900 text style here at the bottom and then use font family, open-sans. Now that works but it of course 8 00:00:55,900 --> 00:00:57,450 has a downside. 9 00:00:57,700 --> 00:01:04,810 The downside is that you now manually need to add this font family to any text in your app where you 10 00:01:04,810 --> 00:01:10,980 want to use it and you have to add it directly on the text components, you can't add it to a view 11 00:01:11,140 --> 00:01:18,880 and for example set this on the screen here and rely on that being passed down to nested texts, 12 00:01:18,880 --> 00:01:21,010 unfortunately this does not work. 13 00:01:21,040 --> 00:01:28,120 So if I would go to the screen here and I set font family to open-sans-bold so that we can easily see 14 00:01:28,120 --> 00:01:32,340 if it works or not, you see this is clearly not bold, select a number is not bold. 15 00:01:32,530 --> 00:01:38,250 So passing it down like this, like it works in CSS does not work because that isn't CSS, it's 16 00:01:38,290 --> 00:01:45,130 Javascript and what you apply on an object is only applied on the element, on the component where this 17 00:01:45,190 --> 00:01:47,470 style object is attached to. 18 00:01:47,470 --> 00:01:52,930 So we would have to style this text individually but again, recreating that style over and over again 19 00:01:52,930 --> 00:01:56,760 in all the different places might not be what you want to do in the end. 20 00:01:57,600 --> 00:02:01,680 There are two workarounds or workaround always sounds a bit dirty, 21 00:02:01,680 --> 00:02:05,440 two ways of handling this in a more elegant way. 22 00:02:05,460 --> 00:02:12,210 One is that you create a separate component, maybe a body text component or just a text component, whatever 23 00:02:12,210 --> 00:02:13,920 you want to name it and I'll name it 24 00:02:13,920 --> 00:02:19,040 BodyText.js and it will be a very simple component, 25 00:02:19,040 --> 00:02:27,360 I just import React from React and I import text and stylesheet 26 00:02:30,250 --> 00:02:39,730 from React Native here and then the body text component here gets props and simply returns my text component 27 00:02:39,730 --> 00:02:41,650 here where I output props 28 00:02:41,650 --> 00:02:48,430 children in between the text tags so that we can pass content to body text by passing it between the 29 00:02:48,430 --> 00:02:52,500 opening and closing body text tag when we use this component. 30 00:02:52,510 --> 00:02:56,570 Then here I have my styles and there, I use Stylesheet.create 31 00:02:56,950 --> 00:03:01,390 and of course I export this component like this 32 00:03:01,390 --> 00:03:07,370 and now here in this stylesheet, I simply set one style which I apply here to this text, 33 00:03:08,650 --> 00:03:09,590 styles 34 00:03:09,820 --> 00:03:12,680 body or whatever you want to name it, have the body style here 35 00:03:12,910 --> 00:03:19,060 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 36 00:03:19,060 --> 00:03:20,110 really has an effect 37 00:03:20,170 --> 00:03:25,890 before I change it to the a bit harder to see, open sans, so open-sans-bold 38 00:03:25,900 --> 00:03:31,900 and now this is a very simple component, just a thin wrapper around the normal text but a thin wrapper 39 00:03:31,960 --> 00:03:34,360 that always sets this font family 40 00:03:34,420 --> 00:03:39,640 and this means that whenever we want to have text that uses this one family, maybe in all places in the 41 00:03:39,640 --> 00:03:46,780 app, instead of using the normal text component by React Native, we just use the body text component I 42 00:03:46,780 --> 00:03:52,920 just created. So I can import body text from components 43 00:03:53,890 --> 00:04:01,630 BodyText, importing that component and now I can simply replace the text component here with body text 44 00:04:01,630 --> 00:04:06,830 and if we do that and we save this, we of course see that now this will be bold, 45 00:04:07,090 --> 00:04:12,640 well if I would have used it on the right text, this is of course the user selected text, it's fine 46 00:04:12,640 --> 00:04:17,670 there too but I want to go here to select the number. 47 00:04:17,740 --> 00:04:23,800 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 48 00:04:23,800 --> 00:04:30,850 and give our body text the actually intended open sans look which is still not the default font but which 49 00:04:31,240 --> 00:04:33,370 can't immediately be seen that it's a different font. 50 00:04:33,400 --> 00:04:40,240 So this is option one of passing text style around or a font family around, 51 00:04:40,240 --> 00:04:45,250 you simply create your own text component which always has this font family and if you have multiple 52 00:04:45,250 --> 00:04:49,670 different font families, like a title and a heading, you create separate components. 53 00:04:49,790 --> 00:04:55,960 For example here, we have a title, well we maybe want to use that in other parts of the app too. So we 54 00:04:55,960 --> 00:05:02,500 can add a TitleText.js file which is basically what we have in body text, so I'll just copy that and move 55 00:05:02,500 --> 00:05:09,700 it into title text and then here, we have the title text name and here, it's title text and there, we use 56 00:05:09,910 --> 00:05:12,980 open-sans-bold and maybe for the title, 57 00:05:12,980 --> 00:05:19,510 also have a font size of 18 and now again, let's rename this to title maybe, makes more sense for the 58 00:05:19,530 --> 00:05:26,010 style prop but now again, we have a very thin wrapper around the text and in all places where we need 59 00:05:26,010 --> 00:05:34,110 the title, like in the header for example, we can get rid of this manual style assignment here in the 60 00:05:34,110 --> 00:05:43,340 header component and instead simply import our title text from the title text component and use that instead 61 00:05:43,340 --> 00:05:47,450 of text, get rid of this style assignment here, 62 00:05:47,690 --> 00:05:51,520 like that and do the same in the start game screen. There, 63 00:05:51,560 --> 00:05:54,750 this text can now be title text, 64 00:05:54,920 --> 00:05:57,860 all I need to do is I need to import it. So let me 65 00:05:57,860 --> 00:06:06,500 import title text from the components folder and there, from title text and we can now reuse this and 66 00:06:06,500 --> 00:06:12,980 just as we did it before with the card for example, if you want this to still be customizable so that 67 00:06:12,980 --> 00:06:18,740 we could set more on the title or override the font size or add a margin as we're doing it here, 68 00:06:18,770 --> 00:06:25,440 well then what you can always do is you can still add style here to the title text, refer to styles title, 69 00:06:25,530 --> 00:06:32,080 so to the title style I have set up down there in the start game screen and inside of the title text 70 00:06:32,080 --> 00:06:37,270 component, you just need to make sure you merge these incoming styles with the styles you are setting 71 00:06:37,270 --> 00:06:38,240 up there. 72 00:06:38,260 --> 00:06:47,680 So here, style now points at an object where you take all the values in the titles set up here and 73 00:06:47,680 --> 00:06:53,510 then merge them or override them with all the values set up in props style 74 00:06:53,620 --> 00:07:00,190 and now you have an adjustable text layer which sets these default styles but which can be overridden 75 00:07:00,190 --> 00:07:01,990 and adjusted to your requirements and 76 00:07:01,990 --> 00:07:06,330 therefore we have the same look as before but now with more usability. 77 00:07:06,340 --> 00:07:08,730 Now again, that's option number one. 78 00:07:08,740 --> 00:07:15,700 The alternative to that would be that for example in the constants folder, you have your default-styles.js 79 00:07:15,720 --> 00:07:18,070 file or whatever you want to name it and 80 00:07:18,310 --> 00:07:26,770 in there, you export a default stylesheet and you need to import this therefore, import 81 00:07:26,770 --> 00:07:29,530 stylesheet from React Native. 82 00:07:32,240 --> 00:07:43,590 You export your default Stylesheet.create object and there you set up like your body text for example, 83 00:07:44,070 --> 00:07:45,100 any name you want 84 00:07:45,150 --> 00:07:50,910 and here you set a font family, open sans and maybe just temporarily so that we can see whether this 85 00:07:50,910 --> 00:07:52,520 works, give it a red color. 86 00:07:52,680 --> 00:07:55,480 Now you can import this into different files, 87 00:07:55,680 --> 00:08:07,630 let's say in the game screen, there we can now import default styles from the constants folder and there, 88 00:08:07,670 --> 00:08:11,070 default styles and if we now want that 89 00:08:11,090 --> 00:08:12,930 default text style 90 00:08:13,160 --> 00:08:19,340 for example here on opponents guess, well then all we do is we set the style here, reach out to default 91 00:08:19,340 --> 00:08:23,440 styles and point at body text and you will see if we start a game 92 00:08:23,450 --> 00:08:25,200 now, this text will be red. 93 00:08:25,370 --> 00:08:29,360 So if we start this game, opponents guess is red. 94 00:08:29,390 --> 00:08:35,360 So this would be an alternative to having separate components, that you simply have a globally managed 95 00:08:35,360 --> 00:08:38,470 stylesheet which you import into different files 96 00:08:38,680 --> 00:08:44,760 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 97 00:08:44,780 --> 00:08:52,730 a font family of open-sans-bold and a font size of let's say 18 98 00:08:52,970 --> 00:08:55,320 and yes I do have the same set up in the title text, 99 00:08:55,340 --> 00:09:01,010 I'm just recreating it here to show both alternatives because now with the title being set up like this 100 00:09:01,010 --> 00:09:06,920 in the default stylesheet, we can now go to the game screen and hear not use the body text but use 101 00:09:07,250 --> 00:09:13,610 the title on the opponent's guess and the result of this is that if we now restart this game, we have 102 00:09:13,610 --> 00:09:14,630 that nice title here. 103 00:09:14,660 --> 00:09:19,670 So that's a valid alternative and it's up to you which one you prefer, separate components which you 104 00:09:19,670 --> 00:09:25,560 reuse instead of the text component or the text component with a globally managed style 105 00:09:25,760 --> 00:09:31,460 and as a side note, in that globally managed style, you're of course not restricted to managing font specific 106 00:09:31,460 --> 00:09:37,490 properties, you can manage any styles here. So any styles that you want to share across components can 107 00:09:37,490 --> 00:09:43,940 be managed in such a global stylesheet, that can be general layouting setups, that can be colors, that 108 00:09:43,940 --> 00:09:50,900 can be whatever you want but typically you always have to option between creating separate components 109 00:09:50,900 --> 00:09:55,790 like the card component which is a wrapper around the view or the body text or the title text which 110 00:09:55,790 --> 00:10:01,400 are also just wrappers that add some styling or managing this here in a global stylesheet, it's 111 00:10:01,400 --> 00:10:02,780 up to you what you prefer. 112 00:10:02,780 --> 00:10:07,910 I personally preferred the component-driven approach because in the end React is all about components 113 00:10:08,180 --> 00:10:13,280 and therefore I think we stay a bit closer to the default React world by doing it like this but it's 114 00:10:13,310 --> 00:10:20,430 also not a decision where you always have to follow path A or path B, you can mix and match these concepts, 115 00:10:20,540 --> 00:10:25,330 maybe you sometimes have something where a separate component doesn't really make a lot of sense, manage 116 00:10:25,350 --> 00:10:31,070 it in a global style then and in other cases, maybe a custom component makes more sense than having a 117 00:10:31,070 --> 00:10:32,180 global style setup.