So now with that image added and now that we're already working on the game over screen here,
let's fine tune this text we see here at the bottom,
let's make it a little bit nicer, a little bit more beautiful
and in addition before I do that, I'll actually switch back from using the network image to the local
image but that is of course totally up to you, what you prefer there.
So I want to work on the text here and instead of just having this kind of tabular text here which just
outputs some information in a boring way,
why don't we present this in a nicer wait? In detail,
I think it would be nicer if we had some human readable text here, so a real sentence which we can read.
So there we could say your phone needed, and then here we have the number of rounds, rounds to guess the number
and that here would enter the number.
So the number of course is props user number and again, you can get rid of this line now
but I don't just want to output props user number like this, instead I want to highlight it, I want to
give it a special color that's different from the other color here and the same here for the
rounds, so the props rounds number of value, would be nice if that would also be colored differently. Now
to color that differently, we can actually wrap this into another text node here. So you can have text
nodes, text components inside of text, inside of other text components,
so that is possible, just like that.
Now that's really important to understand,
you can nest text components into other text components and keep in mind that body text in the end is
just a text component, body text is a component that simply returns the build-in text component,
so anything we enter between body text is the same as if we would enter it between the built-in text
components and therefore we can have nested text in there and we can theoretically also have
nested views in there but there are some caveats to that and therefore if you don't absolutely have
a strong reason for why you would need a view in there, you shouldn't really nest views into text and
there rarely is a reason to do that. Text inside of text however can make a lot of sense because it allows
you to style parts of a text differently than the rest of the text.
So here for example, I want to add style with styles.highlight and the same here for the second text
to highlight this part of the text and now of course we can add highlight down there in our style
sheet in the game over screen, highlight and there for example give this a color where we use colors and
for that, we need to add the import where we import colors from constants/Colors and then maybe use our
primary color there, so Colors.primary. If we do that, what you'll see is that now, this is highlighted.
Now also something interesting, if I temporarily go to the body text and I change this to open sans
bold here,
so I use the bold version, you'll see that even that highlighted text is still bold, might be a bit hard
to see but this is actually bold and that is very interesting because earlier in the course, I mentioned
that your styles wouldn't inherit, so that if you for example in the game over screen set a font family
here on your screen style which is applied to the view that wraps everything, that font family would not
be passed down to components nested inside of that view.
So just because you set a style here on this view doesn't mean that all other views in there or all other
texts in there, whatever it is, get the same styles. The styles you apply to a component always are
just applied to that component and not to nested components and yet it's different for the text.
There, this text here, the highlighted text which is nested inside of the body text also gets this bold
family
if we change it on the body text and that is simply an important difference React Native has. For text
components,
if you add style there, the style is passed down to nested text components,
that's one exception React Native has. Text inside of text receives the style defined on the outer
text, so any style you set up on the body text here is automatically received by the nested text components.
There is one additional important behavior regarding the text component in React Native and that is
that it's not using flexbox. The view uses flexbox,
the text component of course doesn't and I mentioned this before, that the view component uses flexbox
not text or other components but text uses its own positioning system where it automatically wraps itself
into a new line if it doesn't fit into one line and to demonstrate this,
we could go here to the game over screen and wrap our entire text here at the bottom into another view, so take
that body text and add it here into this view and there, add a style of let's say name it result text,
whatever you want to name this or result container to be more in line with the other style names.
So result container is added to the view
and now if I add this here, anywhere here in my stylesheet and I give this a width of let's say 80%
which makes sense so that the text has a bit more distance to the left and right
or alternatively I add a margin horizontal of let's say 20 to have some spacing left and right around
the container, then you see the text is indeed wrapped into a new line and that's also a default behavior
of the text component in React Native.
Not only does it parse styles down to nested text, it also has its own positioning system or its own
layout system where text automatically wraps itself into a new line
if it doesn't fit in and the same line and that of course makes a lot of sense, it typically is
what you want on your text, you want it to wrap into new lines. Now with that, I'll revert this setting
on the body text,
I'll actually not use open-sans-bold there,
I just use open sans but I wanted to show this style inheritance thing and also of course in general
let you know how text behaves regarding the way it's layout.
All that being said about the text, we're not done though,
I don't think that looks that nice,
instead on the game over screen, this highlighted text maybe should be bold, so I'll use a font family
of open-sans-bold here so that this really stands out and is easier to see
and in addition, I'll actually also add a margin horizontal of 30 here to have a bit more spacing left
to right around the text.
Now in addition, I also want to make sure though that the text is centered, so that if we have a line
break, it's all centered in the middle and we don't start on the left edge again and this can now be achieved
with a special styling property
you can add on text components and that's the
text align property.
The thing just is I don't want to use this on the highlight text, I want to use that on the overall
body text and therefore, we need to add a style here, maybe result
text is a fitting name here since this is our text overall
and then here we can just add result text
and on that result
text, set text align to center.
However if I save this, it doesn't have an effect because our body text is not configured to take style,
the style prop we might add to it, into account. In body text, the only style is set to the text is the
internally defined style.
Now we learned how to change this however, we simply pass an object here to style,
take all our custom style properties from this file and distribute them into this object and merge
that with whatever we're getting on props style by using the spread operator
here too. And with that,
now if we save this, we see that this is now nicely centered and this is certainly a bit nicer to read
than it was before I'd say.
Now with that, we're almost done with styling this text, the last thing I think looks nice here is that
if on the result text, we also bump up the font size a little bit.
So if we set font size here to 20 maybe, so really big and on the result container,
I also want to have a margin vertical of 15 maybe, to have some spacing on top and bottom around the
text as well.
And now with that, we have a game over screen which in my opinion doesn't look too bad and you learned
a lot about how text works, so how you can work with the text component in React Native.