2.2 Stylesheets and Flexbox

Hi, welcome back to Get Started with React Native. In this lesson, I'm going to introduce you to Stylesheets to start the progress of making our app look good. If you'd ask me to describe React Native Stylesheets in one sentence, I would probably say, this like CSS but it isn't. I know that doesn't make any sense at all, but let me phrase it differently. Stylesheets in React Native have a lot of similarities to CSS, except that the syntax is limited and written differently. For instance, you use camel-casing instead of diverse attribute names. backgroundColor instead of background-color. Let's have a look on how to use styles and stylesheets. One of the props a component usually accepts is the style prop. You can use simple inline styles by using double curly braces to invite your style attributes into the render call. Like setting the width and height of an image. This is the easiest method of defining a style, but it can get messy very fast if you have more complex tasks. Another way is to use a stylesheet. You can import it from the React Native package. To use it, you will have to set a variable or a constant to be a styleSheet object that you need to create. The create function takes a hash that defines style names on the top level and attributes on the second. You can't have more hierarchy than that. Using the style for a component is easy as well. Just use single curly braces like with the props and reference the style like styles.bigText. Not all components accept the same style attributes. You will need to look at the documentation of each component to find out which attributes they support. This can be different per platform as well since React Native, as the name says, will convert your code into native UI elements. To have a consistent style throughout the app, it makes sense to define a shared stylesheet that you can import. This makes it easier to mix and match multiple styles together. Which is also possible with React Native. You will parse them in as an array. It is important to know that the later the style is in a list, the more precedence it takes. In the example we have a text component of the styles bigText, smallBlueText, and orangeText. The text is small but orange. Since this is what gets resolved from the order in the list. Now that you know how styles work, I need to talk about layout. You have probably heard of Flexbox in CSS and it's awesome. What's even better is that we can use Flexbox in the same way as we would with CSS. That is, with two exceptions. In React Native, flexDirection defaults to column instead of row. And you can only use a single number in a flex attribute. If you don't know about Flexbox, here is a quick primer. Flexbox is a system to layout elements within other elements. It has two axes, a primary axis that gets defined by flex direction, and the other one is called secondary axis. Elements get laid out along the primary axis. If you have three boxes, they will get added below each other. The second important concept is distribution. On the primary axis, you use justifyContent for that. There are a few options, here is the list. flex-start, center, flex-end, space-around, and space-between. They do exactly what they say. flex-start aligns your items from the start, space-between puts equal space between your items. The alignment on the second axis is done with the line items. The alignment is more limited here. You can use flex-start, center, flex-end, or stretch. Okay, but what if you want to resize your items on the primary axis? That's where the flex attribute comes into play. It defines how you want to resize your elements. If you put flex one, or at least the same number in each style prop, they are going to be sized the same. If you use one, two, and three, they act as multipliers. The second box is twice as big as the first one, and the third, three times. Before we put it to use in our app, there is one last thing you need to know about styles. All dimensions in React Native are unitless. This is to account for different pixel densities on different devices. Okay, we're good to go. Before we begin, I'm going to enable live reloading. So whenever a file saved, the app gets reloaded. Let's actually start by doing the FlexBox layout, before we apply any styles. I'm going to create a constant called styles, where we define the local styleSheet, with StyleSheet.create. Of course, this clause has to be imported first. Let's have a look at what styles we need. The wrapping view will have an inline style of flex: 1, so it stretches over the whole screen. The same happens with the fake MAPVIEW. Now we create a style called infoWrapper. Our three properties should lay over this MAPVIEW, and be see through. You can do that by using position: 'absolute' and left, bottom, and right set to 0. I also need to set the flexDirection of the wrapper to row, and add a flex value of 1. I will be adding a semitransparent background to the RunInfo component in a minute. So to show it better until we have an actual map, I'm going to add a red background to the fake component. Each of the subcomponents need styling but I won't do that in the index file. Since it won't work without any additional code in the component anyways. Custom components don't accept and apply styles automatically. To show you how shared styles work, I'm going to create a new file called shared-styles.js in the root folder of the project. And we'll just import the stylesheet class and export the result of StyleSheet.create. Here I can define my styles that can be imported in all other components. Since the file is up a level in the hierarchy, I need to use two dots to import it. And now we can use the shared styles in the RunInfo component. If you want to add a single inline style and one from the stylesheet, you can do that as well. Here I'm using a not yet created runInfoWrapper style and deflects one within an array. The title and radio receive a shared style as well. Let's get styling. As I said before, the background should be semi-transparent. It might make more sense to add it to the wrapping view, but since the info components get stretched anyways, you won't see a gap. I can use the RGBA syntax here and set a 75% wide on the wrapper. I also want a vertical padding of 15, so the text has some room to breathe. Next is the title. We are going to center align the text and give it some weight. I also want to make it gray. Looks good. The value is also going to be center aligned. You can't inherit properties from wrapping containers, so putting it into the wrapper style doesn't work. A normal view also doesn't have the text align property and will throw an error. Let's make the font big but thin. A font size of 24 and a weight of 200 should be fine. You might have noticed I have to parse the weight as strength. React Native is very strict when it come to this. But the app will tell you immediately what it expects when you screw up. Finally, I want to add an additional vertical padding to the value. Okay, it doesn't look as bad anymore. But let me add two more changes. First, I want to swap the order of the title and value. I can do that by swapping the two components or by using flexDirection column-reverse. The second edit is to use an upper case title. I can't do that with stylesheets but I can just use JavaScript for that. By adding toUpperCase directly in the render function. It looks amazing. To recap, styles in React Native are a limited version of CSS. You can use the StyleSheet clause and the create function on it to define a styleSheet. You can mix and match multiple styles, but the latest styles override the previous ones. Layouting is done by using Flexbox, which works exactly as in CSS, but the direction defaults to column. There are no units in React Native. The values are independent from the actual pixel density, and get converted. Now that we have a good looking static app, we have to make it more dynamic. To account for changing data in React Native, we are going to talk about state in the next lesson. See you there.