Now that we're able to pull in our data feed, now let's start to style out our PostItem and our feed component and we're actually going to start with our container component So let's get started with that. I'm going to open up the container right here and as you can see right now, we are only providing a style of the height of percent.

So, let's also start to break these into their style sheets, as we've done with the authentication pages. So, let's start with that. I'm going to open up the side file panel here. Let me shrink it a little bit, and now if we go down to styles, I'm going to create a new set of styles here, So I'm going to create a new directory inside of styles, called common slash baseStyles dot TS and here's where I'm going to place all of the base styles. If you want a reference for what the style sheet needs to look like, you can click on any of these, and you can see the primary component that we need is this style sheet component from React Native, and then the other ones are going to be based simply on the needs of that one style sheet.

So, let's start by importing that. So I'm going to say, import, StyleSheet, from react-native, and then I'm going to say export default, StyleSheet dot create, and that's a function that takes an object of key-value pairs.

[Capture #1]

So, the first thing that I want to do, is I want to create simply a container style So, I'm just going to call it a "container," and inside of here, I'm going to say that I want the width to be % So, this is simply mimicking what we already have right now.

So, I'm going to save this, and inside of our container component, I'm going to open that up, and I'm now going to pull that style in. So, let's import those styles. So, say import base styles from dot, dot slash, dot, dot slash, and then let's see where we're at. There we go, styles common and then baseStyles So for base styles, I know that I want to bring in that container, so I'm going to get rid of where it says height a hundred percent. I'll say baseStyles dot container.

[Capture #2]

Hit save, and everything looks exactly like it should. Now we're able to add our styles to this new function.

So inside of container here, now I also want to add a few other things, so I want to add the background color So let's say I want to do the background color here. I want to use the primary, and that's if you, what I just did where I started typing primary once again. That will only work if you have the auto import extension enabled in Visual Studio Code. If not, you could do exactly what that did, which was import primary from the color module, so I'm going to hit save here. As you can see, all of that is now where I want it to be. We now have a dark color here for the background instead of white, which is what we want.

Okay, so that's the very first thing. So with that in place, I will close out our baseStyles and our container. Now let's talk about some other things we want to incorporate. If I go to FeedScreen, let's see what we have. You notice that we have this kind of margin we don't really need.

[Capture #3]

We used it in the beginning because that was giving us just the ability to see the top of the screen, and now I would just want to get rid of that, and let's just see what that gives us.

So without any margin, if you hit save now, you can see that that looks good, and it's not hiding anything So this is all coming along well. This looks more like what you'd expect a feed screen to look like.

So that's coming along now, though, you can see that we can't see any of our text, and all of the images and the text and all these components are a little bit too close together, So now let's close our FeedScreen and go to Postitem and let's create some post item styles.

Now you could create them right here and one way you'll see many tutorials do is they'll import the style sheet. At the bottom of the page here, they will add those styles, But we may want to use them someplace else, So I'm going to create another style sheet function. Then we'll import that. So let's go back to styles and I'm going to go into our stacks and then inside of stacks, I'm going to give a new directory here called the post and I'll call it posts and then post item styles dot T S To reference where that's at, we're in the styles directory and then we're in the stacks directory and then we're in posts and then post item styles.

So let's now import our style sheet. So import StyleSheet, it did it for us So import StyleSheet here and then export default StyleSheet Nope, brought it in again.

Sometimes, and that's one of the things I wanted to point out, sometimes the auto importer gets a little bit aggressive, and that may be a reason you may or may not want to have it installed. It saves me a lot of times, so that's a reason why I do it, but there are many times where I'll start typing and then it tries to duplicate an import or something like that, something just to kind of keep in mind as you're going along.

So the StyleSheet create, once again, it's a function that takes an object in as its single argument, and now let's add some of our Postitem styles. So the very first thing I want to add is a wrapper. I want to add an item wrapper; I'm just going to call itemWrapper, and you can call this anything that you wish to, but this is going to wrap up the entire Postitem component.

So the first thing I want to do is I want to add a margin to the bottom of, let's say, and that's all that I want to do right there. Now, let me import this. So as I'm making these style changes, we'll actually see what it looks like they're in the simulator. So I will go back to Postitem, and I will import this by saying import postItemStyles from dot, dot slash dot, dot slash styles, stacks, posts, and then postItemStyles.

[Capture #4]

So now that we have that, we can start wrapping up all of our components here, So our item wrapper will be at the View tag level.

So I'll say style equals postItemStyles dot, and right now, we only have that itemWrapper. Now, if I hit save, you'll see that we have right there some margin there at the bottom, so that's looking a little bit better I like the way that that's coming along, so that's the first thing. Now let's look at the next thing.

Next thing, we have our item wrapper. Let's add a content wrapper because it's somewhat hard to tell right here, and let me do a quick and dirty style here so we can see this for debugging purposes. So I'm going to say style for the text tag, and I'm just going to say I want the color of white just so you can see this. Okay, so you can see how this name buds up against the side.

[Capture #5]

I don't want to do that. I would rather have some padding here on the top and the side, and we may also like this on the right-hand side. So in case, we have a long title, we want to ensure that it never gets distorted and goes all the way to the end.

So what I'm going to do is I'm going to create a View tag that wraps around this text tag because, say, we may want to have this content, this name, but in the future, maybe we'd like an image of the user that uploaded the content, anything like that It'd be nice to wrap all of this up in a dedicated View tag.

So I'm going to say View here, and we got to wrap that text up just like that, and I'll hit save, and nothing's going to change right now cause a View tag doesn't do anything by itself; It simply gives us the ability to wrap up our content, and now I'm going to add two styles, and I want to show you something cool I forget if we've done this yet or not in this course. Still, when you're working with these style sheets, and you're working with these types of style props, you can pass these at an array. You can pass multiple style definitions as an array, so I want to do that here so that you can see how that's done.

So here I'm going to create two different styles. I'm going to make one that's called, let's call it content wrapper, and this will simply manage our left and right padding. So I'm going to say paddingLeft, and for that, I'll say and then let's say paddingRight also, That's going to be one style that's simply going to give us our left and right padding and then let's also there add another one called a post heading.

So here I'm going to say postHeading. Here I'm just going to give a few different styles, so I'm going to add, remember we always have display flex. Flex is always going to work by the default, so we don't have to do something like, say, display flex like this anymore. That's the default process for it anyway, So now I can say flexDirection, and this will be row. Then justifyContent is going to be spacebetween and then lastly, alignItems center.

[Capture #6]

So what this will do if you're still a little rusty on your flexbox, is if we had two elements here, again, going with the example of, say, we want to have the users avatar, which we are going to add that in a little bit.

Then if you want to have this name here on the left-hand side and the avatar on the right-hand side by using justifyContent spacebetween this is going to space both of those items out, so the avatar is going to be on the Right, and the title here is going to be on the left-hand side, and then there are also going to be vertically aligned So those are the two items that I want to create inside of this View tag.

What I can do here is say View style equals and then pass in an array so that I can say postitemStyles dot, and I want to do the contentWrapper, a comma because this is just an ordinary JavaScript array and then postitemStyles dot and then let's go with postHeading, okay, let's hit save  See what that does for us, and nothing's changed, and that's fine.

A few things have changed. You can see we have our padding there, and that works, but we're not really going to notice the difference here until we get our avatar here on the right-hand side But now we're set up to do it, and we also have that padding, So that's looking good and then let's add another style here So after postHeading, let's also add some content for or some style content for our names.

So that is very hard to read and very small So let's add something called like say nameText, or you could go at headingText or something like that. The convention I like to follow when I'm writing my style code is if the tag is going to be applied to text directly, I do want to have the name text in there because then whenever I'm referencing that, I'm going to know that can only be applied to a text component and not a view component.

So for nameText, I first want to use the color white, and then let's use a font size of and in the following guide, we're going to do something cool where we talk about font sizes, but I going to save that for the next one and then a font-weight of and in, whenever you're writing style sheet code for React Native, your font-weight has to be a string and that kind of takes a little bit of time to remember because font sizes and any of these sizes are integers, but then the weights are in a string. Another great reason for using TypeScript is that you get hints right here.

[Capture #7]

So say I would have done font-weight, you can see that we would have an error there, and so TypeScript is really helpful for telling us exactly how that code needs to be written.

Okay, so we have our nameText, let's come here and let's take our postitemStyles and wrap our text tag with that style So postitemStyles, nameText, hit save and I'm going to close out of that. We'll take a look at the warnings later You can see that that is working nicely So this is coming along I'm liking the way that this is working So let's now take a look at a few of the final style changes that we want to apply here.

So one of the very first ones, you can see that we have the image here that has a little bit, it's butting up right against the nameText I'd rather have a little bit of padding between that.

So there are a few ways we can do it. We could go to our postitemStyles, and we could wrap the postHeading or say the contentWrapper up a little bit differently, but I'd rather create an imageWrapper type of style here, and the reason for that is because if I ever want to use this nameText or postHeading or contentWrapper in the future, I don't want to have to override or create a whole different style just because of that.

I like this contentWrapper gives me my padding to the left and right; I don't have to worry about having some other type of padding there, So let's do that right above the content wrapper, I'm going to create something called imageWrapper and make sure you add a comma right after that object, and here I'm just going to add some margin So let's add some margin to the bottom of and let's see if this works.

So for imageWrapper, hit save, go to postitemStyles, and we can wrap up our image here in a View tag.

So I'm going to add those styles first, So postitemsStyles dot imageWrapper, and then make sure you wrap that image function up, and now you can see that we have that excellent padding there or margin-right there, right below the image.

[Capture #8]

So this is coming along really nicely. I like how all of this looks, and we're getting close to having the base set of styles we need. If you're building this for a client or you're working for a company, then what would happen is you'd be given a dedicated set of styles, and then it would be your job to go and implement those.

Sometimes that's an excellent way of doing it. When you're in charge of building out the designs and implementing the styles, then that can be a little bit more time-consuming, but it's always good practice to do. So this is coming along well. I think we have the majority of our base styles in place, and in the following guide, we're going to talk about how we can use some scaling fonts so that the font you see right here will look the same on every type of device.

[Capture #9]

Resources

• Source code