All right.
Let's continue working on that sign and screen.
Now I'm starting to really look very closely at these two different screens sign up and sign in and
I bet you can notice very quickly that they are essentially just about identical in nature.
So they both show some header text to inputs a button and then the link at the bottom so rather than
just duplicating all this JSF.
So we already wrote out inside of sign up.
I think that we should extract a ton of code into a separate reusable component and it's reusable component
and maybe just like show that form right there we can then make use of that component and customize
it with props for both these sign up and sign and screens in addition.
Well we probably want to show that link at the bottom of both screens as well.
We could extract that logic into a these same reusable form component or alternatively we could extract
this kind of link stuff into its own separate reusable component so we could also show some link text
like that in other locations inside of application as well.
So I think that ultimately we should extract some logic here into two separate components.
One we will call maybe like authentication form and also just that part right there and then maybe a
separate one called like nav link and we'll have it just showed the blue text right there.
And both these separate reusable components should definitely accept several different props to customize
how they work.
So let's get to it.
So back inside my editor inside my components directory I'll make a new file called off form dot J.S.
than inside of here will write out a couple of different imports.
So I think I definitely need react.
I think I definitely need probably text and button and input from React Native elements make sure you
get elements here because remember we're using that component library for a little bit of free styling
will then create our off form component
I'll create my styles object
and I will do my export default off form right away I noticed that I've got old mistake here I've got
a use of style sheet by never import it from React Native so I'll add in a separate import for it.
In addition while I'm doing that I think it will probably eventually need the view element as well so
I'll just add that in really quickly maybe we won't need it but we'll figure that out.
We can always remove it very easily okay.
So now inside of auth form we're going to go back over to sign up screen we're going to start to cut
and paste some stuff out of here so I won't take everything out of sign up screen but I think that I
can very easily reuse between sign up and sign in.
Well first off I think I could probably reuse these state declarations so both the different forms are
supposed to have some email and password assigned to them.
So I think we could probably just take those two states declarations extract them and throw them over
into auth form as soon as I do that.
What we need to make sure that we import you state from react so I'll do that right away.
Next up taking a look at all the JSF this year.
Well I probably want to make sure that I've got my spacer and the text inside of it.
My input the other spacer all the way down to the button down here.
So I gonna take everything from the button and the spacer around it all the way back up to the top I'm
going to take all that going to cut it out and the only thing I'm left with is my view touchable opacity
and all the stuff inside their I'll then take the rest flip back over to art form and throw it into
a big return statement
so there's my return and all the J.S. X INSIDE THEIR RIGHT NOW I'M RETURNING multiple different elements
that are siblings but remember we can only return one element in this case.
Now I think about it.
I don't really think we need to place a view because there's no additional styling that we want to place
on these things.
So instead we can return a react fragment remember we can specify that by just putting in that empty
tag like so I'll then go down to the very bottom and after our spacer I'll put a closing fragment tag
down there as well yes that looks pretty good.
All right.
So now we've got a bunch of J.S. X inside of here but there's definitely a couple of things that we're
going to want to configure that should come in from props.
So for example our text right here we want to change the text to say either sign up or sign in.
In addition if we go down to our button right here we probably want to change the title the button and
we probably want to change whatever happens when the user presses the button as well when we're showing
this form on the sign up screen.
Well calling sign up right there is appropriate but if we're on the sign and screen we probably don't
want to call sign up.
And then finally we've also got a reference to state right here and we're trying to use state to show
some kind of error message.
So maybe rather than trying to access our context state object we should instead pass the error message
down that we want to show as a prop so in total I think there's a couple of different props we need
to pass down to customize our art form.
I'm going to write them out inside as props object right here notice I've got my curly braces because
I'm just going to d structure these properties off directly.
So I think that first off we need some header text to show inside that big text element.
I think that we need some kind of like air message to optionally show if something goes wrong.
And then finally I think that we need some kind of callback to be passed down to customize what happens
whenever user presses on sign up
so I'll call that thing.
Maybe like on submit so on submit will be a function that gets called anytime a user presses that button
at the bottom.
Finally there's actually one other prop that we should probably add in.
Thinking back to that button the button says right now a title of sign up.
Well we probably want to be able to customize that as well.
So I'm going to say that our component also needs a prop of like how about Submit button text or something
like that
so these are the four props that we're going to say that you have to pass into art form for the art
want to behave correctly.
OK.
Let's very quickly save this file.
I'm going to go back over to my sign up screen.
I'm going to import the off form inside of here and then going to show it inside of sign up screen and
then pass it those four different props that we just spoke about.
So inside of sign up screen at the very top I will import off form from up one directory components
of form
then right above our touchable opacity.
I will show art form I'm going to give myself a little bit space here and we'll list out those for different
props.
Let's get a quick reminder on what they are.
So we need header text your message and on submit.
We'll take care of those receiving me.
How about Submit button text first and we'll worry about on submit in just a moment.
So I going to put inside of here header text I'm going to just leave it blank for right now.
Error message I'm gonna leave it blank and then submit button we call it label.
Now just text OK so let's make sure that we can customize each of these appropriately so on our sign
up screen we probably want that header text to say something like I don't know sign up for trucker then
for our submit button text that's also a fixed value so I'll just throw it in right now.
We'll just have the button say something like sign up and then finally our error message is coming from
our state from the off contact state to be precise.
So rather than passing in a hardcoded string for error message I'm going to instead specify some red
curly braces and say the value of error message is going to come from state DOT error message.
So now whenever we get a error coming from our state object right here we're just going to pass it directly
down into our auth form and the error should be displayed inside their OK.
Now finally our last little problem we have to pass in is on submit.
So on submit as we currently have it kind of thought out right here.
I think that we're really just going to plate replace sign up right there with on submit.
So whatever function we pass down into art form will be called automatically with an object of email
and password so back inside of sign up screen I'm going to say on submit and whenever someone calls
this thing or whenever our child component calls this I expected to be called with email and password
inside of an object.
So going to d structure those properties out and I can just pass them directly through into our sign
up action which we've already got access to right there and I'll pass those in as email and password
so essentially just take that object with email and password pass it directly through to sign up.
Now we are once again in one those scenarios where we're just taking some arguments and passing them
through to another function.
So rather than putting in this big arrow function right here we could instead remove that entire arrow
function and just put in sign up like SOS that says Take a reference to the sign up function any time
the on submit propagates called inside of art form just call sign up and pass in whatever appropriate
arguments OK.
So it looks good.
Now we're not quite ready to test this out just yet.
We still have to make sure that we wire up a couple of these different props inside of auth form.
However this is turning into a rather long video.
Let's take a quick pause.
When come back the next video we're going to make sure that auth form uses all these different props
so quick pause and I'll see you in just a minute.