So I'm going to come here and you may notice also, if you're following along on iOS that the simulator has changed its look and feel a little bit. And that's something that Apple does on a regular basis. Since I recorded the last video, I've updated my version of Xcode and that is one of the different changes I have. So that is the only difference there.

So now to, what our goal is here is I want to remove this white space and that white space is just there because if you open your authScreenStyles file, then you'll see that we added a marginTop there of 100. That was just a temporary placeholder. That's what we're going to be getting rid of. So let's pull in those constants. So I'm going to say import Constants from expo-constants. And now for marginTop, I'm going to get rid of where it says marginTop: 100 and now I'm going to say Constants dot and then you can see, we have all of these helpful types of values. We want to use the statusBarHeight though. So I'm going to hit Save here. And you can see that's been refreshed and now, we have that statusBarHeight up here at the top and we don't have that extra white space. Now, the really cool thing about this, if you were on Android, this is also going to work. It's going to be dynamic based on the screen and the status bar of whatever platform that you're working with so this is really helpful.

authScreenStyles.tsx

import Contstants from "expo-constants";

authScreenStyles.tsx

export default StyleSheet.create({
  container: {
    backgroundColor: dark,
    padding: 15,
    height: "100%",
    marginTop: 100
    marginTop: Contstants.statusBarHeight
  }
});

So all of this is coming along nicely. Let's add, because that was really quick, let's add a few more styles and clean up this screen just a little bit. So if you open up your AuthScreen self, and you take a look at what we have here. So right now, we have our email and our password field. Those are looking good and then we have our text. So this text where it says need an account? Register. This is placed a little bit too close to the button so let's add some styles here and in this case, I'm just going to add some in-line style. So here, I'm just going to add a style tag and I'm just going to add a little bit of margin. So we'll say marginTop of 10 and let's say marginBottom of 20. And let's hit Save and you can see that's looking a lot better.

AuthScreen.tsx

      <TouchableOpacity
        style={{ marginTop: 10, marginBottom: 20 }}
        onPress={handleAuthTypePress}
      >
        <Text style={{ color: "white" }}>{screenTypeText()}</Text>
      </TouchableOpacity>

Now if I hit Register or Login, that's all getting swapped out. I'm also, because it's pretty clear to me that based on the button that we don't have to have this Register text up here so let's come up and let's remove that entirely because the button explains the purpose of the screen. So we can remove that header text and just because we're good developers and we want our code to be very explicit, I don't really think that function should say headerText anymore because now it's for the button. So let's keep scrolling up. So instead of headerText, let's call this buttonText. And then let's move down to where headerText is being called. Replace that.

AuthScreen.tsx

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

AuthScreen.tsx

      {isSubmitting ? (
        <Button text={"Submitting..."} onPress={handleSubmit} disabled={true} />
      ) : (
        <Button text={buttonText()} onPress={handleSubmit} />
      )}

And it looks like that's the last spot it needs to be and so now, you can see, our form is looking much more professional. This is something that you'd see on many other types of applications and you also have the ability to toggle between both of those form types.

So that is coming along really nicely. With all of that in place, next, we're going to start building out a registration functionality.

Resources

• Source code