react native flex direction

Question

Generally in the excel sheet..we have rows like below

Row1
Row2
Row3

and columns like

column1  | column2 | column3

But why in react native when using flexDirection: 'column' the box's/text are defined as

flexcolumn1
flexcolumn2
flexcolumn3

and when using flexDirection: 'row' the box's/text are defined as

flexrow1  | flexrow2 | flexrow3

i find this weird and getting confused... is this just standard difference in react native or there is different concept behind this ?

Answer 1

I think you're correct to point out that rows are stacked on top of one another:

Row 1
Row 2
Row 3

And that columns are set side by side:

Column 1 | Column 2 | Column 3

The thing to understand here is what flexDirection means. We set it on a container. If we set it to row, we're not saying that each child of the container is it's own row. If we were you'd be right to say that things should be laid out like this:

Row 1
Row 2
Row 3

We're saying that the container itself is going to be a row, and children within the container are going to be elements in the row:

Row 1 Item 1 | Row 1 Item 2 | Row 1 Item 3

Here's how the docs word it:

flexDirection controls the direction in which the children of a node are laid out. This is also referred to as the main axis.

It doesn't say that it sets whether the children of a node are rows/columns themselves, it's saying what direction that they will flow. Maybe horizontal and vertical would have been better names.

Answer 2

I think it is meant like this:

column1_cell1
column1_cell2
column1_cell3

row1_cell1, row1_cell2, row1_cell3

In the first example all the "flex cells" are in one column, in the other they are all in one row.