In this video we're going to continue doing a couple of odds and ends tests around our sign up screen
so our sign up screen is really not supposed to have a header right there at the very top.
If we go back to our original mockup Well it's really just supposed to be empty and to navigate over
the sign in a user is supposed to press that blue link down there rather than trying to press something
up inside the header.
So we need to make sure that we hide the header.
In addition we probably want to make sure that the form kind of gets at least somewhat centered on the
screen in this mockup.
Back over here it's kind of reflected as being somewhat centered maybe not like perfectly centered on
the screen but at least somewhat centered vertically.
So let's try to take care of both those tests.
We want to hide the header in at least somewhat vertically center our content to hide the header.
We're going to add in a navigation options property to our sign up screen component.
So underneath my component I'll define sign up screen dot navigation options so remember if we define
navigation options in a sign of a function we can return an object that's going to customize our stack
navigator and change the way in which react navigation behaves and shows the screen the option that
we want to use in this particular case to hide the header will be header of No.
That means when it comes to showing a header component for our sign up screen just don't show anything
at all.
So if we save this the header will now disappear just you know an alternative way to write this out.
Right here we do not have to assign a function to navigation options.
We only used a function previously the last time we made use of navigation options because we wanted
to get access to that navigation prop coming into this function so we could wire up I think it was an
icon and whenever user tapped that icon we can then do some navigation if we don't want to define a
function here we could alternatively just assign navigation options an object with our configuration
options.
So in other words we could have just written out object with header of nil like so and the header still
gone.
Now there's not any great reason to go with one approach over the other.
In other words an object versus a function that returns an object.
I'm just letting you know that when you start to look at documentation sometimes you're going to see
navigation options tied to a function or something tied to a component as a function and sometimes it
will be a plain object both them are a hundred percent equivalent except for if we want to get access
to that navigate function OK.
So now that we've hit in the header there Well now our content is all the way up at the top.
So let's take care of part two.
We want to make sure that we kind of vertically center all of our content so to do so we're going to
go back up to our component.
Right now we're showing a react fragment and remember a fragment indicated by these empty tags essentially
means don't show any wrapping element when this actually gets rendered on the screen.
If we use a fragment as we are right here we can't apply any actual styling to it.
So if you want to apply some styling to this overall component we have to instead show a view element
like so.
So now we can apply some styling rules to that view element I'm going to put in a style right away I'll
say style is styles dot container and now we can go back down to our styles object and add in some container
property to it and use that container property to once again kind of central our content.
So here's my styles object I'll put in the container section and get started just to help myself imagine
the extents of this element on the screen.
I'm going to give it a big red border again just so I can really imagine the entire height and width
of that component.
So I'll give it a border color of red and a border width of 10.
So now if I save that I'll see exactly the extents of that component.
So right now you'll notice that the view element that is wrapping all of our content has shrunk just
to fit that amount of content.
So we have that's big red border indicated by this view and that view has shrunk just to fit everything
that's inside there.
So the first thing we probably want to do to make sure that we can get all this content centered is
add a flex of one onto that view element.
So if we save that that's going to cause the view to expand and fill up as much vertical space as it
possibly can.
It's now that the view has expanded.
We can now use some of our different flex box properties to position everything inside of here.
In some particular location in our case we wanted to center all of our content so we could apply a justified
content of center to center everything vertically.
It's all put in a justified content of center.
So now we save that well.
Everything centered.
Now just one little problem even though we definitely just centered all of our content.
It sure doesn't look centered.
I don't know about you but it really feels like there's way too much space up here.
Really just way too much so it'd be great if we could center this stuff but still have it kind of like
more towards the top edge and get rid of some of this extra space and we have inside of here so to do
so one very easy way to accomplish this would be to put some extra margin bottom on our container so
that's getting us some extra spacing down here at the bottom.
Outside of that red border all of our content is still going to be centered inside of this red element.
So essentially if we just subtract some of the available space from the very bottom that's going to
essentially force our content to move up.
Let's just try applying some margin bottom and you'll see what I mean.
It's open in a margin bottom of like 200 okay.
That looks a lot better.
So again now we have some margin on the bottom so that's all the extra spacing you see right here and
now in the remaining space.
Our content is being centered inside there as best as it can.
So now our content is much further up on the screen and it looks a lot more reasonable.
Definitely closer to our original markup over here.
Now if you want to you can play around with that margin bottom maybe go to like 250 and get stuff to
go even a little bit higher.
I'll test this out on Android as well really quickly.
And yeah I'd say this looks pretty reasonable over here too.
Okay.
That's a good start.
So going to take off the border red and that's what we are left with.
Yeah I'd say it's definitely a good start.
All right.
So now that we've got a lot of the styling stuff and the header out of the way let's take one more pause
when we come back the next video we're going to start to make sure that we handle these text inputs.
We received some email and password and eventually attempt to sign a user up into our application.