So let's get started with implementing authentication and one very important step towards that is that
we add a new screen, the auth screen which is the screen that should present a login or sign up form which
the user can use to login or sign up
and therefore here in the auth screen, I'll import react from react
and I'll also import some things from React Native because from there, from React Native, I want to have
the scroll view because we'll build a form and I want to make sure that users on all device sizes
can interact with it.
I will add a stylesheet here and that should be it for now,
we can always add more if we need more.
We can also already include a view and the keyboard avoiding view I guess to make sure that all inputs
are always reachable.
Now speaking of inputs, of course we'll add a form and therefore I will reuse the input component we built
in the forms section which I can find in the components UI folder.
So make sure you watch this section to know what this component does and how we can manage a form with
it.
With that, we can create the auth screen component here which receives props and we can also create that
styles object with the stylesheet, the create method there
and of course export the auth screen, like this.
Now obviously the question now also is, how do we present this auth screen? How do we make sure that we
see this if we're not logged in?
Now that's something we'll refine throughout this module but to get started, we can go to the navigator and
make sure that when the app launches, we see that auth screen and for this we can use a special new navigator
which we haven't used before which is specifically built for, you could almost say for this authentication
use case and that the create switch navigator function that helps us there,
so it creates such a switch navigator. The special thing about this navigator is that it always displays
exactly one screen and you can't go back to another screen if you then navigate to a different one.
So going back is explicitly not allowed which is exactly what we want because you shouldn't be able
to go back to the login screen if you did just login.
So therefore here at the bottom of the file, I'll create a new navigator, maybe my main navigator, the
name is totally up to you of course, with create switch navigator and just as before, this navigator
takes an argument where we configure it, so an object where we configure it and there, I want to bind
my auth screen and also of course my shop stack thereafter. Now to have a nice header, I will also create
my auth navigator here which is a stack navigator created with create stack navigator and in there, I'll
just map the auth screen which I just started working on and for this of course, we need to import it,
so in that ShopNavigator.js file, we can import auth screen from user auth screen like
this
and with that import added, if we go down, we map this here to auth in the auth navigator and the auth navigator
is then mapped to auth here in the switch navigator and shop is of course mapped to the shop navigator
and now it's the main navigator which we wrap with create app container and therefore with that if we
save this, we will actually render the auth screen as the first screen which right now will not render
any valid jsx,
so we get an error but we can work on that of course because there the goal now is to render this authentication
screen where we can login and do our thing. So here, I want to present these inputs and I'll actually
also import the card component from components UI card to have this nice card look here and have my
inputs in there and of course this is totally optional but here, I'll add it, here I'll add the card and
in the card, we can add the scroll view so that we can scroll inside of that card, of course you could
also add the scroll view around the card so that you can scroll on the overall screen but I'll do it
like this, also add my own style here to the card which I'll name auth container maybe, name is totally
up to you and I'll also wrap a view around all of that here as a wrapping view where I will add a
style which I'll name screen. Actually here we can already use the keyboard avoiding view I guess with
a behavior of padding and then this keyboard vertical offset off let's say 50. So now inside
of that scroll view here which we have in our card, we can start adding the inputs, the custom input
we built earlier in the course. For example here, an input with the ID email and a label of email because
there I want to fetch the user email address and therefore the keyboard type of email-address
which is supported both on iOS and Android.
It should also be required and I want to use the email validator, these are two of the validation functionalities
I built into the input earlier in this course, also auto capitalized should be turned off so I'll set
it to none because capitalized in the email address is really not helpful and the error message I want to
show if we have something wrong in there is please enter a valid email address, something like that.
Now when the value changes, so on value change, we want to do something but for now I'll not do anything
here,
just provide an empty function so that we don't get an error and the initial value which I want to show
here,
well that's just an empty string
in the end because I don't want to provide any other initial value.
Now of course, it's not the only input, so I'll repeat this because I also need a password input here
with a label of password and the keyboard type here should be default because I want to have the normal
text keyword
but I want to obscure the input so that we can't see it
and that can be done by adding to secure text entry here.
This is of course not a prop supported by my custom component
but keep in mind that in this component, we forward all props to the built-in text input and the built
in text input supports this secure text entry property here,
so that's why I can set this. Here
the validation should also not check for that being an email address but make sure that we have a min
length of let's say five characters. Auto capitalization can be turned off here as well,
error message would be please enter a valid password and with that, I just saw that here of course I
have a typo, that should be email address, here password and I'll leave this here as it is.
Now in order to be able to submit this,
I also need a button, so here I will import button from React Native and add two buttons actually in
the card
and therefore also inside of the scroll view. The first button has a title of login let's say and we'll
later switch this to be either login or sign up depending on the mode we're in and the color is imported
or is added with the help of the colors constant which you should import and on these colors constant,
I will use Colors.primary and onPress at the moment can simply point at an empty function and I
will repeat this because I want to have a second button where I say switch to sign up and of course this
will also then later say switch to login if we are in sign up mode and there we can maybe use our
accent color. If we now save that, we should have a basic login screen,
here it is, doesn't look the way it should look but we have our inputs here,
we have these two buttons,
also on Android once this is done loading,
here we go
and now of course I'll like to style this appropriately.
So let's go down to the stylesheet
and please note I have two styles in the end assigned - screen and auth container, so here in the styles I
want to add both screen and auth container,
these are the two styles I plan on working with. Now for the screen, I'll set flex to one and then justify
my content in the center and align the items in the center to have centering both on the vertical and the
horizontal axis
and on the auth container, I want to set a width of let's say 80% to not take the full available
width and a max width actually of 400 pixels in case 80% would be more than that, we restrict it
to 400 pixels and maybe a height of let's say 50% but a max height of also 400.
Let's see how that looks like. If
we save this,
this is what I get here.
Now I can scroll in there because I set up such a scroll view and actually that's not the behavior I
want.
I'll not set a height here,
I'll just add a max height so that this is capped at a certain height
but by default it just takes as much height as required and therefore I rather instead
add some padding so that we have some space around the inputs and it doesn't sit on the edge of the
card,
so this looks much nicer and let's see how that looks like on Android, yes
looks generally OK.
If I tap in there, this also scrolls up
so the keyboard avoiding view is doing its job but of course, I still get an error here that on input change
is causing an error because yes, I added on value change here,
that should be on input change, not on value change.
So that's a little fix but we're heading in the right direction.
Now I'm not done though, I want to have a header title
and how about some background color here, that would also be nice probably.
So for that, regarding the header title of course we can add AuthScreen.navigationOptions and work
with some static options for now because I just want to add a header title here and set this to please
authenticate or just authenticate, something like that
and for the background,
well of course we could give our view here which holds everything a background color
but I actually want to show you a new component which we haven't used thus far and for this, we need to install
a brand new package and that's the expo-linear-gradient package which you installed with npm install
--save expo-linear-gradient.
This is a package which allows us to add a linear gradient with ease,
so in a very simple way
and after this has been installed, you just need to import from expo-linear-gradient
and you do import a component which this exposes, the linear gradient component.
Now that's a component which you can use in your page and here I'll use it inside of the keyboard avoiding
view, linear gradient like this and wrap it around all the other content like this here and now you can
configure that
and there, I want to make sure that this has a colors key which allows us to set the colors between it
should transition because a gradient is simply a gradient between multiple colors, at least two
but you can add more and there you can now just add colors, like red or by adding the hex codes
and I want to transition between #ffedff and let's say another hex code, #ffe3ff and of course
you can experiment with different colors here.
Now we also need to add a style here and I will name this styles gradient which we can now add down here
and this gradient will take a width of 100% and a height of 100%, so it will take all the
width and height it can get, this is therefore how it looks like
but now we have a problem,
of course our content isn't centered anymore. To ensure that this is the case,
we now need to add justify content and align items again and therefore here on the surrounding
screen,
we can get rid of that.
Now we have the same look as before,
obviously we can therefore also achieve this by not setting width and height but just flex one.
So now with this setup here and it's important that the screen doesn't try to center because otherwise
the gradient will be centered
but with this set up, we now have this look with this nice gradient and to see our header title here, we
just need to make sure that in the navigation setup, in the shop navigator, we assign our default navigation
props to the auth navigator.
So I'll add the second argument to create stack navigator and default navigation options just points
at default nav options which sets up the header colour, the header title color and so on.
Of course, make sure you have no typo here in the auth screen navigation options in the auth screen as
I do.
So with that fixed, this is the setup we have here, of course you can experiment with the colors and use
different colors if you prefer that, I'm happy with that
and now the only remaining thing I want to fix here is my styling for the buttons, some spacing around
them would be nice and that can easily be added by wrapping the buttons in views here, both buttons actually.
So I'll do this here and now give each view a style here, maybe styles button container, do this on the first
view and on the second view
and now we can give that button container a styling down there in the stylesheet
and here we can set a margin top for example of 10 to make sure that every button has a little margin
to the top so that the buttons don't sit directly next to each other which I think really would help
our buttons.
So this looks good on iOS,
let's also check it out on Android,
yes this doesn't look too bad.
So with that, we have that basic setup, now let's make sure that this also does something useful and that
we do actually try to login with that.