Obviously, this screen right now isn't that useful and therefore
I'll now go to that text which I used as a dummy and replace it with let's say start a new game, something
like that and below this, I want to have an input area with a slight drop shadow, so this typical card
look you might know from some apps and websites where you have a box with a slight drop shadow behind
it, maybe some rounded corners.
I want to recreate that here, so I'll add a view here, a view because again that is a very flexible element,
we can apply a lot of styles there, we can add our shadow and our rounded corners there and then hold
our content in that view,
so that's great for having a general styling of the container and now inside of that view, I want to
have a text where we say select a number for example and where we then also want to have a text field
where users can enter something.
So there,
I'll add a text input component which is that built-in component where users can use the keyboard to
to enter a value and here, they should enter a number. We'll configure this and style this in a second, for
now I'll just drop it in like that and below that, I want to have two buttons sit next to each other
and that's important,
next to each other, not below each other which allow us to reset the input and choose a new one or confirm
the chosen one. So we need a view here because that allows us to position items next to each other
whereas these items are positioned above each other then because if I would just add two buttons here,
then I would have to change this views flex direction to have them next to each other but then the text
and text input would also be sitting next to each other.
So now I'll add a view here so that in this view, the surrounding view, this, this and this view component
are sitting above each other,
so on the vertical axis but inside of this view, I can now also make sure that the items in there then
sit next to each other, so in the horizontal axis and that's what I want here.
So I'll import the built-in button which is one of the view components that automatically adjusts itself
to the underlying platform, later in a separate module, you will learn how you manually can find out
on which platform you're running to adjust the look and feel of your app to that.
Here, we'll go with the built-in button and give the first one a title of reset and the second one,
the second button here a title of confirm
and then here, onPress will at the moment do nothing, so that's just an empty function, just adding it
so that we have the prop already there,
we'll add logic later and
for now, we'll just have the buttons here.
Now the styling will be missing though, as I said, the button should be sitting next to each other.
Hence I'll give this view here which holds the buttons a style pointing at the styles object and there,
let's say a button container,
this name as always is totally up to you
and I also want to give this view which holds my inputs a style here, referring to the styles object
and I'll use the let's say input container, this name of course is also up to you
and this here, I want to style this like a special title, maybe with a bigger font size,
so here, I'll assign a style of title let's say.
Now we can go down there in our stylesheet and add the title, add the input container and also add the
button container and now we can start adding some styles there. Now for the title,
again I want to set the font size, so I'll set font size like this,
set it to let's say 20 and maybe also add some spacing on the vertical axis with margin vertical of let's
say 10, 10 like this and always keep in mind, margin vertical basically replaces margin bottom and margin
top and now onto the button container and I'll come back to the input container in a second,
the button container will get a flex direction
of row, the default is column but now I want to have items sit next to each other,
so we need to use row here.
I want to set a width here because if we don't set a width on the button container, it would just be
as wide as the two buttons are together,
instead I want to use the width of the parent, so of this view here and then position the buttons inside
of this view,
so I want to do the opposite, not style the view according to the buttons but position the buttons according
to the view.
So I'll give the button container this view and explicit width here and now to position the buttons in
there,
we can use justifyContent to position them along the main axis which for flex direction row is left
to right and there I'll choose space between so that the buttons sit on the left and right edge of this
row and distribute all the available free space between them. Also add a little bit of padding horizontal
here though so that we have some spacing to the left and right inside of our view, maybe 15 so that
the buttons don't actually sit directly on the edges on the left and right
but there is some spacing out on the left and right. Okay,
so with that if we save this, we see that
which I don't know about you but which doesn't look that great, does it?
Now the problem is that the input container has no styles yet. The input container holds all the inputs
though which is why the stylings there look a bit off.
So we should give the input container some styling and there, I want to add a width and you can now use
a hardcoded width of let's say 300 pixels or use a width and percentage.
Now I'll add a width here of 300 but also add a max width of 80% so that we have 300 pixels
width
but if the device would be too small, so that's a little bit of responsiveness which I add here already,
if the device would be too small, we make sure that our width doesn't exceed 80%. And then I want
to align the items in the center,
keep in mind the input container is a view, therefore it uses flexbox,
it uses the default of flex direction column and therefore with align item center, we position items
in the center on the cross axis which is left to right,
so we center items horizontally. Now with that,
now this looks way better,
we can't really see the input but that's the old thing, right?
We'll have to style it so that we can really see it. We see the buttons though and we can see that our
general layout and styling is taking some shape.
Still, I'm not 100% happy about the look of this yet.