Okay, let's go ahead and style our login screen here. It's going to have a pretty standard design with an image up top, the two input boxes underneath, and then a button to log in underneath that. So let me just paste in the stylesheet create here. Let's add a style for container. And this will be flex: 1. And let's make the backgroundColor the Twitter blue. So the same blue I've been using throughout the app. And then let's add a lineItems: center. And let's add this container to our main view here and get rid of this.

And then let's add a line items center. And let's add this container to our main view here and get rid of this. So it should be styles.container. That should be blue now. And we have to import stylesheet. Let's make another wrapping view. So we give the entire container a margin on the top. So let's wrap this entire thing, actually. Everything within the view. So everything here, let's wrap this in another view.

Everything within the view. So everything here, let's wrap this in another view. Okay. And let's give it some margin. I'm just going to do inline here. style equals margin-top. I have it as 130 here. And let's give it a width as well of 260. Okay. And the first thing I want is an image.

Okay. And the first thing I want is an image. So this will probably be your logo, but I just have an image of Larry here. So again, I'm going to wrap this in a view, and then we'll have the image component here. So we have image, say style, and we'll give it a logo or a style of logo. And for the source, we've been making use of images that are already hosted online. But for this image, I have it locally. So we can do source equals, and we can use require, and then grab it from my file system here. And I already have it here.

here. And I already have it here. It's within assets, and it's called Larry default.png. So let's grab that. I think we have to go up two, and it should be assets and Larry default. Okay. Save that. We have to import image. Okay. Save that.

Okay. Save that. And there he is. Let's center him so we can add a style here, and we can do line-items-center. Okay. Now for our text inputs right here, let's wrap this in a view as well. So we can give it a margin on the top. Actually, I'm going to put the errors up here so we can grab the error here, and let's put this first. We don't need this text here.

this first. We don't need this text here. Let's put the error here, and we'll wrap all of this in a view as well. So starting here and all the way, let's just put everything in there for now. So up to here, let's wrap this in a view. Okay. That should still work. Hopefully it does. And let's just give it some margin on the top. So again, I'll do this in line style equals margin-top.

And let's just give it some margin on the top. So again, I'll do this in line style equals margin top. I have it as 40. Okay. And for our input boxes here. So for both of them, let's add a style here, and we'll name this one as well. So let's say I'm going to make use of two styles here. So I'll make it an array styles['inputBox'] and give it some margin top styles['mt4'] is what I have. And we also forgot to add the logo here.

MT four is what I have. And we also forgot to add the logo here. So we'll do that down here. So first, the logo is just making it a bit smaller. So let's say logo with 100 and height 120 is what I have. Okay. And for our input box, let's give it a background color of white. Let's give it a border radius of five, and let's give it some padding of 10. Okay. And we also need the MT four.

So let's style this. I believe I have the view only wrapped around the text inputs. So let me change that. So we'll put this only up to the end of the text input. Okay. And instead of a button, I'm making use of a TouchableOpacity like we've been doing throughout the series. Make sure to import that. And the onPress is the same as the button. So let me grab that.

And the on press is the same as the button. So let me grab that. Okay. Let's add that here. And for our styles, let me add a few name styles here. So we're going to have one called styles.loginButton and one called styles.emptyFive. Okay. So we don't need this button anymore. We just need a Text component within our TouchableOpacity.

So we don't need this button anymore. We just need a Text component within our TouchableOpacity. So say text. This has a style on it as well. Say styles.loginButtonText, and it's going to be login. So let's go ahead and add those styles down here. So let's add empty5 first. I have it as marginTop 22, I believe is what I used, and then let's add the loginButton here. loginButton.

So instead of a button, let's just make it some text with a TouchableOpacity. So say text. I have a style on this as well. It's called styles.registerText. And it just says don't have an account, and then we'll have a button here. Again, it's going to be a TouchableOpacity. So let me just grab this, paste it here, and on press, we're just going to navigate to the Register screen. So let's copy that. Let's get rid of this.

So let's copy that. Let's get rid of this. Let's go ahead and paste that in here. And I don't have a style on the TouchableOpacity, but I do for the text within it. So this is registerButtonText. And it just says register here with a space in the front. Okay. Actually, I have the style as registerTextLink, so it makes more sense. So let's go ahead and add those styles. It's going to paste it in to save some time.

So let's go ahead and add those styles. It's going to paste it in to save some time. We just have a slightly smaller font size and a text color of white and underlining. So let's try that. And I forgot to wrap that in a view and make the flex direction row. So let's do that around this text with the TouchableOpacity. This is going to be a view. And again, I'm just going to use an inline style here. style equals, let's say flexDirection. Let's make it row.

And it does. Cool. So let me just log out here. I'm going to do the same thing for the register screen in terms of styling, pretty much the same thing except we have more fields for creating a new User. So I'm just gonna do this behind the scenes and come back when it's done. Okay, so I've gone ahead and styled the register screen. And it looks pretty much the same as the login screen except we have more fields. So obviously, we have more state here for those fields. And I've wired up the register button here.

So obviously, we have more state here for those fields. And I've wired up the register button here. But all it does is display this alert. And we'll work on the backend logic for registering in the next video. So for now, let's go ahead and make a commit here. Stop this. We only have code on the front end. So let's go ahead and git add, git commit, style auth screens.