All right.
I think you know exactly what we're doing.
Let's tackle this sign and screen with our reusable auth form and our reusable nav link.
We won't worry about setting up any context or stuff like that to actually call sign in.
Let's just get some components visible on the screen for right now.
So I'm gonna begin by opening up my sign and screen J.S. file that inside of here we're going to add
in a couple of different imports at the very top.
First off I'm going to definitely want to add in an import for my off form
from the up one directory components of form and I'll also get my nav link from up to one directory
components
as well then inside of my sign and screen component I'm going to remove that text element that I have
right now and instead I'm going to turn a multi-layer J OSX expression I'm going to have a top level
view.
Because remember we're probably going to want to have the same exact kind of century logic that we had
inside of our sign up screen as well.
Remember we had styles dot container and inside that container we had a couple of these different styling
rules to somewhat center our content.
We'll take care of that in just a minute.
However let's first make sure that we show the order form and the NAB link.
So inside of here I will show my off form and my nav link now just to remind myself again to keep those
files now blank and off form right here so I can very easily reference the different props that they
expect.
So let's take care of nabbing first.
So inside of NAV link we have to pass in some text and a root name to pass to navigate to.
So for nav link I'll do some text of already are assuming not already but don't have an account sign
up.
Instead and I'll also give this thing a root name.
Let me New Line this component so we can read it very easily.
And so for the root name we want to navigate back to our sign up screen so it'll be simply sign up.
Remember we are using the root names we provide inside of our app dot j ust file.
That's why it simply sign up right there okay.
So now we can take care of our auth form.
So for our auth form we have to put in the header text your message blah blah blah all that stuff the
art form.
I'm gonna make sure that this thing has some header text and I'll make sure that it says Sign In to
your account.
I know that it needs to have some error message but I have not yet hooked up any of the auth context
inside this file.
So for right now I'll just put in a hard coded empty string and then finally we need to make sure we
have on submit and submit button text so I'll do on Summit once again.
I don't really have anything to call for this so I'm gonna put in an empty arrow function like so and
then submit button text and also make that say sign it
okay.
So that should definitely get us started.
Now just one quick thing to remember here are sign and screen is going to show a header at the very
top.
And I'm talking about that header that is shown by default by react navigation.
That one right there.
Now we probably don't want to show that header because we've got the NAV link that a user can tap on
to go back over to the sign up screen.
So in order to disable that header we're going to go through the same process that we just went through
with our sign up screen back down here with our navigation options so underneath my sign in screen component
definition right underneath it I'll say sign in screen.
Dot navigation options and once again I'll say header of no
gate.
I think the very last thing have to do is apply some styling to that route view element.
So on the routes view element I'll put on a style of styles dot container
and then down inside of my style sheet just like the other file we're gonna say that we want container
with a flex of one a justified content of centre.
And then remember we use that little trick of putting on some margin on the bottom to kind of move our
content up.
Now I'm just going to refer back to my sign up screen to make sure that I use the same value of margin
bottom looks like I ended up with a margin bottom of 250.
So going to use it over here as well okay.
That should be it.
I think we're ready for a quick test so I'll save this file there's my sign up screen.
I'll go over to sign in says Sign into your account don't have an account sign up instead button says
Sign in.
Yeah I'd say overall this looks pretty darn good.
So now we've got these two different screens with slightly different forms.
All right.
So I think this looks great.
So the very last thing we do.
We're gonna take a quick pause right here and then we're going to make sure that we start to hook up
our off context to sign and screen and that we eventually call some action function.
Whenever a user submits that form so quick pause and let's take care of that in the next video.