Using flexbox has other benefits besides giving you full control over how the available space is distributed – we can also control the direction of the children elements within the flexbox. The default direction of the flexbox in Expo and React Native is different compared to web: it’s set vertically.
There are two directions in which we can render the child elements - horizontally
row or vertically
The terminology is related to tables – when rendering in the
row direction, we are rendering it horizontally.
Besides these two directions, we can also render it in the reversed direction.
rowrenders child elements from left to right, or horizontally.
row-reverserenders child elements from right to left, or reversed horizontally.
columnrenders child elements from top to bottom, or vertical.
column-reverserenders child elements from bottom to top, or reversed vertically.
Let’s reuse our previous exercise with the red, green, and blue boxes.
By default the content is rendered in the vertical (
We can validate that by setting this explicitly.
flexDirection property on the layout and set it to
Nice! As you can see, our boxes are rendered in the same order. Making sure your layout is vertically responsive is good, but not always required. If you have a lot of content, your app should be vertically scrollable.
Luckily we can also align the content horizontally. This is great for aligning buttons or specific item actions for example.
Change the direction to one of the horizontal directions, normal or reversed.