Layout React Native Components with Flexbox
React Native uses Flexbox to layout most components, which makes it easy to run your app on devices of many different screen sizes. We’ll learn the basics of Flexbox in React Native, and how to use it to build a flexible screen layout. We’ll also look at some differences between flexbox on the web and on mobile.
Instructor: [00:00] We have a couple of restaurants being displayed. Let's extract that data to a variable where we'll have an array of restaurants that each have a name and an address. We can map over those restaurants and display an entry for each. This is the same process as React on the Web, just with views instead of divs and text components instead of paragraph tags.
[00:33] Let's also display a number next to each restaurant in the list to make a numbered list. Input an info label, which later can become a button to bring up more info. Now when we reload the app, we can see all the restaurants there, but the formatting isn't great.
[00:48] Let's put the numbers on the left of each row, the info button on the right, and the restaurant name and address stacked in the middle. To do that, we'll lay out the text components with Flexbox. If we put a bright background color on the topmost view, we can see it doesn't actually take up the entire screen.
[01:08] Let's first tell it to fill the entire space. We can do that by flexing that view and setting a flex style of 1. Now the parent view is taking up the entire screen. This is different than on the Web where you have to set display to flex. Instead, we just set the flex style.
[01:26] On the Web, the default flex direction is a row. In React Native, the default flex direction is column, which is why the text components are stacked vertically. Because of that, we don't actually want to flex each row because then the rows would grow to fill the available space in the vertical direction.
[01:44] Instead, we want to tell each row to align its text views in a row. We do that by setting the flex direction style. Now the rows are stacked vertically because our outer parent container still has the default of column, but each row is individually set to the row flex direction so all its content is aligned horizontally.
[02:06] We can continue like this until everything is aligned just the way we want it. If we want the address stacked under the name, first, we need to wrap those two components in a view. Then we can tell that view to be flexed as a column. Now when we reload that, we have all the rows stacked in a column, each row individually flexed as a row, and the inner name and address flexed as a column.
[02:34] We want the restaurant name and address to take up most of the space in the row. We can tell the view that wraps the name and address to flex 1. Since the number and info button aren't flexed at all, the name and address will take up all the space it can and move the other text components to the left and the right edges.
[02:52] If we don't like that the left and right views get that small, we can start by flexing those as well. Now the name, number, and infoboxes all try to take up an equal amount of space or one-third of the row each. We can adjust that, however, because the flex style attribute can take any number.
[03:09] If we increase the flex number of the name and address view to 8, then that view will try to take up 8 times more space than the number and info text components. Now the width of each cell looks better, but the number and info labels are in the upper left corners of the cell they are in.
[03:24] Just like on the Web, we can adjust that with align items and justify content. If we set these both to center, you'll see that it doesn't work for text components. In this case, that's because we need to wrap the text components in a view and apply the styles to the view instead. The view component can apply all the Flexbox styles appropriately and centers the text components in those views.