Okay, let's continue with the design and work on the single tweet page. So as we click on one of these tweets on the main page, it should take us to a single tweet screen. So I have a screenshot here for reference. So let's get started. So first, let's grab the stylesheet, create, and add that down here. Okay, let's make sure to import stylesheet. And let's do styles.container for this one. And it should be the same as the home screen. So flex: 1 and background: white.

And it should be the same as the home screen. So flex one and background white. Okay. So first it's going to be the profile image with the profile name and the profile handle. And this will be within a flex container. This is the first flex item and these three dots are the second flex item. So let's start with that. So let's call it profileContainer. So we'll make another view here. style equals styles.profile.container.

So we'll make another view here. style equals styles.profile.container. Okay, and let's put this after the text. So this will be all of this. And then the second one will be the three dots. So let's start with that actually. So let's add an icon here. This will be a button. So let's make it a TouchableOpacity like we've been doing. Let's make sure to import that.

And let's make it gray like we've been doing. Okay, we don't have the styles for profileContainer yet. So let's do that. profileContainer. Let's make it flexDirection row. Let's say spaceBetween, justifyContent, spaceBetween. Okay. And let's give it some padding. So I have paddingVertical of 12. And paddingHorizontal of, what do I have, 10.

Cool. And let's just give these their own styles. So say style equals styles.tweetName, tweetName and tweetHandle. Okay. Let's go ahead and style that tweetName. So say font, weight, bold, and color. I have it as the same color I had with that dark gray we have on the home screen. So 222, 222, okay. And for the tweetHandle, I have it as gray. So color gray and margin-top of 6 is what I have.

And for the tweetHandle, I have it as gray. So color gray and margin-top of six is what I have. Maybe it's a bit much four. And the gray is too light, but that's fine for now. I just want to stay consistent with what I have on this first screen here. Okay, now let's work on the tweet content. So the text is bigger than the other text. So after this view here, we can start another view. So view

So view style equals styles.tweetContentContainer. And then we'll have the actual text in a Text component. style equals styles.tweetContent. And let's just put some alarm text in here for the tweet. Let's save that. Okay, it does go on its own line. And now let's add styles for the container and the content. So tweetContentContainer, this one will be, or let's give it some padding first. paddingHorizontal, I have it as 10. I have a paddingBottom as well as 10.

PaddingHorizontal, I have it as 10. I have a paddingBottom as well as 10. And if you look at the screenshot, there is a borderBottom here. So let's add that borderBottomWidth of 1 and borderBottomColor of, I think I have it here somewhere, borderBottomColor. So this right here. Okay, let's paste that in. Okay, now for the actual text. So that's the tweet content. Let's make it bigger.

So that's the tweet content. Let's make it bigger. I have it as fontSize 20 and I have it as lineHeight 30. Okay, looks pretty good. Okay, next is the stats for the tweet engagement. So let's do that. So this right here. So back up here after this container, let's add a new one for, let's call it styles, or let's call it styles.tweetEngagement. Okay, sorry, it should be within the closing view here.

let's call it styles.tweetEngagement. Okay, sorry, it should be within the closing view here. So right here. Okay. And let's give it another view for each of the stats here. So for each one of these will be a view. And each one of these will be a text component because we have to style them individually. Okay. So let's say view. I have it as styles.tweetEngagementLabel.

So let's say view. I have it as styles.tweetEngagementLabel. And then we'll have two individual text components here. So for example, the number and the label. So 628 retweets. Okay. And we have to style that. So tweetEngagement and tweetEngagementLabel. tweetEngagement. So flex, direction row, line items center, let's give it some padding.

Tweet engagement. So flex, direction row, line items center, let's give it some padding. I have it 10 for horizontal and 12 for vertical. And we want the border as well. So I'm going to grab it from here and paste it in here. Okay. Okay. So that's the container. Now we need the label. Actually, the label is just flex row.

Now we need the label. Actually, the label is just flex row. So let me change that. So flex row, which we already have as a utility. Okay. And let's put styles on these as well. So this will be the tweet engagement number, I guess, is a good name. And this one will be the label. Yeah, that's fine. Just so we can style them correctly.

And we have to add some margin here, but let me just do one more here for the likes. How many likes do I have? 2934. 2934 likes. Okay. So I'm just going to grab that margin-left utility I have from the first screen. So let's grab this again. This should be global, but I'm just duplicating styles for now, or at least for the sake of simplicity. margin-left of four.

So let's just grab that conditional from the first screen. So right here, okay. And we can replace this. Now it puts it on its own line. And it looks pretty good. We just have to use justify-content: space-between or maybe space-around. So since I'm reusing this one here, I can't just put it on the style directly. So again, we'll make a utility called space-around in styles.css. And then we can just add that down here. Let's put it down here.

So I think that looks pretty good. Let's go ahead and make a commit here. And add git commit, implement design for single tweet screen.