All right.
Let's make sure that we finish up our art form.
Now just to be clear at this point in time if you're seeing an error on your device that's totally fine.
We've not yet finished this refactor of extracting all this logic around auth form.
It's the last thing we have to do is make sure that we wire up these different props inside of art form
and make sure that they're used appropriately so inside of auth form.
We've already received those props.
Now we just have to go around all of our J.S. sex make sure that we call them at the appropriate time
or reference them.
So first off inside of our big text element right here rather than showing the hardcoded text of sign
up for tracker I'm going to instead show whatever was passed into here as header text.
Next up for error message down right above our button rather than referencing error message coming off
of our state object.
We don't have a state object inside of auth form anymore.
Instead we're passing in a error message prop.
So we're basically just going to remove the references to state DOT inside of here.
So going to take out the state DOT and going to take out the state DOT over here as well.
Now we probably have to make sure that we still have the error message style inside of Europe but we'll
take care of that in just a second the next prop we need to make sure that we call is on submit to back
down inside of our button whenever uses user presses that button rather than calling sign up we don't
have sign up anymore.
Instead we're going to call on submit and we're going to call on submit with our email and password
inside of an object.
And then finally we've got Submit button text so I'm gonna make sure that I show that text inside of
our button rather than the hardcoded title of sign up.
So I will replace sign up with Submit button text like so OK.
So just two more things we have to do inside of your.
First off let's make sure that we've got the appropriate style for error message.
So inside of my style sheets I'm going to put in the error message style and we can just copy paste
that styling information from sign up screen.
So back inside of sign up screen we can go down to our style object and I can just take this entire
thing right here.
I'll just cut out the entire thing and then paste it over back inside of auth form and since I cut the
entire thing I don't really have to retype error message.
So that's basically what we should end up with right there OK.
And finally I think the last thing we do is make sure that we just import our spacer component inside
of here as well.
So at the very top I can make sure that I get a import for spacer.
And remember we are currently inside the components directory.
So we're just gonna get it from the same folder that we're currently in.
So dot slash spacer OK.
So that should probably be it unless I've got some type of inside of here which is entirely possible.
So I gotta make sure that I save both these files sign up screen and art form and we'll look at that
it looks like everything actually worked out so I can to just test this out really quickly by creating
a new account so I'll put it in like test 9 9 9 at test dot com and a password and sign up and sure
enough it still work just fine.
Also tried to sign up once again with the email that I know is being used so I'll do nine nine nine
again and I'm just doing this to make sure that I still see an error message.
Yep definitely do.
Okay.
So it looks like it worked out pretty well.
So you've now got a reusable auth form that we can use on both our sign up and sign in screens and all
we do is pass in those couple of different props right there.
Now last thing I want to very quickly between these two different files auth form and sign up screen
Let's just clean up our import statements and make sure that we don't have any unused imports.
So first off inside of auth form.
Well we ended up not using view after all.
So going to delete that then back inside of sign up screen we've now got several elements inside of
here that are not being used.
So first off we don't need you state.
We also do not need button or input from react native elements.
And I think that we're using everything else inside of here.
So I'll just leave it as is.
OK.
So this looks good.
Now last thing we're going to do in the next video is just make sure that we extract that touchable
opacity stuff into a reusable component as well.
And then once we do that we're going to be able to put together our sign in screen like ridiculously
quickly.
We're just going to reuse the Orth form reuse this kind of Napoli component down here.
And that's pretty much it.
Sign and screen will be complete.
So let's take care of that in the next video.