Hi and welcome back.
Today we're going to be building
the screen for the registration and it's going to take no time because we already
have a login page that looks exactly like it.
So all we're gonna do is just copy this login directory and paste it inside
the screens folder and we're gonna call it registration instead.
And then we're gonna go here and we're
gonna rename the login file to registration.
And once I do that, my editor is going to prompt me and say
that if you want, we're going to rename the Constants.
And I do want that because I don't want to type.
And I'm going to do this refactoring as
well because it is asking me to do it or not.
So basically my constant is now
registration automatically in this file and is exported as well.
So if your editor doesn't do this automatically, please do it yourself.
Don't forget to.
And now we need to make sure that our navigation handles this.
So let's go to Routes, create a new item here and let's call it registration.
Registration.
And I misspelled it here so great.
And then now we're going to go to main navigation JS file and make sure that we
support a stack screen for that and let's make sure that we use registration route
and that we use the screen that we just created.
And now this was imported for me
automatically which is great, I don't have to type it.
And then we're going to have to go to our login page
and here we're going to say that onpress we want to navigate
we're going to use navigation navigate to Routes registration.
And now we want to make sure that this route is imported so make sure you do
that and that navigation is available for us to use.
So we're going to put navigation here and everything's looking good and if we
press here we're going to be redirected to the registration page.
I can tell because my text here was
automatically changed to registration but everything else looks the same
and we're going to take care of that right now.
So let's go to our registration file
and here we see that we need an email and we also need a password.
So I'm going to leave these two fields as
they are and above it I'm going to create a new field and I'm going to call it first
and Last name as given in the design first and Last Name.
And here I'm going to say enter your full name.
And the keyboard type doesn't have to be an email, so let's set it to default.
And instead of setting the email,
we're going to set full name and we're going to need a state for that.
So let's create it here and call it full name and then set full name.
Great. Let's save this.
And this is looking good.
And instead of welcome back, we should say hello and welcome.
So hello and welcome
and then exclamation mark.
And we don't need to don't have an account button given here, so let's delete this.
And let's also make sure that from our
styles, we get rid of the registration button because we don't need it.
And then what we want to do is also have
this back button given here so we should place it above the scroll view because
otherwise it's going to be centered along with all the content.
So let's create a view container for that.
Now let's place the back button here
and on press we're going to say that we want to navigate and go back.
Okay, now let's close this.
Let's make sure that navigation is
available to us here and then what we want to do is give this some style as well.
So we're going to create a new styles
and we're going to say style back button and let's go here and create that style.
And what we want to do here is give it
some kind of margin left which is 14 and margin top which is seven.
So let's say margin left horizontal scale 14 and margin top vertical scale seven
and these were automatically imported from me so make sure they are for you as well.
And now if we press this back button we're going to go to our login page and if we
press don't have an account then we're going to go on registration page and we're
going to handle the actual authentication a bit later in the course.
So stay tuned and thanks so much for watching.
I'll see you in the next video.