Okay, let's continue and work on the profile screen here. So as always, I have a screenshot for reference. So let's get started. Let's start with the container as always. flex: 1 and backgroundColor: white. And let's add that here instead of the inline styles. styles.container. Okay. And first, let's start with the backgroundImage here. So I'm just pulling in a random image.

And first, let's start with the background image here. So I'm just pulling in a random image. So let's do that first. So let's remove this. Let's just grab an image from another screen. So this one's fine. And then we'll change the URL and the styles for it. Okay. So this one is called backgroundImage. And let me just paste in a source of a random image I have here.

And that will align everything on the bottom. So the follow button and the image are aligned. And then I just put a negative margin on this image here to bump it up. So let's do that. So after the image here, let's add a new container. So I made it a view style equals styles. I named it avatarContainer. And the first flex item is the avatarImage. So let me just grab that from here. Just grab that.

So let me just grab that from here. Just grab that. Okay. And the second flex item is the follow button. So I'm going to use TouchableOpacity like we've been doing. Let's give it a style of followButton. And we also have to put a Text component in here. And again, style equals styles.followButtonText. And the text is follow. Okay.

But like I said, we want align items to be flex-end. So it's aligned to the bottom. And some padding. padding horizontal 10. And that's fine for now. Let's add the avatar style. So for the avatar image, width 80, height 80 is what I have. And let's set a border-radius as well. So it's a circle. So 40 and a border-width.

So it's this one. Save. And back to the profile. Okay. So what we want to do is bump this up. So give the avatar container a negative margin-top. So say margin-top. I have it as negative 38. Okay. Let's see how that looks.

And that should give it some padding. And that's fine for now. Okay. Next is this section here with the name and the handle. So after our avatar container, we can add that. So let's add it as a view. And the styles I have are called nameContainer. Okay. And then we have two text components within there. And I have them named profileName.

And then we have two text components within there. And I have them named profileName and profileHandle. So let me just put my name in here. And profileHandle. So let me just paste those styles in. This is getting quite repetitive. And I think you're starting to understand how to style stuff in ReactNative. So this is pretty straightforward. Some padding for the container.

So I actually separated them out. So I do one here because there's only one item. And then I have another container for the one with two. So let's go ahead and add that. So after the profileContainer, I'm going to paste this in. It's called locationContainer. And it has the icon and the text. And I believe this is supposed to be textGray. I think I have to add that utility here. So let me grab it from here.

Let's save that. Okay. And I believe I need to add some styles as well for the link. So again, I'm just pasting this in. So we have the link color and a link item. And that looks pretty good. And joint March 2009 should be text-gray is my utility name. Okay, cool. Again, this whole container is flex-direction: row. So we can have items next to each other.

So we can have two items next to each other. And then we have a followItem, which will be one of these. So one of these will be a followItem. And then the text will be styled accordingly, because one is bolded and one is not bolded. So we have followContainer, followItem, followItemNumber, and followItemLabel for the styles. Okay, so I pasted those styles in. Save that. And that looks pretty good.

Now, if you take a look at the screenshot, I didn't add the list of tweets for this person here, because that already exists here. And if we make this dynamic enough, we can make use of the same component here and in here. So I'm not sure if I'm going to do that. We might just duplicate the code. But for now, I'm just going to add a generic flat list here. So let's see how we can do that. So after the separator,

Key extractor is fine. And I guess we can add this as well. So let me just grab the style for tweetSeparator. tweetSeparator. OK. Actually, I think we can just make use of this right here, separator. So let's do that instead. separator. OK. And now we just need this renderItem.

And we'll decide on that later. I'm just focused on the design right now. Oops. So back to the profile page. Let's go ahead and add that renderItem function. So let's put it right here. And let me make sure to close this. And I don't care too much about the styles right now. Let's just put some text in here for the title. So item.title.

Let's just put some text in here for the title. So item.title. OK. Does this render? OK. It doesn't like this empty style. And we need to import FlatList. FlatList. Import that. OK. OK. So it does render down here. And let me just put some margin on this so it scrolls past.

So it does render down here. And let me just put some margin on this so it scrolls past the bottom of the phone. So back to render item. Let me just add some margin here. Actually, we'll put it here. So I'll just do it inline. Vertical. Maybe 10. More. 20. OK. So if you take a look at this,

flat list here. So if you take a look at the docs for flat list, there should be something with header. ListHeaderComponent. So let's go ahead and make use of that. So for our flat list, let's add a ListHeaderComponent. And let's just say profileHeader. OK. So up here,

This video would have taken much longer if I didn't do that. And at this point, I think you're starting to get the hang of using Flexbox and styling stuff in React Native. So as always, let's make a commit here. Stop this. git add, git commit, say implement design for profile screen.