It's of course up to you how you want to style this confirm text here or actually should not just be
text, it should be a view with the text in there which outputs our number and then a button to start
the game and you can definitely pause the video at this point and come up with your own styling there,
your own layout.
I have a certain layout in mind which certainly will differ from yours but there is no wrong or right
decision here, so definitely take this as another chance to come up with your own layout for this and
a button that right now doesn't do anything but that is there which would allow the user to start the
game and after a short pause which you can use to pause the video, I'll implement my solution together
with you.
So here's how I think that this would look nice.
I want to have a view so that I can set up a general container around that or actually maybe not a view
but why don't we use our card here,
that sounds like a good idea.
Now that card, if we have a look at it, doesn't have a margin and I want to have some spacing between
that card at the top and my summary card.
So therefore here, I'll give this a separate style here in my stylesheet, in the start game screen,
I'll name this summary container, name as always is up to you and I want to have a margin to the top
of let's say 20, some nice spacing here and add this via the style prop to the card here and in
there, I want to say you selected and then in a new line output the number in a nicely presented
way, maybe the number in kind of a box with a separate border with rounded corners so that it's
clearly visible or also bigger than the other text and therefore here, I'll add a view with a text
in there and in that text, I'll have the selected number but now that view and the text should get
a special styling and since I plan on reusing that, I'll actually grab it and outsource it into a new
component and I'll name it
number container. In this component, I'll import React from React and import view and text from React Native
and then have the number container component here, export default number container and of course we'll
also need a stylesheet here, so let's set up a stylesheet as well with Stylesheet.create down there
and then in this component, I'll return this view thing here with the selected number which now however
has to be passed in and I expect it to get it between the opening and closing tags of my own component
with the help of props children.
Now this container of course is something you can freely configure,
I'll add just a container style, container name here where I think a border width of two might look good,
so a little bit of a broader, wider border. A border color where I actually want to use my primary color
or my accent color, we'll see which one looks better.
So let's import colors from constants/Colors and for the border color, then use colors accent for
now and see how that looks like. Some padding so that the number is not directly on the edges of that
surrounding box,
doesn't sit directly next to the border, a border radius of 10 to have some rounded borders, some
rounded corners
excuse me, by the way if you would want to target individual corners, you could do so with border
top left radius, top right radius, top end and top start also takes the user's settings regarding if
it's a left to right or right to left language into account so you can target all single corners as well or
set a radius for all corners with border radius and also add a little margin here, margin vertical of
of 10 maybe to have some spacing to the top and bottom around of this container here and also important,
center the text in there with align item center and justifyContent center taking advantage of that flex
box behavior. And with that, I also want to give the number itself, so the text a certain style and that
style is that I give the text also that accent color and I want to use a font size of
22 to have to really stand out and later, we'll also use a custom font. And then this view here gets
the container style and the text here of course receives the number style. With that set up, we can use the number
container in the start game screen, so there we simply add that import and what we're doing here is
pretty normal, that you have multiple components of which you compose your application.
So now we can use the number container in the start game screen component, add it here below this text
and in the number container, we get the content here with props children, we output it with props children,
that means we have to pass it between the opening and closing tags,
so here, we forward the selected number.
Now that's just my suggestion for how we could style this but I like the style
and then for the moment, I'll add a button here which is a self closing tag though, the built-in button
with a title of start game, all caps to make it really stand out and save this
and now if we choose a number here, this is what we get and it doesn't look too ugly I'd say. Still, there
are two things which I want to change, this text here should be centered and this box with the number
should not be as wide as the surrounding box but be only as wide as the number needs it to be.
Now to make both work, I'll go to my card which holds all the content here and with that, I mean I go
to the style in the start game screen which I also use on that card,
that's my summary container
and there we can align the items in there to be centered, instead of using the default which would
be stretch and now this is automatically centered and the box is only as wide as the number requires
it to be.
Now that doesn't look too shabby,
one last thing which I just noticed is also that when we confirm an input, I also want to use the keyboard
API to dismiss the keyboard so that as soon as we press confirm here, we also close the keyboard
and now we have a nice output here.
Now with that, we have a solid base look I'd say, we can pick a number,
we're doing some rough validation to make sure that we have a valid number and the next step is that
we make this start game button work and we swap what we see on the screen here for our the game is
running screen where the computer is now making guesses and we then make sure we give the user a chance
of telling if the numbers should be greater or lower
and we then at some point are finished and show a game over screen.