Styling Solution

[00:00:00]
>> So we had a couple of questions come out about fonts. So on the web, you could just set one font for the whole application. And the question was, whether you could do the same on React Native. Unfortunately you can't, because we use inline styles we have to explicitly set the font for every single element.

[00:00:20]
On big applications, there's a couple of ways that you can share styles either you will have a global shared style sheets that you can import styles from, to your individual components. Or you can just have a text components that you reuse in every single place. So usually there's, you figure out a one place to set the front but then that thing is used in multiple components.

[00:00:44]
Right let's look at the solution for this styling exercise. All right, so first thing we have, we have some text here some boxes are different color so I'm gonna edit the text. I'm making a conscious effort not to type a u. And you notice that the text is quite a bit bolder here.

[00:01:10]
So we're going to add a text style. And that's to font, the default font size is 16, I think. So let's do 18. [SOUND] Cool and because I got rid of styles for the view, add text is touching that end of the screen again, so I'm gonna just add some padding.

[00:02:13]
Let's do paddingHorizontal 10. Sounds good. And here I'm gonna add some padding to the top as well, cuz this isn't at the top of the screen. Let's do paddingTop, let's do 40. Cool, all right, now let's do some boxes. Now because this is just an area that you wanna style, the best thing to use, the only thing to use really is a view.

[00:02:44]
So I'm gonna just add a view here and I'm gonna and I'm gonna add some text inside. I'm just gonna copy the first one. Cool, now I'm gonna add a style, I'm gonna add cyanBox. That's the backgroundColor. Just copy this hex code All right and I definitely need some padding.

[00:03:35]
Ten, let's go with ten for padding. And, right. Okay, so the color for the text here was white and bold. So let's match that. Oops, let's do box text. Color white. And fontWeight, bold. All right, so what else, okay, so you notice that the text here is centered.

[00:04:26]
Remember the way we center things is using flex. And we need to add in order to center this, we need to add style to its container. So we need to go to cyanBox and tell the box that we wanted content inside it to be always centered. So for this we do, justifyContent, center and alignItems.

[00:05:00]
Cool, it sent it, that's looking good. And finally, let's do this text, the header text. This should have some spacing below, so let's just add this. So now we have our cyan box. All pretty looking like the designs and we'd like to add another one. So to do that, I'm just gonna copy the code for the cyanBox so the box and text and I'm gonna add it under here.

[00:05:35]
And I'm gonna name this, a blueBox and updates. So blue. Cool. And I need to add the styles. [SOUND] Okay, so now we've got two boxes, but notice that they're touching each other. Whereas on the designs they don't. So I'm just gonna add some bottom margin as well.

[00:06:27]
All right, well, this is looking pretty good. But one thing you might have noticed then, as we added the second box, we pretty much copied all the styles, apart from the background color. So we want to use the array method of passing in two styles, so we could pass the color and the box style separately.

[00:06:46]
So I'm gonna create a new style called box. And then I'm going to copy all the styles from here, apart from the color into the box. And then these, I'm just going to convert to the colors. And then for both of these box views, I'm going to convert this into an array and have two elements.

[00:07:16]
I'm gonna have the box and then the cyan. Same here. Gonna have the box and the color, wrong color. Cool and now we can just add the two remaining colors the same way. So we got magenta and orange. Add the orange. I do have to add an extra one.

[00:08:41]
[SOUND] Nice and now this match the design. And I've also been running my Android emulator in the background. Cool and it's working on Android as well. And one thing to notice that colors look a little bit different between Android and iOS. And sometimes that's just how it is.

[00:09:07]
There's nothing to do about it. We're literally using the same hex codes. So that's something to be wary of. I've had to change color values just for Android just to make sure that it looks good especially greens for some reason. So it's something to be wary of. Right let's look at the solution.

[00:09:23]
Make sure I've covered everything. If for some reason you fall behind, I know I typed quite quickly so if you fall behind. If you fell behind, or you're a little bit confused, feel free to click on these links. And this should have all the depth of what we just added as well.

[00:09:42]
I guess you add a paying top, horizontal and the heading and the boxes and combining styles, cool that works.