React Native (feat. Redux) Common Styling Properties

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott Moss: We're gonna also do things like padding. So it works pretty much similar to CSS. If you can't do the shortcut and declare padding for all four directions in one line. So if I just put padding, it's for all of them. And the unit here is not pixels, so I don't have to say 10 pixels.

[00:00:21] It's not pixels, it's gonna be the same units that you would use natively. So what do they call it, density units?
>> Speaker 2: Points.
>> Scott Moss: Density points, yeah, whatever, so that's what it is. So it's not gonna be 10 pixels, it's just gonna be, let's say 10. So 10 density points.

[00:00:41] And that wasn't that big enough to see the effect, let's put 40 and we should see this fancy thing. There we go, right there. So we've got some padding, you can also do margin. It doesn't make sense to put margin on this container though, so we're not gonna do that.

[00:00:53] And that's some of the stuff you can do with the View. When I say the View, I'm talking about the View component. But there's tons more. The View component can do a lot of things. For, instance because this is flex, let's say that we want to center everything and put it in the middle.

[00:01:08] So we can say, justifyContent, which is a flexbox thing, and then we can say center. And then now, it puts it in the center vertically. But now if we want to do it horizontally we can say, alignItems, also to the center. And now it's in the middle, pretty dope.

[00:01:28] And that's just flexboxes, so, yes?
>> Speaker 2: Can you include styles in the top level of this style sheet layer, or does it have to be a collection of objects?
>> Scott Moss: Can I just put inline styles in here?
>> Speaker 2: So could you just put, instead of having styles.container, just have styles there and then down below, just take out container.

[00:01:56]
>> Scott Moss: I see what you mean. Not if your using the StyleSheet to create it, no. If you just use your own object, you could. But then again, you're not using the validation from the StyleSheet.create. But if you want to use your own object, you could. That's like the equivalent.

[00:02:10] So let's bring this to the next point. So in style, you can pass in an array, like this. And you can pass in more styles and they will override each other. So now you can pass in a bank object here and be like, you know what, I want the backgroundColor to be yellow now.

[00:02:24] So this should overwrite what I have.
>> Scott Moss: And it's just a blank object, I didn't do StyleSheet.create to make this. Just a blank object, so yeah, you could totally do that. So what most people I see are doing, they're creating global styles in a file somewhere. And then they'll just merge the objects together to create the styles for their components, cuz it's just JavaScript.

[00:02:50]
>> Scott Moss: Cool, so yeah, that's how you would center something using CSS. I think that's pretty cool, just relying on flexboxes. Every situation that I've come across in most apps could be handled using this. There are some times where I'm just like, I don't know how I would handle this.

[00:03:04] I wish I had a layout system more native, like Android or iOS where you have stack layouts and absolute layouts and stuff like that. But you can do the same thing, it's just a little harder, for instance, absolutely positioning things. For instance, let's say we have this text here, and actually let's make another View, this is a better example.

[00:03:24] So we'll make another View here, and we'll call this one,
>> Scott Moss: Box, so we'll make a box and we'll give it a backgroundColor of yellow. We'll also give it a width, so we can do width here. So we'll give it width a 30 and a height of 30.

[00:03:46] And we'll just put that there. There we go, so we have this. But, let's say we want to absolutely position this box. We can come down here and we're gonna say position: 'absolute', just like we would in CSS.
>> Scott Moss: So we change that to absolute, you see it automatically got pushed out of the flow there.

[00:04:08] And then you can do the same stuff you do so top: 20, left: 30. There we go, absolutely positioned, just like you would in CSS. So you can do the same stuff, it's just they try to bring it over to CSS and sometimes it just doesn't feel right.

[00:04:26] Sometimes, I feel like the layout systems in Native work better. But at the same time, they want you to be able to learn once and use everywhere, so it makes sense when they bring it over here. Any questions on this stuff so far?
>> Scott Moss: No? So some of other things you can do on View is like borderRadius.

[00:04:47] Right, you can say,
>> Scott Moss: 3 and we get a nice borderRadius right there. And we can make it a circle if we do, what is it, 30? Or no, half of 30, 15. There we go, so now it's a circle. So same thing as CSS, pretty easy to do there.

[00:05:09] And like I said, there's tons of other stuff you can do on the View. But then we get to things like Text, each component has different ways to style. Most of them are based off either View, Text,
>> Scott Moss: That's basically it. Almost every component that React Native gives you are based off those two different types of elements.

[00:05:30] Either there's some type of View or there's some type of Text, and those are really the only two different Text ones. So for Text, let's give this one a style, we'll say style=styles.text, sure. And this one is actually pretty familiar, or pretty similar to with CSS as well, so we say text.

[00:05:50] We could do things like color, and that'll change the color. And it's the same type of value that you can pass to backgroundColor. So white, fontSize, say 34 units. You can even do fontFamily and if you have that fontFamily loaded up on your device, then it will use it.

[00:06:16] I think by default this is using Roboto, so I don't thinnk this is even gonna make a difference. It's already Roboto, yeah, well let's see if we wanted to do.
>> Scott Moss: That didn't change.
>> Scott Moss: I guess this is just like, whatever, we're gonna use Roboto anyway, we don't care.

[00:06:36] But yeah, you do stuff like that. LineSpacing, I think you can do, yeah, what is it? FontWeight, so if you wanted to do some weight here like bold and stuff like that, you can do that, if I can spell it right.
>> Scott Moss: Like let's say we wanna make this say 200.

[00:07:02]
>> Scott Moss: It's gotta be a string, even though it's a number, okay, okay, okay, I got it. Let's reload.
>> Scott Moss: There we go or you can do bold. There we go, and now it's bold. So those are some of the Text properties, there's too many to go list in every single one of them.

[00:07:26] But if you look, this is one of the rare times I'll say, yeah, just look at the docs. But yeah, if you do look at the docs for those two components like View. And you just look at all the styles that you can do, right here. There's tons of them, like borders, overflows, opacities, all types of stuff.

[00:07:45] And then they inherit other styles from flexboxes, shadow properties, stuff like that. So if we look at the flexbox, you'll see all the stuff that we're using, align, flex, flex wrap, justify content. All the margin and padding, all that stuff, yes?
>> Speaker 2: Question about are percentages possible with these stats?

[00:08:04]
>> Scott Moss: No, percentages aren't possible, but that brings us to our next point, of how we can actually use percentages anyway. So the way we would do that is to get away with it is, we can't come down here and let's make this box 30%. Because it would actually break, we could check it out, if we do that.

[00:08:26]
>> Scott Moss: Yeah, invalid prop width, just doesn't work. And we're getting that because, that StyleSheet thing, so go back here. Okay, but what we can do is we can import dimensions. Dimension or dimensions? Let's see which one it is.
>> Scott Moss: I already refreshed you. Okay, so this is where hot module loading gets kinda crazy sometimes.

[00:08:53] Okay, now it's bringing up the debugger. I didn't even tell it to do that, it just did it.
>> Scott Moss: So I'm gonna exit out of this app.
>> Scott Moss: I know you stopped. Thank you, thank you. All right, let's go back.
>> Scott Moss: Cool, so if we get dimension, what we can do is we can access the, what?

[00:09:27] Why is this thing still freaking out?
>> Scott Moss: Got it, great. So now if we get dimension, what we can do is we can access the dimensions of the actual device, and we can use that to base percentages off of. So if we wanted to get the dimensions we can say const screen = Dimension.window().width, I think that's it.

[00:10:07] Let's check it out. So we'll call that width. So we can get the width like that.
>> Scott Moss: Okay, maybe let's look it up right quick. I think they changed it.
>> Speaker 3: It's Dimensions.
>> Scott Moss: Dimensions, man, I knew it. And it's get window, got it.
>> Scott Moss: So we can say .get('window'), which is gonna give us an object with the height and the width, so I'll just go ahead and.

[00:10:48]
>> Speaker 3: Dimensions.
>> Scott Moss: Thank you. I'll just go ahead and de-structure those, so now we can get the height and the width and I'll save them in variables, load this thing back up, great. So now we can come out here and we can do percentages, so I want this box to be like half the width of the screen.

[00:11:05] I could just say width / 2. And now it's half the width of the screen, all right? Same thing with height, so. Yeah, you'll have to play with it like that to figure out how to do percentages but you couldn't pass in the percentages as a value like that.

[00:11:24] So you gotta do a little bit of math. Any other questions on this stuff?
>> Speaker 4: When you change your orientation, how is that?
>> Scott Moss: Yeah, when you change the orientation, it'll change too. So we're gonna get into how you listen to do things orientation so you can do things as well.

[00:11:43] But let's try it out.
>> Scott Moss: Yeah, it changes. It's still half, half or half and then. It says not a third, let's see. Yeah, it's still it. Where did it go?
>> Scott Moss: All right, now I lost the menu to switch back to the orientation thing.
>> Speaker 2: That's not a third of the height.

[00:12:16]
>> Scott Moss: Yeah, it's wrong. It's still the same as it was. Still a third to the right and a half down.
>> Speaker 2: So you have to call that in your render, right?
>> Scott Moss: Yeah, or actually, I think the better. Really, dude?
>> Speaker 2: [LAUGH]
>> Scott Moss: I don't like that.
>> Speaker 2: Better be quick.

[00:12:34]
>> Scott Moss: I'm just gonna have to close it down.
>> Speaker 2: [LAUGH]
>> Scott Moss: Shut it down. [LAUGH] Don't ever switch orientations in that thing again. Yeah, I think what you have to do is you have to listen for when the orientation changes and then you would have to change the style probably yourself.

[00:12:47] Because it looks like it didn't update there.
>> Scott Moss: Any other question? You had one, yeah?
>> Speaker 2: Well, the same.
>> Scott Moss: So the same thing?
>> Speaker 2: Same thing basically.
>> Scott Moss: Yeah, we're in sync.
>> [SOUND]
>> Speaker 2: I was wondering cuz I was reading about dimensions. And they recommend calling that in render, but then how does that work with the StyleSheet?

[00:13:12] I can see how it works within inline styles but.
>> Speaker 4: Calling methods from render-
>> Speaker 2: But you have a StyleSheet that's outside of render, it's defined.
>> Scott Moss: Okay, I see what you're saying. So you want to call a method inside of render that's going to change the StyleSheet, is that what you're saying?

[00:13:29]
>> Speaker 2: Yeah.
>> Scott Moss: Yeah, how would you do that? I think the way you would do that is you would probably have to have like a styles functions that took in some parameters. And then that would create the StyleSheet for you, dynamically, yeah.