1
00:00:02,320 --> 00:00:08,220
So now with that image added and now that we're already working on the game over screen here,

2
00:00:08,230 --> 00:00:11,280
let's fine tune this text we see here at the bottom,

3
00:00:11,280 --> 00:00:15,640
let's make it a little bit nicer, a little bit more beautiful

4
00:00:15,760 --> 00:00:21,400
and in addition before I do that, I'll actually switch back from using the network image to the local

5
00:00:21,400 --> 00:00:24,850
image but that is of course totally up to you, what you prefer there.

6
00:00:24,850 --> 00:00:29,890
So I want to work on the text here and instead of just having this kind of tabular text here which just

7
00:00:29,930 --> 00:00:32,560
outputs some information in a boring way,

8
00:00:32,560 --> 00:00:37,460
why don't we present this in a nicer wait? In detail,

9
00:00:37,600 --> 00:00:43,030
I think it would be nicer if we had some human readable text here, so a real sentence which we can read.

10
00:00:43,400 --> 00:00:52,720
So there we could say your phone needed, and then here we have the number of rounds, rounds to guess the number

11
00:00:52,800 --> 00:00:55,140
and that here would enter the number.

12
00:00:55,240 --> 00:00:59,810
So the number of course is props user number and again, you can get rid of this line now

13
00:00:59,950 --> 00:01:05,260
but I don't just want to output props user number like this, instead I want to highlight it, I want to

14
00:01:05,260 --> 00:01:11,680
give it a special color that's different from the other color here and the same here for the

15
00:01:11,690 --> 00:01:19,480
rounds, so the props rounds number of value, would be nice if that would also be colored differently. Now

16
00:01:19,480 --> 00:01:28,150
to color that differently, we can actually wrap this into another text node here. So you can have text

17
00:01:28,150 --> 00:01:32,920
nodes, text components inside of text, inside of other text components,

18
00:01:32,920 --> 00:01:36,820
so that is possible, just like that.

19
00:01:36,820 --> 00:01:38,970
Now that's really important to understand,

20
00:01:38,970 --> 00:01:45,790
you can nest text components into other text components and keep in mind that body text in the end is

21
00:01:45,790 --> 00:01:51,080
just a text component, body text is a component that simply returns the build-in text component,

22
00:01:51,160 --> 00:01:57,100
so anything we enter between body text is the same as if we would enter it between the built-in text

23
00:01:57,100 --> 00:02:03,430
components and therefore we can have nested text in there and we can theoretically also have

24
00:02:03,430 --> 00:02:08,800
nested views in there but there are some caveats to that and therefore if you don't absolutely have

25
00:02:08,800 --> 00:02:14,370
a strong reason for why you would need a view in there, you shouldn't really nest views into text and

26
00:02:14,370 --> 00:02:20,020
there rarely is a reason to do that. Text inside of text however can make a lot of sense because it allows

27
00:02:20,020 --> 00:02:25,310
you to style parts of a text differently than the rest of the text.

28
00:02:25,360 --> 00:02:32,970
So here for example, I want to add style with styles.highlight and the same here for the second text

29
00:02:33,210 --> 00:02:40,170
to highlight this part of the text and now of course we can add highlight down there in our style

30
00:02:40,170 --> 00:02:48,510
sheet in the game over screen, highlight and there for example give this a color where we use colors and

31
00:02:48,530 --> 00:02:55,010
for that, we need to add the import where we import colors from constants/Colors and then maybe use our

32
00:02:55,010 --> 00:03:02,420
primary color there, so Colors.primary. If we do that, what you'll see is that now, this is highlighted.

33
00:03:03,440 --> 00:03:09,350
Now also something interesting, if I temporarily go to the body text and I change this to open sans

34
00:03:09,350 --> 00:03:10,210
bold here,

35
00:03:10,490 --> 00:03:17,150
so I use the bold version, you'll see that even that highlighted text is still bold, might be a bit hard

36
00:03:17,150 --> 00:03:23,570
to see but this is actually bold and that is very interesting because earlier in the course, I mentioned

37
00:03:23,870 --> 00:03:30,860
that your styles wouldn't inherit, so that if you for example in the game over screen set a font family

38
00:03:30,860 --> 00:03:39,170
here on your screen style which is applied to the view that wraps everything, that font family would not

39
00:03:39,470 --> 00:03:42,970
be passed down to components nested inside of that view.

40
00:03:42,980 --> 00:03:48,490
So just because you set a style here on this view doesn't mean that all other views in there or all other

41
00:03:48,490 --> 00:03:54,080
texts in there, whatever it is, get the same styles. The styles you apply to a component always are

42
00:03:54,080 --> 00:04:00,780
just applied to that component and not to nested components and yet it's different for the text.

43
00:04:00,780 --> 00:04:09,050
There, this text here, the highlighted text which is nested inside of the body text also gets this bold

44
00:04:09,260 --> 00:04:10,160
family

45
00:04:10,250 --> 00:04:16,550
if we change it on the body text and that is simply an important difference React Native has. For text

46
00:04:16,580 --> 00:04:17,720
components,

47
00:04:17,720 --> 00:04:23,900
if you add style there, the style is passed down to nested text components,

48
00:04:23,900 --> 00:04:29,750
that's one exception React Native has. Text inside of text receives the style defined on the outer

49
00:04:29,750 --> 00:04:37,610
text, so any style you set up on the body text here is automatically received by the nested text components.

50
00:04:37,680 --> 00:04:43,800
There is one additional important behavior regarding the text component in React Native and that is

51
00:04:43,800 --> 00:04:47,370
that it's not using flexbox. The view uses flexbox,

52
00:04:47,370 --> 00:04:52,110
the text component of course doesn't and I mentioned this before, that the view component uses flexbox

53
00:04:52,320 --> 00:05:00,180
not text or other components but text uses its own positioning system where it automatically wraps itself

54
00:05:00,210 --> 00:05:05,580
into a new line if it doesn't fit into one line and to demonstrate this,

55
00:05:05,580 --> 00:05:12,810
we could go here to the game over screen and wrap our entire text here at the bottom into another view, so take

56
00:05:12,810 --> 00:05:21,180
that body text and add it here into this view and there, add a style of let's say name it result text,

57
00:05:21,210 --> 00:05:28,080
whatever you want to name this or result container to be more in line with the other style names.

58
00:05:28,170 --> 00:05:30,410
So result container is added to the view

59
00:05:30,570 --> 00:05:38,300
and now if I add this here, anywhere here in my stylesheet and I give this a width of let's say 80%

60
00:05:38,550 --> 00:05:42,420
which makes sense so that the text has a bit more distance to the left and right

61
00:05:42,480 --> 00:05:49,980
or alternatively I add a margin horizontal of let's say 20 to have some spacing left and right around

62
00:05:49,980 --> 00:05:55,980
the container, then you see the text is indeed wrapped into a new line and that's also a default behavior

63
00:05:55,980 --> 00:05:58,410
of the text component in React Native.

64
00:05:58,410 --> 00:06:05,700
Not only does it parse styles down to nested text, it also has its own positioning system or its own

65
00:06:05,700 --> 00:06:10,950
layout system where text automatically wraps itself into a new line

66
00:06:11,040 --> 00:06:16,830
if it doesn't fit in and the same line and that of course makes a lot of sense, it typically is

67
00:06:17,070 --> 00:06:24,920
what you want on your text, you want it to wrap into new lines. Now with that, I'll revert this setting

68
00:06:24,920 --> 00:06:25,880
on the body text,

69
00:06:25,880 --> 00:06:28,190
I'll actually not use open-sans-bold there,

70
00:06:28,310 --> 00:06:34,530
I just use open sans but I wanted to show this style inheritance thing and also of course in general

71
00:06:34,580 --> 00:06:38,960
let you know how text behaves regarding the way it's layout.

72
00:06:38,960 --> 00:06:41,450
All that being said about the text, we're not done though,

73
00:06:41,480 --> 00:06:43,730
I don't think that looks that nice,

74
00:06:43,760 --> 00:06:49,860
instead on the game over screen, this highlighted text maybe should be bold, so I'll use a font family

75
00:06:50,100 --> 00:06:55,400
of open-sans-bold here so that this really stands out and is easier to see

76
00:06:55,670 --> 00:07:02,930
and in addition, I'll actually also add a margin horizontal of 30 here to have a bit more spacing left

77
00:07:02,930 --> 00:07:04,640
to right around the text.

78
00:07:04,640 --> 00:07:10,490
Now in addition, I also want to make sure though that the text is centered, so that if we have a line

79
00:07:10,490 --> 00:07:17,090
break, it's all centered in the middle and we don't start on the left edge again and this can now be achieved

80
00:07:17,090 --> 00:07:19,010
with a special styling property

81
00:07:19,010 --> 00:07:21,760
you can add on text components and that's the

82
00:07:21,790 --> 00:07:24,770
text align property.

83
00:07:25,070 --> 00:07:29,210
The thing just is I don't want to use this on the highlight text, I want to use that on the overall

84
00:07:29,210 --> 00:07:34,990
body text and therefore, we need to add a style here, maybe result

85
00:07:35,000 --> 00:07:38,460
text is a fitting name here since this is our text overall

86
00:07:38,660 --> 00:07:40,760
and then here we can just add result text

87
00:07:44,450 --> 00:07:45,400
and on that result

88
00:07:45,410 --> 00:07:49,150
text, set text align to center.

89
00:07:49,220 --> 00:07:56,570
However if I save this, it doesn't have an effect because our body text is not configured to take style,

90
00:07:56,630 --> 00:08:02,660
the style prop we might add to it, into account. In body text, the only style is set to the text is the

91
00:08:02,660 --> 00:08:04,660
internally defined style.

92
00:08:04,670 --> 00:08:09,080
Now we learned how to change this however, we simply pass an object here to style,

93
00:08:09,080 --> 00:08:16,170
take all our custom style properties from this file and distribute them into this object and merge

94
00:08:16,170 --> 00:08:20,670
that with whatever we're getting on props style by using the spread operator

95
00:08:20,670 --> 00:08:22,930
here too. And with that,

96
00:08:22,940 --> 00:08:28,370
now if we save this, we see that this is now nicely centered and this is certainly a bit nicer to read

97
00:08:28,550 --> 00:08:30,490
than it was before I'd say.

98
00:08:30,680 --> 00:08:37,070
Now with that, we're almost done with styling this text, the last thing I think looks nice here is that

99
00:08:37,070 --> 00:08:41,490
if on the result text, we also bump up the font size a little bit.

100
00:08:41,570 --> 00:08:47,990
So if we set font size here to 20 maybe, so really big and on the result container,

101
00:08:47,990 --> 00:08:55,700
I also want to have a margin vertical of 15 maybe, to have some spacing on top and bottom around the

102
00:08:55,700 --> 00:08:57,180
text as well.

103
00:08:57,320 --> 00:09:02,240
And now with that, we have a game over screen which in my opinion doesn't look too bad and you learned

104
00:09:02,240 --> 00:09:07,520
a lot about how text works, so how you can work with the text component in React Native.