Applying Basic Styles in React Native

[00:00] Today we're going to talk about some of the different options for styling your app in React Native, and so if you look at the component that we have right here, the Render function's really simple. We have a view component, a text component, and then it says, "Egghead Styles Tutorial."

[00:12] If you look at the iOS simulator on the right, you'll see that it renders in the default font at the top of the simulator.

[00:17] The simplest way to add styles to your component is with inline styles with the JSX. We're going to add some to the view, type "Style=," some curly braces, some background color, and let's set this to AAFFFF.

[00:30] To see the effects of your style changes, you're going to want to turn on Live Reload in your simulator. For the iOS simulator, we open up the Div Up menu with command Control Z, and then we turn on Enable Live Reload.

[00:42] Now what you'll see is that if I make a change, and I hit Save, the iOS simulator will automatically refresh, and we'll see the effects of my changes. In this case, I set the background color on the outer view, and you can see that that's reflected right there in the simulator.

[00:56] This is inline styles using JSX, so the outer curly braces put us into a JavaScript context, and then the inner curly braces represent a JavaScript object. Because this is just a JavaScript object, we could add more key value pairs on it, so let's add some more.

[01:12] Let's do Justify Content, and we'll set that to Center for now. Let's add another one, Align Items. We'll set this to Center, as well. These are Flexbox properties. We'll set Flex to be one. Now it takes up the whole screen in the iOS simulator.

[01:28] Similarly, we can also add styles to the text component. Let's do that now. We'll say, "Style=," and then the curly braces again. This time, let's use Font Size. We'll set that to be 40. Just like that, the font increases.

[01:40] Inline styles are well and good, but they can really clutter up our render method, so let's pull that out into its own variable. We're going to make a variable called View Style to hold these styles. Let's copy-paste all of those key values out of our inline JSX, and then we'll fix up the indentation a little bit so it looks a little bit nicer, add some semicolons, adjust the spacing.

[02:02] We can delete all that stuff out of the render method, and just use the variable. You can see that when I hit Save and then refresh, the styles don't change at all. This is exactly the same as the inline method we were doing before. Now we've just organized it a little bit differently.

[02:18] Let's do the same with the font style. We're going to make a variable called Font Style, and again, we're just going to copy out the same values that we had earlier. We're going to replace the inline with the variable. Remember, those outer curly braces in JSX just make it so that we're using JavaScript here. "Font Style" refers right to that variable up there. Again, you'll see that the styles don't change at all.

[02:43] For organizational purposes, we might even want to pull out our styles into a separate file altogether, so I'm going to pop over here into this style.js file, which is a sibling to index.js, and I'm going to take my styles that we already wrote, and we're going to export them from here.

[03:01] Now, we're adding a little bit of this boilerplate here, that's going to allow us to export these things with names, so "Style=", and the font style -- font style, view style -- view style, and then we're going to export this dictionary.

[03:10] I'm going to save this file. In index.js, we're going to delete the old styles, and then import them from style.js. Now, instead of referring to the variable names directly, it's style.viewstyle and style.fontstyle. Just like that, you can see that the simulator refreshed, and everything still works exactly as it did before.

[03:33] I'm going to rearrange the style.js file just a little bit, because we don't need all of these, the extra variables. They can all just be one dictionary.

[03:44] The last change that we need to make is that we're going to use stylesheet.create, so first, we need to import React and the stylesheet. Let's do those imports now, import React from React Native, and then import stylesheets, so that we have accessed to it. Now we can use stylesheet.create.

[04:08] Yet again, we don't see any difference here, right? So why use stylesheet.create at all? It has some nice benefits. For one, it's immutable, and you'll see that this if often the preferred way that the tutorials will use style objects, but there's also some really cool debugging features.

[04:21] For example, if I try to use a value that doesn't exist here, you'll see that we get this really awesome error message in the iOS simulator, which tells us that "blah" is not a valid style property, and then it lists all the possible ones that we could have been trying to use.

[04:37] Similarly, if I try to give it a bad value, for example Font Size expects a number -- I'm going to give it "blah" instead -- we can see that it gives us really good error messages around why "blah" is not an acceptable style property.

[04:55] That's it. Those are the different ways that you can use styles in React Native. By far the most common one that you're going to see is using a separate file for your styles, and using stylesheet.create just like we did here, importing them, and then applying them to your view.