Learn

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 column. 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.

  • row renders child elements from left to right, or horizontally.
  • row-reverse renders child elements from right to left, or reversed horizontally.
  • column renders child elements from top to bottom, or vertical.
  • column-reverse renders child elements from bottom to top, or reversed vertically.

Instructions

1.

Let’s reuse our previous exercise with the red, green, and blue boxes. By default the content is rendered in the vertical (column) direction. We can validate that by setting this explicitly.

Add the flexDirection property on the layout and set it to column.

2.

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.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?