React Native flexDirection Row Column Explained iOS Android example

flexDirection style is used to set Primary Axis of layout. It would automatically determines and set all the children of Root view(On which you have applied the flexDirection) in Horizontally(Row Format) and Vertically(Column Format). The default value of flexDirection is column. If we do not apply the flexDirection on our view then it will automatically sets the children into Column format.

How to Apply flexDirection on View using Style :

I am using the inline CSS for add flexDirection in this tutorial. Below is the prototype of using it. You need to pass its property in single colon, like i did in below example.

There are 4 type of properties of flexDirection:

1. Row
2. Column
3. Row-reverse
4. Column-reverse

What we are doing in this project: We would discuses each property of flexDirection individually using a example. We are create 3 box views inside the Root View with multiple colors. After that we would apply flexDirection each property on it.

1. Row : The flexDirection: ‘row’ converts the child views into Horizontal format and put them one by one after each other. See the below screenshot :

Code for Above Screenshot with flexDirection: ‘row’ :

2. Column : The The flexDirection: ‘column’ converts the child views into Vertical format.

Code for Above Screenshot with flexDirection: ‘column’ :

3. Row-reverse: The flexDirection: ‘row-reverse’ converts the child views in reverse Horizontal order format and put them one by one after each other. It will also push the Views to right side of screen.

Code for Above Screenshot with flexDirection: ‘row-reverse’ :

4. Column-reverse : The The flexDirection: ‘column-reverse’ converts the child views into reverse Vertical format and all the views will start from left bottom to top side.

Code for Above Screenshot with flexDirection: ‘column-reverse’ :

Complete source code for App.js File :