We'll also implement this character counter here, which shows us how many characters we have left. So let's go ahead and get started. Let's change this to this container that I've already added. So we can say styles.container. Okay. And first we want this section, which will have the character counter and the tweet button. So let's start with that. So that's going to be a view.

So let's start with that. So that's going to be a view. Say style equals styles. Let's say tweetButtonContainer. Okay. And the first item will be text. So say text. And for now, let's just say charactersLeft, and we'll hard code this for now and work on it later. So I believe the character limit is 280 characters for tweets these days.

This is just a simple explanation with no code.

Let's save that. And that looks pretty good. So next is the container for the actual text box. And we have the avatar image there as well. So let's go up here and after this container, we'll add a new one. So let's say view and the style is going to be styles., let's name it tweetBoxContainer. Okay. And then the first flex item will be the image. So I'm just going to grab that from here.

And then the first flex item will be the image. So I'm just going to grab that from here. Okay. Let's make sure to import Image from react-native. And we'll add the avatar styles in a second. And the second flex item will be the text box. So that component is a TextInput in react-native. So TextInput, and we can self close that. But let's pass in some props here. So let's say styles, give it some styles, let's name it styles.input.

But let's pass in some props here. So let's say styles, give it some styles, let's name it styles.input. So on change. So whenever the user types in, let's call a setTweet method. And we'll make use of react state here in a second, let me just add all the props here. value is going to be tweet. The placeholder is what's happening. We have a placeholder text color, which is gray. Let's import TextInput first. So we get the IntelliSense.

Let's import text input first. So we get the IntelliSense. So it's this one. So now we should have the IntelliSense multi line, because we want it on several lines. And let's say max length of 280, because that's the maximum length for a tweet. Okay. So let's go ahead and add some state for the tweet. So let's say const tweet, and setTweet. And we'll make use of useState here. Make sure to import that.

And we'll make use of useState here. Make sure to import that. And it's defaulted to an empty string. Okay. Okay, there's our text box. Let's add some styles here for what we defined in here. So we have our tweetBoxContainer. It's going to be flexDirection row. And let's give it some paddingTop. Okay.

And let's give it some padding top. Okay. Next is our avatar. So we have width 42 is what I'm using height 42. I have a margin-right here of 8. margin-top of 10. And a border-radius of 21. So it's a circle. And let's also make sure to style our input here. So say input.

Add prop value. So I reloaded the app and that warning is gone now. I also noticed that I have this as styles instead of style. Save that. Okay. Now it's bigger. And I'm going to add some padding on the entire container here. Since we have no separators, we can just add it directly here. So I have paddingVertical as 12. And paddingHorizontal as 10.

So I have paddingVertical as 12. And paddingHorizontal as 10. Okay. So that looks pretty good. If we type past 280 characters, then it should not allow us to type more than that. Okay. And it looks like it's cut off here as well. We might have to add flex 1 to the input right here. flex 1. Okay.

Flex 1. Okay. So that fixes it. Let me just keep typing here. And it should stop at some point. Hopefully. Okay. So right there is the 280 character limit. So let's see if we can get this counter working. So let's say 280.

So let's see if we can get this counter working. So let's say 280. So we can just subtract 280 minus tweet.length. Okay. And we are getting not a number. I'm sorry. It should be onChangeText. So if I had the IntelliSense up at this point, I would have seen that. So it should be onChangeText. I guess there's onChange as well, but we're interested in onChangeText.

So it should be on change text. I guess there's on change as well, but we're interested in on change text. Okay. Hopefully, this fixes everything. Let's try again. And now the character counter is working. How about we change the color if we only have a few characters left? So we can do that here. Let's add a style and let's just give it a condition. We'll use a ternary here.

Let's add a style and let's just give it a condition. We'll use a ternary here. So if tweet.length is greater than 250, so only 30 characters left, then we can say styles.text red, which we'll add. And if not, we'll just give it styles.text gray, which I already have. Sorry, I forgot the question mark here. Okay. Save that. Let's add text.red down here. So I have...

So if it's under 30 characters, that should switch to red. So let me just add this. And you can see as I type and there are under 30 characters left, it changes to red. And I forgot to change the text of this to tweet instead of follow. So this should be tweet. Might as well add the onPress equals. Let's add a method here called sendTweet. And we can just, for now, navigate back to the home screen. sendTweet. Navigation.navigate.

So we have our main screen. We have our single Tweet screen. We have our profile screen, which I guess I didn't link here. I guess we can do that now. So let's grab that from here. So go to profile, let's grab this. This is on the single or the Tweet screen. Okay. Let's add that method up here. Make sure to grab navigation from here.

Let's add that method up here. Make sure to grab navigation from here. And let's use that in, where is it? Here. So I guess I didn't set it as a TouchableOpacity. Actually, I did. So it's this whole thing. So we can just say onPress equals. And let's say goToProfile. Okay, save that.

And let's say go to profile. Okay, save that. And this should go to the profile now. Cool. So yeah, those are our four main screens for our app. And we can finally start working on the back end and start communication with our front end here. So let's go ahead and make a commit as always. git add, git commit, implement design for new tweet screen.

git add, git commit, implement design for new Tweet screen.