For centering the content in the middle, we can use a technique I already covered earlier, styling and
there specifically, flexbox.
So on our modal we have that view or in our modal we have that view, that's our root view,
it's the only element in the modal
and then this view of course has other child elements but that's the only direct child of our modal.
There, we have the input container style which we apply and there, we currently set a flex direction of
row.
Now of course we could leave that but I'd say in the modal if we present it on a full screen like this,
I'm actually fine with a vertical orientation so that we have the input and below that, the button.
So I'll change this back to column or since this is the default, simply delete this flex direction
and now I want to center this horizontally and vertically though
and for that, we can set justify content to center here and align items to center
but that alone won't do the trick.
You can see if you open the modal, it's still all the way at the top
and the reason for that is that our input container,
so that view we're assigning this style to, by default doesn't take the full available space it can
get in the surrounding view,
so in this case in the modal. The modal theoretically takes the full height and width of the screen but
the view simply doesn't take that full available space by default,
that's just how it works,
that's the default setting.
It only takes the space its children require,
so the text input and the button.
So the view essentially has the height of text input and button combined
and then also the width of the broadest child in this case, so of the text input here and by the way
here, Android just didn't update correctly that's why you see this strange output here,
you can ignore that for now. So to make the view take the full available space here, you can simply go
to the style you apply to the view,
in this case our input container style here and set flex to one here. Flex is a property which is
used in conjunction with flexbox and as you learned earlier in this module, in this extra flexbox lecture,
flex allows you to control how much space your different items inside of a flexbox take and if it's
the only item,
this simply ensures that this container will take all the available space.
You could also set this to flex two, the exact value doesn't matter here if it's the only child but you
need to set flex to make sure that this takes the full available space.
If you don't do it, it will just take as much space as its child elements do,
if you set flex, it will take as much space as its parent element gives it,
so as the parent element of that view,
the modal in this case gives the view.
So with flex one added here, if you now save this, on iOS, you see now this is nicely centered
and to also see this on Android, what you can do is you can open the task switcher, close this app here
and press a here to restart
this app on Android, doesn't like the modal as it seems
and now here, you also see that. Now tiny adjustment is a little bit of spacing between the button and
the input which I want to have and for that,
I'll go to the input and add a margin bottom of 10 here but with that, I'm quite happy about that again,
unfortunately Android is really having some issues here with my modal, so let's close it and see it
whether that looks good,
yes this is good.
Now I want to make sure that when we click add here, we do actually now close the modal.