Join Samer Buna for an in-depth discussion in this video Styling React Native components, part of React Native Essential Training.
- [Instructor] Let's talk briefly about using CSS in react-native. It's a bit different than what we're used to on the web. While react does not have any restrictions on how to use CSS, react-native enforces a standardized approach to styling. Not only that, you can't use all CSS properties in react-native project. You can use only the subset that's supported by react-native, which relies mostly on Flexbox for layout, and focus on simplicity overall. When we write CSS for a web project, we have to deal with how CSS support varies among different browsers.
So I'm going to go ahead and remove that, and I'll just add the backgroundColor in here, just like that, make sure that is working. So we've got styles.container, styles.welcome, so the instructions are not used here, so we can delete that, and let's take a look at some of these styles, most importantly this flex thing here. So to do some more visibility into the styles, let's give the container a different backgroundColor, let's go with orange.
So as you can see, the container filled the whole layout and than our text is just in the middle using the flex layout. So I'm going to comment out a few styles, and show you what those styles are actually doing. In fact, we can simplify this textAlign here is not needed right now. So first of all, these three properties are part of the flex layout. If we comment those out, the container is going to go back to just its default area, which is the top of the layout, and it's a view that takes the whole width of the layout, and you'll see that our text is right there, and you'll see the margin here.
So if we killed the margin, the text will actually go all over the container. So they have the same height and the same width. So by adding flex: 1, just flex: 1, the default direction is column, so when I say flex: 1, I mean extend the container to the all available space in the layout. So regardless of the device screen size, it will just fill the vertical layout. However, the content is still not changed.
The container only filled the whole layout. So when we do justify content center, that means justify any content inside the container, right on the center of how the container is being extended, which is vertical. So this will take the text and put it right on the center, and by the way, if we have more than just one text, so let's go ahead and do two texts here, and have them both with the same styles.welcome, which is basically just the font size and the backgroundColor at this point.
So let's have one, two, in fact let's actually have three, and just take a look at how that works with the container layout. All the content is justified right on the center. So there are a few values here we can do with justified content. We can do justify flex-start, and that's the default if you don't have anything. This will put the content right at the beginning. Flex-end, will put content right at the end.
There is spaces-between, it's actually space-between, which is going to justify the content with as much spaces between them as possible. There's also space-around, and that justifies the content by putting equal spaces around them. Now the content itself, the text elements, are all aligned left by default. So if we change the alignItems property in the flex, they will get aligned center, and I can also align them left and right.
So there is a lot of flexibility in positioning things around using this flex layout, and it's a lot more flexible than that. You can, for example, change the flex direction to be row instead of column, and if you do that, you'll notice how the content are now aligned in a row direction instead of a column direction, and all the other justified content alignItems values are going to be flipped in terms of what they do. So the justifyContent is going to justify it horizontally now, and the alignItems is going to align it vertically now.
So let's go back to the default, which is column. We can also use flex values on the children, to make them take different sizes of the screen. I'm going to comment out the align center one more time, and have these texts take the whole width, and I'm going to go ahead and add another style to these elements, and in there, I'll specify flex: 1. So now all of them has the same value, and you'll notice right away how all of them are now taking exact sizes of the screen.
Let me go ahead and put back the margin, so that we can see them. So we've got three text areas that all take one-third of the screen, and the reason their taking one-third of the screen is that because all of their flex values are the same. Let's for example say that the first one is going to take 2, while the other ones are going to take 1, and 1. This means the first one is going to be as high as both the second one and the third one. So basically, the first one is going to take half the screen, and the second one and the third one will take one-quarter of the screen.
So you can cotnrol these and their flex values to give any height that you want to any element on the screen, and there is no limit to that. I can, for example, say this is 5, this is 4, and this is 1. So you see how it sums up all these numbers and then give every element the portion that it requested. I highly recommend that you play this Flexbox Froggy game to learn about Flexbox. This game will teach Flexbox in a very fun way, and it's teaching the web model and the react-native model is slightly different, but I think this game covers the basics that are shared between all of 'em.
It's a fun game to play, and I think you're going to like it.
- Hello React Native on iOS and Android
- Styling React Native components
- Platform APIs
- Building a simple game app and a data-driven app
- Using the Fetch API
- Creating an animation loop
- Testing on Android
- Changing an app logo and a splash screen
- Using TestFlight with internal testers