Transcript from the "Styling" Lesson
[00:00:00]
>> In React Native, all styling is done by inline styles. So that problems with Cascading Style Sheets where things override things and there's all your priority, none of that, you can forget about that, there's not even a choice, which is actually great. To create styles we use a StyleSheet element which is in React Native.
[00:00:22] So, we import it from here. And then we basically create our styles object, I usually create it at the bottom of the file just before the export. Let's do const styles. And the command is StyleSheet.create, and then you pass it an object. And the one style, let's add a style to the container.
[00:01:10] Let's do margin: 10. And you'll notice that obviously, it's not applied yet. And that's because we haven't actually added it to our components. You can style pretty much any component using the style props, so let's add this to our view. Let's go to the View, and there's style = styles.container.
[00:01:41] This style subject pretty much creates a normal object, and you can access any attributes in this object using the dot notation. And you'll notice that all content now has a little border around it. I'm gonna add some background color so you can see what it looks like. Great, so one of the things that you find yourself doing quite often in Native is adding margins left and right, or top and bottom.
[00:02:13] So for example, you might have want to have marginTop be 10, marginBottom. Let's just do padding so we can see them. All right, so we got top and bottom padding, 10. paddingLeft, let's do this 30. Oops All right, so we've got all the padding that we wanted, but this is four lines of styles, which is pretty tedious.
[00:02:50] If you're familiar with web development, you'll know that on web, there's a convenient method that you can use, you could just do padding: 10, 30. We can't do this in React Native, but instead we have horizontal and vertical props. So instead of paddingTop and paddingBottom, I can do paddingVertical, just quite handy.
[00:03:19] Get through this, and paddingHorizontal. And this actually works with both padding and margin, that's quite handy. In general, you might have noticed that these styles are similar to the web styles. The difference being that the Native styles don't have any units, and they are useless, I think, they correspond to density-independent pixels, yeah.
[00:03:52] So if I use designs for React Native, designs often have pixels, otherwise this won't work. So in my head, I still think of them as pixels, but you don't need to write the units, which is good. The other thing is, so I added some documentation here. So there are some documentation on the different props there are, so they'll view props, text props and image props, style props that you can use.
[00:04:21] This list is not actually comprehensive. Basically, most web styles will work in React Native. The difference is that on the web, you have to use the dash notation, but here we just use camel case. And the other note is, on the web, whenever there's a convenience function, for example, for borders, you might do border, 1 pixel, solid, and then a color.
[00:04:49] In Native, you have to do border, they're all separate. So you have to do borderBottom. Actually, just do borderColor, I think. Pink, and borderWidth. Yeah, got a little border here, yeah. So you have to write them out separately. The other thing to note is that all positioning in Native applications is done using Flexbox.
[00:05:21] So if you've never used Flex, or you've heard of it and not really gotten into it, this is the time because there is no other way. If you want to, you can use this cute little app, it's called Flexbox Froggy, and this is what I used to get started.
[00:05:35] It's basically a little tool that lets you put a little frog in the lower leaves, and it kind of introduces you the concept of Flex. And all the elements in React Native have display: Flex on by default. So on the web, if you want to use Flex, you have to do display: Flex, but here everything is display: Flex.
[00:05:58] So if you've never really worked with Flex, the main thing to remember is, whereas normally on the web, the element that you style is positioning itself. With Flex you apply styles to the containing element, and then the containing element positions the children inside. One thing we might wanna do is we might want to just position this text at the center of the screen, that would be quite handy.
[00:06:26] Select these, so let's do, we already have display: Flex. So let's do alignItems: center. Cool, so now we've centered text horizontally, that was pretty easy. Now, in order to center text vertically, we use justifyContent. But you notice that this doesn't work. The reason that this doesn't work is because, it centers the content inside the current element, we can see the current element is exactly the same height as the content.
[00:07:08] So in order to do that, we need to make the containing element the full width of the screen. So it was pointed out that the text is not very visible, so let's make the background pink instead, so you can see the text, that's better. Right, so we want to be able to center this content this way, horizontally.
[00:07:31] And we want to make our content full width of the screen. And the way we basically do this is we use flex: 1. And this basically means that, making this content, the same height as the content that is its parent. And that actually makes the text disappear, you're ever going what's going on.
[00:07:48] But let's look at our component tree. Well, notice that we have this safeAreaView that is containing our component, and this doesn't have any properties. So all we'll need to do is we need to give this a flex property as well. So now if this is flex: 1, so if you want to use flex: 1, you need to make sure that all the components, all the way up to the component tree, are using flex: 1 as well, otherwise it won't work.
[00:08:14] And the other thing you might notice that I've done is I've used a style property without actually using the StyleSheet. So those are thing you can do. It's not really recommended because StyleSheets optimizes the properties and kind of caches them. But sometimes you have to do this in order to have dynamic styles like colors, or dynamic width, or something.
[00:08:37] So I could also do safeArea, flex: 2, And this is equivalent. I did a thing that you can do is sometimes you might want to have multiple styles, you might have shared styles in your StyleSheets that you might want to apply both of them but I can not combine into one.
[00:09:09] There's actually a built in way to do this, instead of passing in a single style, you can actually pass in an array of styles. So suppose that we wanted to have the background color style separately, I'm just going to create a style called pink. And then I'm gonna move this background color into here, and then we're going to convert this style prop into an array.
[00:09:35] And the first element of the array is the container, and then the second one is pink. Another birth kind of stuff, get applied. Another thing to note is that these will cascade, hopefully. So that if the container had for example, red, and this had pink, then the pink will override the red, this is similar to the web.
[00:10:01] Whereas, I think, if I had them the other way around, Yeah, if I happen to did it around, it will be a very jarring red. And just as a side note, some of you might have used style components before. And style components actually have a React Native compatible module.
[00:10:24] So if you want to write your Native styles exactly the same as you write your style components, like web front end, you can actually do it. They work exactly the same, the only difference is that here you have a StyledDiv, and here we have a StyledView. And you can use snake case like styles as well, so they'll look like the web ones.
[00:10:47] Yeah, for this workshop, we'll be using just a plain built in styles, but just to know that this is something that you can do. So, just a quick recap, with and you need to use StyleSheet.create for all the styles. All the styles are pretty much what you would expect on the web.
[00:11:05] And if you're not sure, you can try them and a lot of the time, they'll work. The difference is that you don't use units. So all the things that you would have normally as pixel values, you will have just number values. For the colors, you can use all the web colors that are available, that are named, and you can also use hex colors, RGB, or RGBA.
[00:11:33] All the positioning is done using Flex, so you will have to use Flex for positioning, if you want to center anything, if you want to put anything in a row. And you can pass in styles directly without using a StyleSheet if need be, but you should avoid it when possible.
[00:11:53] And finally, you can have multiple styles in one component by passing in an array instead of an individual style.