Hi and welcome back.
Today we're going to take very little time to create this amazing log in page just
because we have all the components for it already available for us.
So let's just get to work directly.
What we're going to need is our header
component that we created together and it is going to be of type one and it is going
to have a title that will just say welcome back.
Okay great, we see this appear here now
but we do need this content to be centered everything that we put here.
So what we could do for that is apply the styles to the scroll view container.
So let's go here and just say flex one.
And we're going to need justify content center here because the flex direction is
automatically set to column so we would need to use justify content.
So now what we want to do is have some distance between these two fields.
So let's see what that distance is.
That is 24 and I just happen to know that there's a lot of 24 happening here.
So what I'm going to do is actually I'm
going to go to global styles and I'm going to say that we need a global
style of margin bottom 24 and all it's going to do is very simple.
It's just going to get margin bottom to vertical scale of 24.
Let's make sure this is imported right now it is.
And now we need to apply this style.
So we're going to have to use the view container for that and we're going to have
to import this view container so that we get no errors.
And then we're going to give it a style
and we're going to say that we're going to be using global style for that
and we're going to apply margin bottom 24. Great.
Now we have that spacing available
so the same spacing is going to be needed for our input component.
So we're just going to create a view container for this as well and we're going
to apply the same style from here to this view container.
And then what we want to do is just copy
this, paste it here and then change some of the settings for our password.
So first of all we do know that the label should be password.
Then we don't want this text to appear here because it should be secure.
So we're going to say secure text entry should be set to true.
Now if we enter anything here it's going to be hidden and we don't need
the keyboard type to be email address, it can just be default field.
And here instead of enter your email we're
just going to put six stars as given in our design.
And now on change text, instead of resetting the email we need
a set password for which we do need to create something here as a state.
So let's say password and then set
password and whenever we type a password here.
Now our password will have the value
and then we need a view container for the login button.
So let's import the button that we
designed together again and let's just make it say login simply.
And it's going to do. nothing so far.
And it's visible very well because we have margin bottom applied here already.
And then we need this text here.
Don't have an account.
And it should be a button because it will redirect us to the registration page.
So what we're going to do here is actually use pressable and we're going to have
to import this pressable so that we get no errors.
So let me do that very quickly.
And then inside this pressable we're just going to put a header of type three
and it will have a title and it's just going to say don't have an account.
And once we build the registration page we
can come back here to make sure that onpress
we are redirected there.
And now this text is showing up as black.
So let's make sure that we use the hexadecimal value for our color
and let's give it a string with this value given here.
Great. And we do need margin bottom here as well.
So let's just copy this, paste it here and great.
Now this is almost ready.
The only string left is that we want to center this.
So let's apply some styles
here and we're going to call this style registration button and let's copy this.
Come here.
setup up the registration button.
And here we're just going to say that we need to align items
as centered and now this is going to be centered and it is going to be pressable.
And these two screens are very similar to each other.
So that's all we are done with this and I'll see you in the next video where
we're going to be creating the registration screen so that we can get
state on actually registering users very soon.
Thank you so much for watching and I'll see you in the next video.