We want the ability to switch between our Login and our Registration form by simply pressing on the screen. So we're also going to see how we can use React hooks in order to do that. So if you've not used React hooks before, then this is gonna be a great introduction for you.

I also noticed after I finished filming that I kinda had my Text logic backwards. You probably also noticed that. It should say Already have an account? Login, and then say something like Need an account? Register. So we'll also take care of that here.

So first and foremost, if you think about what we need to do, I want to start by just kinda taking a high-level view what that behavior is gonna be. I want the ability to click on this text here and have it switched to a different screen type. Now, we technically could build our own route for our Registration component and a different one for a Login component.

But really, if you did that, one thing you'd see is that the code would be almost identical. You might need something like that if, say, your Registration component had a bunch of extra fields, like if it had a request for a username and a first name and a last name and an email and a phone number, then it makes sense to do it differently, but we're gonna keep it pretty simple.

We're simply gonna have a email and password for the Login, and an email and password for the Registration component. So really, all that's gonna have to change is some text on the screen and then the type of API call we're gonna make. Those are all dynamic, we can manage that type of change. So let's see how we could do that.

We're gonna start by bringing in, if you notice, we're using a function component, and if you are used to a little bit older version of React, and you used class components whenever you wanted to work with state, now in the most up-to-date versions of React, you can use state inside of a functional component using what are called React hooks. So the way you can use hooks is right after you say import React, you can say comma, and then curly brackets, and we're gonna say useState.

Now, useState gives us the ability, even inside of a function component, to be able to have state inside of it. So when we're working with hooks, you have to list out your state just like you would a variable or in a very similar type of syntax. So I'm gonna say const, and then using brackets here, I'm going to give two items. So this is gonna take, first, the name of the state element, and then, second, the name of how I want to set it, so it's gonna be a function.

So first, let's just call this one formToShow, so that's gonna be the name of the variable and then the setter is gonna just be setFormToShow and then from there, we set this equal to useState, and then useState takes in an argument, and that is gonna be the starting state. So here, we're gonna say something, let's just say LOGIN, that's gonna be the default state that we want it to show.

Now, if you've never used hooks before, that's gonna look really confusing. So one thing that might help you a little bit, and even if you're just new to hooks and you've seen them before, it might help to see what this would look like if this were a class component. So in a class component, we would need, and just pretend that I'm in a class component using state, I need to say something like this.

So I need to say state, and then inside of here, I would write formToShow, and then I'd set a default of LOGIN, just like that. And then any time I wanted to change that state, I'd have to say this.setState, Typescript knows I'm not even able to do that, so it doesn't even like me doing that. So I'd say this.setState, and inside that, I'd put an object. And any time I wanna change it, I wanna say, I'd need to say formToShow, and then we can change this to, say, something like REGISTER.

We'd have to do that any time that we wanted to either look it up and then, yeah, if we wanted to see what that would be, what the value was, we'd have to say this.state.formToShow, and then that would tell us what that value is. With React hooks, we get to skip all of that, we don't use the word this anywhere, we simply get to treat formToShow like a local variable.

And setFormToShow here is a dynamic function that allows us to set that value. So we don't have to do any of this anymore, which is really nice. It means we don't have a lot of boilerplate code to write for every function.

Now that we have that, let's build our dynamic behavior. I want this text, any time I press this button, I want the text to change, so we're gonna create two functions. The first one is gonna be screenTypeText. So I'm gonna say const screenTypeText, and I'm gonna make this a fat arrow function that doesn't take in any arguments, and I'm gonna say if formToShow is triple equal to LOGIN, then I wanna return some text. So in other words, if we're on the default, if the user opens the screen and they see the Login screen, I want to show this text.

So for that, I'm gonna say Need an account? Register. Just like that. And so that's gonna be the text that gets put in.

AuthScreen.tsx

const screenTypeText = () => {
  if (formToShow === "LOGIN") {
    return "Need an acccount? Register";
  }
}

Now, else, the other condition, and we know we're only gonna have two options here, but just to be really explicit and declarative with the code we're writing, let's say else if just to make it clear what those options are. I'm gonna say else if formToShow is equal to REGISTER, then I want you to return something different. I want you to return Already have an account? Login, just like that.

AuthScreen.tsx

const screenTypeText = () => {
  if (formToShow === "LOGIN") {
    return "Need an acccount? Register";
  } else if (formToShow === "REGISTER") {
    return "Already have an account? Login";
  }
}

And now what we can do is inside of where we have our Text tag here, we can get rid of all of that, and inside of curly brackets type in screenTypeText, and make sure you call it because this is a function, and we'll hit Save.

AuthScreen.tsx

<TouchableOpacity>
  <Text>{screenTypeText()}</Text>
</TouchableOpacity>

And by default, you'll see it says Need an account? Register.

So this is pretty cool. The functions are already working. It's checking to see what the value of formToShow is. It's by default, it's LOGIN, and so it's returning this text. So now, let's build in the ability to change that dynamically and toggle between them. So I'm gonna create another function here. And this one I'm gonna say const handle, let's say Screen or AuthTypePress. You can call it whatever you want, something that really makes sense though. It's not gonna take in any arguments.

Now we're gonna have pretty much the same conditional. There are ways of merging them, but for right now, I just really wanna make sure you see exactly how it's working. So instead of changing the text now, what we're gonna do is we're gonna change between the state. So I can get rid of these return statements, and I'm gonna say if formToShow is equal to LOGIN, and they press it, which means at when the screen loads up, we know we're in the Login state.

If that button gets pressed, so if this text gets pressed, then I want you to change it so the screen is REGISTER, the formToShow is REGISTER. So here, I'm gonna say setFormToShow, and I'm gonna change that to REGISTER. And then also, in the exact opposite, if the screen already is on the REGISTER mode, then I wanna change it to LOGIN. And then from there, we simply have to pass in handleAuthTypePress, and pass it into the onPress handler, so onPress of our TouchableOpacity button. So let's hit Save, and let's see if this is working.

AuthScreen.tsx

const handleAuthTypePress = () => {
  if (formToShow === "LOGIN") {
    setFormToShow("REGISTER");
  } else if (formToShow === "REGISTER") {
    setFormToShow("LOGIN");
  }
}

So I'm gonna come up here. It says Need an account? And I'm gonna click it, and look at that. It's changing dynamically as we're pressing it.

Now, let's also change, the last thing we'll do, is let's change our header here. So instead of it saying LOGIN, we want that to change as well. So we can create another function here. So we'll say const, and we'll just call it headerText, and then inside of here, we're gonna have the same exact conditional.

Now, if I were doing this on my own production application, what I would probably do, just to give you a little bit heads-up, is I would probably only have one of these conditionals or one of these functions, and then it would update whenever that value gets changed, and it would update a set of items, so I'd create an object that said, that maybe had the headerText and it had the content text, and it had those values. And when the link was pressed and it was toggled, it would change that entire object.

But I don't wanna do that, too, now 'cause I don't want it to be confusing. I want this to be really clear, but I simultaneously want you to know that as you go along, as you get more advanced, you're gonna be able to streamline a lot of this code. If you ever run into a situation where you're using the identical conditional three times, that's probably a good indicator that you can refactor it and combine them. But for right now, I just want to get all of this working and for you really to understand how you can use hooks if you've never used them before, and then also how you can alter the state dynamically and change things on the screen by the user pressing around.

So for headerText, I'm gonna say, okay, this is going if formToShow is LOGIN, then we want this to say Login. So we'll just return Login. And if it is REGISTER, pretty basic, we just wanna say Register. And now, inside of Login, we can do the same thing, where we say headerText, call it 'cause it's a function, hit Save, so now our default is working.

AuthScreen.tsx

const headerText = () => {
  if (formToShow === "LOGIN") {
    return "Login";
  } else if (formToShow === "REGISTER") {
    return "Register";
  }
};  

return (
  <View style={{ marginTop: 100 }}>
    <Text>{headerText()}</Text>

    <TouchableOpacity onPress={handleAuthTypePress}>
      <Text>{screenTypeText()}</Text>
    </TouchableOpacity>
  </View>
);

If I click, hit this, then everything is changing really nicely.

So that's it, you now have the ability to change based on the user behavior, based on them clicking around, and pressing around on the screen, you now know how to change the entire way the screen is rendered. So great job on that.

Now that we have that in place, in the next guide, we're gonna see how we can start working with forms in React Native.

Resources

• Source code