This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Styling in React Native" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Scott Moss: Let's talk about styles and how they actually make our apps look good because they don't look good right now unless you did your own styles. So like bringing over JavaScript from the web over. To native rag native did the same thing with some CSS it's pretty much like a subset of CSS it's not all CSS.
[00:00:26] We can't do everything we could in CSS but most of the stuff we could or we can do. So what they did was they provided us with a, actually what I'm gonna do is, I'm just gonna make a new component here. All my new component now we call this a fancy component.
[00:00:49] So what we can do is we can actually import, I'm just gonna to set this up right click.
>> Scott Moss: If we import StyleSheet from react native, we can do some pretty cool stuff. So I'm gonna do text and StyleSheet and that's, that's what I'll do here. So from 'react-native'.
[00:01:25]
>> Scott Moss: There we go. All right. So the StyleSheet does a few things for us. Actually we don't really need Stylesheet, but we should use it, and the reason we should use it because it's going to validate those styles for us because the CSS style we use is just a subset.
[00:01:42] So if we just if we just rely on writing our own CSS without the validation. We're gonna have unintended result. So we use the StyleSheet to kind of validate that stuff or so what that actually looks like is which I've got a pattern that most people are doing is below their component.
[00:01:58] They'll go ahead and declare their styles and like a styles object so you can say styles equals StyleSheet, Stylesheet.create, and use passing an object to it. And this object is going to be the styles for our components. So if you haven't guessed already, everything is going to be in line styles for your components, so everything's in line but you create the styles in JavaScript.
[00:02:23] So most people just put them underneath here. You can put them in another file somebody else create a plug-in and you can just write a CSS file or SaaS file and it'll watch it and it'll turn it into a StyleSheet for you. You can totally do that too but it's just a basic StyleSheet so let's just go over some of different styles for some of the different components.
[00:02:41] So what are the most interest, actually this is render something right click I can get this on the page.
>> Scott Moss: So I'm just going to switch out, this to do with our fancy one very quick.
>> Scott Moss: And this was so.
>> Scott Moss: Yeah, so now I gotta reload this.
[00:03:24] Pop module reloading doesn't know I made a new file.
>> Scott Moss: And let's go, reload.
>> Scott Moss: Oops, sorry, app.
>> Scott Moss: There we go, okay.
>> Scott Moss: Yeah, I know, just reload yourself. So now it's stuck in this error loop and it doesn't know how to rebuild so I was taking to rebuild it.
[00:03:53] So that's what hot mod reloading does sometimes you get stuck inside that. So I'm just gonna rebuild this shut that down. And I have an a list rn ra which is just react native run Android. That is run. So I can say the type in it. That's my a list so it's just react native run Android, and I will close this soon later down.
[00:04:14] For iOS. And you see this built so much faster it's already pretty, it's already installing it on the phone right now. So it should pop up right here there it is. So there's our fancy thing. Now let's head back over to our fancy stuff. So yeah now we have the stylus here so one of the sweet things is flex boxes where it used flex boxes in CSS right it's amazing.
[00:04:39] So every element by default is a flex element, its display type it flex. It's by default you don't have to declare it, it's already there. So that means you can go ahead and start using those flex properties like for instance the view. We can say we'll call this the container.
[00:04:58] So this will be our container. Our view. And the way the StyleSheet works is you declare like you know the selector that your style in this case will call a container and then objects and inside the object are the styles. You can't do nested selectors, you can't cover and save container.
[00:05:14] You know text and here's a styles for text like it'll break, because it's gonna be like wait text is not a valid property of the CSS. So you can't do nested, there's a plugin allows you to do it but. I think it's just fine. So for container because this is a flex we're gonna say flex 1.
[00:05:31] So what does that mean? I mean fill up the entire page, flex 1 take up all the space as the container and it will say background color red. So we'll do that and then what we'll do is we'll head up to our render function and we'll place a style prop.
[00:05:47] And we'll set that equal to styles dot our selector which is container, there you go. And as you could see it's now red and it's filled up all the way, if I got rid of the flex 1.
>> Scott Moss: It's not, all right so flex 1 made it fill.
[00:06:10]
>> Scott Moss: There we go. So you can see we brought over flex we also have background color, that's very similar and you can pretty much pass in any value that you would in CSS, so you know put in some hex colors here. I don't know any crazy hex colors.
[00:06:30] I don't know what that's gonna look like. There we go. X looks pretty good actually.
>> Speaker 2: [LAUGH]
>> Scott Moss: [LAUGH] You can also do the CSS colors you saw I put red. You could also do light blue then we get light blue. You can also do rgb. Let's just do black.
[00:06:57] You can also do rgba.
>> Scott Moss: So all those values work, it's pretty cool. And because this is just a string, you can use ES 6 or you can rely on interpolation, right? So if this was a variable somewhere, like this 0.3. This could be like opacity. And then you would have like opacity equals 0.3 or that you can just pass that in there like that, because it's just interpolation.
[00:07:36] But let's go back to the other color that I have which was really nice, go back. To, wait, where did it go? There it is. Sweet.