Okay.
Our application has a login already done.
What is missing is register and that will be very simple.
Of course I will simplify everything.
So what we will do for register is we will have only username and password.
Normally you would like to collect maybe some other data from the user, but we'll keep it this way.
So username and password, we can actually reuse whatever we have here.
So how can we do that?
Basically if I go to the out here, I can close the rest of it.
What do we have here?
We have username and password that are using state.
I will have another one, so I will just duplicate it and I will store way to tell if we are in the
register view or login view.
So what.
What I can do is I can register view.
And I can also set register view and by default is false.
So we will have a login view and this register view I will toggle in between register and login.
So what I can do, the first thing here is we have a title login.
So instead of having logging here, what I could do is I can make it dynamic and I can use our new variable
register view.
And if that's the true, then we will have register.
Otherwise we have a login.
So it depends on this variable.
Here we'll have either login or register on the button here, so that will be just a title on the button.
Nothing will actually change here, but we will display the appropriate label on the button.
So what can we do now?
So basically what we need to do is we need to make sure and we need to add an extra element on the page
that will toggle in between the register and login.
Normally you can do it taps or you can do buttons or you can do any layout you like.
What I will do is I will display a simple text here, but as you remember, the text are not clickable.
So what we need to do is we need to do a touchable opacity.
So I will do touchable opacity.
It's been imported here, but this is imported from React Native Gesture handler.
What we want to have is a imported from React native like we have it here so I can remove this one.
And then I have touchable opacity.
So this this element inside can be clickable.
So we can have a text here and inside text we can say, don't
have an icon.
Register here.
Like this.
And this text will be clickable.
So what we can do is we can do on press.
And once we click, it will trigger toggle view.
Like this.
So we need to create a new function.
I will use arrow function as always.
And then what we can do, we can have use the set register view.
So set, register, view and what we will pass.
So we want to toggle.
So what we can do is we can actually use whatever is there and we will pass opposite.
So if register view is false, we'll pass it through.
If it's true, we'll pass it false.
So it will kind of toggle this thing.
So if we save it now.
I mean, do we need to come back here?
And we have a new text here.
If I click on a text, we have register, click it again, we have login.
So this is working fine and it's kind of toggle my view.
So here what I can do is I can actually do similar things as I've done here.
So I have register view and then I can do so If we have register view, then I would like to do one
text and otherwise I would like to do another text.
So this will be my second text.
And that will be my first act.
So.
And we can have it like that.
So already have an account, go back to login and then if you are not registered you will display this.
So we can go here and test it.
So we have don't have an account.
It's really hard to read at this point.
We'll just fix it in a second and then we have already have an account go back here and you go back
to login.
So this is kind of a toggling, right?
And what we need to do is I will add style and we can style it a little bit.
So styles and then I can do view text.
And actually I can play the same style on the second one here.
And what we need to do is we need to implement the this new class here.
So and what we will do first thing first we will do color white.
So it will be much better visible on the black screen.
We can do font size, for example, 20.
We can do some padding.
So I will do padding top.
Of 30 and then I can do padding left of ten, and then I can do.
Padding.
Right of ten.
So let's take a look how it how it is now.
So I need to come back here and don't have an account register here.
So it's much more visible now.
But I have an extra element here.
I think I just put it somewhere here.
Oh, here we have an extra element and it should be fine now.
So we go, Don't have an account register here, click it and then you have already have an account.
Go back to login and we are in the login.
So we have that already.
So it's going to very simplify user interface.
It's not looking great, but it is working in the way we want to have it.
So we'll be able to reuse our username and password for the two things.
So we have that rich view here and we can actually use it whatever we click on the button.
So we do authenticate.
So what I can do is if.
Not Ridge view.
So it is not register view.
It is a simple login.
Then do something.
Otherwise you can do something.
Or we can do.
If register view then we will do something.
Otherwise it's a login view so we can actually do this.
So I will take this from here and put it here.
That's, that's our login.
And then we need to do something also for register.
So for register here I will just paste the same thing here.
So you can see we have twice this and this and this one.
I will change it for register.
So that will be API slash users.
So this will be our endpoint to register new user.
What we need to do is the application Json is fine, Json stringify username and password is just fine.
What we need to do is we need to change this.
So what we would like to have like navigate to the movie list at this point when we register user,
we don't have a token returned.
So what we will need to do is we will need to login so we can still have the username and password the
same way as we had it.
I mean in, in the form.
So when you register, but we'll switch to the login view directly from here.
So we could do.
Set, register, view.
So instead of having this, I will use set, register view and we'll do false.
So basically, whenever we register, we have a success.
We will set register to false and that will come back to the login.
So if I will go here.
I will do registers.
I would like to register new user so my new user I can do Christian two and Christian two and then I
register.
And at the moment I registered with this.
So I will try to log in with the same credentials login.
And you can see here I'm in this list, that means my user has been registered.
So this is the way you can log in your users and you can also register.
Of course, this is not a perfect UI.
You will require something more user friendly because like if you if you switch it like this, it's
kind of not properly styled, it's not properly used, but you get the idea.
You can register users and then you can log in, you can adjust based on the current view.
What would you like to do once you have the login, you can actually log in, get the token from the
response and you can authenticate it with the rest of the app.
So at this moment our application is working fine.
We can actually do everything.
What we could do in the web version, we can add it, we can rate it, and then we can perform all the
crude methods and our application is ready.
But this application is ready on both Android and also on iOS.
So we've created in this course three different application and there are fully functional.
Now, as I said before, I'm not going to go through releasing this application into the market because
that's like a very huge separate topic.
But if you want to do that, the best way will be to visit the official React Native page and you will
have a tons of resources there how to perform that.
It's not easy process, especially on iOS, but it's if you want to release your application, that
will be your starting point.