Okay, let's start styling our screens. Let's start with the home screen, which will have a list of tweets. And I believe I have a screenshot here, which we can reference of the finished project. So I think I gave a brief overview of how CSS works within a React Native project. Basically, you have to use CSS in JS and define your CSS in an object like this. So this would be the equivalent of an inline style. Or if you wanted to use something like classes, you can just reference an object. So styles.container. And we can create that style sheet down here. So we can say const styles = StyleSheet.create({}).

And we can create that style sheet down here. So we can say const styles equals style sheet. Let me just import that, this one, .create, and then it's going to be an object. And I named this one container. I believe I cut that, so we can just paste that in. I'm sorry, this should be style, styles. There we go. So it's the same thing. So I'm just going to stick to this way. But just like in CSS, there are several ways you can structure this.

So I'm just going to stick to this way. But just like in CSS, there are several ways you can structure this. So right now this is only scoped to this component in this file, which is fine in our case. But if you wanted to make it global, you would define this in a separate file, export that, and then import it wherever you need it. If you're a fan of Tailwind CSS, like I am, you can make use of this plugin here, which allows you to use Tailwind's classes within a React Native project. So you would just use this Tailwind function and provide the Tailwind classes that you are used to using. So I was tempted to use this since I'm such a big fan of Tailwind, but I decided to just

And we have 10 items here. So we can see the scrolling in effect. And obviously, these should be tweets, because that's the list we're rendering. But in this case, I'm just focused on the design. So just an ID and a title is fine for now. Save that. Let's go ahead and take a look at the flat list here. So let's grab this. Let's paste it right here in our view. Let's save that.

Let's paste it right here in our view. Let's save that. So the props for the FlatList are the data, which is required. And that's what I just pasted in for our data. The renderItem is what renders each item. And the keyExtractor is the unique ID, which is the ID in this case. And I believe it has to be a string. So let's go ahead and add the renderItem here. So let's just start with something basic. renderItem.

So let's just start with something basic. Render item. So let's destructure the item. So that's going to be this object here in our case. And for now, let's just output the title. So let's wrap it in a view. So let's say view. And let's wrap it in a text component. And let's just say item.title. And let's see if it renders those items.

And let's just say item.title. And let's see if it renders those items. We have to import flatList. So let's do that. OK. Save that. OK. So it does render those items. So let's take a look at our screenshot again. So we want to use flexbox here.

And like I said, we have to change it to row. So let's do that. So here, let's define a new style. So think of these as classes if you want. That's how I think of it. So let's say styles. And let's name it tweetContainer. And this will be our first flex container. So let's define that down here underneath our container, tweetContainer. And VS Code does a pretty good job with the CSS and JS IntelliSense.

So let's define that down here underneath our container, tweetContainer. And VS Code does a pretty good job with the CSS and JS IntelliSense. For example, like I said, everything has to be a flex container. So if I were to say display, we only have two options, which is either flex or none. So like I said, let's change the flexDirection to row because it's column by default. And let's give it some padding. So in CSS, you're probably used to the short form where we can do horizontal and vertical if we give it two values like this. But in React Native, we can't do that. So we have to specify paddingHorizontal.

So let's do that. So image. Let me import that from React Native, and let's give it a style. Let's name it avatar, styles.avatar. Okay. And if you want to use an image from a URL, you have to pass in a source. So like this, I'm just going to paste it in, and that should be good. Save that. Now, it's not showing because we have to specify this styles.avatar. So let's do that down here.

Now, it's not showing because we have to specify styles.avatar. So let's do that down here. And in order for it to render, we have to give it an explicit width and a height. So say 42 and height 42. And let's give it some margin as well. So margin right, 8, and border radius to make it circle, say half of the width, so 21. Okay. So there is the image. Now, this should be a button too, which links to the person's profile. So let's go ahead and make sure it's a button.

Now, this should be a button too, which links to the person's profile. So let's go ahead and make sure it's a button. So for our image over here, right here, let's wrap it in a TouchableOpacity. Or if you want, you can make use of the Pressable component as well. But I will just stick to a TouchableOpacity. Okay, let's close that out here. And let's go ahead and link to the profile page. So let's say onPress equals, and let's just put it in an arrow function and say goToProfile. Okay.

profile. Okay. And let's specify that right here. Let's make a function, go to profile, and let's say navigation.navigate. I believe the screen name is profile screen. Hopefully. Let's try that out. We have to import touchable opacity. So it's this one. Okay.

So it's this one. Okay. Let's make sure the button works. And it does. Cool. Okay. Now, if you take a look at the second flex item, we have all of this stuff here. So let's make a container for that first, and then we'll start with the username here. So back to our code. After this, there should be the second flex item, but we'll make it a view here.

So back to our code. After this, there should be the second flex item, but we'll make it a view here. And then within here, let's start with the username, like I said, and all of this other stuff. So name, the handle, and the time that the tweet was tweeted. So let's make that a button as well. So it's a TouchableOpacity again. And let's give it a style. It's going to be flexDirection overall again. So I'm going to make a utility here for flexRow.

It's going to be flex direction overall again. So I'm going to make a utility here for flexRow. So we're going to have the person's name. So we'll make that a Text component. And for now, since we have this data here, I'll just make use of the title and we'll change it to the person's name when we start implementing the backend. So it's called item.title. Okay. And since this will be a flexRow, we have everything on the same line. So we have the person's name, their handle, and the time.

And it's not yet because I haven't defined flexRow. So let me add that up here. flexRow. Say flexDirection row. Okay. So let's give these classes as well or styles. So we'll have tweetName, tweetHandle. And I guess this will be the same style. So tweetName and tweetHandle. So right here we can say style equals styles.tweetName, and we can do the same for

So tweetName and tweetHandle. So right here we can say style equals styles.tweetName, and we can do the same for the others. So this one will be tweetHandle. And I guess this one will be the same as well. We'll see. Okay. Let's make sure to put a space here. So let's go ahead and define these styles for that. Let's put it down here.

So let's go ahead and define these styles for that. Let's put it down here. So tweetName is going to be bold. So fontWeight, bold. Okay. And let's change the color as well to make it pretty dark. So say 222, 222. And it's tweetHandle. Let's say margin or padding, let's do padding. Actually margin is fine.

Let's say margin or padding, let's do padding. Actually margin is fine. Margin horizontal, let's say eight. And let's say color gray. Okay. So that looks pretty good. The gray might be too light, but that's okay for now. Now if this text is too long, it's going to wrap onto the next line, which I don't want. So let's see how that looks first. So let me just add some lorem text in here.

So let's see how that looks first. So let me just add some lorem text in here. So you see how that wraps? I don't want that. So what we can do is add a prop here on the TextComponent. So let's add them on all of them. Let's say numberOfLines. And let's just say 1 here. Okay. So now if it's too long, it will just cut off, which is what I want.

And it's here. Start a new one here. And let's say tweetContent. Okay. And let's put a Text component in here with the actual tweet. So let's just say lorem20. And as you can see, it's slightly cut off on the right. Not sure why that's happening. It might be for the second flex item. So in this case, the View, we might have to add flex: 1 here.

It might be for the second flex item. So in this case, the view, we might have to add flex: 1 here. So let me just add an inline style here. Say flex: 1. Does that fix it? And it does. Cool. So let's just add some styles for that tweetContent down here. tweetContent, say margin-top, maybe 8. Maybe that's too much.

That did not change anything. Actually, we have to add this on the actual text style. So let me grab that. Let's rename this to tweetContent. Actually, let me put that back. Remove the marginTop. Just rename it to tweetContentContainer, and then make one for tweetContent, and then we'll put that style in there. So I have it backwards actually. The margin should go in the container, and the lineHeight should go in the text.

So I have it backwards actually. The margin should go in the container, and the line height should go in the text. So let's change that name up here. So tweetContent. This one should be the container. And then this one should be the tweetContent. Sorry, style equals styles.tweetContent. Okay, does that change the line height? And it looks like it does. That might be too much.

And this one should go to the singleTweet page. So this one on press equals, let's just do what we did before and make a method called goToSingleTweet. And then the other one, we already have a method for that. So this one, goToProfile. So let's grab this and put it here as well. Okay, and it's defined that goToSingleTweet, basically the same thing. goToSingleTweet. And I believe I named it tweetScreen. Okay, does this work?

And I believe I named it tweetScreen. Okay, does this work? This should go to the profile. And it does. Actually, no, they both should go to the tweetScreen. Yes, I believe it should. So just double check your Twitter app. And you can change the functionality accordingly. But I'm going to make them go to the tweetScreen. Go to tweetScreen or singleTweet.

So this one will be a view. So let's do that. And let's give it a style. I should make a snippet for this since I'm always doing it. styles.css, I named it tweetEngagement. Okay. And each one of these will have buttons for what I just showed you here. So these. Okay. So these should be TouchableOpacity as well.

This is just a simple explanation with no code.

So let's put a number in there. Okay. So if we go back to expo vector icons. So this site here, we can just search for appropriate icons. So the first one is comment. And I believe I used this evil icon set for all of them. So go ahead and copy the import. Get that up here. And grab this. Let's look for icon.

And grab this. Let's look for icon. And let's paste that in here. So I believe I'm using a slightly smaller size of 22. And the color is gray. Okay, looks pretty good. So this should be a gray as well. So let's put a style on this. styles.textGray. So we have to add tweetEngagement and textGray.

So let's just put it in line here. margin-right two, maybe. Should be on the duplicated one as well. So let me duplicate this again. But we also need some margin in between these two icons. So let's change this to the new icon first, retweet. Okay. So I'm going to make a new utility here called margin-left of four. And if you want to have multiple styles here, you can just wrap this in an array like this. So I can do styles.ml four, which I will define down here.

And if you want to have multiple styles here, you can just wrap this in an array like this. So I can do styles.ml four, which I will define down here. ml four is going to be margin left of 16. Sorry. Margin left. And I spelled styles wrong. S-T-L-Y-E-S. Okay. So now there's space between the buttons here. So let me just add the other two icons.

So we can get rid of this. And I believe it's called either ShareGoogle or ShareApple. The icon is different depending on the OS. So you can actually check for that. So let's go ahead and do that. So let's make a ternary here. So if the profile.platform, not profiler, profile, I'm sorry, not profile, platform. That's why it wasn't auto-completing, platform. So this one, make sure to import that from ReactNative. So we can check if it's iOS or Android by giving it 'iOS' or 'Android' as a string.

Now let's add a line in between the tweets here. And you can either add it on the container itself, or you can add it as a prop on the FlatList. So let's do it that way. So we can add a new prop here called itemSeparatorComponent, and this will render in between each of the items, but not on the top and not on the bottom, which is what we want. So let's just define a new component here. Let's say View. Let's give it a style of styles.tweetSeparator.

Let's say view. Let's give it a style of styles.tweet separator. And let's close that view. Okay. And let's go ahead and define some styles for that. Grab this. Let's put it underneath our tweet container. Tweet separator. Okay. And pretty straightforward.

Okay. So everything's looking pretty good. We have our flat list of tweets, and I think I have to add the button here to allow us to add a new tweet. So let's do that quickly, and then we'll call it a day. So underneath our flat list, I'm just going to paste in some code here because this video is getting quite long. Again, it's a TouchableOpacity. We'll add these styles to make it look like this blue circle with a plus. We have this icon set for the plus.

So it will remain in the bottom right, and we're positioning it in the bottom right here. So if I save that, there's the button. And if I scroll, you'll see that it stays in place. Okay. Cool. Now we just have to add the goToNewTweet function, or do I have that already? No, I don't. So it's basically the same thing here. And I believe it's called NewTweet. So let's change this to NewTweet and the function name as well.

And I believe it's called NewTweet. So let's change this to NewTweet and the function name as well. goToNewTweet. Okay. And there we go. All of our buttons should work. This should go to the profile. It does. This should go to the single tweet page. Same with this.

This should go to the single tweet page. Same with this. And we're not going to implement comments and retweets, but they are buttons and you can add events for them if you wanted to do that. So let's go ahead and make a commit as always. Let's stop this. git add, git commit, let's say implement home screen design.